[Feat 0000]预警监测管控系统页面组件样式开发

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

@@ -8,10 +8,16 @@
     :class="{ 'cursor-pointer': !!moduleData.to }"
     @close="$emit('close')"
     @click="redirectTo"
+    :deviceType="deviceType"
   >
     <slot>
       <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
-      <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+      <Content
+        :deviceType="deviceType"
+        :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
+        :moduleData="moduleData"
+        :data="selectedData"
+      />
     </slot>
   </component>
 </template>

src/views/vent/home/configurable/components/content-warn.vue

@@ -34,7 +34,7 @@
           </div>
         </template>
         <template v-if="config.name === 'dz_list'">
-          <DzList :listOption="config.config.listOption" :listData="config.data"></DzList>
+          <DzList :deviceType="deviceType" :listOption="config.config.listOption" :listData="config.data"></DzList>
         </template>
         <template v-if="config.name === 'dz_card'">
           <DzCard :titleLeft="config.config.leftTitle" :titleRight="config.config.rightTitle" :paramData="config.data"></DzCard>
@@ -79,6 +79,7 @@ import { getData, getFormattedText } from '../hooks/helper';
 const props = defineProps<{
   data: any;
   moduleData: Config['moduleData'];
+  deviceType: string;
 }>();
 
 const { background, layout } = props.moduleData;
@@ -337,7 +338,6 @@ const layoutConfig = computed(() => {
   height: 100%;
   overflow-y: auto;
 }
-
 // .content__module:first-of-type {
 //   margin-top: 0;
 // }

src/views/vent/home/configurable/components/original/moduleLeft-warn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="visible" class="module-content">
+  <div v-if="visible" :class="deviceType === 'warnInfo' ? 'module-content1' : 'module-content'">
     <div v-if="title" class="module-content__title__expand">
       <span class="action-btn close-btn" @click="closeModel"></span>
       <span @click="clickHandler">{{ title }}</span>
@@ -10,8 +10,13 @@
   </div>
 </template>
 <script lang="ts" setup>
-defineProps<{ title: string; visible: boolean }>();
+const props = defineProps<{
+  deviceType: string;
+  title: string;
+  visible: boolean;
+}>();
 const emit = defineEmits(['close', 'click']);
+const deviceType = props.deviceType;
 
 function closeModel() {
   emit('close');
@@ -28,7 +33,16 @@ function clickHandler() {
     --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/model_original_title_bg.png');
   }
 }
-
+.module-content1 {
+  --bg-height: 28px;
+  color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  padding: 15px 15px 0px 15px;
+}
 .module-content {
   --bg-height: 28px;
   color: #fff;

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

@@ -19,7 +19,6 @@ let props = defineProps({
     },
   },
 });
-
 let riskPie = ref(null);
 let echartData = ref<any[]>([]);
 
@@ -115,25 +114,14 @@ function getOption() {
             },
           },
           label: {
-            show: true,
+            show: false,
             position: 'outside',
             textStyle: {
               color: '#fff',
               fontSize: 12,
             },
-            formatter: '{a|{b}：{d}%}\n{hr|}',
-            rich: {
-              hr: {
-                backgroundColor: 't',
-                borderRadius: 3,
-                width: 3,
-                height: 3,
-                padding: [3, 3, 0, -12],
-              },
-              a: {
-                padding: [-10, 5, -15, 5],
-              },
-            },
+            formatter: '',
+            rich: {},
           },
 
           labelLine: {
@@ -186,7 +174,7 @@ watch(
       top: 50%;
       transform: translate(-50%, -50%);
       width: 100%;
-      height: 80px;
+      height: 58px;
       background: var(--image-model_risk-center) no-repeat center;
       background-size: auto 100%;
     }

src/views/vent/home/configurable/configurable.data.ts

@@ -4224,7 +4224,7 @@ export const testConfigWarnMonitor: Config[] = [
     },
   },
   {
-    deviceType: 'fusionManageInfo',
+    deviceType: 'warnInfo',
     moduleName: '风险权重比例',
     pageType: '',
     moduleData: {
@@ -4269,13 +4269,13 @@ export const testConfigWarnMonitor: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:360px;height:240px;',
+      size: 'width:180px;height:180px;',
       version: '原版',
-      position: 'top:50px;left:450px',
+      position: 'top:70px;left:450px',
     },
   },
   {
-    deviceType: 'fusionManageInfo',
+    deviceType: 'deviceManageInfo',
     moduleName: '设备监测预警',
     pageType: 'fusion-warn-green',
     moduleData: {

src/views/vent/home/configurable/green/components/dz-list.vue

@@ -1,134 +1,193 @@
 <template>
-    <div class="dz-list">
-        <div class="icons-box" @mouseleave="resetScroll">
-            <template v-for="(item, key) in listOption" :key="key">
-                <div class="icon-item">
-                    <!-- <img :src="item.url" :alt="item.text" /> -->
-                    <div class="level-text">
-                        <div class="all-count">
-                            <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
-                            <span class="num-count">{{ listData[item.allCount] || 0 }}</span>
-                        </div>
-                        <div class="warn-count">
-                            <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
-                            <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ listData[item.warnCount] || 0
-                            }}</span>
-                        </div>
-                        <div class="close-count">
-                            <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
-                            <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ listData[item.closeCount] ||
-                                0
-                            }}</span>
-                        </div>
-                    </div>
-                </div>
-            </template>
+  <div class="dz-list">
+    <div :class="deviceType == 'deviceManageInfo' ? 'icons-box1' : 'icons-box'" @mouseleave="resetScroll">
+      <template v-for="(item, key) in listOption" :key="key">
+        <div class="icon-item">
+          <!-- <img :src="item.url" :alt="item.text" /> -->
+          <div class="level-text">
+            <div class="all-count">
+              <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
+              <span class="num-count">{{ listData[item.allCount] || 0 }}</span>
+            </div>
+            <div class="warn-count">
+              <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
+              <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ listData[item.warnCount] || 0 }}</span>
+            </div>
+            <div class="close-count">
+              <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
+              <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ listData[item.closeCount] || 0 }}</span>
+            </div>
+          </div>
         </div>
