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

<template>
  <v-chart class="chart" :option="option" />
</template>
<script setup lang="ts">
import { onMounted, ref, onUnmounted, watch } from "vue";
import signalR from "@/utils/signalR";

const props = defineProps({
  content: {
    type: Array,
    default: () => [],
  },
});
const option = ref({});
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",
    },
    grid: {
      left: "40px",
      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,
      },
    ],
  };
};
watch(
  () => props.content,
  (val: any) => {
    let data = {
      xData: [],
      inData: [],
      outData: [],
    };
    val.forEach((item: any) => {
      data.xData.push(item.time);
      data.inData.push(item.in);
      data.outData.push(item.out);
    });
    setTimeout(() => {
      setOption(data);
    }, 100);
  }
);
onMounted(() => {
  signalR.SR.on("BsSeatStateDataShowArea1", (res: any) => {
    let data = {
      xData: [],
      inData: [],
      outData: [],
    };
    res.forEach((item: any) => {
      data.xData.push(item.time);
      data.inData.push(item.in);
      data.outData.push(item.out);
    });
    setTimeout(() => {
      setOption(data);
    }, 100);
  });
});
onUnmounted(() => {
  signalR.SR.off("BsSeatStateDataShowArea1");
});
</script>
<style scoped lang="scss">
.left-top {
  width: 100%;
  height: 100%;
}
</style>