[Feat 0000] 公司端首页部分模块添加轮播功能

src/views/vent/home/clique/components/dialog-modal.vue

@@ -51,7 +51,7 @@
         <span class="dw">%</span>
       </div>
     </div>
-    <div class="modal-card3">
+    <!-- <div class="modal-card3">
       <div class="warn-left">
         <div class="vent-l">
           <span class="warn-label">{{ vent.value }}</span>
@@ -70,20 +70,20 @@
           <span class="warn-value">{{ fire.label }}</span>
           <span class="warn-label">{{ fire.value }}</span>
         </div>
-        <!-- <div class="dust-r">
+        <div class="dust-r">
           <span class="warn-value">{{ dust.label }}</span>
           <span class="warn-label">{{ dust.value }}</span>
-        </div> -->
+        </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, defineProps, watch, inject } from 'vue';
+  import { ref, reactive, defineProps, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { useSSO } from '/@/hooks/vent/useSSO';
   import { getAssetURL } from '/@/utils/ui';
-  const globalConfig = inject('globalConfig');
+  // const globalConfig = inject('globalConfig');
 
   let props = defineProps({
     centerDetail: {
@@ -111,14 +111,14 @@
   let labelM = ref('');
 
   let zlList = reactive([
-    { label: '关键阻力——进风', value: 0, percent: 0 },
-    { label: '关键阻力——用风', value: 0, percent: 0 },
-    { label: '关键阻力——回风', value: 0, percent: 0 },
+    { label: '关键阻力——进风', value: 0, percent: '0' },
+    { label: '关键阻力——用风', value: 0, percent: '0' },
+    { label: '关键阻力——回风', value: 0, percent: '0' },
   ]);
 
   let windLfList = reactive([
-    { label: '有效风量率', value: 0 },
-    { label: '矿井漏风率', value: 0 },
+    { label: '有效风量率', value: '0' },
+    { label: '矿井漏风率', value: '0' },
   ]);
 
   // let vent = reactive({
@@ -140,61 +140,71 @@
   //   label: '粉尘风险性',
   //   value: '低风险',
   // });
-  let vent = reactive({
-    // label: '总进风',
-    label: '总阻力',
-    value: 0,
-  });
+  // let vent = reactive({
+  //   // label: '总进风',
+  //   label: '总阻力',
+  //   value: 0,
+  // });
 
-  let gas = reactive({
-    label: '总风量',
-    value: 0,
-  });
+  // let gas = reactive({
+  //   label: '总风量',
+  //   value: 0,
+  // });
 
-  let fire = reactive({
-    label: '等积孔',
-    value: 0,
-  });
+  // let fire = reactive({
+  //   label: '等积孔',
+  //   value: 0,
+  // });
 
   // let dust = reactive({
   //   label: '粉尘风险性',
   //   value: '低风险',
   // });
 
+  // 选取各项数据是引用的索引，有些矿井存在多个关键阻力路线等，需要轮播
+  const pickIndex = ref(0);
+
   const emit = defineEmits(['closeDialog']);
 
   function getClose() {
     emit('closeDialog', false);
   }
 
+  // 根据新的数据更新依赖数据，核心方法
+  function update(newC) {
+    if (JSON.stringify(newC) != '{}') {
+      modalCard[0]['value'] = newC.sys_data.totallength || 0;
+      modalCard[1]['value'] = newC.sys_data.personCount || 0;
+      modalCard[2]['value'] = newC.sys_data.vehicleCount || 0;
+
+      // 根据目前轮播索引确定要展示的数据index
+      const majorIndex = pickIndex.value % newC.majorpath_data.length;
+
+      labelM.value = newC.majorpath_data[majorIndex].deviceName;
+      valueM.value = newC.majorpath_data[majorIndex].majorpath.drag_total;
+      zlList[0]['value'] = newC.majorpath_data[majorIndex].majorpath.drag_1;
+      zlList[1]['value'] = newC.majorpath_data[majorIndex].majorpath.drag_2;
+      zlList[2]['value'] = newC.majorpath_data[majorIndex].majorpath.drag_3;
+      zlList[0]['percent'] = ((zlList[0]['value'] / valueM.value) * 100).toFixed(2);
+      zlList[1]['percent'] = ((zlList[1]['value'] / valueM.value) * 100).toFixed(2);
+      zlList[2]['percent'] = ((zlList[2]['value'] / valueM.value) * 100).toFixed(2);
+
+      windLfList[0].value = newC.sys_data.useM3Perent || '0';
+      const base = parseFloat(newC.sys_data.zongfengliang);
+      windLfList[1].value = (((base - parseFloat(newC.sys_data.zongjinfeng)) / base) * 100).toFixed(2);
+
+      // vent.value = newC.majorpath_data[majorIndex].majorpath.drag_total;
+      // gas.value = newC.majorpath_data[majorIndex].majorpath.m3_total;
+      // fire.value = Math.round(((1.19 * gas.value) / 60 / Math.sqrt(vent.value)) * 100) / 100;
+    }
+  }
+
   watch(
     () => props.centerDetail,
-    (newC, oldC) => {
-      console.log(newC, '地图区域详情数据-------');
-      if (JSON.stringify(newC) != '{}') {
-        modalCard[0]['value'] = newC.sys_data.totallength || 0;
-        modalCard[1]['value'] = newC.sys_data.personCount || 0;
-        modalCard[2]['value'] = newC.sys_data.vehicleCount || 0;
-
-        labelM.value = newC.majorpath_data[0].deviceName;
-        valueM.value = newC.majorpath_data[0].majorpath.drag_total;
-        zlList[0]['value'] = newC.majorpath_data[0].majorpath.drag_1;
-        zlList[1]['value'] = newC.majorpath_data[0].majorpath.drag_2;
-        zlList[2]['value'] = newC.majorpath_data[0].majorpath.drag_3;
-        zlList[0]['percent'] = ((zlList[0]['value'] / valueM.value) * 100).toFixed(2);
-        zlList[1]['percent'] = ((zlList[1]['value'] / valueM.value) * 100).toFixed(2);
-        zlList[2]['percent'] = ((zlList[2]['value'] / valueM.value) * 100).toFixed(2);
-
-        windLfList[0].value = newC.sys_data.useM3Perent || 0;
-        windLfList[1].value = (
-          ((parseFloat(newC.sys_data.zongfengliang) - parseFloat(newC.sys_data.zongjinfeng)) / parseFloat(newC.sys_data.zongfengliang)) *
-          100
-        ).toFixed(2);
-
-        vent.value = newC.majorpath_data[0].majorpath.drag_total;
-        gas.value = newC.majorpath_data[0].majorpath.m3_total;
-        fire.value = Math.round(((1.19 * gas.value) / 60 / Math.sqrt(vent.value)) * 100) / 100;
-      }
+    (newC) => {
+      // 轮播 index + 1，这样 update 取值是可以根据该 index 取值，对 1000 取余是为了处理 Infinity 后无法轮播的情况（虽然不可能出现）
+      pickIndex.value = (pickIndex.value + 1) % 1000;
+      update(newC);
     },
     {
       immediate: true,
@@ -218,7 +228,7 @@
   .dialogModal {
     position: relative;
     width: 568px;
-    height: 437px;
+    height: 340px;
     background: url('/@/assets/images/company/area-card2.png') no-repeat;
     background-size: 100% 100%;
     pointer-events: none;
@@ -308,7 +318,7 @@
       top: 121px;
       left: 50%;
       transform: translate(-50%, 0);
-      height: 110px;
+      height: 116px;
       width: 90%;
       padding: 0px 10px;
       box-sizing: border-box;
@@ -455,13 +465,13 @@
 
     .modal-card2 {
       position: absolute;
-      top: 231px;
+      top: 240px;
       left: 50%;
       transform: translate(-50%, 0);
-      height: 50px;
+      height: 60px;
       width: 90%;
-      margin: 10px 0px;
-      padding: 0px 10px;
+      margin: 10px 0;
+      padding: 0 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;

src/views/vent/home/clique/components/scene-key.vue

@@ -36,6 +36,7 @@
   import { ref, reactive, defineProps, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import echartScene from '../components/echart-scene.vue';
+  import _ from 'lodash-es';
 
   let props = defineProps({
     compositeData: {
@@ -55,6 +56,7 @@
     { label: '等积孔', value: 0 },
   ]);
 
+  const selectIndex = ref(0);
   let selectVal = ref('');
   let selectList = ref<any[]>([]);
   let compositeDatas = ref<any[]>([]);
@@ -69,47 +71,38 @@
 
   //下拉选项切换
   function changeSelect(val) {
-    console.log(val, '下拉选项');
-    selectVal.value = val;
-    let datas = compositeDatas.value.filter((v) => v.deviceName == selectVal.value)[0];
-    echartData.jfq = datas.majorpath.drag_1;
-    echartData.yfq = datas.majorpath.drag_2;
-    echartData.hfq = datas.majorpath.drag_3;
-    echartData.zf = datas.majorpath.drag_total;
-
-    sceneList[0].value = datas.majorpath.drag_total;
-    sceneList[1].value = datas.majorpath.m3_total;
+    const data = compositeDatas.value.find((v, i) => {
+      if (v.deviceName == val) {
+        selectVal.value = val;
+        selectIndex.value = i;
+        return true;
+      }
+      return false;
+    });
+    echartData.jfq = data.majorpath.drag_1;
+    echartData.yfq = data.majorpath.drag_2;
+    echartData.hfq = data.majorpath.drag_3;
+    echartData.zf = data.majorpath.drag_total;
+
+    sceneList[0].value = data.majorpath.drag_total;
+    sceneList[1].value = data.majorpath.m3_total;
     sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100;
   }
 
   watch(
     () => props.compositeData,
-    (newS, oldS) => {
-      console.log(newS, '综合监测数据------------');
+    (newS) => {
       compositeDatas.value = newS;
       if (newS.length != 0) {
         selectList.value = newS.map((el: any) => ({ label: el.deviceName, value: el.deviceName }));
-        if (selectVal.value) {
-          let datas = newS.filter((v) => v.deviceName == selectVal.value)[0];
-          echartData.jfq = datas.majorpath.drag_1;
-          echartData.yfq = datas.majorpath.drag_2;
-          echartData.hfq = datas.majorpath.drag_3;
-          echartData.zf = datas.majorpath.drag_total;
-
-          sceneList[0].value = datas.majorpath.drag_total;
-          sceneList[1].value = datas.majorpath.m3_total;
-          sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100;
-        } else {
+        if (!selectVal.value) {
           selectVal.value = selectList.value[0].value;
-          console.log(selectVal.value, '0009999');
-          echartData.jfq = newS[0].majorpath.drag_1;
-          echartData.yfq = newS[0].majorpath.drag_2;
-          echartData.hfq = newS[0].majorpath.drag_3;
-          echartData.zf = newS[0].majorpath.drag_total;
-
-          sceneList[0].value = newS[0].majorpath.drag_total;
-          sceneList[1].value = newS[0].majorpath.m3_total;
-          sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100;
+          changeSelect(selectVal.value);
+        } else {
+          // 向下寻找一个新选项以实现轮播
+          const options = selectList.value;
+          const val = _.get(options, [(selectIndex.value + 1) % options.length, 'value']);
+          changeSelect(val);
         }
       }
     },

src/views/vent/home/clique/index.vue

@@ -102,7 +102,7 @@
         timer = null;
       }
       getMonitor();
-    }, 5000);
+    }, 10000);
   }
 
   //获取公司端首页数据