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

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

src/api/largeScreen.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request.js'
+
+export const getLargeScreen = (tunnelId) => {
+  return request({
+    url: `/tunnel/large/screen/equipment/${tunnelId}`,
+    method: 'get'
+  })
+}

src/components/content/airInfo/AirInfo.vue

@@ -39,43 +39,63 @@ import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
 
 const props = defineProps({
-  list: Array
+  list: Array,
+  airData: Array
 });
-const info = reactive({
+let info = reactive({
-  windPId: 0, //编号
+  // windPId: 0, //编号
-  max: 120, //最大值
+  // max: 120, //最大值
-  value: 70, //测量值
+  // value: 70, //测量值
-  point: 60, //阈值
+  // point: 60, //阈值
-});
-const info1 = reactive({
-  windPId: 0, //编号
-  max: 120, //最大值
-  value: 60, //测量值
-  point: 70, //阈值
-});
-const info2 = reactive({
-  windPId: 0, //编号
-  max: 120, //最大值
-  value: 90, //测量值
-  point: 100, //阈值
-});
-const info3 = reactive({
-  windPId: 0, //编号
-  max: 120, //最大值
-  value: 80, //测量值
-  point: 88, //阈值
 });
+let info1 = reactive({});
+let info2 = reactive({});
+let info3 = reactive({});
+watch(() => props.airData, (now) => {
+  getAirInfo(now.sensorList)
+}, {deep: true});
+
 watch(() => props.list, (now, old) => {
   console.log('传感器 ', now, old)
-  // wpList.value=now
+  now.map(item=>{
+    getInfo(item)
+  })
 }, {deep: true});
-// setInterval(() => {
+const changeData=(item,flag)=>{
-//   info.value = parseInt(Math.random() * 10) * 10;
+  return{
-//   info1.value = parseInt(Math.random() * 10) * 10;
+    equipmentId: item.equipmentId,
-//   info2.value = parseInt(Math.random() * 10) * 10;
+    max: 120,
-//   info3.value = parseInt(Math.random() * 10) * 10;
+    value: flag?flag.value:item.value,
-// }, 2000);
+    point: item.valueThreshold,
-
+    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 getAirInfo = (now) => {
+  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)
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -97,7 +117,7 @@ watch(() => props.list, (now, old) => {
     color: #ffffff;
     line-height: 40px;
     align-items: center;
-    padding:5px 0 5px 15px;
+    padding: 5px 0 5px 15px;
     margin-bottom: 25px;
 
     &:hover {

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

@@ -34,23 +34,21 @@ const windIcon = reactive(params.icon);
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
-onMounted(handleOnMounted);
+// onMounted(handleOnMounted);
+//
+// function handleOnMounted() {
+//   // const  = length.value.offsetWidth);
+//   setValue();
+// }
 
-function handleOnMounted() {
+watch(() => params.wp.value, (val) => {
-  // const  = length.value.offsetWidth);
+  console.log('xin----', val)
-  setValue();
+  setValue(value);
-}
+}, {deep: true});
-
-watch(
-    () => params.wp.value,
-    (value) => {
-      setValue();
-    }
-);
 const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
 }
-const setValue = () => {
+const setValue = (val) => {
   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;
@@ -76,7 +74,8 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
   align-items: center;
   width: 100%;
   padding: 5px 14px;
-margin-bottom: 30px;
+  margin-bottom: 30px;
+
   &:hover {
     background: #2E5589;
     border-radius: 6px;

src/components/content/windPressure/WindPressureList.vue

@@ -11,69 +11,35 @@
 import WindPressureItem from "./childComps/WindPressureItem.vue";
 
 const props = defineProps({
-  list: Array
+  list: Array,
+  winData: Array
 });
-const wpList = ref([
+const wpList = ref([]);
-  {
-    max: 120, //最大值
-    value: 40, //测量值
-    point: 60, //阈值
-  },
-  {
-    max: 120, //最大值
-    value: 66, //测量值
-    point: 60, //阈值
-  },
-  {
-    max: 120, //最大值
-    value: 70, //测量值
-    point: 50, //阈值
-  },
-  {
-    max: 120, //最大值
-    value: 90, //测量值
-    point: 60, //阈值
-  },
-  {
-    max: 120, //最大值
-    value: 40, //测量值
-    point: 30, //阈值
-  },
-  {
-    max: 120, //最大值
-    value: 30, //测量值
-    point: 50, //阈值
-  },
-  {
-    max: 120, //最大值
-    value: 20, //测量值
-    point: 30, //阈值
-  },
-  {
-    max: 120, //最大值
-    value: 20, //测量值
-    point: 30, //阈值
-  },
-  {
-    max: 120, //最大值
-    value: 120, //测量值
-    point: 80, //阈值
-  },
-  {
-    max: 120, //最大值
-    value: 99, //测量值
-    point: 70, //阈值
-  },
-]);
 watch(() => props.list, (now, old) => {
-  console.log('风压', now, old)
+  now.map(item=>{
+    item.unit='Pa'
+  })
   wpList.value = now
 }, {deep: true});
-// setInterval(() => {
+
-//   wpList.forEach((item) => {
+watch(() => props.winData, (now) => {
-//     item.value = parseInt(Math.random() * 10) * 10;
+  getScreenInfo(now)
-//   });
+}, {deep: true});
-// }, 2000);
+
+const getScreenInfo =  (now) => {
+  let windPressureObj = {}
+  let windPressureArr = []
+  now.windPressureSensorList.map(item => {
+    windPressureObj = {
+      max: 120,
+      value: item.value,
+      point: item.valueThreshold,
+      unit: item.unit
+    }
+    windPressureArr.push(windPressureObj)
+  })
+  wpList.value = windPressureArr
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -9,7 +9,7 @@
       <div id="point" ref="point"></div>
     </div>
     <div class="value-num" :class="{ warning: isWaring }">
-      {{ params.wp.value }}Pa
+      {{ params.wp.value }}{{ params.wp.unit }}
     </div>
   </div>
 </template>
@@ -38,12 +38,9 @@ function handleOnMounted() {
   setValue();
 }
 
-watch(
+watch(() => params.wp.value, (value) => {
-    () => params.wp.value,
+  setValue();
-    (value) => {
+});
-      setValue();
-    }
-);
 
 function setValue() {
   let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
@@ -63,13 +60,15 @@ let isWaring = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.abnormal:hover{
+.abnormal:hover {
-  background: #9C5252!important;
+  background: #9C5252 !important;
   border-radius: 6px;
+
   #point {
-    background: #fff!important;
+    background: #fff !important;
   }
 }
+
 #wind-pressure-item {
   display: flex;
   align-items: center;

src/components/manageBtn/index.vue

@@ -20,6 +20,7 @@ const btnList = ref([
     icon: 'sp_icon_zdgl.png',
     name: '站点管理'
   },
+
   {
     icon: 'sp_icon_sdgl.png',
     name: '隧道管理'
@@ -32,10 +33,10 @@ const btnList = ref([
     icon: 'sp_icon_xtgl.png',
     name: '系统管理'
   },
-  {
+  // {
-    icon: 'sp_icon_mngl.png',
+  //   icon: 'sp_icon_mngl.png',
-    name: '模拟仿真'
+  //   name: '模拟仿真'
-  },
+  // },
 ])
 const selectButton = ref(props.modelValue);
 const getImageUrl = (name) => {

src/views/tunnel/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" />
+      <manage-btn v-model="selectIndex" @select="manageSelect"/>
       <div class="tunnel-title"></div>
       <manage-length class="tunnel-length"></manage-length>
       <div class="top-right">
@@ -16,28 +16,34 @@
         </div>
       </div>
     </div>
-    <tunnel-scene id="tunnel-box" />
+    <tunnel-scene id="tunnel-box"/>
     <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.frequencyState" />
+        <fan-info v-if="showFan" :list="socketData.frequencyState"/>
-        <transducer-list :list="socketData.currentVoltage" :feedback="socketData.frequencyFeedback" />
+        <transducer-list :list="socketData.currentVoltage" :feedback="socketData.frequencyFeedback"/>
-        <used-ele :list="socketData.electricityConsumption" />
+        <used-ele :list="socketData.electricityConsumption"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right">
-      <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
+      <el-drawer
-        :close-on-click-modal="false" :close-on-press-escape="false">
+          v-model="drawerRight"
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" />
+          direction="rtl"
-        <air-info v-if="showFan" :list="socketData.sensor" />
+          modal-class="modal-box"
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" />
+          :modal="false"
+          :show-close="false"
+          :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"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
     </div>
-
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
       <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false">
@@ -63,15 +69,17 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import { dateFormat } from "@/utils/date.js";
+import ManageLength from "@/components/manageLength/index.vue";
-import { onMounted } from "vue";
+import {dateFormat} from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
+import {onMounted} from "vue";
-import { useAuthStore } from '@/store/userstore.js'
+import {getToken} from "@/utils/auth";
+import {useAuthStore} from '@/store/userstore.js'
+import {getLargeScreen} from "@/api/largeScreen";
 
-// const showFan = ref()
 const authStore = useAuthStore()
 const router = useRouter()
 const selectIndex = ref(1)
+const showFan = ref(false)
 const drawerLeft = ref(true)
 const drawerRight = ref(true)
 const currentSite = ref('松江站')
@@ -97,10 +105,7 @@ const tunnelList = ref([
   }, {
     value: 5,
     name: '六号隧道'
-  }, {
+  }
-    value: 6,
-    name: '七号隧道'
-  },
 ])
 let socket = reactive('')
 const serialNumber = ref('SC00DY00GH00ELBT')
@@ -108,6 +113,7 @@ let token = getToken();
 let send = {
   type: "ping"
 }
+const largeScreenData = ref(null)
 const socketData = reactive({
   currentVoltage: [],
   frequencyState: [],
@@ -121,15 +127,22 @@ onMounted(() => {
   nextTick(() => {
     showFan.value = true
   })
+  getScreenInfo()
 })
+
+const getScreenInfo = async () => {
+  await getLargeScreen(1).then(res => {
+    if (res?.code === 1000) {
+      largeScreenData.value = res.data
+    }
+  })
+}
 const manageSelect = (index) => {
   console.log('首页点击-', index)
   if (index === 0) {
     console.log('站点管理=====-----')
     router.push('/site')
   }
-
-  // getInfo();
 };
 const closeLeft = () => {
   drawerLeft.value = !drawerLeft.value