Merge pull request 'dengjie' (#177) from dengjie into dev

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

src/api/largeScreen.js

@@ -21,10 +21,10 @@ export const getTunnelBySiteId = (siteId) => {
     method: 'get'
   })
 }
-// 风压echarts数据
+// 传感器echarts数据
 export const getEchartsInfo = (equipmentId) => {
   return request({
-    url: `/tunnel/large/screen/echarts/wind/pressure/${equipmentId}`,
+    url: `/tunnel/large/screen/echarts/sensor/${equipmentId}`,
     method: 'get'
   })
 }

src/components/content/airInfo/AirInfo.vue

@@ -3,8 +3,7 @@
     <div class="fan-speed">
       <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
       <div class="fan-info" @click="handleOpenChart">
-        <div class="input-fan"><span>风速</span><span>进风：{{ windSpeed }}m/s</span></div>
+        <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
-        <div class="output-fan"><span>出风：{{ windSpeed }}m/s</span></div>
       </div>
     </div>
     <item-info
@@ -146,7 +145,7 @@ const getAirInfo = (now) => {
     if (item.equipmentType === "dust" || item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
       airObj = changeData(item)
       airArr.push(airObj)
-    } else if (item.equipmentType === "windDirection") {
+    } else if (item.equipmentType === "windSpeed") {
       windSpeed.value = item.value
     }
   })
