邓洁 : 风压风速接口

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({
-  windPId: 0, //编号
-  max: 120, //最大值
-  value: 70, //测量值
-  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 info = reactive({
+  // windPId: 0, //编号
+  // max: 120, //最大值
+  // value: 70, //测量值
+  // point: 60, //阈值
 });
+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(() => {
-//   info.value = parseInt(Math.random() * 10) * 10;
-//   info1.value = parseInt(Math.random() * 10) * 10;
-//   info2.value = parseInt(Math.random() * 10) * 10;
-//   info3.value = parseInt(Math.random() * 10) * 10;
-// }, 2000);
-
+const changeData=(item,flag)=>{
+  return{
+    equipmentId: item.equipmentId,
+    max: 120,
+    value: flag?flag.value:item.value,
+    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() {
-  // const  = length.value.offsetWidth);
-  setValue();
-}
-
-watch(
-    () => params.wp.value,
-    (value) => {
-      setValue();
-    }
-);
+watch(() => params.wp.value, (val) => {
+  console.log('xin----', val)
+  setValue(value);
+}, {deep: true});
 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([
-  {
-    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, //阈值
-  },
-]);
+const wpList = ref([]);
 watch(() => props.list, (now, old) => {
-  console.log('风压', now, old)
+  now.map(item=>{
+    item.unit='Pa'
+  })
   wpList.value = now
 }, {deep: true});
-// setInterval(() => {
-//   wpList.forEach((item) => {
-//     item.value = parseInt(Math.random() * 10) * 10;
-//   });
-// }, 2000);
+
+watch(() => props.winData, (now) => {
+  getScreenInfo(now)
+}, {deep: true});
+
+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(
-    () => params.wp.value,
-    (value) => {
-      setValue();
-    }
-);
+watch(() => params.wp.value, (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{
-  background: #9C5252!important;
+.abnormal:hover {
+  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',
-    name: '模拟仿真'
-  },
+  // {
+  //   icon: 'sp_icon_mngl.png',
+  //   name: '模拟仿真'
+  // },
 ])
 const selectButton = ref(props.modelValue);
 const getImageUrl = (name) => {

src/views/tunnel/index.vue

@@ -43,8 +43,8 @@
           :close-on-click-modal="false"
           :close-on-press-escape="false"
       >
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure"/>
-        <air-info v-if="showFan" :list="socketData.sensor"/>
+        <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>
@@ -77,7 +77,7 @@ import {dateFormat} from "@/utils/date.js";
 import {onMounted} from "vue";
 import {getToken} from "@/utils/auth";
 import {useAuthStore} from '@/store/userstore.js'
-
+import {getLargeScreen} from "@/api/largeScreen";
 const authStore = useAuthStore()
 const router = useRouter()
 const selectIndex = ref(1)
@@ -118,6 +118,7 @@ let token = getToken();
 let send = {
   type: "ping"
 }
+const largeScreenData=ref(null)
 const socketData = reactive({
   currentVoltage: [],
   frequencyState: [],
@@ -130,11 +131,19 @@ 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')
   }
 
@@ -193,7 +202,7 @@ const initWebSocket = () => {
           console.log('风压风压')
           socketData.windPressure = data
         }else if (item.typeKey === 'sensor') {
-          console.log('传感器==========?')
+          console.log('传感器')
           socketData.sensor = data
         }
       })