Merge pull request '邓洁 : 修改首屏弹窗样式' (#133) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/133

src/assets/styles/index.scss

@@ -252,12 +252,12 @@ html, body, #app, .el-container, .el-aside, .el-main {
   display: flex;
   #container {
     flex: 1;
-    height: 650px;
+    height: 1160px;
     //width: 1300px;
   }
   #containerEle {
     flex: 1;
-    height: 1160px;
+    height: 1060px;
     //width: 2180px;
   }
 }
@@ -267,19 +267,19 @@ html, body, #app, .el-container, .el-aside, .el-main {
     position: relative;
     display: flex;
     flex-direction: column;
-    height: 1400px;
+    height: 1300px;
     border: 2px solid #0F82AF;
     background: rgba(6, 34, 71, 0.78);
     border-radius: 20px;
     padding: 47px 30px;
     box-sizing: border-box;
-    margin: 548px auto 0 auto;
+    margin: 520px auto 0 auto;
 
     .el-dialog__header {
-      padding: 0 0 25px 0;
+      padding: 0 0 28px 0;
       //display: none;
       .el-dialog__title {
-        font-size: 32px;
+        font-size: 50px;
         font-weight: bold;
         color: #D6F1FA;
       }

src/components/content/badGasInfo/BadGasInfo.vue

@@ -5,10 +5,13 @@
       <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
     </div>
     <div class="digital-tunnel">
-      <el-dialog v-model="isVisited" title="有害气体监控数据" width="1365px" :modal="false">
+      <el-dialog v-model="isVisited" title="有害气体监控数据" width="2400px" :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div id="container"></div>
+        <div class="chat-dialog">
+          <div id="container"></div>
+          <div style="width: 1px;"></div>
+        </div>
         <div class="time-select">
           <time-range-btn
               :buttonList="timeList"
@@ -57,11 +60,11 @@ watch(() => props.badGasData, (now) => {
 }, {deep: true});
 const timeSelect = (index) => {
   console.log('选择时间', index)
-  if(index===0){
+  if (index === 0) {
     console.log('--年')
-  }else if(index===1){
+  } else if (index === 1) {
     console.log('--月')
-  }else if(index===2){
+  } else if (index === 2) {
     console.log('--日')
   }
 };
@@ -109,7 +112,7 @@ const initChart = () => {
       left: 0,
       textStyle: {
         color: '#FFFFFF',
-        fontSize: 28
+        fontSize: 40
       },
       // itemWidth: 20,
       // itemHeight: 20
@@ -130,10 +133,10 @@ const initChart = () => {
     //X轴
     xAxis: {
       type: 'category',
-      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
+      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
       axisLabel: {
         textStyle: {
-          fontSize: 24,
+          fontSize: 45,
           color: '#D6F1FA'
         },
       },
@@ -143,7 +146,7 @@ const initChart = () => {
       type: 'value',
       axisLabel: {
         textStyle: {
-          fontSize: 24,
+          fontSize: 45,
           color: '#D6F1FA'
         },
       },

src/components/content/fanInfo/FanInfo.vue

@@ -6,13 +6,13 @@
         <!-- echarts -->
         <div class="echart"></div>
         <!-- 风机名 -->
-        <div class="fan-name">{{changeNum(index+1)}}号风机</div>
+        <div class="fan-name">{{ changeNum(index + 1) }}号风机</div>
         <!-- 功能 -->
         <div class="option-nav">
           <div class="state " :class="{ 'blue-state': !item.breakdown }">
             <div :class="{ stopColor: item.breakdown }">
               <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
-              状态：{{ item.breakdown ? '故障':'运行' }}
+              状态：{{ item.breakdown ? '故障' : '运行' }}
             </div>
             <div class="switch">
               <div
@@ -73,8 +73,8 @@ watch(() => props.list, (now) => {
   socketData.value.forEach(item => {
     now.forEach(newItem => {
       if (item.equipmentId === newItem.equipmentId) {
-        if(newItem.frequencyFeedback){
+        if (newItem.frequencyFeedback) {
-          item.frequencyFeedback= newItem.frequencyFeedback
+          item.frequencyFeedback = newItem.frequencyFeedback
         }
       }
     })
@@ -82,9 +82,9 @@ watch(() => props.list, (now) => {
   handleOnMounted()
 }, {deep: true});
 
-onMounted(async () => {
+onMounted(() => {
   setTimeout(() => {
-    nextTick(()=>{
+    nextTick(() => {
       handleOnMounted()
     })
   }, 100);
@@ -97,7 +97,7 @@ const getImage = (type) => {
       return "red-state-icon.png";
   }
 }
-const changeNum=(index)=>{
+const changeNum = (index) => {
   switch (index) {
     case 1:
       return '一';
@@ -125,7 +125,7 @@ const getBasicData = (data) => {
 
 const handleOnMounted = () => {
   const chart = document.getElementsByClassName('echart');
-  for(let i = 0; i < chart.length; i++ ){
+  for (let i = 0; i < chart.length; i++) {
     Echarts_info1 = echarts.init(chart[i]);
     fan01_option = {
       series: [
@@ -237,12 +237,12 @@ const handleOnMounted = () => {
         },
       ],
     }
-    fan01_option &&  Echarts_info1.setOption(fan01_option);
+    fan01_option && Echarts_info1.setOption(fan01_option);
   }
 }
 
 const getImageUrl = (name) => {
-  let icon=getImage(name)
+  let icon = getImage(name)
   return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
 }
 </script>
@@ -303,7 +303,8 @@ input[type="number"] {
   background-image: url(../../../assets/images/fanInfo/bg.png);
   //clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
   color: #2fb0df;
-box-sizing: border-box;
+  box-sizing: border-box;
+
   .title {
     width: 40%;
     text-align: left;

src/components/content/windPressure/WindPressureList.vue

@@ -5,10 +5,13 @@
       <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1" @click="handleOpenChart(index+1)"/>
     </div>
     <div class="digital-tunnel">
-      <el-dialog v-model="isVisited" :title="windSort+'号风压监控数据'" width="1365px" :modal="false">
+      <el-dialog v-model="isVisited" :title="windSort+'号风压监控数据'" width="2400px" :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div id="container"></div>
+        <div class="chat-dialog">
+          <div id="container"></div>
+          <div style="width: 1px;"></div>
+        </div>
         <div class="time-select">
           <time-range-btn
               :buttonList="timeList"
@@ -96,7 +99,7 @@ const initChart = () => {
       left: 0,
       textStyle: {
         color: '#FFFFFF',
-        fontSize: 28
+        fontSize: 40
       },
       // itemWidth: 20,
       // itemHeight: 20
@@ -120,7 +123,7 @@ const initChart = () => {
       data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
       axisLabel: {
         textStyle: {
-          fontSize: 24,
+          fontSize: 45,
           color: '#D6F1FA'
         },
       },
@@ -130,7 +133,7 @@ const initChart = () => {
       type: 'value',
       axisLabel: {
         textStyle: {
-          fontSize: 24,
+          fontSize: 45,
           color: '#D6F1FA'
         },
       },

src/components/timeRangeBtn/index.vue

@@ -47,16 +47,16 @@ watchEffect(() => {
 
 <style scoped lang="scss">
 .time-range-group {
-  width: 204px;
+  //width: 254px;
-  height: 68px;
+  //height: 78px;
   border: 2px solid #0F82AF;
   border-radius: 10px;
   background: #062247;
   display: flex;
-  font-size: 28px;
+  font-size: 40px;
   .time-range-button {
     cursor: pointer;
-    padding: 15px 20px;
+    padding: 18px 24px;
     box-sizing: border-box;
     color: #FFFFFF;
     &.time-range-button-active {