[Style 0000] 首页全矿井通风监测栏样式优化

src/views/vent/home/configurable/components/MonitorBar.vue

@@ -1,12 +1,27 @@
 <template>
   <a-row class="midback-info" :gutter="5">
-    <div v-for="item in computedConfig" :key="item.class" class="middata" :class="item.class" @click="handleClick(item.list)">
-      <div class="midnumberval">{{ item.value }}</div>
-      <div class="infotext1">{{ item.label }}</div>
-    </div>
-    <BasicModal title="测风装置列表" @register="register" :destroyOnClose="true" :width="800" :footer="false">
-      <a-table :dataSource="list" :columns="columns" />
-    </BasicModal>
+    <template v-for="item in computedConfig" :key="item.class">
+      <Tooltip
+        v-if="item.list"
+        trigger="click"
+        overlayClassName="monitor-bar-overlay-nc9s"
+        :overlayStyle="overlayStyle"
+        :destroyTooltipOnHide="true"
+        placement="bottom"
+      >
+        <div class="middata" :class="item.class" @click="handleClick(item.list)">
+          <div class="midnumberval">{{ item.value }}</div>
+          <div class="infotext1">{{ item.label }}</div>
+        </div>
+        <template #title>
+          <CustomTable class="" type="D" :autoScroll="false" :columns="columns" :data="list" defaultValue="-" />
+        </template>
+      </Tooltip>
+      <div v-else class="middata" :class="item.class">
+        <div class="midnumberval">{{ item.value }}</div>
+        <div class="infotext1">{{ item.label }}</div>
+      </div>
+    </template>
   </a-row>
 </template>
 <script lang="ts" setup>
@@ -15,8 +30,9 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import { ModuleDataPreset } from '../../../deviceManager/configurationTable/types';
   import { get } from 'lodash-es';
-  import { useModal } from '/@/components/Modal';
-  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+  import { Tooltip } from 'ant-design-vue';
+  import CustomTable from './detail/CustomTable.vue';
+  import MonitorBarBG from '/@/assets/images/home-container/configurable/monitor_bar_bg.png';
 
   const props = defineProps<{
     isDataRealTime: boolean;
@@ -25,7 +41,6 @@
   }>();
 
   const { sysOrgCode } = useGlobSetting();
-  const [register, { openModal }] = useModal();
 
   const items = computed(() => {
     if (props.config && get(props.config, 'moduleData.preset.length')) return get(props.config, 'moduleData.preset[0].items');
@@ -126,20 +141,20 @@
       ? props.config.columns
       : [
           {
-            title: '安装位置',
-            dataIndex: 'strinstallpos',
+            name: '安装位置',
+            prop: 'strinstallpos',
           },
           {
-            title: '风向',
-            dataIndex: 'forward_str',
+            name: '风向',
+            prop: 'readData.forward_str',
           },
           {
-            title: '风量',
-            dataIndex: 'm3',
+            name: '风量',
+            prop: 'readData.m3',
           },
           {
-            title: '风速',
-            dataIndex: 'va',
+            name: '风速',
+            prop: 'readData.va',
           },
         ]
   );
@@ -147,19 +162,20 @@
   function handleClick(config: any) {
     if (!config) return;
     const { readForm } = config;
-    const rawdata = get(props.data, readForm);
-    if (Array.isArray(rawdata)) {
-      list.value = rawdata.map((e: any) => {
-        return {
-          ...e,
-          ...e.readData,
-        };
-      });
-    } else {
-      list.value = [rawdata];
-    }
-    openModal();
+    list.value = get(props.data, readForm);
+    // openModal();
   }
+
+  const overlayStyle = computed(() => {
+    return {
+      maxWidth: '400px',
+      width: '400px',
+      maxHeight: '350px',
+      height: '350px',
+      backgroundImage: `url(${MonitorBarBG})`,
+      backgroundSize: `100% 100%`,
+    };
+  });
 </script>
 <style lang="less" scoped>
   .midback-info {
@@ -240,3 +256,10 @@
     align-items: center;
   }
 </style>
+<style>
+  .monitor-bar-overlay-nc9s .zxm-tooltip-inner {
+    background-color: transparent;
+    height: 330px;
+    overflow: auto;
+  }
+</style>

src/views/vent/home/configurable/components/detail/CustomTable.vue

@@ -182,6 +182,7 @@
       background-image: var(--image-content-body-d);
       background-size: 100% 100%;
       padding: 5px;
+      text-align: center;
       .table__content_list_row {
         height: 20%;
         margin: 0;