Parcourir la source

多灾融合预警绿色版本更新

lxh il y a 1 semaine
Parent
commit
9f966f9811

+ 5 - 5
src/views/vent/home/configurable/configurable.data.ts

@@ -2829,7 +2829,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+     to:'/ventilate/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -3052,7 +3052,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+     to:'/device/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -3134,7 +3134,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+      to:'/fire/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -3230,7 +3230,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+     to:'/dust/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -3298,7 +3298,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      // mock: BDfireMock,
+       to:'/gas/warn/home',
     },
     showStyle: {
       size: 'width:990px;height:170px;',

+ 46 - 15
src/views/vent/home/configurable/green/components/center-area-green.vue

@@ -9,7 +9,7 @@
             </div>
             <div class="dust-warn">
                 <div class="dust-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('dust')">
                     <div class="ite-label">粉尘监测预警</div>
                     <div class="ite-val">{{ paramDatas.fc == 0
                         ? '低风险'
@@ -28,7 +28,7 @@
             </div>
             <div class="vent-warn">
                 <div class="vent-icon"></div>
-                <div class="item-content">
+                <div class="item-content"  @click="showModal('vent')">
                     <div class="ite-label">通风监测预警</div>
                     <div class="ite-val">{{ paramDatas.tf == 0
                         ? '低风险'
@@ -48,7 +48,7 @@
             <div class="gas-warn">
                 <div class="gas-icon"></div>
                 <div class="item-content1">
-                    <div class="ite-content">
+                    <div class="ite-content" @click="showModal('gas')">
                         <div class="ite-label">瓦斯监测预警</div>
                         <div class="ite-val">{{ paramDatas.ws == 0
                             ? '低风险'
@@ -72,7 +72,7 @@
             </div>
             <div class="device-warn">
                 <div class="device-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('sbyj')">
                     <div class="ite-label">设备监测预警</div>
                     <div class="ite-val">{{ paramDatas.sb == 0
                         ? '低风险'
@@ -91,7 +91,7 @@
             </div>
             <div class="fire-warn">
                 <div class="fire-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('fire')" >
                     <div class="ite-label">火灾监测预警</div>
                     <div class="ite-val">{{ paramDatas.fire == 0
                         ? '低风险'
@@ -110,14 +110,14 @@
             </div>
             <div class="db-warn">
                 <div class="db-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('Minepressure')">
                     <div class="ite-label">顶板</div>
                     <div class="ite-val">低风险</div>
                 </div>
             </div>
             <div class="sz-warn">
                 <div class="sz-icon"></div>
-                <div class="item-content">
+                <div class="item-content" @click="showModal('waterLevel')">
                     <div class="ite-label">水灾</div>
                     <div class="ite-val">低风险</div>
                 </div>
@@ -131,6 +131,7 @@
 
 <script lang="ts" setup>
 import { reactive, watch } from 'vue'
+ import { useRouter } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
 import RiskWarnLevel from './dz-risk.vue'
 let props = defineProps({
@@ -141,9 +142,39 @@ let props = defineProps({
         }
     }
 })
+
+let router = useRouter();
 let paramDatas = reactive<any>({})
 const { sysOrgCode, sysDataType } = useGlobSetting();
 
+//跳转详情
+  function showModal(data) {
+    switch (data) {
+      case 'vent':
+        router.push('/ventilate/warn/home');
+        break;
+      case 'fire':
+        router.push('/fire/warn/home');
+        break;
+      case 'dust':
+        router.push('/dust/warn/home');
+        break;
+      case 'waterLevel':
+        console.log('waterLevel');
+        router.push('/warn/waterLevel/home');
+        break;
+      case 'gas':
+        router.push('/gas/warn/home');
+        break;
+      case 'sbyj':
+        router.push('/device/warn/home');
+        break;
+      case 'Minepressure':
+        router.push('/monitorChannel/monitor-Minepressure');
+        break;
+    }
+  }
+
 watch(() => props.paramData, (newV, oldV) => {
     paramDatas = newV
 }, { immediate: true, deep: true })
@@ -186,15 +217,15 @@ watch(() => props.paramData, (newV, oldV) => {
         position: relative;
         width: 100%;
         height: calc(100% - 30px);
-        margin-top: 30px;
+        margin-top: 60px;
         background: var(--image-model_container_img) no-repeat center;
         background-size: 100% 100%;
     }
 
     .risk-echartbox {
         position: absolute;
-        left: 18px;
-        top: -52px;
+        left: 0px;
+        top: -72px;
         width: 220px;
         height: 170px;
     }
@@ -202,7 +233,7 @@ watch(() => props.paramData, (newV, oldV) => {
     .risk-score {
         position: absolute;
         left: 50%;
-        top: -46px;
+        top: -65px;
         transform: translate(-44%, 0);
         width: 206px;
         height: 60px;
@@ -245,8 +276,8 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .gas-warn {
         position: absolute;
-        left: 414px;
-        top: 416px;
+      left: 420px;
+    top: 436px;
         width: 132px;
         height: 108px;
         background: var(--image-model_gas_warn) no-repeat;
@@ -265,7 +296,7 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .fire-warn {
         position: absolute;
-        right: 142px;
+           right: 178px;
         top: 58px;
         width: 132px;
         height: 108px;
@@ -285,7 +316,7 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .sz-warn {
         position: absolute;
-        right: -2px;
+        right:34px;
         top: 136px;
         width: 132px;
         height: 108px;

+ 31 - 14
src/views/vent/home/configurable/green/components/dz-card.vue

@@ -4,20 +4,26 @@
       <div class="gas-item">
         <div class="detail-box">
           <div class="detail-container">
-            <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
-              <div class="item-box">
-                <div class="item-box-label">{{ titleLeft.address }}</div>
-                <div class="item-box-val">{{ item.value1 || '-' }}</div>
-              </div>
-              <div class="item-box">
-                <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
-                <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
-              </div>
-              <div class="item-box">
-                <div class="item-box-label">{{ titleLeft.smoke }}</div>
-                <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
+
+            <vue3-seamless-scroll hover-stop="true" :list="infoData.dataOn" :hover="true" :step="0.18"
+              class="seamless-warp">
+              <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
+                <div class="item-box">
+                  <div class="item-box-label">{{ titleLeft.address }}</div>
+                  <div class="item-box-val">{{ item.value1 || '-' }}</div>
+                </div>
+                <div class="item-box">
+                  <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
+                  <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
+                </div>
+                <div class="item-box">
+                  <div class="item-box-label">{{ titleLeft.smoke }}</div>
+                  <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
+                </div>
               </div>
-            </div>
+            </vue3-seamless-scroll>
+
+
           </div>
         </div>
       </div>
@@ -51,6 +57,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive, watch } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 
 let props = defineProps({
   titleLeft: {
@@ -107,6 +114,7 @@ watch(
   position: absolute;
   left: 0;
   top: 86px;
+
   .gas-box {
     display: flex;
     justify-content: center;
@@ -135,7 +143,12 @@ watch(
 
         .detail-container {
           height: 100%;
-          overflow-y: auto;
+          //overflow-y: auto;
+          .seamless-warp {
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+          }
 
           .detail-item {
             width: 100%;
@@ -186,6 +199,7 @@ watch(
     }
   }
 }
+
 .dzCard1 {
   --image-model_gas_item: url('@/assets/images/home-green/900.png');
   --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
@@ -205,6 +219,7 @@ watch(
       width: 50%;
       height: 100%;
       margin: 0px 5px;
+
       &:nth-child(1) {
         background: var(--image-model_fire_item) no-repeat;
         background-size: 100% 100%;
@@ -214,6 +229,7 @@ watch(
         background: var(--image-model_fire_item) no-repeat;
         background-size: 100% 100%;
       }
+
       .detail-box {
         position: relative;
         height: 100%;
@@ -222,6 +238,7 @@ watch(
         .detail-container {
           height: 100%;
           overflow-y: hidden;
+
           &:hover {
             overflow-y: auto;
           }