[Mod 0000]解决保德光纤测温详情

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.bd1.vue

@@ -0,0 +1,477 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
+    <div class="fiber-modal">
+      <div class="modal-left">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
+          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
+        </div>
+      </div>
+      <div class="modal-right">
+        <div class="right-top">
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
+            </div>
+            <div class="item-container">
+              <div class="title">最高温度</div>
+              <div class="value">{{ posMonitor.maxValue || '--' }} <span>℃</span> </div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
+            </div>
+            <div class="item-container">
+              <div class="title">最低温度</div>
+              <div class="value">{{ posMonitor.fmin || '--' }} <span>℃</span></div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
+            </div>
+            <div class="item-container">
+              <div class="title">平均温度</div>
+              <div class="value">{{ posMonitor.favg || '--' }} <span>℃</span></div>
+            </div>
+          </div>
+          <div class="top-item warning-box">
+            <div class="icon">
+              <SvgIcon class="icon-style" size="38" name="risk-level" />
+            </div>
+            <div class="item-container">
+              <div class="title">风险等级</div>
+              <div class="warning-value">低风险</div>
+            </div>
+          </div>
+        </div>
+        <div class="right-center">
+          <div class="table-box">
+            <span class="base-title">测点监测详情</span>
+            <a-table size="small" :columns="columns" :data-source="posList" :pagination="false" :scroll="{ y: 200 }" />
+          </div>
+          <!-- <div class="warning-box">
+              <span class="base-title">预警历史详情</span>
+              <div class="warning-container">
+                <dv-scroll-board ref="scrollBoard" :config="warningConfig"
+                  style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33" />
+              </div>
+            </div> -->
+        </div>
+        <div class="right-bottom">
+          <span class="base-title">测点监测曲线</span>
+          <div class="echarts-box">
+            <BarAndLine xAxisPropType="Section_MaxTemp" :dataSource="posList1" height="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref<any>('');
+      const deviceList = ref<any[]>([]);
+      const posList = reactive<any[]>([]);
+      const posList1 = reactive<any[]>([]);
+      const posMonitor = shallowRef({});
+
+      const echatsOption = {
+        grid: {
+          top: '20%',
+          left: '2px',
+          right: '10px',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumns = [
+        {
+          legend: '测点最高温度',
+          seriesName: '(℃)',
+          ymax: 100,
+          yname: '℃',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'value',
+        },
+      ];
+      const columns = [
+        {
+          title: '位置',
+          dataIndex: 'position',
+          align: 'center',
+          customRender: ({ index }) => {
+            return `测点${index}`;
+          },
+        },
+        {
+          title: '最高温度(℃)',
+          dataIndex: 'Section_MaxTemp',
+          align: 'center',
+        },
+        {
+          title: '对应米数(m)',
+          dataIndex: 'Section_MaxTempPos',
+          align: 'center',
+        },
+        {
+          title: '起点',
+          dataIndex: 'Section_BeginPosition',
+          align: 'center',
+        },
+        {
+          title: '终点',
+          dataIndex: 'Section_EndPosition',
+          align: 'center',
+        },
+        {
+          title: '状态',
+          dataIndex: 'Section_AlarmTemp',
+          align: 'center',
+        },
+      ];
+
+      // const warningConfig = reactive({
+      //   header: ['测点', '温度', '预警信息'],
+      //   data: [
+      //     ['测点6', '318℃', '严重报警'],
+      //     ['测点43', '142℃', '一般预警'],
+      //     ['测点23', '167℃', '一般预警'],
+      //     ['测点6', '198℃', '超高预警'],
+      //     ['测点65', '197℃', '超高预警'],
+      //     ['测点78', '154℃', '一般预警'],
+      //     ['测点61', '104℃', '一般预警'],
+      //     ['测点87', '150℃', '一般信息'],
+      //   ],
+      //   index: false,
+      //   columnWidth: [150],
+      //   headerHeight: 38,
+      //   headerBGC: '#3d9dd45d',
+      //   oddRowBGC: '#009acd10',
+      //   evenRowBGC: '#009acd05',
+      //   align: ['center', 'center', 'center'],
+      // });
+
+      const [register, { setModalProps, closeModal }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
+        loading.value = true;
+        setModalProps({ loading: true, confirmLoading: true });
+        setTimeout(() => {
+          loading.value = false;
+          activeDeviceID.value = id;
+          setModalProps({ loading: false, confirmLoading: false });
+        }, 300);
+      }
+
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
+
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
+      }
+
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        console.log(newDataSource, 'newDataSource--------------');
+        deviceList.value = newDataSource as any[];
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            posMonitor.value = item.readData;
+            posList.length = 0;
+            posList1.length = 0;
+            let counts = Math.ceil((Object.keys(item.readData).length - 2) / 5);
+            for (let i = 0; i < counts; i++) {
+              posList.push({
+                Section_MaxTemp: item.readData[`Section${i + 1}_MaxTemp`],
+                Section_MaxTempPos: item.readData[`Section${i + 1}_MaxTempPos`],
+                Section_BeginPosition: item.readData[`Section${i + 1}_BeginPosition`],
+                Section_EndPosition: item.readData[`Section${i + 1}_EndPosition`],
+                Section_AlarmTemp:
+                  item.readData[`Section${i + 1}_AlarmTemp`] == '0' ? '正常' : item.readData[`Section${i + 1}_AlarmTemp`] == '1' ? '报警' : '',
+              });
+            }
+            posList.forEach((el, index) => {
+              posList1.push({ Section_MaxTemp: index + 1, value: el.Section_MaxTemp });
+            });
+            console.log(posList, 'posList-----------------');
+            console.log(posList1, 'posList1-----------------');
+          }
+        });
+      });
+
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        posList1,
+        chartsColumns,
+        columns,
+        // warningConfig,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .fiber-modal {
+    width: 100%;
+    height: 650px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .active-device-title {
+        color: aqua;
+      }
+
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
+
+        span:hover {
+          color: #89ffff;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
+      }
+    }
+
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
+
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
+        }
+      }
+
+      .right-top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .top-item {
+          width: 49%;
+          height: 80px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
+          padding-top: 16px;
+
+          .icon {
+            margin-right: 10px;
+            margin-top: 5px;
+            color: #fdb146;
+          }
+
+          .item-container {
+            width: 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            div {
+              text-align: center;
+            }
+
+            .title {
+              font-size: 18px;
+            }
+
+            .value {
+              text-shadow: 0 0 25px #00fbfe;
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+              font-style: normal;
+              background-size: cover;
+              font-family: electronicFont;
+              font-size: 30px;
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+              position: relative;
+              top: -8px;
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 18px;
+                color: aliceblue;
+              }
+            }
+          }
+        }
+
+        .warning-box {
+          padding-top: 0px;
+
+          .icon {
+            margin-top: 20px;
+
+            .icon-style {
+              color: #fdb146;
+            }
+          }
+
+          .warning-value {
+            font-size: 18px;
+            color: #61ddb1;
+          }
+        }
+      }
+
+      .right-center {
+        margin-top: 10px;
+        // display: flex;
+        // flex-direction: row;
+        // justify-content: space-between;
+
+        .table-box {
+          position: relative;
+          width: 100%;
+          height: 250px;
+
+          :deep(.zxm-table-wrapper) {
+            height: 220px !important;
+            background: #ffffff05 !important;
+            // border-bottom: 1px solid #91e9fe80 !important;
+          }
+        }
+
+        // .warning-box {
+        //   width: calc(100% - 520px);
+
+        //   .warning-container {
+        //     width: 100%;
+        //     height: convert;
+        //     background: #009acd00;
+
+        //     :deep(.dv-scroll-board) {
+        //       .row-item {
+        //         height: 40px !important;
+        //         line-height: 40px !important;
+        //       }
+
+        //       .header-item {
+        //         border-top: 1px solid #91e9fe !important;
+        //         border-bottom: 1px solid #91e9fe !important;
+        //       }
+        //     }
+        //   }
+        // }
+      }
+
+      .right-bottom {
+        margin-top: 20px;
+
+        .echarts-box {
+          width: 100%;
+          height: 230px;
+        }
+      }
+    }
+  }
+
+  :deep(.zxm-table-body) {
+    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+
+    .zxm-table-tbody > tr > td {
+      border: none !important;
+    }
+  }
+
+  :deep(.zxm-table-cell) {
+    border-right: none !important;
+  }
+</style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.wlml.vue