@@ -233,17 +232,6 @@ const initChart = () => {
     //配置项
     series: [
       {
-        name: '进风口',
-        data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
-        type: 'line',
-        smooth: true,
-        symbolSize: 24,
-        lineStyle: {
-          width: 5
-        }
-      },
-      {
-        name: '出风口',
         data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
         type: 'line',
         smooth: true,
@@ -254,6 +242,7 @@ const initChart = () => {
       }
     ]
   }
+
   myEcharts.setOption(option);
   //图表大小自适应窗口大小变化
   window.onresize = () => {
@@ -391,13 +380,13 @@ const initAirChart = () => {
     .fan-info {
       flex: 1;
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-start;
 
       .input-fan {
-        margin: 0 26px;
+        //margin: 0 26px;
 
         > span:last-child {
-          margin-left: 30px;
+          margin-left: 25px;
         }
       }
     }

src/components/content/fanInfo/FanInfo.vue

@@ -92,22 +92,6 @@ const stateC = ref(false)
 watch(() => props.transducerData, (now) => {
   getTransData(now.frequencyChangerList)
 }, {deep: true});
-watch(() => props.list, (now) => {
-  transducerData.value.forEach(item => {
-    now.forEach(newItem => {
-      if (item.equipmentId === newItem.equipmentId) {
-        if (newItem.frequencyFeedback) {
-          item.frequencySetting = newItem.frequencySetting
-          item.frequencyFeedback = newItem.frequencyFeedback
-        } else if (newItem.phaseCurrentA) {
-          item.phaseCurrentA = newItem.phaseCurrentA
-          item.phaseCurrentB = newItem.phaseCurrentB
-          item.phaseCurrentC = newItem.phaseCurrentC
-        }
-      }
-    })
-  })
-}, {deep: true});
 watch(() => props.fanData, (now) => {
   getBasicData(now.frequencyChangerList)
 }, {deep: true});
@@ -129,9 +113,9 @@ watch(() => props.list, (now) => {
           item.frequencySetting = newItem.frequencySetting
           item.frequencyFeedback = newItem.frequencyFeedback
         } else if (newItem.phaseCurrentA) {
-          item.phaseCurrentA = newItem.phaseCurrentA
+          item.valueA = newItem.phaseCurrentA
-          item.phaseCurrentB = newItem.phaseCurrentB
+          item.valueB = newItem.phaseCurrentB
-          item.phaseCurrentC = newItem.phaseCurrentC
+          item.valueC = newItem.phaseCurrentC
         }
       }
     })
@@ -582,6 +566,7 @@ input[type="number"] {
             }
 
             .units {
+              z-index: 22;
               position: relative;
             }
 

src/components/content/fanInfo/FanInfoItem.vue

@@ -8,7 +8,7 @@
       <div class="point" ref="pointA"></div>
     </div>
   </div>
-  <div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
+  <div class="wind-pressure-item" :class="{ abnormal:isWaringB }">
     <div class="label">
       B相电流:{{params.wp.valueB}}A
     </div>
@@ -17,7 +17,7 @@
       <div class="point" ref="pointB"></div>
     </div>
   </div>
-  <div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
+  <div class="wind-pressure-item" :class="{ abnormal:isWaringC }">
     <div class="label">
       C相电流:{{params.wp.valueC}}A
     </div>

src/components/content/usedEle/UsedEle.vue

@@ -1,13 +1,23 @@
 <template>
   <div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
-    <div class="content" >
+    <div class="content">
       <div class="item">
-        <div></div>
+        <div class="container" ref="length">
-        <span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
+          <div class="value" ref="valueA"></div>
+        </div>
+        <div>
+          <div class="icon"></div>
+          <span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
+        </div>
       </div>
       <div class="item">
-        <div></div>
+        <div class="container" ref="length">
-        <span>当月节省量：{{ monthlySavings }}v</span>
+          <div class="value" ref="valueB"></div>
+        </div>
+        <div>
+          <div class="icon"></div>
+          <span>当月节省量：{{ monthlySavings }}v</span>
+        </div>
       </div>
     </div>
     <div class="digital-tunnel">
@@ -28,10 +38,10 @@
             <div class="value">345v</div>
           </div>
         </div>
-       <div class="chat-dialog">
+        <div class="chat-dialog">
-         <div id="containerEle"></div>
+          <div id="containerEle"></div>
-         <div style="width: 1px;"></div>
+          <div style="width: 1px;"></div>
-       </div>
+        </div>
         <div class="left-bottom-icon"></div>
         <div class="right-bottom-icon"></div>
       </el-dialog>
@@ -51,6 +61,8 @@ const isVisited = ref(false);
 const eleData = ref([])
 const electricityConsumptionMonthly = ref()
 const monthlySavings = ref(55555)
+const valueA = ref(electricityConsumptionMonthly.value);
+const valueB = ref(monthlySavings.value);
 const bgImage = computed(() =>
     isVisited.value
         ? "bpq_active.png"
@@ -112,7 +124,7 @@ const initChart = () => {
         fontSize: 45
       },
       itemWidth: 30,
-      itemHeight:30,
+      itemHeight: 30,
       icon: "circle",
     },
     //离容器四侧的距离
@@ -179,13 +191,13 @@ const initChart = () => {
     //配置项
     series: [
       {
-        name:'日用电量',
+        name: '日用电量',
         data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
         type: 'bar'
       },
       {
-        name:'日节省量',
+        name: '日节省量',
-        data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50,120, 200, 150, 80, 70, 110, 130, 100, ],
+        data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
         type: 'bar'
       },
     ]
@@ -202,17 +214,35 @@ const getImageUrl = (name) => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.el-dialog__header) {
+.container {
-  padding: 0!important;
+  width: 60px;
+  height: 210px;
+  border-radius: 31px;
+  border: 1px solid #0f82af;
+  position: relative;
+  margin-bottom: 20px;
+
+  .value {
+    width: 60px;
+    height: inherit;
+    background: #60ddde;
+    border-radius: 31px;
+    transition: width 0.5s linear 0s;
+  }
 }
+
+:deep(.el-dialog__header) {
+  padding: 0 !important;
+}
+
 #used-ele {
   cursor: pointer;
   width: 830px;
-  height: 90px;
+  height: 373px;
   color: aliceblue;
   position: absolute;
   //top: 1980px;
-  top: 1420px;
+  top: 1680px;
   left: 68px;
   background-image: url(../../../assets/images/usedEle/bg.png);
   padding: 21px 62px 35px 62px;
@@ -233,94 +263,28 @@ const getImageUrl = (name) => {
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
+
     .item {
+      margin-top: 44px;
       height: 37px;
       font-size: 28px;
-      font-family: MicrosoftYaHei;
       color: #38CAFB;
       line-height: 37px;
       display: flex;
+      flex-direction: column;
       align-items: center;
 
-      > div {
+      > div:nth-child(2) {
-        margin-right: 10px;
+        display: flex;
-        width: 29px;
+
-        height: 33px;
+        .icon {
-        background-image: url(../../../assets/images/usedEle/white-ele.png);
+          margin-right: 10px;
+          width: 29px;
+          height: 33px;
+          background-image: url(../../../assets/images/usedEle/white-ele.png);
+        }
       }
-
-      //ul {
-      //  font-size: 14px;
-      //
-      //  li {
-      //    display: flex;
-      //    align-items: center;
-      //    //width: 270px;
-      //    height: 37px;
-      //    font-size: 28px;
-      //    color: #38CAFB;
-      //    line-height: 37px;
-      //    margin-bottom: 25px;
-      //    padding-left: 5px;
-      //
-      //    &:hover {
-      //      cursor: pointer;
-      //      width: 280px;
-      //      //height: 46px;
-      //      background: #2E5589;
-      //      border-radius: 7px;
-      //      color: #FBF7F4;
-      //
-      //      > div {
-      //        background-image: url(../../../assets/images/usedEle/white-ele.png);
-      //      }
-      //    }
-      //
-      //    > div {
-      //      width: 29px;
-      //      height: 33px;
-      //      background-image: url(../../../assets/images/usedEle/white-ele.png);
-      //      margin-right: 14px;
-      //    }
-      //
-      //    &:nth-child(2) {
-      //      > div {
-      //        background-image: url(../../../assets/images/usedEle/icon-month.png);
-      //      }
-      //
-      //      &:hover {
-      //        > div {
-      //          background-image: url(../../../assets/images/usedEle/white-ele.png);
-      //        }
-      //      }
-      //    }
-      //
-      //    &:nth-child(3) {
-      //      > div {
-      //        background-image: url(../../../assets/images/usedEle/icon-day.png);
-      //      }
-      //
-      //      &:hover {
-      //        > div {
-      //          background-image: url(../../../assets/images/usedEle/white-ele.png);
-      //        }
-      //      }
-      //    }
-      //  }
-      //
-      //  & > :nth-child(2) {
-      //    color: #4bcb6b;
-      //  }
-      //
-      //  & > :nth-child(3) {
-      //    color: #4bcbbc;
-      //  }
-      //}
     }
-
-    //& > :nth-child(2) {
-    //  transform: translateX(25px);
-    //}
   }
 }
 </style>

src/views/tunnel/index.vue

@@ -29,7 +29,7 @@
     <preview-scene id="tunnel-box" :isedit="false"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" :transducer-data="largeScreenData"/>
 <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
         <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />