设备监控看板接口。

src/views/screens/deviceScreen.vue

@@ -6,13 +6,13 @@
         <dv-border-box-10 class="zhleft">
           <div class="screen-common-component" style="padding: 27px">
             <div class="screen-common-component">
-              <DeviceStatus module-id="dd" />
+              <DeviceStatus :device-data="data" module-id="dd" />
             </div>
           </div>
         </dv-border-box-10>
         <div class="spsace"></div>
         <div class="zhright">
-          <WorkshopList />
+          <WorkshopList :device-data="data?.devices ?? {}" />
         </div>
       </div>
     </dv-full-screen-container>
@@ -27,6 +27,7 @@ import { useCommonStore } from "@/store";
 import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
 import DeviceStatus from "@/views/screens/screen-components/DeviceStatus.vue";
 import WorkshopList from "@/views/screens/screen-components/WorkshopList.vue";
+import { deviceMonitor } from "@/api/screens";
 
 const commonS = useCommonStore();
 
@@ -34,7 +35,12 @@ const mainSL001 = computed(() => {
   return getComponetnByName(commonS.mainSL001);
 });
 
-onMounted(() => {});
+const data = ref<any>(null);
+
+onMounted(async () => {
+  let result: any = await deviceMonitor();
+  data.value = result.data;
+});
 </script>
 
 <style lang="scss" scoped>

src/views/screens/screen-components/DeviceStatus.vue

@@ -17,9 +17,9 @@
           <div :style="{ color: colors[index] }" class="count">
             {{ item.count }}台
           </div>
-          <div :style="{ color: colors[index] }" class="count">
-            {{ item.count }}%
-          </div>
+          <!--          <div :style="{ color: colors[index] }" class="count">-->
+          <!--            {{ item.count }}%-->
+          <!--          </div>-->
         </el-row>
       </div>
       <div ref="chartRef" style="width: 100%; height: 600px"></div>
@@ -33,81 +33,98 @@ import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
 
 const chartRef = ref(null);
-onMounted(() => {
-  const chart = echarts.init(chartRef.value, "dark");
-  chart.setOption(option);
-});
 
 const props = defineProps({
   moduleId: {
     type: String,
     required: true,
   },
+  deviceData: {
+    type: Object,
+    default: null,
+    required: true,
+  },
 });
 
+const data = ref<any[]>([]);
+
 const colors = ["#4caf50", "#ffc107", "#b61945", "#607d8b"];
 
-const data = ref<any[]>([
-  {
-    type: "运行",
-    count: 100,
-    percent: 20,
-  },
-  {
-    type: "待机",
-    count: 10,
-    percent: 10,
-  },
-  {
-    type: "故障",
-    count: 5,
-    percent: 5,
-  },
-  {
-    type: "离线",
-    count: 0,
-    percent: 0,
-  },
-]);
+let chart: any = null;
 
-const option = {
-  color: colors,
-  backgroundColor: "transparent",
-  tooltip: {
-    trigger: "item",
-  },
-  legend: {
-    bottom: "5%",
-    left: "center",
-  },
+watchEffect(() => {
+  if (!props.deviceData) {
+    return;
+  }
+  data.value = [
+    {
+      type: "运行",
+      count: props.deviceData.runNum,
+      percent: 20,
+    },
+    {
+      type: "离线",
+      count: props.deviceData.offLineNum,
+      percent: 0,
+    },
 
-  series: [
     {
-      name: "设备状态",
-      type: "pie",
-      radius: ["40%", "70%"],
-      avoidLabelOverlap: false,
-      padAngle: 5,
-      itemStyle: {
-        borderRadius: 10,
-      },
+      type: "故障",
+      count: props.deviceData.faultNum,
+      percent: 5,
+    },
+    {
+      type: "维修",
+      count: props.deviceData.repairNum,
+      percent: 10,
+    },
+  ];
 
-      labelLine: {
-        show: false,
-      },
-      label: {
-        show: false,
-        position: "inside",
-      },
-      data: [
-        { value: 1048, name: "运行" },
-        { value: 735, name: "待机" },
-        { value: 580, name: "故障" },
-        { value: 484, name: "离线" },
-      ],
+  const option = {
+    color: colors,
+    backgroundColor: "transparent",
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      bottom: "5%",
+      left: "center",
     },
-  ],
-};
+
+    series: [
+      {
+        name: "设备状态",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        padAngle: 5,
+        itemStyle: {
+          borderRadius: 10,
+        },
+
+        labelLine: {
+          show: false,
+        },
+        label: {
+          show: false,
+          position: "inside",
+        },
+        data: [
+          { value: props.deviceData.runNum, name: "运行" },
+          { value: props.deviceData.offLineNum, name: "离线" },
+          { value: props.deviceData.faultNum, name: "故障" },
+          { value: props.deviceData.repairNum, name: "维修" },
+        ],
+      },
+    ],
+  };
+
+  chart.setOption(option);
+});
+
+onMounted(async () => {
+  chart = echarts.init(chartRef.value, "dark");
+});
 </script>
 
 <style lang="scss" scoped>