@@ -1,25 +1,28 @@
 <template>
-    <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk"
-      @cancel="handleCancel">
-      <div class="fiber-modal">
-        <div class="modal-left">
-          <div v-for="device in deviceList" class="link-item"
-            :class="{ 'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
-            <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
-          </div>
+  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
+    <div class="fiber-modal">
+      <div class="modal-left">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
+          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
-        <div class="modal-right">
-          <div class="right-top">
-            <div class="top-item">
-              <div class="icon">
-                <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
-              </div>
-              <div class="item-container">
-                <div class="title">最高温度</div>
-                <div class="value">{{ posMonitor.maxValue || '--' }} <span>℃</span> </div>
-              </div>
+      </div>
+      <div class="modal-right">
+        <div class="right-top">
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
+            </div>
+            <div class="item-container">
+              <div class="title">最高温度</div>
+              <div class="value">{{ posMonitor.maxValue || '--' }} <span>℃</span> </div>
             </div>
-            <!-- <div class="top-item">
+          </div>
+          <!-- <div class="top-item">
               <div class="icon">
                 <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
               </div>
@@ -37,48 +40,47 @@
                 <div class="value">{{ posMonitor.favg || '--' }} <span>℃</span></div>
               </div>
             </div> -->
-            <div class="top-item warning-box">
-              <div class="icon">
-                <SvgIcon class="icon-style" size="38" name="risk-level" />
-              </div>
-              <div class="item-container">
-                <div class="title">风险等级</div>
-                <div class="warning-value">低风险</div>
-              </div>
+          <div class="top-item warning-box">
+            <div class="icon">
+              <SvgIcon class="icon-style" size="38" name="risk-level" />
             </div>
