Merge pull request 'dev' (#106) from dev into master

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

src/components/content/airInfo/AirInfo.vue

@@ -3,98 +3,79 @@
     <div class="fan-speed">
       <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
       <div class="fan-info">
-        <div class="input-fan"><span>风速</span><span>进风：13m/s</span></div>
-        <div class="output-fan"><span>出风：13m/s</span></div>
+        <div class="input-fan"><span>风速</span><span>进风：{{ windSpeed }}m/s</span></div>
+        <div class="output-fan"><span>出风：{{windSpeed}}m/s</span></div>
       </div>
     </div>
     <item-info
-        :wp="info"
-        icon="o2-icon.png"
-        name="氧气"
-        unit="%"
-    />
-    <item-info
-        :wp="info1"
-        icon="tempture-icon.png"
-        name="温度"
-        unit=".c"
-    />
-    <item-info
-        :wp="info2"
-        icon="water-icon.png"
-        name="湿度"
-        unit="%"
-    />
-    <item-info
-        :wp="info3"
-        icon="dust-icon.png"
-        name="粉尘"
-        unit="mg/m3"
+        v-for="item in airList"
+        :key="item.equipmentId"
+        :wp="item"
+        :icon="item.icon"
+        :name="item.name"
+        :unit="item.unit"
     />
   </div>
 </template>
 
 <script setup>
-import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
 
 const props = defineProps({
   list: Array,
   airData: Array
 });
-let info = reactive({
-  // windPId: 0, //编号
-  // max: 120, //最大值
-  // value: 70, //测量值
-  // point: 60, //阈值
-});
-let info1 = reactive({});
-let info2 = reactive({});
-let info3 = reactive({});
+const windSpeed=ref('')
+const airList = ref([])
+watch(() => props.list, (now) => {
+  airList.value.forEach(item=>{
+    now.forEach(newItem=>{
+      if(item.equipmentId === newItem.equipmentId){
+        item.value = newItem.value
+      }
+    })
+  })
+}, {deep: true});
 watch(() => props.airData, (now) => {
   getAirInfo(now.sensorList)
 }, {deep: true});
 
-watch(() => props.list, (now, old) => {
-  console.log('传感器 ', now, old)
-  now.map(item=>{
-    getInfo(item)
-  })
-}, {deep: true});
-const changeData=(item,flag)=>{
-  return{
+const changeData = (item) => {
+  return {
     equipmentId: item.equipmentId,
+    icon: changeIcon(item.equipmentType),
+    name: item.equipmentName.slice(0, 2),
     max: 120,
-    value: flag?flag.value:item.value,
+    value: item.value,
     point: item.valueThreshold,
-    unit:item.unit
+    unit: item.unit
   }
 }
-const getInfo=(item)=>{
-  if(item.equipmentId==info.equipmentId){
-    // info.value=item.value
-    changeData(item,info1)
-    console.log('info',info)
-  }else if(item.equipmentId==info1.equipmentId){
-    changeData(item,info1)
-  }else if(item.equipmentId==info2.equipmentId){
-    changeData(item,info2)
-  }else if(item.equipmentId==info3.equipmentId){
-    changeData(item,info3)
+const changeIcon = (type) => {
+  switch (type) {
+    case "dust":
+      return 'dust-icon.png';
+    case "oxygen":
+      return 'o2-icon.png';
+    case "temperature":
+      return 'tempture-icon.png';
+    case "humidness":
+      return 'water-icon.png';
   }
 }
 const getAirInfo = (now) => {
+  let windPressureObj = {}
+  let windPressureArr = []
   now.map(item => {
-    if (item.equipmentType === "dust") {//粉尘
-      info3 = changeData(item)
-    } else if (item.equipmentType === "oxygen") {//氧气
-      info = changeData(item)
-    } else if (item.equipmentType === "temperature") {//温度
-      info1 = changeData(item)
-    } else if (item.equipmentType === "humidness") {//湿度
-      info2 = changeData(item)
+    if (item.equipmentType === "dust" || item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
+      windPressureObj = changeData(item)
+      windPressureArr.push(windPressureObj)
+    }else if(item.equipmentType === "windDirection"){
+      windSpeed.value = item.value
     }
   })
+  windPressureArr.push(windPressureArr.shift())
+  airList.value = windPressureArr
 }
 </script>
 

src/components/content/airInfo/childComps/ItemInfo.vue

@@ -2,7 +2,6 @@
   <div id="item-info">
     <div class="label">
       <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
-      <!--      <img :src="params.icon" alt="" />-->
       <span>{{ params.name }}</span>
     </div>
     <div class="container" ref="length">
@@ -16,8 +15,6 @@
 </template>
 
 <script setup>
-import {onMounted, watch, defineProps, computed} from "vue";
-
 const params = defineProps({
   wp: Object,
   icon: String,
@@ -34,21 +31,19 @@ const windIcon = reactive(params.icon);
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
-// onMounted(handleOnMounted);
-//
-// function handleOnMounted() {
-//   // const  = length.value.offsetWidth);
-//   setValue();
-// }
+onMounted(handleOnMounted);
 
-watch(() => params.wp.value, (val) => {
-  console.log('xin----', val)
-  setValue(value);
-}, {deep: true});
+function handleOnMounted() {
+  setValue();
+}
+
+watch(() => params.wp.value, () => {
+  setValue();
+});
 const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
 }
-const setValue = (val) => {
+const setValue = () => {
   let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
   value.value.style.width = `${width}px`;
   let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
@@ -65,7 +60,7 @@ let isWaring = computed(() => {
   return params.wp.value >= params.wp.point;
 });
 
-const valueAndUnit = computed(() => params.wp.value + params.unit + "");
+const valueAndUnit = computed(() => params.wp.value + " "+ params.unit );
 </script>
 
 <style lang="scss" scoped>

src/components/content/badGasInfo/BadGasInfo.vue

@@ -2,70 +2,52 @@
   <div id="bad-gas-info">
     <div class="title">有害气体</div>
     <div class="info-list">
-      <gas-info-item :gasInfo="gasInfo" />
-      <gas-info-item :gasInfo="gasInfo2" />
-      <gas-info-item :gasInfo="gasInfo3" />
-      <gas-info-item :gasInfo="gasInfo4" />
-      <gas-info-item :gasInfo="gasInfo5" />
-      <gas-info-item :gasInfo="gasInfo6" />
+      <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive } from "vue";
 import GasInfoItem from "./childComps/GasInfoItem.vue";
-const gasInfo = reactive({
-  name: "一氧化硫", //气体名称
-  max: 100, //最大值
-  value: 60, //传感器值
-  point: 50, //阈值
-});
-const gasInfo2 = reactive({
-  name: "一氧化氮", //气体名称
-  max: 100, //最大值
-  value: 40, //传感器值
-  point: 10, //阈值
-});
-const gasInfo3 = reactive({
-  name: "一氧化碳", //气体名称
-  max: 100, //最大值
-  value: 15, //传感器值
-  point: 70, //阈值
-});
-const gasInfo4 = reactive({
-  name: "二氧化碳", //气体名称
-  max: 100, //最大值
-  value: 25, //传感器值
-  point: 40, //阈值
-});
-const gasInfo5 = reactive({
-  name: "硫化氢", //气体名称
-  max: 100, //最大值
-  value: 30, //传感器值
-  point: 20, //阈值
-});
-const gasInfo6 = reactive({
-  name: "二氧化硫", //气体名称
-  max: 100, //最大值
-  value: 20, //传感器值
-  point: 20, //阈值
-});
 const props = defineProps({
-  list: Array
+  list: Array,
+  badGasData:Array
 });
+const badGasList=ref([])
 watch(() => props.list, (now, old) => {
-  console.log('传感器 ', now, old)
-  // wpList.value=now
+  badGasList.value.forEach(item=>{
+    now.forEach(newItem=>{
+      if(item.equipmentId === newItem.equipmentId){
+        item.value = newItem.value
+      }
+    })
+  })
 }, {deep: true});
-// setInterval(() => {
-//   gasInfo.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo2.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo3.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo4.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo6.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo5.value = parseInt(Math.random() * 10) * 10;
-// }, 2000);
+
+watch(() => props.badGasData, (now) => {
+  getBadGasInfo(now.sensorList)
+}, {deep: true});
+const getBadGasInfo = (now) => {
+  let windPressureObj = {}
+  let windPressureArr = []
+  now.map(item => {
+    if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide"|| item.equipmentType === "sulfurMonoxide"|| item.equipmentType === "nitrogenDioxide") {
+      windPressureObj = changeData(item)
+      windPressureArr.push(windPressureObj)
+    }
+  })
+  badGasList.value = windPressureArr
+}
+const changeData = (item) => {
+  return {
+    equipmentId: item.equipmentId,
+    name: item.equipmentName.slice(0, item.equipmentName.length-2),
+    max: 120,
+    value: item.value,
+    point: item.valueThreshold,
+    unit: item.unit
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/components/content/badGasInfo/childComps/GasInfoItem.vue

@@ -3,7 +3,6 @@
     <div class="point" ref="point">
       <div class="info" ref="container"></div>
     </div>
-
     <div class="name">{{ gasInfo.name }}</div>
   </div>
 </template>

src/components/content/fanInfo/FanInfo.vue

@@ -343,8 +343,8 @@ const option2 = {
   ],
 };
 
-const fan01_option = reactive(option, {deep: true});
-const fan02_option = reactive(option2, {deep: true});
+const fan01_option = reactive(option);
+const fan02_option = reactive(option2);
 
 function handleOnMounted() {
   Echarts_info1 = echarts.init(info1.value);
@@ -382,7 +382,6 @@ const stateIcon2 = computed(() =>
         ? "blue-state-icon.png"
         : "red-state-icon.png"
 );
-let is = ref("isInput");
 // 功率是否自动
 let isSAuto1 = ref("false");
 let isSAuto2 = ref("false");

src/components/content/transducerList/TransducerList.vue

@@ -1,28 +1,28 @@
 <template>
   <div id="transducer-list">
-    <div v-for="(item,index) in socketData" :key="item.equipmentId">
-      <div class="transducer-item">
-        <img src="@/assets/images/transducer/sp_icon_dy.png"/>
-        <div class="info">
-          <div class="name-state">
-            <div class="name">{{index===1?'二':'一'}}号变频器</div>
-            <div class="state">
-              <img src="@/assets/images/transducer/greenLight.png"/>
-              <span>正常</span>
-            </div>
-          </div>
-          <div class="one-item">
-            <div>A相电压:{{ item.phaseVoltageA }}V</div>
-            <div>B相电压:{{ item.phaseVoltageB }}V</div>
-            <div>C相电压:{{ item.phaseVoltageC }}V</div>
-          </div>
-        </div>
-      </div>
+    <div v-for="item in transducerData" :key="item.equipmentId">
+      <!--      <div class="transducer-item">-->
+      <!--        <img src="@/assets/images/transducer/sp_icon_dy.png"/>-->
+      <!--        <div class="info">-->
+      <!--          <div class="name-state">-->
+      <!--            <div class="name">{{index===1?'二':'一'}}号变频器</div>-->
+      <!--            <div class="state">-->
+      <!--              <img src="@/assets/images/transducer/greenLight.png"/>-->
+      <!--              <span>正常</span>-->
+      <!--            </div>-->
+      <!--          </div>-->
+      <!--          <div class="one-item">-->
+      <!--            <div>A相电压:{{ item.phaseVoltageA }}V</div>-->
+      <!--            <div>B相电压:{{ item.phaseVoltageB }}V</div>-->
+      <!--            <div>C相电压:{{ item.phaseVoltageC }}V</div>-->
+      <!--          </div>-->
+      <!--        </div>-->
+      <!--      </div>-->
       <div class="transducer-item">
         <img src="@/assets/images/transducer/sp_icon_dl.png" alt=""/>
         <div class="info">
           <div class="name-state">
-            <div class="name">{{index===1?'二':'一'}}号变频器</div>
+            <div class="name">{{item.equipmentName}}</div>
             <div class="state" v-if="item.phaseCurrentB>'100'">
               <img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
               <span style="color: red">异常</span>
@@ -43,7 +43,7 @@
         <img src="@/assets/images/transducer/sp_icon_pbq.png"/>
         <div class="info">
           <div class="name-state">
-            <div class="name">{{index===1?'二':'一'}}号变频器</div>
+            <div class="name">{{item.equipmentName}}</div>
             <div class="state">
               <img src="@/assets/images/transducer/greenLight.png"/>
               <span>正常</span>
@@ -72,55 +72,48 @@
 <script setup>
 const props = defineProps({
   list: Array,
-  feedback: Array,
+  transducerData: Array
 });
-const socketData = ref([
-  {
-    equipmentId: 23,
-    phaseCurrentA: '124.01',
-    phaseCurrentB: '124.51',
-    phaseCurrentC: '125.01',
-    phaseVoltageA: '404.01',
-    phaseVoltageB: '404.51',
-    phaseVoltageC: '414.01',
-    frequencySetting: '23',
-    frequencyFeedback: '23'
-  },
-  {
-    equipmentId: 23,
-    phaseCurrentA: '124.01',
-    phaseCurrentB: '124.51',
-    phaseCurrentC: '125.01',
-    phaseVoltageA: '404.01',
-    phaseVoltageB: '404.51',
-    phaseVoltageC: '414.01',
-    frequencySetting: '23',
-    frequencyFeedback: '23'
-  }
-])
-const contactData=ref([])
-watch(() => props.list, (now, old) => {
-  console.log('电流电压',now,contactData.value)
-  let obj={}
-  let arr=[]
-  contactData.value.forEach(contactItem=>{
-    now.forEach(item=>{
-      if(contactItem.equipmentId===item.equipmentId){
-        obj={
-          ...item,
-          frequencySetting: contactItem.frequencySetting,
-          frequencyFeedback: contactItem.frequencyFeedback
+const transducerData = ref([])
+
+watch(() => props.transducerData, (now) => {
+  getBasicData(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
         }
-        arr.push(obj)
       }
     })
   })
-  socketData.value=arr
-}, {deep: true});
-watch(() => props.feedback, (now, old) => {
-  console.log('变频器频率',now)
-  contactData.value=now
 }, {deep: true});
+
+const getBasicData = (data) => {
+  let tranObj = {}
+  let tranArr = []
+  data.map(item => {
+    tranObj = {
+      equipmentId: item.equipmentId,
+      equipmentName:item.equipmentName,
+      phaseCurrentA: item.phaseCurrentA,
+      phaseCurrentB: item.phaseCurrentB,
+      phaseCurrentC: item.phaseCurrentC,
+      frequencySetting: item.frequencySetting,
+      frequencyFeedback: item.frequencyFeedback,
+    }
+    tranArr.push(tranObj)
+  })
+  transducerData.value = tranArr
+}
 </script>
 
 <style lang="scss" scoped>

src/components/content/usedEle/UsedEle.vue

@@ -2,8 +2,8 @@
   <div id="used-ele">
     <div class="title">用电量</div>
     <div class="content">
-      <div class="item" v-for="(item,index) in socketData" :key="item.equipmentId">
-        <div class="name">{{index===1?'二':'一'}}号变频器</div>
+      <div class="item" v-for="item in eleData" :key="item.equipmentId">
+        <div class="name">{{ item.equipmentName }}</div>
         <ul>
           <li>
             <div></div>
@@ -25,28 +25,41 @@
 
 <script setup>
 const props = defineProps({
-  oneTransducer: Object,
-  twoTransducer: Object,
-  list: Array
+  list: Array,
+  eleData: Array
 });
-const socketData = ref([
-  {
-    electricityConsumptionDay: 234,
-    electricityConsumptionMonthly: 345,
-    electricityConsumptionTotal: 235,
-    equipmentId: 22,
-  },
-  {
-    electricityConsumptionDay: 234,
-    electricityConsumptionMonthly: 345,
-    electricityConsumptionTotal: 235,
-    equipmentId:23,
-  }
-])
-watch(() => props.list, (now, old) => {
-  console.log('用电量',now,old)
-  socketData.value = now
+const eleData = ref([])
+watch(() => props.eleData, (now) => {
+  getBasicData(now.frequencyChangerList)
 }, {deep: true});
+watch(() => props.list, (now) => {
+  eleData.value.forEach(item => {
+    now.forEach(newItem => {
+      if (item.equipmentId === newItem.equipmentId) {
+        if (newItem.electricityConsumptionDay) {
+          item.electricityConsumptionDay = newItem.electricityConsumptionDay
+          item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
+          item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
+        }
+      }
+    })
+  })
+}, {deep: true});
+const getBasicData = (data) => {
+  let tranObj = {}
+  let tranArr = []
+  data.map(item => {
+    tranObj = {
+      equipmentId: item.equipmentId,
+      equipmentName: item.equipmentName,
+      electricityConsumptionDay: item.electricityConsumptionDay,
+      electricityConsumptionMonthly: item.electricityConsumptionMonthly,
+      electricityConsumptionTotal: item.electricityConsumptionTotal,
+    }
+    tranArr.push(tranObj)
+  })
+  eleData.value = tranArr
+}
 </script>
 
 <style lang="scss" scoped>

src/components/content/windPressure/WindPressureList.vue

@@ -2,7 +2,7 @@
   <div id="wind-pressure">
     <div class="name">风压</div>
     <div class="list">
-      <wind-pressure-item v-for="(item,index) in wpList" :wp="item" :index="index+1"/>
+      <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1"/>
     </div>
   </div>
 </template>
@@ -15,22 +15,26 @@ const props = defineProps({
   winData: Array
 });
 const wpList = ref([]);
-watch(() => props.list, (now, old) => {
-  now.map(item=>{
-    item.unit='Pa'
+watch(() => props.list, (now) => {
+  wpList.value.forEach(item=>{
+    now.forEach(newItem=>{
+      if(item.equipmentId === newItem.equipmentId){
+        item.value = newItem.value
+      }
+    })
   })
-  wpList.value = now
 }, {deep: true});
 
 watch(() => props.winData, (now) => {
-  getScreenInfo(now)
+  getScreenInfo(now.windPressureSensorList)
 }, {deep: true});
 
 const getScreenInfo =  (now) => {
   let windPressureObj = {}
   let windPressureArr = []
-  now.windPressureSensorList.map(item => {
+  now.map(item => {
     windPressureObj = {
+      equipmentId:item.equipmentId,
       max: 120,
       value: item.value,
       point: item.valueThreshold,

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

@@ -15,8 +15,6 @@
 </template>
 
 <script setup>
-import {reactive, onMounted, watch, defineProps, computed} from "vue";
-
 const params = defineProps({
   wp: Object,
   index: Number,
@@ -27,18 +25,16 @@ const params = defineProps({
 //   value: 40, //测量值
 //   point: 60, //阈值
 // };
-// const wp = reactive(info);
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
 onMounted(handleOnMounted);
 
 function handleOnMounted() {
-  // const  = length.value.offsetWidth);
   setValue();
 }
 
-watch(() => params.wp.value, (value) => {
+watch(() => params.wp.value, () => {
   setValue();
 });
 

src/views/tunnel/index.vue

@@ -20,9 +20,9 @@
     <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.frequencyState"/>
-        <transducer-list :list="socketData.currentVoltage" :feedback="socketData.frequencyFeedback"/>
-        <used-ele :list="socketData.electricityConsumption"/>
+        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"/>
+        <transducer-list :list="socketData.leftData"  :transducer-data="largeScreenData"/>
+        <used-ele :list="socketData.leftData" :ele-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
@@ -37,9 +37,9 @@
           :close-on-click-modal="false"
           :close-on-press-escape="false"
       >
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :winData="largeScreenData"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :airData="largeScreenData"/>
-        <bad-gas-info v-if="showFan" :list="socketData.sensor"/>
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -115,10 +115,7 @@ let send = {
 }
 const largeScreenData = ref(null)
 const socketData = reactive({
-  currentVoltage: [],
-  frequencyState: [],
-  frequencyFeedback: [],
-  electricityConsumption: [],
+  leftData: [],
   windPressure: [],
   sensor: [],
 })
@@ -140,7 +137,6 @@ const getScreenInfo = async () => {
 const manageSelect = (index) => {
   console.log('首页点击-', index)
   if (index === 0) {
-    console.log('站点管理=====-----')
     router.push('/site')
   }
 };
@@ -181,23 +177,11 @@ const initWebSocket = () => {
     const data = JSON.parse(event.data).data
     if (type === 'equipment') {
       data.forEach((item) => {
-        if (item.typeKey === 'currentVoltage') {
-          console.log('电流电压')
-          socketData.currentVoltage = data
-        } else if (item.typeKey === 'frequencyFeedback') {
-          console.log('变频器频率')
-          socketData.frequencyFeedback = data
-        } else if (item.typeKey === 'frequencyState') {
-          console.log('风机状态')
-          socketData.frequencyState = data
-        } else if (item.typeKey === 'electricityConsumption') {
-          console.log('用电量')
-          socketData.electricityConsumption = data
+        if (item.typeKey === 'frequency') {
+          socketData.leftData = data
         } else if (item.typeKey === 'windPressure') {
-          console.log('风压风压')
           socketData.windPressure = data
         } else if (item.typeKey === 'sensor') {
-          console.log('传感器==========?')
           socketData.sensor = data
         }
       })