intc-iot-screen/src/views/components/module/WorkOrderOverview.vue

<template>
  <div class="overview-wrapper">
    <div class="summary">
      <div class="top">
        <div class="title">今日工单总量</div>
        <div class="num">{{ countObj.day }}</div>
      </div>
      <div class="bottom">
        <div class="item">
          <div class="title">本月工单总量</div>
          <div class="num">{{ countObj.month }}</div>
        </div>
        <div class="item">
          <div class="title">年度工单总量</div>
          <div class="num">{{ countObj.year }}</div>
        </div>
      </div>
    </div>
    <div class="center-con">
      <div class="left">
        <div class="img"></div>
        <!-- <div class="title">未处理工单数</div> -->
      </div>
      <div class="right">
        <div
          v-for="item in timeList"
          :key="item.id"
          class="item"
          :class="item.active ? 'active' : ''"
          @click.stop="handleDateClick(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="charts-con">
      <div class="charts-left">
        <div :id="id" class="overview-chart"></div>
      </div>
      <div class="right-content">
        <div class="item" v-for="item in statusList" :key="item.id">
          <div class="left">
            <div class="name">{{ item.name }}</div>
            <div class="img"></div>
          </div>
          <div class="num">{{ item.num }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { lightRepairCount, lightRepairStatus } from "@/api/largeScreen";

const props = defineProps(["theme", "p", "buildingId"]);

const id = ref("");
id.value = "overview-chart-" + props.p;

const countObj = ref({});

const timeList = ref([
  { id: "1", name: "日", active: true },
  { id: "3", name: "月", active: false },
  { id: "5", name: "年", active: false },
]);

const statusList = ref([
  { id: "processing", name: "正在处理", num: 0 },
  { id: "untreated", name: "未处理", num: 0 },
  { id: "timeout", name: "已完成", num: 0 },
]);

const handleDateClick = (item) => {
  timeList.value.map((i) => {
    i.active = false;
  });
  item.active = true;
  getState(item.id);
};

const drawChart = (colorList, textColor, name, total, series) => {
  var myChart = echarts.init(document.getElementById(id.value));

  const color = colorList;

  let option = {
    fontSize: 16,
    title: [
      {
        text: total,
        x: "center",
        top: "35%",
        textStyle: {
          fontSize: 18,
          color: "#fff",
          fontFamily: "UTM",
        },
      },
      {
        text: name,
        x: "center",
        top: "55%",
        textStyle: {
          color: textColor,
          fontSize: 14,
          fontFamily: "AlibabaPuHuiTi_2_55_Regular",
        },
      },
    ],
    tooltip: {
      trigger: "item",
      textStyle: {
        color: "#fff",
      },
      backgroundColor: "rgba(16, 32, 40, 0.88)",
      borderRadius: 4,
      borderColor: "#20749e",
      // position: ["50%", "50%"], 位置
      formatter: (params) => {
        return params.marker + params.name + ": " + params.value;
      },
    },
    series: [
      {
        type: "pie",
        hoverAnimation: true,
        color: color,
        center: ["50%", "50%"],
        radius: ["60%", "70%"],
        startAngle: 90,
        avoidLabelOverlap: false,
        label: null,
        emphasis: null,
        labelLine: null,
        data: series,
      },
    ],
  };

  myChart.setOption(option);
};

const getState = (type) => {
  let colorList = ["#00B362", "#E18C28", "#F86838"];
  let textColor = "#D9D9D9";

  if (props.theme === "blue") {
    colorList = ["#73C2FF", "#E1B528", "#F86838"];
    textColor = "#CEEBFF";
  }

  lightRepairStatus({ type: type, buildingIds: props.buildingId }).then(
    (res) => {
      const { assign, completion, noAssign, total } = res.data;

      statusList.value[0].num = assign;
      statusList.value[1].num = noAssign;
      statusList.value[2].num = completion;

      drawChart(colorList, textColor, "总数", total, [
        { name: "正在处理", value: assign },
        { name: "未处理", value: noAssign },
        { name: "已超时", value: completion },
      ]);
    }
  );
};

onMounted(() => {
  lightRepairCount({ buildingIds: props.buildingId }).then((res) => {
    countObj.value = res.data;
  });

  getState("1");
});
</script>

<style lang="scss" scoped>
</style>