-          </div>
-          <div class="right-center">
-            <div class="table-box">
-              <span class="base-title">测点监测详情</span>
-              <a-table size="small" :columns="columns" :data-source="posList" :pagination="false" :scroll="{ y: 200 }" />
+            <div class="item-container">
+              <div class="title">风险等级</div>
+              <div class="warning-value">低风险</div>
             </div>
-            <!-- <div class="warning-box">
+          </div>
+        </div>
+        <div class="right-center">
+          <div class="table-box">
+            <span class="base-title">测点监测详情</span>
+            <a-table size="small" :columns="columns" :data-source="posList" :pagination="false" :scroll="{ y: 200 }" />
+          </div>
+          <!-- <div class="warning-box">
               <span class="base-title">预警历史详情</span>
               <div class="warning-container">
                 <dv-scroll-board ref="scrollBoard" :config="warningConfig"
                   style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33" />
               </div>
             </div> -->
-          </div>
-          <div class="right-bottom">
-            <span class="base-title">测点监测曲线</span>
-            <div class="echarts-box">
-              <BarAndLine xAxisPropType="Section_MaxTemp" :dataSource="posList1" height="100%"
-                :chartsColumns="chartsColumns" :option="echatsOption" />
-            </div>
+        </div>
+        <div class="right-bottom">
+          <span class="base-title">测点监测曲线</span>
+          <div class="echarts-box">
+            <BarAndLine xAxisPropType="Section_MaxTemp" :dataSource="posList1" height="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
           </div>
         </div>
       </div>
-    </BasicModal>
-  </template>
-  <script lang="ts">
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
   import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
   import { SvgIcon } from '/@/components/Icon';
   import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
   import dayjs from 'dayjs';
-  
+
   export default defineComponent({
     components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
     props: {
@@ -94,7 +96,7 @@
       const posList = reactive<any[]>([]);
       const posList1 = reactive<any[]>([]);
       const posMonitor = shallowRef({});
-  
+
       const echatsOption = {
         grid: {
           top: '20%',
@@ -107,7 +109,7 @@
           feature: {},
         },
       };
-  
+
       const chartsColumns = [
         {
           legend: '测点最高温度',
@@ -157,7 +159,7 @@
           align: 'center',
         },
       ];
-  
+
       // const warningConfig = reactive({
       //   header: ['测点', '温度', '预警信息'],
       //   data: [
@@ -178,21 +180,21 @@
       //   evenRowBGC: '#009acd05',
       //   align: ['center', 'center', 'center'],
       // });
-  
+
       const [register, { setModalProps, closeModal }] = useModalInner();
-  
+
       function handleVisibleChange(visible) {
         if (visible) {
           loading.value = true;
           setModalProps({ loading: true, confirmLoading: true });
-  
+
           setTimeout(() => {
             loading.value = false;
             setModalProps({ loading: false, confirmLoading: false });
           }, 1000);
         }
       }
-  
+
       // 选择监测
       function selectDevice(id) {
         loading.value = true;
@@ -203,17 +205,17 @@
           setModalProps({ loading: false, confirmLoading: false });
         }, 300);
       }
-  
+
       function handleOk(e) {
         e.preventDefault();
         closeModal();
       }
-  
+
       function handleCancel(e) {
         e.preventDefault();
         closeModal();
       }
-  
+
       watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
         console.log(newDataSource, 'newDataSource--------------');
         deviceList.value = newDataSource as any[];
@@ -232,7 +234,8 @@
                 Section_MaxTempPos: item.readData[`Section${i + 1}_MaxTempPos`],
                 Section_BeginPosition: item.readData[`Section${i + 1}_BeginPosition`],
                 Section_EndPosition: item.readData[`Section${i + 1}_EndPosition`],
-                Section_AlarmTemp: item.readData[`Section${i + 1}_AlarmTemp`]=='0' ? '正常' :item.readData[`Section${i + 1}_AlarmTemp`]=='1' ?  '报警' : '',
+                Section_AlarmTemp:
+                  item.readData[`Section${i + 1}_AlarmTemp`] == '0' ? '正常' : item.readData[`Section${i + 1}_AlarmTemp`] == '1' ? '报警' : '',
               });
             }
             posList.forEach((el, index) => {
@@ -243,7 +246,7 @@
           }
         });
       });
