1.设备监控组件。

src/styles/index.scss

@@ -47,7 +47,7 @@
 .screen-window {
   width: 100%;
   height: 100%;
-  //background-image: url("@/assets/images/screenBG1.png");
+  background-image: url("@/assets/images/screenBG1.png");
   background-size: cover;
   background-position: center;
 
@@ -106,6 +106,15 @@
 .screen-common-component {
   width: 100%;
   height: 100%;
-  display: flex;
-  background-color: #00a680;
+  //background-color: #00a680;
+}
+
+.screen-common-component-header {
+  line-height: 30px;
+}
+
+.charts-container {
+  width: 100%;
+  height: calc(100% - 30px);
+  //background-color: yellow;
 }

src/views/screens/configs/chartsConfig.ts

@@ -1,4 +1,4 @@
-export const allColors = [
+export const allChartColors = [
   "#FF6384",
   "#36A2EB",
   "#FFCE56",

src/views/screens/configs/screenComHeader.vue

@@ -1,8 +1,6 @@
 <template>
-  <div class="screen-common-component">
-    <div class="screen-common-component-header" @dblclick="selectComponents">
-      {{ title }}
-    </div>
+  <div class="screen-common-component-header" @dblclick="selectComponents">
+    {{ title }}
   </div>
 </template>
 
@@ -43,7 +41,6 @@ const selectComponents = () => {
   justify-content: center;
   align-items: v-bind(align);
   font-size: v-bind(titleSize);
-  height: 30px;
   color: #fff;
 }
 </style>

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

@@ -1,14 +1,14 @@
 <template>
   <div class="screen-common-component">
     <ScreenComHeader :module-id="moduleId" title="设备监控" />
+    <div ref="chartRef" class="charts-container"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useCommonStore } from "@/store";
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
-
-const commonS = useCommonStore();
+import * as echarts from "echarts";
+import { allChartColors } from "@/views/screens/configs/chartsConfig";
 
 const props = defineProps({
   moduleId: {
@@ -17,10 +17,48 @@ const props = defineProps({
   },
 });
 
-const selectComponents = () => {
-  commonS.moduleKey = props.moduleId;
-  commonS.isShowSelectModule = true;
+const chartRef = ref(null);
+
+const options = {
+  color: allChartColors,
+  tooltip: {
+    trigger: "item",
+  },
+  legend: {
+    top: "5%",
+    left: "center",
+    textStyle: {
+      color: "#fff",
+    },
+  },
+  series: [
+    {
+      name: "设备监控",
+      type: "pie",
+      radius: ["40%", "70%"],
+      avoidLabelOverlap: false,
+      label: {
+        show: true,
+        position: "center",
+        color: "#fff",
+        formatter: function () {
+          return "设备总数：1000";
+        },
+      },
+      data: [
+        { value: 1048, name: "运行" },
+        { value: 735, name: "空闲" },
+        { value: 580, name: "维护" },
+        { value: 484, name: "维修" },
+      ],
+    },
+  ],
 };
+
+onMounted(() => {
+  const chart = echarts.init(chartRef.value);
+  chart.setOption(options);
+});
 </script>
 
 <style lang="scss" scoped></style>