设备监控看板页面。

src/router/index.ts

@@ -65,6 +65,12 @@ export const constantRoutes: RouteRecordRaw[] = [
     meta: { hidden: true },
   },
   {
+    path: "/deviceScreen",
+    component: () => import("@/views/screens/deviceScreen.vue"),
+    name: "deviceScreen",
+    meta: { hidden: true },
+  },
+  {
     path: "/users",
     component: () => import("@/views/sets/users.vue"),
     name: "users",

src/styles/index.scss

@@ -104,10 +104,11 @@
 }
 
 .screen-content {
-  width: 100%;
-  height: calc(100% - 80px);
+  width: calc(100% - 30px);
+  height: calc(100% - 90px);
   display: flex;
-  padding: 15px;
+  //padding: 0 15px;
+  margin-left: 15px;
   //border: 3px solid red;
 }
 

src/views/main/screenEntry.vue

@@ -25,7 +25,7 @@ const screenData = ref([
   { name: "综合监控大屏", routeName: "mainScreen" },
   { name: "质量综合大屏", routeName: "qualityScreen" },
   { name: "总装车间看板", routeName: "workScreen" },
-  { name: "综合大屏", routeName: "totalScreen" },
+  { name: "设备监控看板", routeName: "deviceScreen" },
   { name: "测试大屏", routeName: "totalScreen" },
 ]);
 

src/views/screens/deviceScreen.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="screen-window">
+    <dv-full-screen-container id="dv-full-screen">
+      <ScreenHeader title="设备监控看板" />
+      <div class="screen-content">
+        <dv-border-box-10 class="zhleft">
+          <div class="screen-common-component" style="padding: 27px">
+            <div class="screen-common-component">
+              <DeviceStatus module-id="dd" />
+            </div>
+          </div>
+        </dv-border-box-10>
+        <div class="spsace"></div>
+        <div class="zhright">
+          <WorkshopList />
+        </div>
+      </div>
+    </dv-full-screen-container>
+    <SelectComponents />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getComponetnByName } from "@/views/screens/configs/components";
+import SelectComponents from "@/views/screens/configs/SelectComponents.vue";
+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";
+
+const commonS = useCommonStore();
+
+const mainSL001 = computed(() => {
+  return getComponetnByName(commonS.mainSL001);
+});
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.zhleft {
+  width: 550px;
+  height: 100%;
+}
+
+.spsace {
+  width: 15px;
+}
+
+.zhright {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="screen-common-component">
+    <ScreenComHeader :module-id="moduleId" title="设备状态" />
+    <div class="charts-container">
+      <div
+        v-for="(item, index) in data"
+        :key="index"
+        class="device-status-desc"
+      >
+        <el-row>
+          <div :style="{ backgroundColor: colors[index] }" class="icon"></div>
+          <div :style="{ color: colors[index] }" class="type">
+            {{ item.type }}
+          </div>
+        </el-row>
+        <el-row>
+          <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>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+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,
+  },
+});
+
+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,
+  },
+]);
+
+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: 1048, name: "运行" },
+        { value: 735, name: "待机" },
+        { value: 580, name: "故障" },
+        { value: 484, name: "离线" },
+      ],
+    },
+  ],
+};
+</script>
+
+<style lang="scss" scoped>
+.device-status-desc {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 20px;
+  margin-bottom: 10px;
+
+  s .icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    margin-right: 10px;
+    background-color: #ff7373;
+  }
+
+  .type {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    line-height: 1.5;
+  }
+
+  .count {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+    margin-left: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,319 @@
+<template>
+  <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 class="ws-title">
+          {{ ws.wsName }}
+        </div>
+        <div class="workshop-row">
+          <div v-for="device in ws.device" :key="device.id">
+            <svg-icon
+              :color="getColorByStauts(device.status + '')"
+              icon-class="shebei"
+              size="120"
+            />
+            <div
+              :style="{ color: getColorByStauts(device.status + '') }"
+              class="chanliang"
+            >
+              产量: {{ device.count }}
+            </div>
+          </div>
+        </div>
+        <dv-decoration-2 style="width: 95%; height: 5px" />
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const colors = ["#4caf50", "#ffc107", "#b61945", "#607d8b"];
+
+const getColorByStauts = (status: string) => {
+  switch (status) {
+    case "on":
+      return colors[0];
+    case "off":
+      return colors[1];
+    case "warning":
+      return colors[2];
+    case "error":
+      return colors[3];
+    default:
+      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>
+.ws-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: start;
+  //padding: 5px 20px;
+}
+
+.ws-title {
+  font-size: 18px;
+  color: #fff;
+  margin-top: 5px;
+}
+
+.workshop-row {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-items: center;
+
+  .chanliang {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 16px;
+  }
+}
+</style>