hotline-bs/src/views/seats/left-bottom.vue

<template>
  <div class="left_bottom_wrap">
    <div class="left_number">
      <div>
        <span>登录坐席数量：</span>
        <CountUp :endVal="loginCount" />
      </div>
      <div>
        <span>呼入接通数量：</span>
        <CountUp :endVal="state.count.inOn" />
      </div>
      <div>
        <span>有效接通数量：</span>
        <CountUp :endVal="state.count.validOn" />
      </div>
      <div>
        <span>未接通数量：</span>
        <CountUp :endVal="state.count.inNoOn" />
      </div>
      <div>
        <span>呼出接通数量：</span>
        <CountUp :endVal="state.count.outOn" />
      </div>
      <div>
        <span>队列挂断数量：</span>
        <CountUp :endVal="state.count.inQueueNoOn" />
      </div>
    </div>
    <div class="right_chart">
      <v-chart class="chart" :option="option" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, computed, onUnmounted, watch } from "vue";
import CountUp from "@/components/count-up";
import signalR from "@/utils/signalR";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  content: {
    type: Object,
    default: () => {},
  },
});
const option = ref({});
const state = reactive<any>({
  count: {
    inNoOn: 0,
    inOn: 0,
    inQueueNoOn: 0,
    outOn: 0,
    validOn: 0,
  },
});
const setOption = async (newData: any) => {
  option.value = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    legend: {
      data: ["呼入", "外呼", "外呼平均", "呼入平均"],
      textStyle: {
        color: "#fff",
      },
      top: "0",
      left: "80px",
      icon: "roundRect",
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 20,
    },
    grid: {
      left: "50px",
      right: "10px",
      bottom: "30px",
      top: "30px",
    },
    xAxis: {
      data: newData.xData,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisLabel: {
          formatter: "{value}% ",
        },
      },
    ],
    series: [
      {
        name: "呼入",
        type: "line",
        symbol: "circle", //数据交叉点样式
        areaStyle: {
          //添加背景颜色
          opacity: 0.3, //透明度
        },
        itemStyle: {
          borderRadius: 5,
        },
        smooth: true,
        data: newData.inData,
      },
      {
        name: "外呼",
        type: "line",
        symbol: "circle", //数据交叉点样式
        areaStyle: {
          //添加背景颜色
          opacity: 0.3, //透明度
        },
        itemStyle: {
          borderRadius: 5,
        },
        smooth: true,
        z: -12,
        data: newData.outData,
      },
      {
        name: "呼入平均",
        type: "line",
        symbol: "circle", //数据交叉点样式
        areaStyle: {
          //添加背景颜色
          opacity: 0.3, //透明度
        },
        itemStyle: {
          borderRadius: 5,
        },
        smooth: true,
        z: -12,
        data: newData.inAverageData,
      },
      {
        name: "外呼平均",
        type: "line",
        symbol: "circle", //数据交叉点样式
        areaStyle: {
          //添加背景颜色
          opacity: 0.3, //透明度
        },
        itemStyle: {
          borderRadius: 5,
        },
        smooth: true,
        z: -12,
        data: newData.outAverageData,
      },
    ],
  };
};
const seatsList = ref<any>([]);
// 登录坐席数量
const loginCount = computed(() => {
  return seatsList.value.filter((item: any) => item.state !== "logout").length;
});
watch(
  () => props.content,
  (val: any) => {
    state.count = val.count[0];
    let data = {
      xData: [],
      inData: [],
      outData: [],
      inAverageData: [],
      outAverageData: [],
    };
    val.list.forEach((item: any) => {
      data.xData.push(item.time);
      data.inData.push(item.in);
      data.outData.push(item.out);
      data.inAverageData.push(item.inAverag);
      data.outAverageData.push(item.outAverag);
    });
    setTimeout(() => {
      setOption(data);
    }, 100);
  }
);
watch(
  () => props.data,
  (newData: any) => {
    seatsList.value = newData;
  },
  { immediate: true }
);
onMounted(() => {
  signalR.SR.on("SeatState", (res: any) => {
    const item = seatsList.value.find((item: any) => item.telNo === res.telNo);
    if (item) {
      item.state = res.state;
    }
  });
  signalR.SR.on("BsSeatStateDataShowArea3", (res: any) => {
    state.count = res[0];
  });
  signalR.SR.on("BsSeatStateDataShowArea4", (res: any) => {
    let data = {
      xData: [],
      inData: [],
      outData: [],
      inAverageData: [],
      outAverageData: [],
    };
    res.forEach((item: any) => {
      data.xData.push(item.time);
      data.inData.push(item.in);
      data.outData.push(item.out);
      data.inAverageData.push(item.inAverag);
      data.outAverageData.push(item.outAverag);
    });
    setTimeout(() => {
      setOption(data);
    }, 100);
  });
});
onUnmounted(() => {
  signalR.SR.off("SeatState");
  signalR.SR.off("BsSeatStateDataShowArea3");
  signalR.SR.off("BsSeatStateDataShowArea4");
});
</script>
<style scoped lang="scss">
.left_bottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  font-size: var(--el-font-size-base);

  .left_number {
    margin: 20px 0;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 130px;

    div {
      display: flex;
      justify-content: space-between;
    }
  }

  .right_chart {
    flex: 1;
    height: 100%;
  }
}
</style>