feat(*): 首页连调

.env.development

@@ -8,6 +8,7 @@ VITE_ENV = development
 # 开发环境下，后端接口的基础URL
 
 # base api
-VITE_APP_BASE_API5 = '/vispc'
+VITE_APP_BASE_API5 = '/pc'
 VITE_APP_BASE_MONITOR = '/monitor'
+
 # VITE_APP_BASE_API5_PRI =  https://vis.bmetech.com
\ No newline at end of file

src/request/api/dashboard.js

+import request from "../index.js";
+export function getHealthOverview() {
+  return request({
+    url: "/api/home/health/overview",
+    method: "get",
+  });
+}
+
+export function getHealthStatistic() {
+  return request({
+    url: "/api/home/health/statistic",
+    method: "get",
+  });
+}
+
+export function getExceptionMonitor() {
+  return request({
+    url: "/api/home/exception/monitor",
+    method: "get",
+  });
+}

src/request/api/dustOverview.js

+import request from "../index.js";
+export function getDusterLeakNum() {
+  return request({
+    url: "/getDusterLeakNum",
+    method: "get",
+  });
+}
+
+export function getHealthPercent() {
+    return request({
+      url: "/getHealthPercent",
+      method: "get",
+    });
+  }
+
+  export function getCloseLoopNum() {
+    return request({
+      url: "/getCloseLoopNum",
+      method: "get",
+    });
+  }
\ No newline at end of file

src/views/dashboard/components/chart-line.vue

@@ -3,25 +3,45 @@
 </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 chartRef = ref(null);