-  
+
       return {
         register,
         model: modelRef,
@@ -264,15 +267,15 @@
       };
     },
   });
-  </script>
-  <style lang="less" scoped>
+</script>
+<style lang="less" scoped>
   .fiber-modal {
     width: 100%;
     height: 650px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-  
+
     .modal-left {
       width: 200px;
       height: 100%;
@@ -280,21 +283,21 @@
       background: #ffffff11;
       padding: 5px;
       border-radius: 5px;
-  
+
       .active-device-title {
         color: aqua;
       }
-  
+
       .link-item {
         position: relative;
         cursor: pointer;
         line-height: 30px;
         padding-left: 30px;
-  
+
         span:hover {
           color: #89ffff;
         }
-  
+
         &::after {
           content: '';
           position: absolute;
@@ -308,16 +311,16 @@
         }
       }
     }
-  
+
     .modal-right {
       width: calc(100% - 220px);
       overflow-y: auto;
-  
+
       .base-title {
         line-height: 32px;
         position: relative;
         padding-left: 20px;
-  
+
         &::after {
           content: '';
           position: absolute;
@@ -330,13 +333,13 @@
           border-radius: 4px;
         }
       }
-  
+
       .right-top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin-bottom: 10px;
-  
+
         .top-item {
           width: 49%;
           height: 80px;
@@ -347,27 +350,27 @@
           box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
           background: rgba(0, 0, 0, 0.06666666666666667);
           padding-top: 16px;
-  
+
           .icon {
             margin-right: 10px;
             margin-top: 5px;
             color: #fdb146;
           }
-  
+
           .item-container {
             width: 100px;
             display: flex;
             flex-direction: column;
             justify-content: center;
-  
+
             div {
               text-align: center;
             }
-  
+
             .title {
               font-size: 18px;
             }
-  
+
             .value {
               text-shadow: 0 0 25px #00fbfe;
               background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
@@ -380,7 +383,7 @@
               -webkit-text-fill-color: transparent;
               position: relative;
               top: -8px;
-  
+
               span {
                 font-family: Arial, Helvetica, sans-serif;
                 font-size: 18px;
@@ -389,57 +392,57 @@
             }
           }
         }
-  
+
         .warning-box {
           padding-top: 0px;
-  
+
           .icon {
             margin-top: 20px;
-  
+
             .icon-style {
               color: #fdb146;
             }
           }
-  
+
           .warning-value {
             font-size: 18px;
             color: #61ddb1;
           }
         }
       }
-  
+
       .right-center {
         margin-top: 10px;
         // display: flex;
         // flex-direction: row;
         // justify-content: space-between;
-  
+
         .table-box {
           position: relative;
           width: 100%;
           height: 250px;
-  
+
           :deep(.zxm-table-wrapper) {
             height: 220px !important;
             background: #ffffff05 !important;
             // border-bottom: 1px solid #91e9fe80 !important;
           }
         }
-  
+
         // .warning-box {
         //   width: calc(100% - 520px);
-  
+
         //   .warning-container {
         //     width: 100%;
         //     height: convert;
         //     background: #009acd00;
-  
+
         //     :deep(.dv-scroll-board) {
         //       .row-item {
         //         height: 40px !important;
         //         line-height: 40px !important;
         //       }
-  
+
         //       .header-item {
         //         border-top: 1px solid #91e9fe !important;
         //         border-bottom: 1px solid #91e9fe !important;
@@ -448,10 +451,10 @@
         //   }
         // }
       }
-  
+
       .right-bottom {
         margin-top: 20px;
-  
+
         .echarts-box {
           width: 100%;
           height: 230px;
@@ -459,17 +462,16 @@
       }
     }
   }
-  
+
   :deep(.zxm-table-body) {
     border: 1px solid rgba(57, 232, 255, 0.2) !important;
-  
-    .zxm-table-tbody>tr>td {
+
+    .zxm-table-tbody > tr > td {
       border: none !important;
     }
   }
-  
+
   :deep(.zxm-table-cell) {
     border-right: none !important;
   }
-  </style>
-  
+</style>