代码初始化

src/views/components/module/WorkOrderOverview.vue

@@ -0,0 +1,184 @@
+<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>