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

Feat/layout style

See merge request !18

src/request/api/bagMonitor.js

+import request from "../index.js";
+export function getMonitorRealtime(params) {
+  return request({
+    url: "/api/duster/monitor/chamber",
+    method: "get",
+    params,
+  });
+}
+
+export function getMonitorToday(params) {
+  return request({
+    url: "/api/duster/monitor/curve",
+    method: "get",
+    params,
+  });
+}
+
+export function getMonitorList(params) {
+  return request({
+    url: "/api/duster/monitor/list",
+    method: "get",
+    params,
+  });
+}

src/utils/chart.js

@@ -132,6 +132,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
     top: "3%",
     containLabel: true,
   },
+  // x轴的文字去除年月日
   xAxis: {
     type: "category",
     boundaryGap: false,
@@ -145,6 +146,9 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
       fontSize: 12,
       interval: "auto",
       rotate: 0,
+      formatter: function (value) {
+        return value.split(' ')[1];
+      }
     },
     axisTick: {
       show: false,
@@ -154,7 +158,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
   yAxis: {
     type: "value",
     min: 0,
-    max: 600,
+    // max: 600,
     interval: 200,
     axisLabel: {
       color: "rgba(0,0,0,0.6)",

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

@@ -46,6 +46,7 @@
                   <span class="label">描述：</span>
                   <div class="value">
                     <span class="value-item" v-for="(item, index) in spot.description" :key="index">{{ item }}</span>
+                   <span class="value-item" v-if="spot.description.length === 0">暂无</span>
                   </div>
                  
                 </div>

src/views/dustMonitoring/components/healthyProgress.vue

@@ -9,7 +9,7 @@
         class="healthy-progress-bar h-full transition-all duration-500 ease-out bg-gradient-to-r from-secondary to-green-400 diagonal-pattern diagonal-pattern-animation"
       ></div>
       <div class="justify-between items-center mb-2 healthy-text-position">
-        <span class="font-semibold">健康度</span>
+        <span class="font-semibold">健康度:</span>
         <span id="square-progress-value" class="text-lg font-bold"> 45%</span>
       </div>
     </div>

src/views/dustMonitoring/components/warn.vue

 <template>
   <div class="title layout1">
-    <span class="warn-title">{{ title }}：</span>
-    <span class="jump-icon">>></span>
+    <span class="warn-title">告警：</span>
+    <!-- <span class="jump-icon">>></span> -->
   </div>
   <div class="content">
     <div class="item" v-for="item in listInfo" :key="item">
@@ -45,12 +45,15 @@ const props = defineProps({
         width: 100%;
         display: flex;
         align-items: center;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
         padding: 4px 0px 4px 2px;
-        box-shadow: rgba(53,58,62,0.08) 0px 1px 10px 0px,rgba(53,58,62,0.08) 0px 2px 4px 0px;
+        box-shadow: rgba(53,58,62,0.04) 0px 1px 10px 0px,rgba(53,58,62,0.04) 0px 2px 4px 0px;
+        font-size: 14px;
+        color: #333;
         img {
           width: 20px;
           height: auto;
+          margin-right: 10px;
         }
     }
 }

src/views/dustMonitoring/index.vue

@@ -75,6 +75,7 @@
                   :class="item.healthStatus == 1 ? 'health' : 'warn'"
                   v-for="item in detailObj.compartHealthList[0]"
                   :key="item"
+                  @click="handleStatusDotClick()"
                 ></div>
               </div>
               <div class="part">
@@ -119,6 +120,7 @@
 </template>
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
+import { useRouter } from "vue-router";
 import * as echarts from "echarts";
 import { getDataFun } from "@/request/method.js";
 import { useUsersStore } from "@/pinia/user.js";
@@ -150,6 +152,7 @@ const option = {
     },
   ],
 };
+const router = useRouter();
 const chartInstance = reactive({});
 const chartData = reactive([{}, {}, {}]);
 const initChart = (instance, option, domEl) => {
@@ -548,6 +551,14 @@ const dusterName = computed(() => {
   return dusterList.value.find((item) => item.dusterNo == form.dusterNo)
     ?.dusterName;
 });
+const handleStatusDotClick = () => {
+  router.push({
+    path: "/bag-monitor",
+    query: {
+      dusterNo: form.dusterNo,
+    }
+  });
+};
 </script>
 <style lang="scss" scoped>
 $borderColor: #bbbdc391;
@@ -592,7 +603,7 @@ $borderColor: #bbbdc391;
 
   .part1 {
     width: 100%;
-    height: 6vh;
+    height: 5vh;
     border-radius: 6px;
     border: 1px solid rgba(13, 15, 18, 0.1);
     box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
@@ -607,7 +618,7 @@ $borderColor: #bbbdc391;
   .part2 {
     margin-top: 10px;
     width: 100%;
-    height: calc(57vh - 10px);
+    height: calc(58vh - 10px);
     border-radius: 6px;
     border: 1px solid rgba(13, 15, 18, 0.1);
     box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);

src/views/dustOverview/components/valveSettingDialog.vue

@@ -345,7 +345,7 @@ const handleConfirm = () => {
   }
 
   .valve-cell {
-    width: 41px;
+    min-width: 41px;
     background: white;
     padding: 4px 8px;
     border-radius: 4px;
@@ -368,7 +368,7 @@ const handleConfirm = () => {
     .cell-value {
       display: flex;
       justify-content: center;
-      align-items: end;
+      align-items: baseline;
       font-size: 16px;
       color: #606266;
       span {

src/views/dustOverview/index.vue

@@ -102,14 +102,15 @@
           <template #compartHealthList="{ row }">
             <div class="status-matrix" v-if="row.compartHealthList.length > 0">
               <div
-                v-for="(row, rowIndex) in row.compartHealthList"
+                v-for="(childRow, rowIndex) in row.compartHealthList"
                 :key="rowIndex"
                 class="matrix-row"
               >
                 <div
-                  v-for="(status, colIndex) in row"
+                  v-for="(status, colIndex) in childRow"
                   :key="colIndex"
                   class="status-dot"
+                  @click="handleStatusDotClick(row, colIndex)"
                   :class="{
                     'status-normal': status.healthStatus === 1,
                     'status-warning': status.healthStatus === 2,
@@ -175,6 +176,7 @@ import {
   postAddCompartAllocation,
   postAddValveInfo,
 } from "@/request/api/dustOverview";
+import { useRouter } from "vue-router";
 import { getToken } from "@/utils/auth";
 import CommonTable from "@/components/commonTable/index.vue";
 import { ElMessageBox, ElMessage } from "element-plus";
@@ -182,6 +184,8 @@ import RoomSettingDialog from "./components/roomSettingDialog.vue";
 import ValveSettingDialog from "./components/valveSettingDialog.vue";
 import AddDustCollectorDialog from "./components/addDustCollectorDialog.vue";
 
+const router = useRouter();
+
 const formInline = ref({
   deviceName: "",
   region: "all",
@@ -357,6 +361,15 @@ const handleValveNumClick = (row) => {
   }
 };
 
+const handleStatusDotClick = (row, colIndex) => {
+  router.push({
+    path: "/bag-monitor",
+    query: {
+      dusterNo: row.deviceNo,
+    }
+  });
+};
+
 // 确认电磁阀设置
 const handleValveSettingConfirm = (updatedStatusData) => {
   const list = updatedStatusData.map((item) => {