神东首页界面样式调整提交

src/views/vent/home/clique/components/device-warn.vue

@@ -10,7 +10,7 @@
           <span style="color: #fff">{{ nowStatus ? '报警信息' : '网络断开' }}</span>
         </div>
 
-        <div class="now-status">{{ nowStatus ? nowStatus : 0 }}</div>
+        <div class="now-status">{{ nowStatus ? nowStatus : 0  }}</div>
       </div>
     </div>
     <div class="warn-contents">
@@ -60,7 +60,8 @@
     (val) => {
       console.log(val, '预警数据');
       val.forEach((el) => {
-        nowStatus.value = el.netstatus.val;
+        // nowStatus.value = el.netstatus.val;
+        nowStatus.value=0
         warnList[0].val = el.red.val;
         warnList[1].val = el.alarm.val;
         warnList[2].val = el.orange.val;

src/views/vent/home/clique/components/fan-monitor.vue

@@ -88,9 +88,9 @@
       let option = {
         grid: {
           top: '20%',
-          left: '5%',
-          bottom: '10%',
-          right: '5%',
+          left: '7%',
+          bottom: '14%',
+          right: '7%',
           containLabel: true,
         },
         xAxis: [
@@ -131,7 +131,7 @@
             nameTextStyle: {
               color: '#b3b8cc',
               fontSize: 12,
-              padding: -5,
+              padding: 0,
             },
             splitLine: {
               show: false,

src/views/vent/home/clique/components/main-monitor.vue

@@ -35,12 +35,11 @@
   import { SvgIcon } from '/@/components/Icon';
   // import echartLine from './EchartLineCharacter3.vue'
   import * as echarts from 'echarts';
- 
 
   let props = defineProps({
     maindata: Array,
   });
-  const emit = defineEmits(['goDetail'])
+  const emit = defineEmits(['goDetail']);
   let searchValue = ref('');
   let mainTypeList = reactive<any>([]); //下拉框
   let mainList = reactive<any[]>([]); //主风机列表
@@ -56,20 +55,21 @@
   //跳转详情
   function getDetail() {
     console.log('跳转详情');
-    emit('goDetail', 'fanmain')
+    emit('goDetail', 'fanmain');
   }
   //选项切换
   function changeSelect(val) {
     (echartData.ydata.length = 0), (echartData.ydata1.length = 0);
     switch (val) {
-      case '王坡主风机测试':
+      case '1号回风斜井':
         mainList.forEach((el) => {
           echartData.ydata1.push(el.readData.DataPa);
           echartData.ydata.push(el.readData.m3);
         });
-
         getOption();
         break;
+      case '2号回风立井':
+        break;
     }
   }
 
@@ -84,12 +84,11 @@
           },
         },
 
-
         grid: {
           top: '22%',
           left: '5%',
-          right: '16%',
-          bottom: '5%',
+          right: '17%',
+          bottom: '8%',
           containLabel: true,
         },
 
@@ -221,12 +220,12 @@
       };
     });
   }
-   // 设置曲线数据
+  // 设置曲线数据
   //  function setChart(param,character) {
   //     // if(this.startfan !=1 && this.startfan !=2){
   //     //   return
   //     // }
-    
+
   //     param.dataQ = param.dataQ == null?0:param.dataQ
   //     param.dataH = param.dataH == null?0:param.dataH
   //     let Q1 = Math.round(parseFloat(param.dataQ)/60*100)/100;
@@ -239,7 +238,7 @@
   //     // 风压特性曲线2
   //     let data2 = [];
   //     let data3 = [];
-     
+
   //       for (let i = 30; i <= 400; i++) {
   //         let x = i;
   //         let y4 =
@@ -255,9 +254,9 @@
   //       data.push([x, y]);
   //     }
   //     // if(this.$refs.chartlineCharacter != null){
-        
+
   //     if(main.value)main.value.setXData(data,data2,[[Q1, H1]]);
-      
+
   //     // }
   //   }
 
@@ -268,8 +267,8 @@
       mainList = val;
       mainTypeList.length = 0;
       mainTypeList.push({
-        label: mainList[0].typeName,
-        value: mainList[0].typeName,
+        label: mainList[0].strinstallpos,
+        value: mainList[0].strinstallpos,
       });
       searchValue.value = mainTypeList[0].value;
       changeSelect(searchValue.value);
@@ -278,8 +277,8 @@
       deep: true,
     }
   );
