Merge pull request '邓洁: 修改首页风机样式' (#175) from dengjie into dev

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

src/components/content/fanInfo/FanInfo.vue

@@ -3,53 +3,70 @@
     <div class="title">风机</div>
     <div class="fans">
       <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
-        <!-- echarts -->
-        <div class="echart"></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 ? '故障' : '运行' }}
-            </div>
-            <div class="switch">
-              <div
-                  id="auto"
-                  :class="{ active: item.running }"
-                  @click="item.running = true"
-              >
-                启动
+        <div>
+          <!-- echarts -->
+          <div class="echart"></div>
+          <!-- 风机名 -->
+          <div class="fan-name">{{ changeNum(index + 1) }}号风机</div>
+          <!-- 功能 -->
+          <div class="option-nav">
+            <div>
+              <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 ? '故障' : '运行' }}
+                </div>
+                <div class="switch">
+                  <div
+                      id="auto"
+                      :class="{ active: item.running }"
+                      @click="item.running = true"
+                  >
+                    启动
+                  </div>
+                  <div
+                      id="stop"
+                      :class="{ active: !item.running }"
+                      @click="item.running = false"
+                  >
+                    停止
+                  </div>
+                </div>
               </div>
-              <div
-                  id="stop"
-                  :class="{ active: !item.running }"
-                  @click="item.running = false"
-              >
-                停止
+              <div class="power">
+                <div class="check-box">
+                  <el-radio-group v-model="item.autoMode" class="radio-group">
+                    <el-radio :label="true">自动</el-radio>
+                    <el-radio :label="false">手动</el-radio>
+                  </el-radio-group>
+                </div>
+                <div class="edit-power">
+                  <span style="color: white">当前功率</span>
+                  <span class="units"
+                  ><input
+                      type="number"
+                      min="0"
+                      v-model="item.frequencySetting"
+                      :disabled="item.autoMode"
+                  /></span>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="power">
-            <div class="check-box">
-              <el-radio-group v-model="item.autoMode" class="radio-group">
-                <el-radio :label="true">自动</el-radio>
-                <el-radio :label="false">手动</el-radio>
-              </el-radio-group>
-            </div>
-            <div class="edit-power">
-              <span style="color: white">当前功率</span>
+            <div class="shuntThreshold">
+              <div class="fenliu-icon"></div>
+              分流阀值
               <span class="units"
               ><input
                   type="number"
                   min="0"
-                  v-model="item.frequencyFeedback"
-                  :disabled="item.autoMode"
+                  v-model="shuntThreshold"
               /></span>
             </div>
           </div>
         </div>
+        <div class="current">
+          <fan-info-item :wp="transducerData[index]"/>
+        </div>
       </div>
     </div>
   </div>
@@ -57,15 +74,40 @@
 
 <script setup>
 import * as echarts from "echarts";
+import FanInfoItem from "./FanInfoItem.vue";
 
 const props = defineProps({
   list: Array,
-  fanData: Array
+  fanData: Array,
+  transducerData: Array
 });
 const socketData = ref()
 let Echarts_info1 = null;
 let fan01_option = reactive();
-
+const shuntThreshold = ref(23)
+const transducerData = ref([])
+const stateA = ref(false)
+const stateB = ref(false)
+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});
@@ -74,14 +116,52 @@ watch(() => props.list, (now) => {
     now.forEach(newItem => {
       if (item.equipmentId === newItem.equipmentId) {
         if (newItem.frequencyFeedback) {
+          item.frequencySetting = newItem.frequencySetting
           item.frequencyFeedback = newItem.frequencyFeedback
         }
       }
     })
   })
+  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
+        }
+      }
+    })
+  })
   handleOnMounted()
 }, {deep: true});
 
+const getTransData = (data) => {
+  let tranObj = {}
+  let tranArr = []
+  data?.map(item => {
+    tranObj = {
+      equipmentId: item.equipmentId,
+      max: 200,
+      valueA: item.phaseCurrentA,
+      pointA: item.phaseCurrentAThreshold,
+      valueB: item.phaseCurrentB,
+      pointB: item.phaseCurrentBThreshold,
+      valueC: item.phaseCurrentC,
+      pointC: item.phaseCurrentCThreshold,
+      frequencySetting: item.frequencySetting,
+      frequencyFeedback: item.frequencyFeedback,
+    }
+    stateA.value = item.phaseCurrentA > item.phaseCurrentAThreshold
+    stateB.value = item.phaseCurrentB > item.phaseCurrentBThreshold
+    stateC.value = item.phaseCurrentC > item.phaseCurrentCThreshold
+    tranArr.push(tranObj)
+  })
+  transducerData.value = tranArr
+}
 const getImage = (type) => {
   switch (type) {
     case false:
@@ -109,7 +189,8 @@ const getBasicData = (data) => {
       autoMode: item.autoMode,//自动模式
       breakdown: item.breakdown,//故障
       running: item.running,//启动,
-      frequencyFeedback: item.frequencyFeedback//当前功率
+      frequencyFeedback: item.frequencyFeedback,//当前功率
+      frequencySetting: item.frequencySetting//当前功率
     }
     tranArr.push(tranObj)
   })
