Merge branch 'feat/layout-style' into 'dev'

feat(*): 首页及除尘器总览连调

See merge request !12

src/request/api/dashboard.js

@@ -19,3 +19,10 @@ export function getExceptionMonitor() {
     method: "get",
   });
 }
+
+export function getDusterAlarm() {
+  return request({
+    url: "/api/home/duster/alarm",
+    method: "get",
+  });
+}

src/request/api/dustOverview.js

@@ -7,15 +7,87 @@ export function getDusterLeakNum() {
 }
 
 export function getHealthPercent() {
+  return request({
+    url: "/getHealthPercent",
+    method: "get",
+  });
+}
+
+export function getCloseLoopNum() {
+  return request({
+    url: "/getCloseLoopNum",
+    method: "get",
+  });
+}
+
+
+export function getProductionLine() {
+    return request({
+      url: "/transaction/getProductionLine",
+      method: "get",
+    });
+  }
+
+  export function getDusterList(params) {
+    return request({
+      url: "/getDusterList",
+      method: "get",
+      params,
+    });
+  } 
+
+  export function getVisDusterList(params) {
     return request({
-      url: "/getHealthPercent",
+      url: "/queryVisDusterList",
       method: "get",
+      params,
+    });
+  }
+
+  export function postAddDuster(params) {
+    return request({
+      url: "/addDuster",
+      method: "post",
+      data: params,
+    });
+  }
+
+  export function postUpdateDuster(params) {
+    return request({
+      url: "/updateDuster",
+      method: "post",
+      data: params,
+    });
+  }
+
+  export function getCompartAllocation(params) {
+    return request({
+      url: "/queryCompartAllocation",
+      method: "get",
+      params,
+    });
+  }
+
+  export function postAddCompartAllocation(params) {
+    return request({
+      url: "/addCompartAllocation",
+      method: "post",
+      data: params,
+    });
+  }
+  
+  export function postAddValveInfo(params) {
+    return request({
+      url: "/addValveInfo",
+      method: "post",
+      data: params,
     });
   }
 