+const props = defineProps({
+  chartData: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+
+
+const chartRef = ref([]);
 let chartInstance = null;
 
+watch(
+  () => props.chartData,
+  () => {
+    initChart();
+  },
+  { deep: true }
+);
+
 const initChart = () => {
   if (chartRef.value) {
     chartInstance = echarts.init(chartRef.value);
-    const xData = ["01", "02", "03", "04", "05", "06", "07"];
-    const seriesData = [120, 200, 150, 80, 60, 110, 120];
+    const xData = props.chartData.map((item) => item.date);
+    const seriesData = props.chartData.map((item) => item.healthDegree);
     const option = getLineOption(xData, seriesData);
     chartInstance.setOption(option);
   }
 };
 
 onMounted(() => {
-  initChart();
+  console.log(props.chartData, 'props.chartData')
+  if (props.chartData) {
+    initChart();
+  }
   window.addEventListener("resize", () => {
     chartInstance?.resize();
   });

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

@@ -30,7 +30,7 @@
               class="detail-window"
               v-if="activeSpot === index && showDetail"
             >
-              <div class="detail-title">{{ spot.title }}</div>
+              <div class="detail-title">{{ spot.name }}</div>
               <div class="detail-content">
                 <div class="detail-item">
                   <span class="label">状态：</span>
@@ -44,7 +44,10 @@
                             </div> -->
                 <div class="detail-item">
                   <span class="label">描述：</span>
-                  <span class="value">{{ spot.description }}</span>
+                  <div class="value">
+                    <span class="value-item" v-for="(item, index) in spot.description" :key="index">{{ item }}</span>
+                  </div>
+                 
                 </div>
               </div>
             </div>
@@ -63,36 +66,40 @@ import { getLineOption } from "@/utils/chart";
 // 定义坐标点位数据
 const spots = ref([
   {
+    id:1,
+    no: "wp001",
     x: 41,
     y: 22,
-    title: "4#除尘器",
-    value: "89%",
-    status: "normal",
-    description: "无异常",
+    name: "4#除尘器",
+    status: 0,
+    description: ["无异常"],
   },
   {
+    id:2,
+    no: "wp001",
     x: 45,
     y: 70,
-    title: "站点B",
-    value: "92%",
-    status: "normal",
-    description: "运行正常",
+    name: "站点B",
+    status: 0,
+    description: ["运行正常"],
   },
   {
-    x: 65,
+    id:3,
+    no: "wp001",
+    x: 77,
     y: 36,
-    title: "3#除尘器",
-    value: "78%",
-    status: "warning",
-    description: "三仓室存在轻微泄漏",
+    name: "3#除尘器",
+    status: 1,
+    description: ["三仓室存在轻微泄漏", "三仓室存在轻微泄漏", "三仓室存在轻微泄漏"],
   },
   {
-    x: 60,
-    y: 70,
-    title: "2#除尘器",
-    value: "45%",
-    status: "error",
-    description: "除尘器脉冲阀故障或者提升阀故障",
+    id:4,
+    no: "wp001",
+    x: 50,
+    y: 65,
+    name: "2#除尘器",
+    status: 1,
+    description: ["除尘器脉冲阀故障或者提升阀故障"],
   },
 ]);
 
@@ -147,9 +154,8 @@ const leave = (el) => {
 
 const getStatusText = (status) => {
   const statusMap = {
-    normal: "正常",
-    warning: "警告",
-    error: "异常",
+    1: "故障",
+    0: "正常",
   };
   return statusMap[status] || status;
 };
@@ -202,7 +208,7 @@ onBeforeUnmount(() => {
   z-index: 2;
 
   // 状态颜色
-  &.status-normal {
+  &.status-0 {
     background: #08c733;
     .pulse {
       background: #08c733;
@@ -222,7 +228,7 @@ onBeforeUnmount(() => {
     }
   }
 
-  &.status-error {
+  &.status-1 {
     background: #ff6a6a;
     .pulse {
       background: #ff6a6a;
@@ -287,13 +293,13 @@ onBeforeUnmount(() => {
     pointer-events: none;
     z-index: 999;
 
-    .text-status-normal {
+    .text-status-0 {
       color: #00ff9d !important;
     }
     .text-status-warning {
       color: #ffa500 !important;
     }
-    .text-status-error {
+    .text-status-1 {
       color: #ff3b3b !important;
     }
 
@@ -331,9 +337,15 @@ onBeforeUnmount(() => {
         }
 
         .value {
+          display: block;
           width: calc(100% - 55px);
           color: #fff;
         }
+        .value-item {
+          display: block;
+          width: 100%;
+          color: #fff;
+        }
       }
     }
   }

src/views/dashboard/components/msg-item.vue

@@ -10,10 +10,10 @@
         v-for="(message, index) in extendedList"
         :key="index"
       >
-        <span class="time">{{ message.time }}</span>
+        <span class="time">{{ message.date }}</span>
         <div class="content">
-          <span class="title">{{ message.title }}</span
-          >{{ message.content }}
+          <span class="title">{{ message.dusterName }}</span
+          >{{ message.message }}
         </div>
       </div>
     </div>

src/views/dashboard/index.vue

@@ -7,23 +7,23 @@
       </div>
       <div class="indicators-box">
         <div class="title">综合健康度</div>
-        <div class="indicators-num">98%</div>
+        <div class="indicators-num" :style="{ color: customColorMethod(average) }">{{ average }}%</div>
         <div>
           <div class="indicators-item">布袋健康度</div>
-          <el-progress :percentage="percentageO" :color="customColorMethod" />
+          <el-progress :percentage="bag" :color="customColorMethod" />
         </div>
         <div>
           <div class="indicators-item">脉冲阀健康度</div>
-          <el-progress :percentage="percentageT" :color="customColorMethod" />
+          <el-progress :percentage="pulseValve" :color="customColorMethod" />
         </div>
         <div>
           <div class="indicators-item">提升阀健康度</div>
-          <el-progress :percentage="percentageTh" :color="customColorMethod" />
+          <el-progress :percentage="poppetValve" :color="customColorMethod" />
         </div>
       </div>
       <div class="line-box">
         <div class="title">健康度指数</div>
-        <chart-line></chart-line>
+        <chart-line :chartData="chartData"></chart-line>
       </div>
     </div>
 
@@ -35,14 +35,16 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
+import { getHealthOverview, getHealthStatistic, getExceptionMonitor } from "@/request/api/dashboard";
 import { useRoute, useRouter } from "vue-router";
 import msgItem from "./components/msg-item.vue";
 import chartLine from "./components/chart-line.vue";
 import mapSvg from "./components/map-svg.vue";
 
-const percentageO = ref(20);
-const percentageT = ref(62);
-const percentageTh = ref(90);
+const average = ref(100);
+const bag = ref(100);
+const pulseValve = ref(100);
+const poppetValve = ref(100);
 
 const customColors = [
   { color: "#ff6a6a", percentage: 60 },
@@ -50,55 +52,11 @@ const customColors = [
   { color: "#08c733", percentage: 100 },
 ];
 
+const chartData = ref(null)
 const route = useRoute();
 const router = useRouter();
 
 const msgList = ref([
-  {
-    title: "3#除尘器",
-    content: "三仓室存在轻微泄漏",
-    time: "05-18 12:00",
-  },
-  {
-    title: "2#除尘器",
-    content: "除尘器脉冲阀故障或者提升阀故障",
-    time: "05-18 08:00",
-  },
-  {
-    title: "3#除尘器",
-    content: "三仓室存在轻微泄漏",
-    time: "05-18 07:00",
-  },
-  {
-    title: "2#除尘器",
-    content: "除尘器脉冲阀故障或者提升阀故障",
-    time: "05-18 05:00",
-  },
-  {
-    title: "3#除尘器",
-    content: "三仓室存在轻微泄漏",
-    time: "05-18 03:00",
-  },
-  {
-    title: "2#除尘器",
-    content: "除尘器脉冲阀故障或者提升阀故障",
-    time: "05-18 02:00",
-  },
-  {
-    title: "2#除尘器",
-    content: "除尘器脉冲阀故障或者提升阀故障",
-    time: "05-18 01:00",
-  },
-  {
-    title: "3#除尘器",
-    content: "三仓室存在轻微泄漏",
-    time: "05-17 11:00",
-  },
-  {
-    title: "2#除尘器",
-    content: "除尘器脉冲阀故障或者提升阀故障",
-    time: "05-16 02:00",
-  },
 ]);
 
 const customColorMethod = (percentage) => {
@@ -111,9 +69,80 @@ const customColorMethod = (percentage) => {
   return customColors[2].color;
 };
 
-onMounted(async () => {});
+const healthOverview = () => {
+  // getHealthOverview().then(res => {
+  //   healthOverview.value = res.data
+  // })
+  const res = {
+    "data": {
+      "average": "20%",
+      "bag": "10%",
+      "pulseValve": "20%",
+      "poppetValve": "30%"
+    },
+    msg: "访问成功",
+    success: true,
+    code: 1
+  }
+  average.value = Number(res.data.average.split('%')[0])
+  bag.value = Number(res.data.bag.split('%')[0])
+  pulseValve.value = Number(res.data.pulseValve.split('%')[0])
+  poppetValve.value = Number(res.data.poppetValve.split('%')[0])
+}
+
+const healthStatistic = () => {
+  // getHealthStatistic().then(res => {
+  //   healthStatistic.value = res.data
+  // })
+  const res = {
+    "data": [
+      {
+        "date": "2025-05-01",
+        "healthDegree": "75"
+      },
+      {
+        "date": "2025-05-02",
+        "healthDegree": "68"
+      }
+    ],
+    "msg": "访问成功",
+    "success": true,
+    code: 1,
+  };
+  chartData.value = res.data;
+};
+
+const exceptionMonitor = () => {
+  // getExceptionMonitor().then(res => {
+  //   exceptionMonitor.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;
+}
+
+onMounted(async () => {
+  healthOverview();
+  healthStatistic();
+  exceptionMonitor();
+});
 
-onBeforeUnmount(() => {});
+onBeforeUnmount(() => { });
 </script>
 
 <style lang="scss" scoped>
@@ -133,7 +162,7 @@ onBeforeUnmount(() => {});
     justify-content: space-between;
     height: 15rem;
 
-    & > div {
+    &>div {
       background: #ffffff;
       border-radius: 6px;
       box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);

src/views/dustOverview/index.vue

@@ -154,6 +154,7 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, computed } from "vue";
+import { getDusterLeakNum, getHealthPercent, getCloseLoopNum } from "@/request/api/dustOverview";
 import CommonTable from "@/components/commonTable/index.vue";
 import RoomSettingDialog from "./components/roomSettingDialog.vue";
 import ValveSettingDialog from "./components/valveSettingDialog.vue";

vite.config.js

@@ -17,10 +17,11 @@ export default defineConfig(({mode}) => {
       port: 3000, // 指定服务器端口
       proxy: {
         [ENV.VITE_APP_BASE_API5]: {
-          // target: 'https://screen.bmetech.com',
-          target: 'https://vis.bmetech.com',
+          target: 'https://screen.bmetech.com',
+          // target: 'https://vis.bmetech.com',
           changeOrigin: true,
         },
+        
       }
     }
   }