提交新版本

package.json

@@ -36,7 +36,7 @@
     "type:check": "vue-tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "^6.1.0",
+    "@ant-design/icons-vue": "^7.0.1",
     "@iconify/iconify": "^3.1.1",
     "@logicflow/core": "^1.2.9",
     "@logicflow/extension": "^1.2.9",

src/views/vent/dust/dustHome/components/multipleDust.vue

@@ -18,10 +18,10 @@ let props = defineProps({
 })
 
 let gridV = reactive({
-    top: '8%',
+    top: '12%',
     left: '6%',
     right: '4%',
-    bottom: '14%',
+    bottom: '15%',
 })
 
 let echartDatas = reactive({

src/views/vent/dust/dustHome/index.vue

@@ -41,10 +41,18 @@
       <div :class="isShow ? 'center-area' : 'center-area1'">
         <div :class="isShow ? 'center-t' : 'center-t1'">
           <div class="center-scalc" @click="getScalc">
-            <div class="scalc-line"></div>
-            <div class="scalc-line"></div>
-            <div class="scalc-line"></div>
+            <div  :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
+            <div  :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
+            <div  :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
+            <div :class="toggleOpen ? 'scalc-btn1' : 'scalc-btn'" @click="getScalc1">
+            <ExpandOutlined  class="scalc-icon" />
+            </div>
+            <div :class="toggleOpen ? 'scalc-btn2' : 'scalc-btn'">
+              <InfoCircleOutlined  class="scalc-icon" />
+            </div>
           </div>
+           
+
           <iframe src="http://172.16.253.23:91/valkyrja/?type=tf" width="100%" height="100%" frameborder="0"></iframe>
         </div>
         <transition name="fade" mode="out-in">
@@ -87,6 +95,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { ExpandOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
 import DanelBd from '../../common/danelBd.vue';
 import workJc from '../../fire/fireHome/components/workJc.vue';
 import multipleDust from './components/multipleDust.vue';
@@ -102,6 +111,8 @@ import {
   getDustWarningCntByType,
   getGzmMaxBySensorType
 } from './dustHome.api';
+//GIs按钮切换显示与隐藏
+let toggleOpen = ref(false)
 //是否显示左侧区域和右侧区域
 let isShow = ref(true);
 
@@ -129,11 +140,11 @@ let pwData = reactive<any[]>([]);
 
 //粉尘关联指标数据
 let dustGlzbData = reactive<any[]>([
-  {label:'最高温度(°C)',val:''},
-  {label:'环境湿度(%)',val:''},
-  {label:'风速(m/s)',val:''},
-  {label:'水压(Mpa)',val:'10'},
-  {label:'水阀',val:'-'},
+  { label: '最高温度(°C)', val: '' },
+  { label: '环境湿度(%)', val: '' },
+  { label: '风速(m/s)', val: '' },
+  { label: '水压(Mpa)', val: '10' },
+  { label: '水阀', val: '--' },
 ]);
 
 //粉尘静态指标数据
@@ -146,6 +157,9 @@ let jtzbCode = ref('0');
 
 //隐藏和显示左右侧区域
 function getScalc() {
+  toggleOpen.value = !toggleOpen.value
+}
+function getScalc1(){
   isShow.value = !isShow.value;
 }
 
@@ -283,9 +297,15 @@ async function getRealDataList() {
 async function getGzmMaxBySensorTypeList() {
   let res = await getGzmMaxBySensorType()
   if (res.length != 0) {
-    dustGlzbData[0]['val']=res.filter(v=>v.sensorType=='M0201')[0]['value'] || '-'
-    dustGlzbData[1]['val']=res.filter(v=>v.sensorType=='M0202')[0]['value'] || '-'
-    dustGlzbData[2]['val']=res.filter(v=>v.sensorType=='M0302')[0]['value'] || '-'
+    res.forEach(el => {
+      if (el.sensorType == 'M0201') {
+        dustGlzbData[0]['val'] = el.value || '--'
+      } else if (el.sensorType == 'M0202') {
+        dustGlzbData[1]['val'] = el.value || '--'
+      } else if (el.sensorType == 'M0302') {
+        dustGlzbData[2]['val'] = el.value || '--'
+      }
+    })
   }
 }
 
@@ -425,9 +445,10 @@ onUnmounted(() => {
         .center-scalc {
           position: absolute;
           top: 0;
-          left: 0;
+          right: 0;
           width: 44px;
           height: 44px;
+          transition: -webkit-transform .5s ease-in-out .5s;
           border-radius: 50%;
           background-color: #000;
           box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
@@ -435,10 +456,12 @@ onUnmounted(() => {
 
           .scalc-line {
             position: absolute;
+            z-index: 1000;
             left: 50%;
             width: 22px;
             height: 3px;
             transform: translate(-50%, 0);
+            transition: all .4s linear .1s;
             background-color: #fff;
 
             &:nth-child(1) {
@@ -454,6 +477,109 @@ onUnmounted(() => {
             }
 
           }
+
+          .scalc-line1 {
+            position: absolute;
+            z-index: 1000;
+            width: 22px;
+            height: 3px;
+            transition: all .4s linear .1s;
+            background-color: #fff;
+
+            &:nth-child(1) {
+              top: 20px;
+              left: 26%;
+              transform: rotate(45deg);
+            }
+
+            &:nth-child(2) {
+              top: 20px;
+              left: 26%;
+              transform: rotate(-45deg);
+            }
+
+            &:nth-child(3) {
+              display: none
+            }
+
+          }
+
+          .scalc-btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 44px;
+            height: 44px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              display: none;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+
+            }
+          }
+
+          .scalc-btn1 {
+            position: absolute;
+            top: 10px;
+            right: 70px;
+            width: 34px;
+            height: 34px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+
+            }
+
+            &:hover {
+              animation: harlem-data .5s linear forwards;
+            }
+          }
+
+          .scalc-btn2 {
+            position: absolute;
+            top: 60px;
+            right: 30px;
+            width: 34px;
+            height: 34px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+            }
+
+            &:hover {
+              animation: harlem-data .5s linear forwards;
+            }
+          }
         }
       }
 
@@ -480,9 +606,10 @@ onUnmounted(() => {
         .center-scalc {
           position: absolute;
           top: 0;
-          left: 0;
+          right: 0;
           width: 44px;
           height: 44px;
+          transition: -webkit-transform .5s ease-in-out .5s;
           border-radius: 50%;
           background-color: #000;
           box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
@@ -490,10 +617,12 @@ onUnmounted(() => {
 
           .scalc-line {
             position: absolute;
+            z-index: 1000;
             left: 50%;
             width: 22px;
             height: 3px;
             transform: translate(-50%, 0);
+            transition: all .4s linear .1s;
             background-color: #fff;
 
             &:nth-child(1) {
@@ -509,6 +638,109 @@ onUnmounted(() => {
             }
 
           }
+
+          .scalc-line1 {
+            position: absolute;
+            z-index: 1000;
+            width: 22px;
+            height: 3px;
+            transition: all .4s linear .1s;
+            background-color: #fff;
+
+            &:nth-child(1) {
+              top: 20px;
+              left: 26%;
+              transform: rotate(45deg);
+            }
+
+            &:nth-child(2) {
+              top: 20px;
+              left: 26%;
+              transform: rotate(-45deg);
+            }
+
+            &:nth-child(3) {
+              display: none
+            }
+
+          }
+
+          .scalc-btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 44px;
+            height: 44px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              display: none;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+
+            }
+          }
+
+          .scalc-btn1 {
+            position: absolute;
+            top: 10px;
+            right: 70px;
+            width: 34px;
+            height: 34px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+
+            }
+
+            &:hover {
+              animation: harlem-data .5s linear forwards;
+            }
+          }
+
+          .scalc-btn2 {
+            position: absolute;
+            top: 60px;
+            right: 30px;
+            width: 34px;
+            height: 34px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+            }
+
+            &:hover {
+              animation: harlem-data .5s linear forwards;
+            }
+          }
         }
       }
     }

src/views/vent/fire/fireHome/components/workJc.vue

@@ -75,7 +75,7 @@ let props = defineProps({
 let ring = ref();
 
 let fxLenged = reactive<any[]>([]);//图表数据
-let echartDatas=reactive<any[]>([])
+let echartDatas = reactive<any[]>([])
 
 let cardList = ref<any[]>([]);
 
@@ -159,13 +159,14 @@ watch(() => props.cardData, (newC, oldC) => {
 
 watch(() => props.echartData, (newV, oldV) => {
   console.log(newV, '图表数据------')
-  if(newV.length!=0){
-    fxLenged.length=0
-    echartDatas.length=0
-    newV.forEach(el=>{
-      fxLenged.push({name:el.label,value:el.value})
+
+  if (newV.length != 0) {
+    fxLenged.length = 0
+    echartDatas.length = 0
+    newV.forEach(el => {
+      fxLenged.push({ name: el.label, value: el.value })
     })
-    let maxValue=fxLenged.sort((a,b)=>b.value - a.value)
+    let maxValue = fxLenged.sort((a, b) => b.value - a.value)
     echartDatas.push(maxValue[0])
   }
 }, { immediate: true, deep: true })

src/views/vent/fire/fireHome/index.vue

@@ -46,10 +46,17 @@
       <div :class="isShow ? 'center-area' : 'center-area1'">
         <div :class="isShow ? 'center-t' : 'center-t1'">
           <div class="center-scalc" @click="getScalc">
-            <div class="scalc-line"></div>
-            <div class="scalc-line"></div>
-            <div class="scalc-line"></div>
+            <div :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
+            <div :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
+            <div :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
+            <div :class="toggleOpen ? 'scalc-btn1' : 'scalc-btn'" @click="getScalc1">
+              <ExpandOutlined class="scalc-icon" />
+            </div>
+            <div :class="toggleOpen ? 'scalc-btn2' : 'scalc-btn'">
+              <InfoCircleOutlined class="scalc-icon" />
+            </div>
           </div>
+
           <iframe src="http://172.16.253.23:91/valkyrja/?type=tf" width="100%" height="100%" frameborder="0"></iframe>
         </div>
         <transition name="fade" mode="out-in">
@@ -100,6 +107,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { ExpandOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
 import DanelBd from '../../common/danelBd.vue';
 import workJc from './components/workJc.vue';
 import emptyJc from './components/emptyJc.vue';
@@ -122,6 +130,8 @@ import {
   getFireWarningCntByType
 } from './firehome.api';
 
+//GIs按钮切换显示与隐藏
+let toggleOpen = ref(false)
 let moduleSelect = reactive([
   { label: '工作面束管监测' },
   // { label: '工作面光钎监测' },
@@ -172,6 +182,10 @@ let safetyList = reactive<any[]>([]);
 
 //隐藏和显示左右侧区域
 function getScalc() {
+  toggleOpen.value = !toggleOpen.value
+
+}
+function getScalc1(){
   isShow.value = !isShow.value;
 }
 
@@ -266,13 +280,15 @@ async function getFireAreaInfoListMb() {
   if (res.length != 0) {
     selectListMb.length = 0;
     let dataMb = res.filter((m) => m.areaType == 1);
-    dataMb.forEach((m) => {
-      selectListMb.push({ label: m.areaName, value: m.areaCode });
-    });
+    if (dataMb.length != 0) {
+      dataMb.forEach((m) => {
+        selectListMb.push({ label: m.areaName, value: m.areaCode });
+      });
 
-    areaCodeMb.value = areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value'];
-    //获取密闭监测实时信息
-    getMbRealDataList();
+      areaCodeMb.value = areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value'];
+      //获取密闭监测实时信息
+      getMbRealDataList();
+    }
   }
 }
 //获取密闭监测实时信息
@@ -642,6 +658,32 @@ onUnmounted(() => {
       width: calc(100% - 814px);
 
       .center-t {
+        @keyframes harlem-data {
+          0% {
+            transform: translate(0);
+
+          }
+
+          25% {
+            transform: translate(10px, 10px);
+
+          }
+
+          50% {
+            transform: translate(-10px, -10px);
+
+          }
+
+          75% {
+            transform: translate(2px, 2px);
+
+          }
+
+          100% {
+            transform: translate(0);
+          }
+        }
+
         position: relative;
         width: 100%;
         height: calc(100% - 295px);
@@ -651,9 +693,10 @@ onUnmounted(() => {
         .center-scalc {
           position: absolute;
           top: 0;
-          left: 0;
+          right: 0;
           width: 44px;
           height: 44px;
+          transition: -webkit-transform .5s ease-in-out .5s;
           border-radius: 50%;
           background-color: #000;
           box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
@@ -661,10 +704,12 @@ onUnmounted(() => {
 
           .scalc-line {
             position: absolute;
+            z-index: 1000;
             left: 50%;
             width: 22px;
             height: 3px;
             transform: translate(-50%, 0);
+            transition: all .4s linear .1s;
             background-color: #fff;
 
             &:nth-child(1) {
@@ -680,6 +725,109 @@ onUnmounted(() => {
             }
 
           }
+
+          .scalc-line1 {
+            position: absolute;
+            z-index: 1000;
+            width: 22px;
+            height: 3px;
+            transition: all .4s linear .1s;
+            background-color: #fff;
+
+            &:nth-child(1) {
+              top: 20px;
+              left: 26%;
+              transform: rotate(45deg);
+            }
+
+            &:nth-child(2) {
+              top: 20px;
+              left: 26%;
+              transform: rotate(-45deg);
+            }
+
+            &:nth-child(3) {
+              display: none
+            }
+
+          }
+
+          .scalc-btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 44px;
+            height: 44px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              display: none;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+
+            }
+          }
+
+          .scalc-btn1 {
+            position: absolute;
+            top: 10px;
+            right: 70px;
+            width: 34px;
+            height: 34px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+
+            }
+
+            &:hover {
+              animation: harlem-data .5s linear forwards;
+            }
+          }
+
+          .scalc-btn2 {
+            position: absolute;
+            top: 60px;
+            right: 30px;
+            width: 34px;
+            height: 34px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+            }
+
+            &:hover {
+              animation: harlem-data .5s linear forwards;
+            }
+          }
         }
       }
 
@@ -706,9 +854,10 @@ onUnmounted(() => {
         .center-scalc {
           position: absolute;
           top: 0;
-          left: 0;
+          right: 0;
           width: 44px;
           height: 44px;
+          transition: -webkit-transform .5s ease-in-out .5s;
           border-radius: 50%;
           background-color: #000;
           box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
@@ -716,10 +865,12 @@ onUnmounted(() => {
 
           .scalc-line {
             position: absolute;
+            z-index: 1000;
             left: 50%;
             width: 22px;
             height: 3px;
             transform: translate(-50%, 0);
+            transition: all .4s linear .1s;
             background-color: #fff;
 
             &:nth-child(1) {
@@ -735,6 +886,109 @@ onUnmounted(() => {
             }
 
           }
+
+          .scalc-line1 {
+            position: absolute;
+            z-index: 1000;
+            width: 22px;
+            height: 3px;
+            transition: all .4s linear .1s;
+            background-color: #fff;
+
+            &:nth-child(1) {
+              top: 20px;
+              left: 26%;
+              transform: rotate(45deg);
+            }
+
+            &:nth-child(2) {
+              top: 20px;
+              left: 26%;
+              transform: rotate(-45deg);
+            }
+
+            &:nth-child(3) {
+              display: none
+            }
+
+          }
+
+          .scalc-btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 44px;
+            height: 44px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              display: none;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+
+            }
+          }
+
+          .scalc-btn1 {
+            position: absolute;
+            top: 10px;
+            right: 70px;
+            width: 34px;
+            height: 34px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+
+            }
+
+            &:hover {
+              animation: harlem-data .5s linear forwards;
+            }
+          }
+
+          .scalc-btn2 {
+            position: absolute;
+            top: 60px;
+            right: 30px;
+            width: 34px;
+            height: 34px;
+            transition: all .5s ease-in-out;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
+            cursor: pointer;
+
+            .scalc-icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: #fff;
+              font-size: 16px;
+            }
+
+            &:hover {
+              animation: harlem-data .5s linear forwards;
+            }
+          }
         }
       }
     }