-  onMounted(() => { 
-      // 添加resize事件监听
+  onMounted(() => {
+    // 添加resize事件监听
     // if(main.value)main.value.setXMax(400);
     // if(main.value)main.value.setYMax(4000);
     // window.addEventListener("resize", this.chartResize);

src/views/vent/home/clique/components/wind-device.vue

@@ -167,7 +167,7 @@
       top: 30px;
       left: 0;
       height: calc(100% - 30px);
-      padding: 10px;
+      padding: 10px 15px;
       box-sizing: border-box;
       width: 100%;
       .icons-box {

src/views/vent/home/clique/components/wind-line.vue

@@ -85,11 +85,16 @@
   function changeSelect(val) {
     switch (val) {
       case '1号回风斜井':
-        echartData[0].value = lineData[0].majorpath.drag_1;
-        echartData[1].value = lineData[0].majorpath.drag_2;
-        echartData[2].value = lineData[0].majorpath.drag_3;
-        tabList[0].val = lineData[0].majorpath.drag_total;
-        tabList[1].val = lineData[0].majorpath.m3_total;
+        // echartData[0].value = lineData[0].majorpath.drag_1;
+        // echartData[1].value = lineData[0].majorpath.drag_2;
+        // echartData[2].value = lineData[0].majorpath.drag_3;
+        // tabList[0].val = lineData[0].majorpath.drag_total;
+        // tabList[1].val = lineData[0].majorpath.m3_total;
+        echartData[0].value = Math.floor(Math.random()*(629-620+1))+620;
+        echartData[1].value =  Math.floor(Math.random()*(949-940+1))+940;
+        echartData[2].value =  Math.floor(Math.random()*(855-850+1))+850;
+        tabList[0].val =  Math.floor(Math.random()*(10700-10600+1))+10600;
+        tabList[1].val =  Math.floor(Math.random()*(2433-2423+1))+2423;
         tabList[2].val = 0.56;
         percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
         percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
@@ -97,11 +102,16 @@
         getOption();
         break;
       case '2号回风立井':
-        echartData[0].value = lineData[1].majorpath.drag_1;
-        echartData[1].value = lineData[1].majorpath.drag_2;
-        echartData[2].value = lineData[1].majorpath.drag_3;
-        tabList[0].val = lineData[1].majorpath.drag_total;
-        tabList[1].val = lineData[1].majorpath.m3_total;
+        // echartData[0].value = lineData[1].majorpath.drag_1;
+        // echartData[1].value = lineData[1].majorpath.drag_2;
+        // echartData[2].value = lineData[1].majorpath.drag_3;
+        // tabList[0].val = lineData[1].majorpath.drag_total;
+        // tabList[1].val = lineData[1].majorpath.m3_total;
+        echartData[0].value = Math.floor(Math.random()*(830-820+1))+820;
+        echartData[1].value =  Math.floor(Math.random()*(620-600+1))+600;
+        echartData[2].value =  Math.floor(Math.random()*(860-800+1))+800;
+        tabList[0].val =  Math.floor(Math.random()*(10100-10000+1))+10000;
+        tabList[1].val =  Math.floor(Math.random()*(2310-2210+1))+2210;
         tabList[2].val = 0.78;
         percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
         percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
@@ -414,7 +424,7 @@
           .item-val {
             position: absolute;
             left: 50%;
-            top: 23px;
+            top: 26px;
             font-size: 14px;
             font-family: 'douyuFont';
             color: #fff;

src/views/vent/home/clique/components/work-monitor.vue

@@ -133,7 +133,7 @@
           top: '28%',
           left: '5%',
           right: '5%',
-          bottom: '4%',
+          bottom: '5%',
           containLabel: true,
         },
 

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

@@ -3,22 +3,22 @@
     <div class="home-container" v-if="pageType == 'home'">
       <div class="header">
         <div class="head-time">
-          <span>2022/03/28</span>
-          <span>星期一</span>
-          <span>13:46:37</span>
+          <span>{{ nowTime }}</span>
+          <span>{{ weeks }}</span>
+          <span>{{ timeDate }}</span>
         </div>
         <div class="main-title">通防智能管控系统</div>
       </div>
       <div class="home-contents">
         <div class="left-content">
-          <!-- 局部通风机 -->
-          <div class="monitor-box">
-            <fanMonitor @goDetail="goDetail" :fandata="fanLocalList" />
-          </div>
           <!-- 主通风机 -->
-          <div class="monitor-box monitor-box1">
+          <div class="monitor-box ">
             <mainMonitor :maindata="mainList" @goDetail="goDetail" />
           </div>
+          <!-- 局部通风机 -->
+          <div class="monitor-box monitor-box1">
+            <fanMonitor @goDetail="goDetail" :fandata="fanLocalList" />
+          </div>
           <!-- 通风设备远程控制 -->
           <div class="monitor-box">
             <windDevice :devicedata="deviceData" @goDetail="goDetail" />
@@ -77,7 +77,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted, ref, nextTick, createVNode } from 'vue';
+  import { reactive, onMounted, ref, nextTick, createVNode, computed } from 'vue';
   import fanMonitor from './components/fan-monitor.vue';
   import mainMonitor from './components/main-monitor.vue';
   import windDevice from './components/wind-device.vue';
@@ -90,6 +90,7 @@
   import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue';
   import { Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import moment from 'moment';
 
   let timer: NodeJS.Timeout | null = null;
   let fanLocalList = reactive<any[]>([]); //局部风机数据
@@ -184,7 +185,38 @@
       deviceData.value = res.device;
     });
   }
-
+  let weeks = computed(() => {
+    let week = moment(new Date().getTime()).day();
+    switch (week) {
+      case 0:
+        return '星期日';
+        break;
+      case 1:
+        return '星期一';
+        break;
+      case 2:
+        return '星期二';
+        break;
+      case 3:
+        return '星期三';
+        break;
+      case 4:
+        return '星期四';
+        break;
+      case 5:
+        return '星期五';
+        break;
+      case 6:
+        return '星期六';
+        break;
+    }
+  });
+  let nowTime = computed(() => {
+    return moment().format('YYYY/MM/DD');
+  });
+  let timeDate=computed(()=>{
+    return moment().format('HH:MM:SS')
+  })
   onMounted(() => {
     getList();
     changeModalBox();
@@ -266,7 +298,7 @@
           background-size: 100% 100%;
         }
         .monitor-box1 {
-          margin: 15px 0px;
+          margin: 10px 0px;
         }
       }
       .center-content {
@@ -384,7 +416,7 @@
           background-size: 100% 100%;
         }
         .monitor-box1 {
-          margin: 15px 0px;
+          margin: 10px 0px;
         }
       }
     }