[Pref 0000] 可配置首页及地图样式优化以及逻辑交互优化

src/components/Configurable/ModulePrimary.vue

@@ -6,7 +6,7 @@
           {{ moduleName }}
         </div>
         <div class="navL-slot" v-if="header.show && header.slot.show">
-          (总计:{{ getFormattedText(selectedDevice, header.slot.value) }})
+          {{ getFormattedText(selectedDevice, header.slot.value) }}
         </div>
       </div>
 
@@ -18,7 +18,6 @@
             size="small"
             placeholder="请选择"
             v-model:value="selectedDeviceID"
-            allowClear
             :options="options"
             @change="selectHandler"
           />
@@ -65,7 +64,6 @@
     return size + position;
   });
 
-
   //下拉框选项切换
   function selectHandler(id) {
     selectedDeviceID.value = id;
@@ -97,14 +95,15 @@
 
   .module-primary {
     --image-module-title: url('/@/assets/images/sealedGoaf/views/home/module-title.png');
-
     position: absolute;
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
     background-position: center top;
     background-size: 100% auto;
-    z-index: 2;
+    z-index: @layout-basic-z-index;
+    // 不允许点击穿透，防止点击穿透到地图
+    pointer-events: all;
 
     .module-title {
       display: flex;
@@ -125,7 +124,7 @@
         .navL-title {
           font-weight: 600;
         }
-        .navL-slot{
+        .navL-slot {
           padding-left: 20px;
         }
       }
@@ -134,31 +133,31 @@
         margin-top: -15px;
       }
       .common-navR-select {
-      :deep(.ant-select) {
-        .ant-select-selector {
-          background-color: #2b6ff0;
-          font-size: 16px;
-          cursor: pointer;
-          width: auto;
-          height: 32px;
-        }
-        .ant-select-selection-placeholder {
-          display: flex;
-          align-items: center;
-          color: #fff;
-        }
-        .ant-select-selection-search-input {
-          height: 100%;
-        }
-        .ant-select-selection-item{
-          color: #fff;
-        }
-        .ant-select-arrow{
-          color: #fff;
+        :deep(.ant-select) {
+          .ant-select-selector {
+            background-color: #2b6ff0;
+            font-size: 16px;
+            cursor: pointer;
+            width: auto;
+            height: 32px;
+          }
+          .ant-select-selection-placeholder {
+            display: flex;
+            align-items: center;
+            color: #fff;
+          }
+          .ant-select-selection-search-input {
+            height: 100%;
+          }
+          .ant-select-selection-item {
+            color: #fff;
+          }
+          .ant-select-arrow {
+            color: #fff;
+          }
         }
       }
     }
-    }
 
     .module-content {
       height: calc(100% - 38px);

src/components/Configurable/detail/CustomChart.vue

@@ -415,9 +415,9 @@
         legend: baseSeries.map((e) => {
           return {
             orient: 'vertical',
-            left: '54%',
-            top: '20%',
-            itemGap: 34,
+            right: '5%',
+            top: 'middle',
+            itemGap: 20,
             itemWidth: 10,
             itemHeight: 10,
             align: 'left',
@@ -462,7 +462,7 @@
             itemStyle: {
               opacity: 0.7,
             },
-            padAngle: 5,
+            // padAngle: 5,
             data: serie.data.map((e) => ({
               name: `${e[0]}： ${e[1]}`,
               value: e[1],
@@ -483,7 +483,7 @@
             tooltip: {
               show: false,
             },
-            padAngle: 6,
+            // padAngle: 6,
             data: serie.data.map((e) => ({
               name: `${e[0]}： ${e[1]}`,
               value: e[1],
@@ -494,7 +494,6 @@
       };
     }
 
-
     // 柱状图
     if (type === 'bar') {
       return {

src/components/Configurable/detail/CustomTable.vue

@@ -74,7 +74,7 @@
         font-size: 14px;
       }
     }
-    
+
     .table__content_list {
       height: calc(100% - 32px);
       width: 400px;
@@ -102,8 +102,13 @@
       background-size: 100% 100%;
       background-repeat: no-repeat;
       color: #000000;
+      width: 100%;
+      padding-left: 10px;
     }
+
     .table__content_list_A {
+      width: 100%;
+      padding-left: 10px;
       font-weight: bold;
       font-size: 24px;
     }

src/design/color.less

@@ -15,6 +15,8 @@ html {
 
 @content-bg: #f4f7f9;
 
+@map-bg: #e6f3ff;
+
 // :export {
 //   name: "less";
 //   mainColor: @mainColor;

src/design/var/index.less

@@ -39,6 +39,10 @@
 
 @page-footer-z-index: 99;
 
+@layout-basic-z-index: 2;
+
+@simple-map-z-index: 1;
+
 .bem(@n; @content) {
   @{namespace}-@{n} {
     @content();

src/layouts/default/feature/SimpleMap.vue

@@ -18,7 +18,7 @@
     custom: {
       name: '基准瓦片',
       layer: null,
-      url: 'https://shaanxizhxx.chinamine-safety.gov.cn/zh1/{y}/{x}/{z}.png',
+      url: 'https://shaanxizhxx.chinamine-safety.gov.cn/zh1/8/33/17.png',
       options: {
         maxZoom: 18,
         attribution: '',
@@ -63,7 +63,8 @@
     initTileLayers();
 
     // 默认显示自定义底图
-    tileLayers.satellite.layer.addTo(map);
+    tileLayers.custom.layer.addTo(map);
+    // tileLayers.satellite.layer.addTo(map);
 
     initGeoJSON();
   }
@@ -87,7 +88,7 @@
   }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
   .map-container {
     flex: 1;
     height: 100%;
@@ -95,6 +96,6 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1;
+    z-index: @simple-map-z-index;
   }
 </style>

src/layouts/default/header/index.vue

@@ -192,7 +192,7 @@
     height: @header-height;
     align-items: center;
     position: relative;
-    z-index: 2;
+    z-index: @layout-basic-z-index;
 
     .headerIntroductionClass {
       margin-right: 4px;

src/layouts/default/index.vue

@@ -89,7 +89,7 @@
       margin: 10px;
       background-color: transparent;
       position: relative;
-      z-index: 2;
+      z-index: @layout-basic-z-index;
     }
 
     &-main {
@@ -98,8 +98,8 @@
       border-bottom-right-radius: 10px;
       // background-color: #aaaaaa32;
       background: rgba(255, 255, 255, 0.2);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(14px);
+      // -webkit-backdrop-filter: blur(10px);
       // 代码逻辑说明:【issues/8709】LayoutContent样式多出1px
       // margin-left: 1px;
     }

src/layouts/default/PlainLayout.vue → src/layouts/default/plain.vue

@@ -77,7 +77,7 @@
       margin: 10px;
       background-color: transparent;
       position: relative;
-      z-index: 2;
+      z-index: @layout-basic-z-index;
     }
 
     &-main {

src/layouts/page/index.vue

@@ -221,7 +221,7 @@
 
   .effect-tip {
     position: relative;
-    z-index: 2;
+    z-index: @layout-basic-z-index;
     text-align: center;
     pointer-events: none;
     p {

src/views/dashboard/SealedGoaf/configurable.data.sealedGoaf.ts

@@ -11,7 +11,7 @@ export const testConfigSealedGoaf: Config[] = [
         show: true,
         readFrom: '',
         selector: { show: false, value: '' },
-        slot: { show: true, value: '365' },
+        slot: { show: true, value: '(总计:365)' },
       },
       background: { show: false, type: 'video', link: '' },
       layout: {
@@ -60,10 +60,9 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:220px;',
+      size: 'width:440px;height:200px;',
       version: '原版',
-      position: 'top:80px;left:20px;',
-      headerPosition: 'centerBottom',
+      position: 'top:20px;left:10px;',
     },
   },
   // 2. 当日生产状态
@@ -76,7 +75,7 @@ export const testConfigSealedGoaf: Config[] = [
         show: true,
         readFrom: '',
         selector: { show: false, value: '' },
-        slot: { show: true, value: '211' },
+        slot: { show: true, value: '(总计:211)' },
       },
       background: { show: false, type: 'video', link: '' },
       layout: {
@@ -117,9 +116,9 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:160px;',
+      size: 'width:440px;height:150px;',
       version: '原版',
-      position: 'top:300px;left:20px;',
+      position: 'top:220px;left:10px;',
     },
   },
   // 3. 煤层自燃倾向性
@@ -179,15 +178,14 @@ export const testConfigSealedGoaf: Config[] = [
       },
     },
     showStyle: {
-      size: 'width:440px;height:280px;',
+      size: 'width:440px;height:200px;',
       version: '原版',
-      position: 'top:460px;left:20px;',
-      headerPosition: 'centerBottom',
+      position: 'top:370px;left:10px;',
     },
   },
   // 4. 联网状态
   {
-    deviceType: '',
+    deviceType: 'isOnline',
     moduleName: '联网状态',
     pageType: 'sealed_goaf',
     moduleData: {
@@ -196,7 +194,7 @@ export const testConfigSealedGoaf: Config[] = [
         readFrom: '',
         selector: {
           show: true,
-          value: '',
+          value: '${pos}',
         },
         slot: {
           show: false,
@@ -213,12 +211,12 @@ export const testConfigSealedGoaf: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '40%',
+            basis: '50%',
             overflow: true,
           },
           {
             name: 'table',
-            basis: '60%',
+            basis: '50%',
             overflow: true,
           },
         ],
@@ -284,74 +282,79 @@ export const testConfigSealedGoaf: Config[] = [
       complex_list: [],
       preset: [],
       mock: {
-        boardArray: [
-          {
-            label: '低风险',
-            value: '210',
-          },
-          {
-            label: '一般风险',
-            value: '27',
-          },
-          {
-            label: '较高风险',
-            value: '17',
-          },
-          {
-            label: '高风险',
-            value: '1',
-          },
-        ],
-        tableArray: [
-          {
-            index: '执法一处',
-            yjr: '50',
-            zx: '20',
-            zd: '0',
-            wjr: '0',
-          },
-          {
-            index: '执法二处',
-            yjr: '50',
-            zx: '20',
-            zd: '0',
-            wjr: '0',
-          },
-          {
-            index: '执法三处',
-            yjr: '50',
-            zx: '20',
-            zd: '0',
-            wjr: '0',
-          },
-          {
-            index: '执法四处',
-            yjr: '50',
-            zx: '20',
-            zd: '0',
-            wjr: '0',
-          },
-          {
-            index: '执法五处',
-            yjr: '50',
-            zx: '20',
-            zd: '0',
-            wjr: '0',
-          },
-          {
-            index: '执法六处',
-            yjr: '50',
-            zx: '20',
-            zd: '0',
-            wjr: '0',
+        isOnline: [
+          {
+            pos: '生成矿井',
+            boardArray: [
+              {
+                label: '低风险',
+                value: '210',
+              },
+              {
+                label: '一般风险',
+                value: '27',
+              },
+              {
+                label: '较高风险',
+                value: '17',
+              },
+              {
+                label: '高风险',
+                value: '1',
+              },
+            ],
+            tableArray: [
+              {
+                index: '执法一处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法二处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法三处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法四处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法五处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法六处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+            ],
           },
         ],
       },
     },
     showStyle: {
-      size: 'width:440px;height:400px;',
+      size: 'width:440px;height:280px;',
       version: '原版',
-      position: 'bottom:30px;left:20px;',
+      position: 'top:570px;left:10px;',
     },
   },
   // 5. 密闭情况总览
@@ -369,7 +372,7 @@ export const testConfigSealedGoaf: Config[] = [
         },
         slot: {
           show: true,
-          value: '211',
+          value: '(总计:211)',
         },
       },
       background: {
@@ -518,7 +521,7 @@ export const testConfigSealedGoaf: Config[] = [
       },
     },
     showStyle: {
-      size: 'width:440px;height:400px;',
+      size: 'width:440px;height:330px;',
       version: '原版',
       position: 'top:20px;right:10px;',
     },
@@ -534,11 +537,11 @@ export const testConfigSealedGoaf: Config[] = [
         readFrom: '',
         selector: {
           show: true,
-          value: '',
+          value: '${pos}',
         },
         slot: {
           show: true,
-          value: '200',
+          value: '(总计:200)',
         },
       },
       background: {
@@ -551,12 +554,12 @@ export const testConfigSealedGoaf: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '40%',
+            basis: '50%',
             overflow: true,
           },
           {
             name: 'table',
-            basis: '60%',
+            basis: '50%',
             overflow: true,
           },
         ],
@@ -622,67 +625,72 @@ export const testConfigSealedGoaf: Config[] = [
       complex_list: [],
       preset: [],
       mock: {
-        boardArray: [
-          {
-            label: '低风险',
-            value: '210',
-          },
-          {
-            label: '一般风险',
-            value: '27',
-          },
-          {
-            label: '较高风险',
-            value: '17',
-          },
-          {
-            label: '高风险',
-            value: '1',
-          },
-        ],
-        tableArray: [
-          {
-            index: '执法一处',
-            dfx: '50',
-            ybfx: '20',
-            jgfx: '0',
-            gfx: '0',
-          },
-          {
-            index: '执法二处',
-            dfx: '50',
-            ybfx: '20',
-            jgfx: '0',
-            gfx: '0',
-          },
-          {
-            index: '执法三处',
-            dfx: '50',
-            ybfx: '20',
-            jgfx: '0',
-            gfx: '0',
-          },
-          {
-            index: '执法四处',
-            dfx: '50',
-            ybfx: '20',
-            jgfx: '0',
-            gfx: '0',
-          },
-          {
-            index: '执法五处',
-            dfx: '50',
-            ybfx: '20',
-            jgfx: '0',
-            gfx: '0',
+        goafMonitoring: [
+          {
+            pos: '自燃',
+            boardArray: [
+              {
+                label: '低风险',
+                value: '210',
+              },
+              {
+                label: '一般风险',
+                value: '27',
+              },
+              {
+                label: '较高风险',
+                value: '17',
+              },
+              {
+                label: '高风险',
+                value: '1',
+              },
+            ],
+            tableArray: [
+              {
+                index: '执法一处',
+                dfx: '50',
+                ybfx: '20',
+                jgfx: '0',
+                gfx: '0',
+              },
+              {
+                index: '执法二处',
+                dfx: '50',
+                ybfx: '20',
+                jgfx: '0',
+                gfx: '0',
+              },
+              {
+                index: '执法三处',
+                dfx: '50',
+                ybfx: '20',
+                jgfx: '0',
+                gfx: '0',
+              },
+              {
+                index: '执法四处',
+                dfx: '50',
+                ybfx: '20',
+                jgfx: '0',
+                gfx: '0',
+              },
+              {
+                index: '执法五处',
+                dfx: '50',
+                ybfx: '20',
+                jgfx: '0',
+                gfx: '0',
+              },
+            ],
           },
         ],
       },
     },
     showStyle: {
-      size: 'width:440px;height:400px;',
+      size: 'width:440px;height:280px;',
       version: '原版',
-      position: 'top:430px;right:10px;',
+      position: 'top:350px;right:10px;',
     },
   },
   // 7. 当日报警情况统计
@@ -767,10 +775,9 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:250px;',
+      size: 'width:440px;height:230px;',
       version: '原版',
-      position: 'bottom:20px;right:10px;',
+      position: 'top:630px;right:10px;',
     },
   },
 ];
-

src/views/dashboard/SealedGoaf/index.vue

@@ -1,23 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="company-home">
-    <div class="title-select-area">
-      <Select
-        @change="handleDeviceChange"
-        :options="selectorOptions"
-        :fieldNames="fieldNames"
-        v-model:value="deviceId"
-        style="width: 200px; color: black"
-        class="title-select"
-        :dropdownStyle="{
-          width: '380px',
-          background: 'transparent',
-          borderBottom: '1px solid #ececec66',
-          backdropFilter: 'blur(50px)',
-          color: '#fff',
-        }"
-      />
-    </div>
     <!-- 渲染所有模块 -->
     <ModulePrimary
       v-for="cfg in cfgs"
@@ -29,34 +12,21 @@
       :data="data"
       :visible="true"
     />
-
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted, ref } from 'vue';
-  import { Select } from 'ant-design-vue';
+  import { computed, onMounted, onUnmounted } from 'vue';
   import { useInitConfigs, useInitPage } from '@/components/Configurable/hooks/useInit';
   import { testConfigSealedGoaf } from './configurable.data.sealedGoaf';
   import ModulePrimary from '/@/components/Configurable/ModulePrimary.vue';
   import { useGlobSetting } from '/@/hooks/setting';
 
-
   const { title = '省局采空区密闭监测与分析系统' } = useGlobSetting();
-  const { data, updateData, mainTitle } = useInitPage(title);
+  const { data } = useInitPage(title);
 
   const cfgs = computed(() => configs.value);
   const { configs, fetchConfigs } = useInitConfigs();
 
-  const deviceId = ref('0'); // 当前选中设备ID
-  const fieldNames = { label: 'name', value: 'id' }; // 下拉框字段映射
-  const selectorOptions = ref([
-    { name: '采空区密闭分析', id: '0' },
-    { name: '采空区密闭监测', id: '1' },
-  ]);
-  // 切换设备事件
-  function handleDeviceChange(param) {
-    console.log('切换下拉框选项');
-  }
   onMounted(() => {
     fetchConfigs('sealed_goaf').then(() => {
       configs.value = testConfigSealedGoaf;
@@ -74,39 +44,15 @@
     src: url('/@/assets/font/douyuFont.otf');
   }
   .company-home {
-    --image-module-title: url('/@/assets/images/sealedGoaf/views/home/module-title.png');
-    --image-home-bg: url('/@/assets/images/sealedGoaf/views/home/home-bg.png');
+    position: absolute;
     width: 100%;
     height: 100%;
     color: @white;
-    position: relative;
-    background: var(--image-home-bg) no-repeat;
+    background-image: linear-gradient(90deg, @map-bg 0%, @map-bg 14%, transparent 50%, @map-bg 86%, @map-bg 100%);
+    background-repeat: no-repeat;
     background-size: 100% 100%;
-    
-    .title-select-area {
-      display: inline-block;
-      position: absolute;
-      top: 15px;
-      left: 20px;
-      :deep(.title-select) {
-        .ant-select-selector {
-          width: 300px;
-          background-color: #2b6ff0;
-          box-shadow: none !important;
-          border: 1px solid #b3d8ff;
-          border-radius: 4px; /* 圆角 */
-          font-size: 16px;
-          color: #fff; /* 文字颜色 */
-          cursor: pointer;
-          width: auto;
-        }
-        .ant-select-selection-item{
-          color: #fff;
-        }
-        .ant-select-arrow{
-          color: #fff;
-        }
-      }
-    }
+    z-index: @layout-basic-z-index;
+    // 允许点击穿透以支持下面的地图进行交互
+    pointer-events: none;
   }
 </style>

src/views/system/loginmini/MiniRegister.vue

@@ -279,7 +279,7 @@
   @import '/@/assets/loginmini/style/base.less';
   .aui-input-line .aui-icon {
     position: absolute;
-    z-index: 2;
+    z-index: @layout-basic-z-index;
     top: 10px;
     left: 10px;
     font-size: 20px !important;