src/views/screens/screen-components/EquipmentMonitoring.vue

@@ -16,10 +16,7 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
-import {
-  allChartColors,
-  chartLegend,
-} from "@/views/screens/configs/chartsConfig";
+import { chartLegend } from "@/views/screens/configs/chartsConfig";
 import { deviceMonitor } from "@/api/screens";
 
 const props = defineProps({
@@ -36,10 +33,8 @@ onMounted(async () => {
 
   let result: any = await deviceMonitor();
 
-  console.log(result.data);
-
   const options = {
-    color: allChartColors,
+    color: ["#4caf50", "#ffc107", "#b61945", "#607d8b"],
     tooltip: {
       trigger: "item",
     },

src/views/screens/screen-components/WorkshopList.vue

@@ -2,22 +2,22 @@
   <div class="ws-container">
     <el-scrollbar style="height: 100%; width: 100%">
       <dv-decoration-2 style="width: 90%; height: 5px" />
-      <div v-for="ws in data" :key="ws.wsName">
+      <div v-for="key in Object.keys(deviceData)" :key="key">
         <div class="ws-title">
-          {{ ws.wsName }}
+          {{ key }}
         </div>
         <div class="workshop-row">
-          <div v-for="device in ws.device" :key="device.id">
+          <div v-for="device in deviceData[key]" :key="device.id">
             <svg-icon
-              :color="getColorByStauts(device.status + '')"
+              :color="getColorByStauts(device.state + '')"
               icon-class="shebei"
               size="120"
             />
             <div
-              :style="{ color: getColorByStauts(device.status + '') }"
+              :style="{ color: getColorByStauts(device.state + '') }"
               class="chanliang"
             >
-              产量: {{ device.count }}
+              {{ device?.deviceName }}
             </div>
           </div>
         </div>
@@ -30,7 +30,15 @@
 <script lang="ts" setup>
 const colors = ["#4caf50", "#ffc107", "#b61945", "#607d8b"];
 
-const getColorByStauts = (status: string) => {
+const props = defineProps({
+  deviceData: {
+    type: Object,
+    required: true,
+  },
+});
+
+const getColorByStauts = (state: string) => {
+  let status = state === "0" ? "on" : "off";
   switch (status) {
     case "on":
       return colors[0];
@@ -44,245 +52,6 @@ const getColorByStauts = (status: string) => {
       return "#fff";
   }
 };
-
-const data = ref([
-  {
-    wsName: "1车间",
-    device: [
-      {
-        id: "ddddd",
-        name: "1车间-1",
-        status: "on",
-        count: 10,
-      },
-      {
-        id: "eeeee",
-        name: "1车间-2",
-        status: "off",
-        count: 10,
-      },
-      {
-        id: "ffffff",
-        name: "1车间-3",
-        status: "warning",
-        count: 10,
-      },
-      {
-        id: "ggggggg",
-        name: "1车间-4",
-        status: "error",
-        count: 10,
-      },
-    ],
-  },
-  {
-    wsName: "2车间",
-    device: [
-      {
-        id: "fffff",
-        name: "2车间-1",
-        status: "on",
-        count: 10,
-      },
-      {
-        id: "gggggg",
-        name: "2车间-2",
-        status: "off",
-        count: 10,
-      },
-      {
-        id: "hhhhhhh",
-        name: "2车间-3",
-        status: "warning",
-        count: 10,
-      },
-      {
-        id: "iiiiiiii",
-        name: "2车间-4",
-        status: "error",
-        count: 10,
-      },
-      {
-        id: "fffff",
-        name: "2车间-1",
-        status: "on",
-        count: 10,
-      },
-      {
-        id: "gggggg",
-        name: "2车间-2",
-        status: "off",
-        count: 10,
-      },
-      {
-        id: "hhhhhhh",
-        name: "2车间-3",
-        status: "warning",
-        count: 10,
-      },
-      {
-        id: "iiiiiiii",
-        name: "2车间-4",
-        status: "error",
-        count: 10,
-      },
-      {
-        id: "fffff",
-        name: "2车间-1",
-        status: "on",
-        count: 10,
-      },
-      {
-        id: "gggggg",
-        name: "2车间-2",
-        status: "off",
-        count: 10,
-      },
-      {
-        id: "hhhhhhh",
-        name: "2车间-3",
-        status: "warning",
-        count: 10,
-      },
-      {
-        id: "iiiiiiii",
-        name: "2车间-4",
-        status: "error",
-        count: 10,
-      },
-      {
-        id: "fffff",
-        name: "2车间-1",
-        status: "on",
-        count: 10,
-      },
-      {
-        id: "gggggg",
-        name: "2车间-2",
-        status: "off",
-        count: 10,
-      },
-      {
-        id: "hhhhhhh",
-        name: "2车间-3",
-        status: "warning",
-        count: 10,
-      },
-      {
-        id: "iiiiiiii",
-        name: "2车间-4",
-        status: "error",
-        count: 10,
-      },
-      {
-        id: "fffff",
-        name: "2车间-1",
-        status: "on",
-        count: 10,
-      },
-      {
-        id: "gggggg",
-        name: "2车间-2",
-        status: "off",
-        count: 10,
-      },
-      {
-        id: "hhhhhhh",
-        name: "2车间-3",
-        status: "warning",
-        count: 10,
-      },
-      {
-        id: "iiiiiiii",
-        name: "2车间-4",
-        status: "error",
-        count: 10,
-      },
-      {
-        id: "fffff",
-        name: "2车间-1",
-        status: "on",
-        count: 10,
-      },
-      {
-        id: "gggggg",
-        name: "2车间-2",
-        status: "off",
-        count: 10,
-      },
-      {
-        id: "hhhhhhh",
-        name: "2车间-3",
-        status: "warning",
-        count: 10,
-      },
-      {
-        id: "iiiiiiii",
-        name: "2车间-4",
-        status: "error",
-        count: 10,
-      },
-    ],
-  },
-  {
-    wsName: "3车间",
-    device: [
-      {
-        id: "jjjjjjj",
-        name: "3车间-1",
-        status: "on",
-        count: 10,
-      },
-      {
-        id: "kkkkkkk",
-        name: "3车间-2",
-        status: "off",
-        count: 10,
-      },
-      {
-        id: "llllllll",
-        name: "3车间-3",
-        status: "warning",
-        count: 10,
-      },
-      {
-        id: "mmmmmmmmm",
-        name: "3车间-4",
-        status: "error",
-        count: 10,
-      },
-    ],
-  },
-  {
-    wsName: "4车间",
-    device: [
-      {
-        id: "nnnnnnnn",
-        name: "4车间-1",
-        status: "on",
-        count: 10,
-      },
-      {
-        id: "ooooooo",
-        name: "4车间-2",
-        status: "off",
-        count: 10,
-      },
-      {
-        id: "pppppppp",
-        name: "4车间-3",
-        status: "warning",
-        count: 10,
-      },
-      {
-        id: "qqqqqqqqq",
-        name: "4车间-4",
-        status: "error",
-        count: 10,
-      },
-    ],
-  },
-]);
 </script>
 
 <style lang="scss" scoped>