+      </template>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch } from 'vue';
 
 let props = defineProps({
-    listOption: {
-        type: Object,
-        default: () => {
-            return {}
-        }
+  listOption: {
+    type: Object,
+    default: () => {
+      return {};
     },
-    listData: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-})
-
+  },
+  listData: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  deviceType: {
+    type: String,
+    default: '',
+  },
+});
 
 const resetScroll = (e: Event) => {
-    if (e.target && e.target) (e.target as Element).scrollTop = 0;
+  if (e.target && e.target) (e.target as Element).scrollTop = 0;
 };
 
-watch(() => props.listData, (newV, oldV) => {
-    console.log(newV, '设备')
-}, { immediate: true, deep: true })
+watch(
+  () => props.listData,
+  (newV, oldV) => {
+    console.log(newV, '设备');
+  },
+  { immediate: true, deep: true }
+);
 </script>
 
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
 @{theme-deepblue} {
-    .dz-list {
-        --image-model_icon-item: url('@/assets/images/themify/deepblue/home-container/configurable/1600.png');
-    }
+  .dz-list {
+    --image-model_icon-item: url('@/assets/images/themify/deepblue/home-container/configurable/1600.png');
+  }
 }
-
 .dz-list {
-    --image-model_icon-item: url('@/assets/images/home-green/1600.png');
+  --image-model_icon-item: url('@/assets/images/home-green/1600.png');
+  width: 100%;
+  height: 100%;
+}
+
+.icons-box {
+  height: 100%;
+  overflow-y: hidden;
 
+  &:hover {
+    overflow-y: auto;
+    overflow-x: auto;
+  }
+
+  .icon-item {
+    position: relative;
     width: 100%;
-    height: 100%;
+    height: 46px;
+    background: var(--image-model_icon-item) no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 5px auto;
+
+    &:nth-child(even) {
+      padding-right: 0px;
+    }
 
-    .icons-box {
-        height: 100%;
-        overflow-y: hidden;
+    .level-text {
+      width: 76%;
+      display: flex;
+      justify-content: space-around;
+      position: absolute;
+      top: 10px;
+      left: 76px;
+      color: #ffffffe0;
+      font-size: 14px;
+      text-align: center;
+      letter-spacing: 1px;
+
+      .num-count,
+      .num-count1 {
+        font-family: 'douyuFont';
+        font-size: 12px;
+      }
+
+      .warn-count,
+      .close-count {
+        .num-count {
+          color: #ffffffe0;
+        }
 
-        &:hover {
-            overflow-y: auto;
-            overflow-x: auto;
+        .num-count1 {
+          color: #ff0000;
         }
+      }
+    }
 
-        .icon-item {
-            position: relative;
-            width: 100%;
-            height: 46px;
-            background: var(--image-model_icon-item) no-repeat;
-            background-size: 100% 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 5px auto;
-
-            &:nth-child(even) {
-                padding-right: 0px;
-            }
-
-            .level-text {
-                width: 76%;
-                display: flex;
-                justify-content: space-around;
-                position: absolute;
-                top: 10px;
-                left: 76px;
-                color: #ffffffe0;
-                font-size: 14px;
-                text-align: center;
-                letter-spacing: 1px;
-
-                .num-count,
-                .num-count1 {
-                    font-family: 'douyuFont';
-                    font-size: 12px;
-                }
-
-                .warn-count,
-                .close-count {
-                    .num-count {
-                        color: #ffffffe0;
-                    }
-
-                    .num-count1 {
-                        color: #ff0000;
-                    }
-                }
-            }
-
-            img {
-                width: 100%;
-                height: 60px;
-            }
+    img {
+      width: 100%;
+      height: 60px;
+    }
+  }
+}
+.icons-box1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  overflow-y: hidden;
+  padding: 5px;
+  box-sizing: border-box;
+  &:hover {
+    overflow-y: auto;
+  }
+
+  .icon-item {
+    flex: 0 0 calc(50% - 5px);
+    height: 46px;
+    background: var(--image-model_icon-item) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .level-text {
+      width: 76%;
+      display: flex;
+      justify-content: space-around;
+      position: absolute;
+      top: 10px;
+      left: 76px;
+      color: #ffffffe0;
+      font-size: 14px;
+      text-align: center;
+      letter-spacing: 1px;
+      .num-count,
+      .num-count1 {
+        font-family: 'douyuFont';
+        font-size: 12px;
+      }
+
+      .warn-count,
+      .close-count {
+        .num-count {
+          color: #ffffffe0;
+        }
+
+        .num-count1 {
+          color: #ff0000;
         }
+      }
+    }
+    img {
+      width: 100%;
+      height: 60px;
     }
+  }
 }
 </style>

src/views/vent/monitorManager/windrectMonitor/index.vue

@@ -350,7 +350,7 @@ async function getMonitor(flag?: boolean) {
           console.error('Error', error);
         } finally {
           timer = null;
-          getMonitor(flag);
+          getMonitor(false);
         }
       },
       flag ? 0 : 1000