Merge pull request '邓洁 : 打开弹窗时背景更改' (#126) from dengjie into dev

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

src/components/content/badGasInfo/BadGasInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="bad-gas-info">
+  <div id="bad-gas-info" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }">
     <div class="title">有害气体</div>
     <div class="info-list">
       <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
@@ -38,7 +38,11 @@ const selectTimeButton = ref(0);
 const isVisited = ref(false);
 const badGasList = ref([])
 let myEcharts = reactive({});
-
+const bgImage = computed(() =>
+    isVisited.value
+        ? "sp_active.png"
+        : "bg.png"
+);
 watch(() => props.list, (now) => {
   badGasList.value.forEach(item => {
     now.forEach(newItem => {
@@ -90,6 +94,9 @@ const handleOpenChart = () => {
     initChart()
   })
 }
+const getImageUrl = (name) => {
+  return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url).href
+}
 /**
  * 初始化echarts实例方法
  */
@@ -213,7 +220,7 @@ const initChart = () => {
   height: 621px;
   top: 1441px;
   right: 72px;
-  background-image: url(@/assets/images/badGasInfo/bg.png);
+  background-image: url(../../../assets/images/badGasInfo/bg.png);
 
 
   .title {

src/components/content/transducerList/TransducerList.vue

@@ -5,7 +5,7 @@
         <img src="@/assets/images/transducer/sp_icon_dl.png" alt=""/>
         <div class="info">
           <div class="name-state">
-            <div class="name">{{item.equipmentName}}</div>
+            <div class="name">{{ item.equipmentName }}</div>
             <div class="state" v-if="stateA||stateB||stateC">
               <img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
               <span style="color: red">异常</span>
@@ -26,7 +26,7 @@
         <img src="@/assets/images/transducer/sp_icon_pbq.png"/>
         <div class="info">
           <div class="name-state">
-            <div class="name">{{item.equipmentName}}</div>
+            <div class="name">{{ item.equipmentName }}</div>
             <div class="state">
               <img src="@/assets/images/transducer/greenLight.png"/>
               <span>正常</span>
@@ -79,16 +79,16 @@ watch(() => props.list, (now) => {
     })
   })
 }, {deep: true});
-const stateA=ref(false)
+const stateA = ref(false)
-const stateB=ref(false)
+const stateB = ref(false)
-const stateC=ref(false)
+const stateC = ref(false)
 const getBasicData = (data) => {
   let tranObj = {}
   let tranArr = []
   data.map(item => {
     tranObj = {
       equipmentId: item.equipmentId,
-      equipmentName:item.equipmentName,
+      equipmentName: item.equipmentName,
       phaseCurrentA: item.phaseCurrentA,
       phaseCurrentAThreshold: item.phaseCurrentAThreshold,
       phaseCurrentB: item.phaseCurrentB,
@@ -98,25 +98,25 @@ const getBasicData = (data) => {
       frequencySetting: item.frequencySetting,
       frequencyFeedback: item.frequencyFeedback,
     }
-    stateA.value=item.phaseCurrentA>item.phaseCurrentAThreshold
+    stateA.value = item.phaseCurrentA > item.phaseCurrentAThreshold
-    stateB.value=item.phaseCurrentB>item.phaseCurrentBThreshold
+    stateB.value = item.phaseCurrentB > item.phaseCurrentBThreshold
-    stateC.value=item.phaseCurrentC>item.phaseCurrentCThreshold
+    stateC.value = item.phaseCurrentC > item.phaseCurrentCThreshold
     tranArr.push(tranObj)
   })
   //mock数据
- // let newObj = {
+  // let newObj = {
- //    equipmentId: 0,
+  //    equipmentId: 0,
- //    equipmentName:'3号变频器',
+  //    equipmentName:'3号变频器',
- //    phaseCurrentA: 210,
+  //    phaseCurrentA: 210,
- //    phaseCurrentAThreshold: 200,
+  //    phaseCurrentAThreshold: 200,
- //    phaseCurrentB: 231,
+  //    phaseCurrentB: 231,
- //    phaseCurrentBThreshold: 300,
+  //    phaseCurrentBThreshold: 300,
- //    phaseCurrentC: 154,
+  //    phaseCurrentC: 154,
- //    phaseCurrentCThreshold:200,
+  //    phaseCurrentCThreshold:200,
- //    frequencySetting: 23,
+  //    frequencySetting: 23,
- //    frequencyFeedback: 34,
+  //    frequencyFeedback: 34,
- //  }
+  //  }
- //  tranArr.push(newObj)
+  //  tranArr.push(newObj)
   transducerData.value = tranArr
 }
 </script>
@@ -127,10 +127,11 @@ const getBasicData = (data) => {
   position: absolute;
   top: 1015px;
   left: 70px;
-  width: 826px;
+  width: 830px;
   height: 928px;
   background-image: url(@/assets/images/transducer/bg.png);
   padding: 0 30px;
+  box-sizing: border-box;
 
   .transducer-item {
     border-bottom: rgba(107, 163, 237, 0.4) solid 2px;

src/components/content/usedEle/UsedEle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="used-ele">
+  <div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }">
     <div class="content" @click="handleOpenChart">
       <div class="item">
         <div></div>
@@ -48,6 +48,11 @@ const isVisited = ref(false);
 const eleData = ref([])
 const electricityConsumptionMonthly = ref()
 const monthlySavings = ref(55555)
+const bgImage = computed(() =>
+    isVisited.value
+        ? "bpq_active.png"
+        : "bg.png"
+);
 watch(() => props.eleData, (now) => {
   getBasicData(now.frequencyChangerList)
 }, {deep: true});
@@ -154,7 +159,9 @@ const initChart = () => {
     myEcharts.resize();
   }
 }
-
+const getImageUrl = (name) => {
+  return new URL(`../../../assets/images/usedEle/${name}`, import.meta.url).href
+}
 </script>
 
 <style lang="scss" scoped>
@@ -184,7 +191,6 @@ const initChart = () => {
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
-
     .item {
       height: 37px;
       font-size: 28px;

src/components/content/windPressure/childComps/WindPressureItem.vue

@@ -99,7 +99,6 @@ let isWaring = computed(() => {
       white-space: nowrap;
       height: 37px;
       font-size: 28px;
-      font-family: MicrosoftYaHei;
       color: #d6f1fa;
       line-height: 37px;
       margin: 0 20px 0 14px;
@@ -125,7 +124,7 @@ let isWaring = computed(() => {
     #point {
       position: absolute;
       height: 20px;
-      background: #60ddde;
+      background: #92D18F;
       width: 3px;
       border-radius: 4px;
       box-shadow: 0 0 10px #92D18F;