@@ -289,9 +370,7 @@ input[type="number"] {
 }
 
 #fan_info {
-  min-height: 547px;
-  max-height: 795px;
-  height: 547px;
+  height: 1465px;
   width: 830px;
   position: absolute;
   z-index: 100;
@@ -319,125 +398,192 @@ input[type="number"] {
     height: calc(100% - 30px);
 
     .fan-item {
-      height: 50%;
+      height: 33.5%;
       display: flex;
+      flex-direction: column;
       font-size: 14px;
+      border-bottom: 2px solid rgba(107, 163, 237, 0.4);
 
-      .echart {
-        height: 100%;
-        width: 30%;
-        margin: 0px 0px 0px 10px;
-        position: relative;
-      }
-
-      .echart::after {
-        content: "Hz";
-        font-size: 24px;
-        font-family: MicrosoftYaHei, MicrosoftYaHei;
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 31px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, 60%);
-      }
-
-      .fan-name {
-        width: 39px;
-        height: 140px;
-        font-size: 26px;
-        font-family: MicrosoftYaHei;
-        color: #38cafb;
-        line-height: 35px;
-        text-align: center;
-        margin-right: 42px;
-        transform: translateY(33%);
-      }
-
-      .option-nav {
+      > div:first-child {
         display: flex;
-        width: 70%;
 
-        .blue-state {
-          > div:first-child:hover {
-            color: #fff;
-            background-color: #127399;
-            width: 180px;
-            padding-left: 5px;
-            border-radius: 8px;
-
-            > div:first-child {
-              background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
-            }
-          }
+        .echart {
+          height: 100%;
+          width: 30%;
+          margin: 0px 0px 0px 10px;
+          position: relative;
         }
 
-        .state {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
+        .echart::after {
+          content: "Hz";
+          font-size: 24px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          color: #ffffff;
+          line-height: 31px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, 60%);
+        }
+
+        .fan-name {
+          width: 39px;
+          height: 140px;
           font-size: 26px;
           font-family: MicrosoftYaHei;
           color: #38cafb;
           line-height: 35px;
-          gap: 40px;
-
-          > div:first-child {
-            display: flex;
-            align-items: center;
-            padding-left: 5px;
-
-            > div {
-              margin-right: 10px;
-            }
-          }
-
-          img {
-            margin-right: 4px;
-            transform: translateY(15%);
-          }
-
-          .state-icon {
-            width: 26px;
-            height: 26px;
-          }
-
-          .switch {
-            display: flex;
-            width: 160px;
-            height: 40px;
-            border-radius: 22px;
-            border: 2px solid #0f82af;
-            overflow: hidden;
-            font-family: MicrosoftYaHei, MicrosoftYaHei;
-            font-weight: bold;
-            color: #127399;
-            line-height: 35px;
-
-            & > div {
-              flex: 1;
-              text-align: center;
-              cursor: pointer;
-            }
-          }
+          text-align: center;
+          margin-right: 42px;
+          transform: translateY(33%);
         }
 
-        .power {
-          flex: 1.3;
+        .option-nav {
           display: flex;
           flex-direction: column;
-          justify-content: center;
-          padding: 0px 20px;
-          font-size: 28px;
-          font-family: MicrosoftYaHei;
-          color: #38cafb;
-          line-height: 37px;
-          gap: 33px;
+          width: 70%;
 
-          .edit-power {
-            margin-top: 10px;
+          > div:first-child {
+            margin-top: 48px;
+            display: flex;
+            align-items: center;
+
+            .state {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              font-size: 26px;
+              font-family: MicrosoftYaHei;
+              color: #38cafb;
+              line-height: 35px;
+              gap: 40px;
+
+              .blue-state {
+                > div:first-child:hover {
+                  color: #fff;
+                  background-color: #127399;
+                  width: 180px;
+                  padding-left: 5px;
+                  border-radius: 8px;
+
+                  > div:first-child {
+                    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
+                  }
+                }
+              }
+
+              > div:first-child {
+                display: flex;
+                align-items: center;
+                padding-left: 5px;
+
+                > div {
+                  margin-right: 10px;
+                }
+              }
+
+              img {
+                margin-right: 4px;
+                transform: translateY(15%);
+              }
+
+              .state-icon {
+                width: 26px;
+                height: 26px;
+              }
+
+              .switch {
+                display: flex;
+                width: 160px;
+                height: 40px;
+                border-radius: 22px;
+                border: 2px solid #0f82af;
+                overflow: hidden;
+                font-family: MicrosoftYaHei, MicrosoftYaHei;
+                font-weight: bold;
+                color: #127399;
+                line-height: 35px;
+
+                & > div {
+                  flex: 1;
+                  text-align: center;
+                  cursor: pointer;
+                }
+              }
+            }
+
+            .power {
+              flex: 1.3;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              padding: 0px 20px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #38cafb;
+              line-height: 37px;
+              gap: 33px;
+
+              .edit-power {
+                margin-top: 10px;
+
+                .units {
+                  position: relative;
+                }
+
+                .units::after {
+                  content: "Hz";
+                  position: absolute;
+                  right: 6px;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  font-size: 28px;
+                  font-family: MicrosoftYaHei;
+                  color: #38cafb;
+                  line-height: 37px;
+                }
+
+                input {
+                  width: 130px;
+                  height: 44px;
+                  border: 2px solid #0f82af;
+                  background: transparent;
+                  margin-left: 14px;
+                  outline: none;
+                  font-size: 28px;
+                  font-family: MicrosoftYaHei, MicrosoftYaHei;
+                  font-weight: bold;
+                  color: #38cafb;
+                  line-height: 37px;
+                }
+              }
+            }
+          }
+
+          .shuntThreshold {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            //align-items: center;
+            //width: 112px;
+            padding-top: 30px;
+            padding-right: 25px;
+            font-size: 28px;
+            font-family: MicrosoftYaHei;
+            color: #FFFFFF;
+
+            .fenliu-icon {
+              margin-right: 9px;
+              width: 31px;
+              height: 28px;
+              background-image: url('../../../assets/images/fanInfo/fsp_icon_flf.png');
+            }
+
+            .units {
+              position: relative;
+            }
 
             input {
               width: 130px;
@@ -445,35 +591,42 @@ input[type="number"] {
               border: 2px solid #0f82af;
               background: transparent;
               margin-left: 14px;
-              outline:none;
+              outline: none;
               font-size: 28px;
               font-family: MicrosoftYaHei, MicrosoftYaHei;
               font-weight: bold;
               color: #38cafb;
               line-height: 37px;
             }
+
+            .units::after {
+              content: "%";
+              position: absolute;
+              right: 6px;
+              top: 40%;
+              bottom: 0;
+              transform: translateY(-50%);
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #38cafb;
+              line-height: 37px;
+            }
           }
         }
       }
+
+      .current {
+        margin-top: 30px;
+        margin-left: 26px;
+        height: 37px;
+        font-size: 28px;
+        color: #FFFFFF;
+      }
+
     }
   }
 }
 
-.units {
-  position: relative;
-}
-
-.units::after {
-  content: "Hz";
-  position: absolute;
-  right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 28px;
-  font-family: MicrosoftYaHei;
-  color: #38cafb;
-  line-height: 37px;
-}
 
 .active {
   color: white;

src/components/content/fanInfo/FanInfoItem.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
+    <div class="label">
+      A相电流:{{params.wp.valueA}}A
+    </div>
+    <div class="container" ref="length">
+      <div class="value" ref="valueA"></div>
+      <div class="point" ref="pointA"></div>
+    </div>
+  </div>
+  <div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
+    <div class="label">
+      B相电流:{{params.wp.valueB}}A
+    </div>
+    <div class="container" ref="length">
+      <div class="value" ref="valueB"></div>
+      <div class="point" ref="pointB"></div>
+    </div>
+  </div>
+  <div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
+    <div class="label">
+      C相电流:{{params.wp.valueC}}A
+    </div>
+    <div class="container" ref="length">
+      <div class="value" ref="valueC"></div>
+      <div class="point" ref="pointC"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const params = defineProps({
+  wp: Object
+});
+const length = ref(null);
+const valueA = ref(null);
+const valueB = ref(null);
+const valueC= ref(null);
+const pointA = ref(null);
+const pointB = ref(null);
+const pointC = ref(null);
+onMounted(()=>{
+  setValueA();
+  setValueB();
+  setValueC();
+})
+
+watch(() => params.wp.value, () => {
+  setValueA();
+  setValueB();
+  setValueC();
+});
+
+const setValueA=()=> {
+  let width = (params.wp.valueA* length.value.offsetWidth) / params.wp.max;
+  valueA.value.style.width = `${width}px`;
+  let flag = (params.wp.pointA * length.value.offsetWidth) / params.wp.max;
+  pointA.value.style.left = `${flag}px`;
+  if (width >= flag) {
+    valueA.value.style.background = "#F53839";
+  } else {
+    valueA.value.style.background = "#60DDDE";
+  }
+}
+const setValueB=()=> {
+  let width = (params.wp.valueB* length.value.offsetWidth) / params.wp.max;
+  valueB.value.style.width = `${width}px`;
+  let flag = (params.wp.pointB * length.value.offsetWidth) / params.wp.max;
+  pointB.value.style.left = `${flag}px`;
+  if (width >= flag) {
+    valueB.value.style.background = "#F53839";
+  } else {
+    valueB.value.style.background = "#60DDDE";
+  }
+}
+const setValueC=()=> {
+  let width = (params.wp.valueC* length.value.offsetWidth) / params.wp.max;
+  valueC.value.style.width = `${width}px`;
+  let flag = (params.wp.pointC * length.value.offsetWidth) / params.wp.max;
+  pointC.value.style.left = `${flag}px`;
+  if (width >= flag) {
+    valueC.value.style.background = "#F53839";
+  } else {
+    valueC.value.style.background = "#60DDDE";
+  }
+}
+
+let isWaringA = computed(() => {
+  return params.wp.valueA >= params.wp.pointA;
+});
+let isWaringB = computed(() => {
+  return params.wp.valueB >= params.wp.pointB;
+});
+let isWaringC = computed(() => {
+  return params.wp.valueC >= params.wp.pointC;
+});
+</script>
+
+<style lang="scss" scoped>
+.abnormal:hover {
+  background: #9C5252 !important;
+  border-radius: 6px;
+
+  .point {
+    background: #fff !important;
+  }
+}
+
+.wind-pressure-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 6px 38px 7px 10px;
+  margin-bottom: 17px;
+
+  &:hover {
+    background: #2E5589;
+    border-radius: 6px;
+  }
+
+  &:last-child {
+    .label {
+      span {
+        margin: 0 5px 0 14px;
+      }
+    }
+  }
+
+  .label {
+    display: flex;
+    white-space: nowrap;
+    align-items: center;
+    margin-right: 20px;
+
+    img {
+      height: 26px;
+      width: 26px;
+    }
+
+    span {
+      //width: 101px;
+      white-space: nowrap;
+      height: 37px;
+      font-size: 28px;
+      color: #d6f1fa;
+      line-height: 37px;
+      margin: 0 20px 0 14px;
+
+    }
+  }
+
+  .container {
+    width: 500px;
+    height: 24px;
+    border-radius: 12px;
+    border: 1px solid #0f82af;
+    position: relative;
+
+    .value {
+      height: inherit;
+      width: 0px;
+      background: #60ddde;
+      border-radius: 10px;
+      transition: width 0.5s linear 0s;
+    }
+
+    .point {
+      position: absolute;
+      height: 20px;
+      background: #92D18F;
+      width: 3px;
+      border-radius: 4px;
+      box-shadow: 0 0 10px #92D18F;
+      top: 1px;
+      left: 1px;
+    }
+  }
+
+  .value-num {
+    height: 37px;
+    font-size: 28px;
+    font-family: MicrosoftYaHei;
+    color: #d6f1fa;
+    line-height: 37px;
+    margin-left: 20px;
+  }
+}
+</style>

src/views/site/index.vue

@@ -34,7 +34,7 @@
                 <div>{{ item.info.tunnelName }}</div>
                 <div class="tunnel-icon"></div>
                 <div>施工长度{{ item.info.constructionLength }}米</div>
-                <div>实现长度{{ item.info.implementationLength }}公里
+                <div>实现长度{{ item.info.totalLength }}公里
                 </div>
               </div>
               <div class="tunnel-add" @click="goToAddTunnel(item.siteId)">

src/views/tunnel/index.vue

@@ -30,8 +30,8 @@
     <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">
-        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" />
-        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />
+        <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" />
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>