-  export function getCloseLoopNum() {
+  export function getValveAllocation(params) {
     return request({
-      url: "/getCloseLoopNum",
+      url: "/queryValveAllocation",
       method: "get",
+      params,
     });
   }
\ No newline at end of file

src/views/dashboard/components/map-svg.vue

@@ -59,48 +59,65 @@
 </template>
 
 <script setup>
-import { onMounted, onBeforeUnmount, ref } from "vue";
+import { onMounted, onBeforeUnmount, ref, watch } from "vue";
 import * as echarts from "echarts";
 import { getLineOption } from "@/utils/chart";
 
-// 定义坐标点位数据
-const spots = ref([
-  {
-    id:1,
-    no: "wp001",
-    x: 41,
-    y: 22,
-    name: "4#除尘器",
-    status: 0,
-    description: ["无异常"],
-  },
-  {
-    id:2,
-    no: "wp001",
-    x: 45,
-    y: 70,
-    name: "站点B",
-    status: 0,
-    description: ["运行正常"],
-  },
-  {
-    id:3,
-    no: "wp001",
-    x: 77,
-    y: 36,
-    name: "3#除尘器",
-    status: 1,
-    description: ["三仓室存在轻微泄漏", "三仓室存在轻微泄漏", "三仓室存在轻微泄漏"],
+const props = defineProps({
+  mapList: {
+    type: Array,
+    default: () => [],
   },
-  {
-    id:4,
-    no: "wp001",
-    x: 50,
-    y: 65,
-    name: "2#除尘器",
-    status: 1,
-    description: ["除尘器脉冲阀故障或者提升阀故障"],
+});
+
+
+watch(
+  () => props.mapList,
+  () => {
+    initMap();
   },
+  { deep: true }
+);
+
+
+// 定义坐标点位数据
+const spots = ref([
+  // {
+  //   id:1,
+  //   no: "wp001",
+  //   x: 41,
+  //   y: 22,
+  //   name: "4#除尘器",
+  //   status: 0,
+  //   description: ["无异常"],
+  // },
+  // {
+  //   id:2,
+  //   no: "wp001",
+  //   x: 45,
+  //   y: 70,
+  //   name: "站点B",
+  //   status: 0,
+  //   description: ["运行正常"],
+  // },
+  // {
+  //   id:3,
+  //   no: "wp001",
+  //   x: 77,
+  //   y: 36,
+  //   name: "3#除尘器",
+  //   status: 1,
+  //   description: ["三仓室存在轻微泄漏", "三仓室存在轻微泄漏", "三仓室存在轻微泄漏"],
+  // },
+  // {
+  //   id:4,
+  //   no: "wp001",
+  //   x: 50,
+  //   y: 65,
+  //   name: "2#除尘器",
+  //   status: 1,
+  //   description: ["除尘器脉冲阀故障或者提升阀故障"],
+  // },
 ]);
 
 const activeSpot = ref(null);
@@ -160,7 +177,14 @@ const getStatusText = (status) => {
   return statusMap[status] || status;
 };
 
-onMounted(() => {});
+const initMap = () => {
+  console.log(props.mapList, 'props.mapList')
+  spots.value = props.mapList || [];
+}
+
+onMounted(() => {
+  initMap();
+});
 
 onBeforeUnmount(() => {
   clearTimer();

src/views/dashboard/index.vue

@@ -28,14 +28,14 @@
     </div>
 
     <div class="map-box">
-      <map-svg></map-svg>
+      <map-svg :mapList="mapList"></map-svg>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
-import { getHealthOverview, getHealthStatistic, getExceptionMonitor } from "@/request/api/dashboard";
+import { getHealthOverview, getHealthStatistic, getExceptionMonitor, getDusterAlarm } from "@/request/api/dashboard";
 import { useRoute, useRouter } from "vue-router";
 import msgItem from "./components/msg-item.vue";
 import chartLine from "./components/chart-line.vue";
@@ -58,6 +58,7 @@ const router = useRouter();
 
 const msgList = ref([
 ]);
+const mapList = ref([]);
 
 const customColorMethod = (percentage) => {
   if (percentage < 60) {
@@ -76,69 +77,33 @@ const healthOverview = () => {
   pulseValve.value = Number(res.data.pulseValve.split('%')[0])
   poppetValve.value = Number(res.data.poppetValve.split('%')[0])
   })
-  // const res = {
-  //   "data": {
-  //     "average": "20%",
-  //     "bag": "10%",
-  //     "pulseValve": "20%",
-  //     "poppetValve": "30%"
-  //   },
-  //   msg: "访问成功",
-  //   success: true,
-  //   code: 1
-  // }
-
 }
 
 const healthStatistic = () => {
   getHealthStatistic().then(res => {
     chartData.value = res.data;
   })
-  // const res = {
-  //   "data": [
-  //     {
-  //       "date": "2025-05-01",
-  //       "healthDegree": "75"
-  //     },
-  //     {
-  //       "date": "2025-05-02",
-  //       "healthDegree": "68"
-  //     }
-  //   ],
-  //   "msg": "访问成功",
-  //   "success": true,
-  //   code: 1,
-  // };
 };
 
 const exceptionMonitor = () => {
   getExceptionMonitor().then(res => {
     msgList.value = res.data;
   })
-//   const res = {
-//     "data": [
-//     {
-//       "date": "2025-05-01 10:00",
-//       "dusterName": "3#除尘器",
-//       "message": "三仓室存在轻重泄露"
-//     },
-//     {
-//       "date": "2025-05-01 10:00",
-//       "dusterName": "3#除尘器",
-//       "message": "三仓室存在轻重泄露"
-//     }
-//     ],
-//     msg: "访问成功",
-//     success: true,
-//     code: 1
-//   }
-//   msgList.value = res.data;
 }
 
+const handleDusterAlarm = () => {
+  getDusterAlarm().then(res => {
+    mapList.value = res.data;
+  })
+}
+
+
+
 onMounted(async () => {
   healthOverview();
   healthStatistic();
   exceptionMonitor();
+  handleDusterAlarm();
 });
 
 onBeforeUnmount(() => { });