邓洁: 切换隧道,数据渲染

src/components/content/airInfo/AirInfo.vue

@@ -7,15 +7,17 @@
         <div class="output-fan"><span>出风：{{windSpeed}}m/s</span></div>
       </div>
     </div>
-    <item-info
+    <div v-if="airList.length!==0">
-        v-for="item in airList"
+      <item-info
-        :key="item.equipmentId"
+          v-for="item in airList"
-        :wp="item"
+          :key="item.equipmentId"
-        :icon="item.icon"
+          :wp="item"
-        :name="item.name"
+          :icon="item.icon"
-        :unit="item.unit"
+          :name="item.name"
-        @click="handleOpenAirChart(item)"
+          :unit="item.unit"
-    />
+          @click="handleOpenAirChart(item)"
+      />
+    </div>
     <div class="digital-tunnel">
       <el-dialog v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px" :modal="false">
         <div class="left-top-icon"></div>
@@ -136,7 +138,7 @@ const changeIcon = (type) => {
 const getAirInfo = (now) => {
   let airObj = {}
   let airArr = []
-  now.map(item => {
+  now?.map(item => {
     if (item.equipmentType === "dust" || item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
       airObj = changeData(item)
       airArr.push(airObj)

src/components/content/badGasInfo/BadGasInfo.vue

@@ -89,7 +89,7 @@ const timeSelect = (index) => {
 const getBadGasInfo = (now) => {
   let windPressureObj = {};
   let windPressureArr = [];
-  now.map((item) => {
+  now?.map((item) => {
     if (
       item.equipmentType === "carbonDioxide" ||
       item.equipmentType === "carbonMonoxide" ||

src/components/content/fanInfo/FanInfo.vue

@@ -110,7 +110,7 @@ const changeNum = (index) => {
 const getBasicData = (data) => {
   let tranObj = {}
   let tranArr = []
-  data.map(item => {
+  data?.map(item => {
     tranObj = {
       equipmentId: item.equipmentId,
       autoMode: item.autoMode,//自动模式

src/components/content/transducerList/TransducerList.vue

@@ -85,7 +85,7 @@ const stateC = ref(false)
 const getBasicData = (data) => {
   let tranObj = {}
   let tranArr = []
-  data.map(item => {
+  data?.map(item => {
     tranObj = {
       equipmentId: item.equipmentId,
       equipmentName: item.equipmentName,

src/components/content/usedEle/UsedEle.vue

@@ -76,7 +76,7 @@ watch(() => props.list, (now) => {
 const getBasicData = (data) => {
   let tranObj = {}
   let tranArr = []
-  data.map(item => {
+  data?.map(item => {
     electricityConsumptionMonthly.value = item.electricityConsumptionMonthly,
         tranObj = {
           equipmentId: item.equipmentId,

src/components/content/windPressure/WindPressureList.vue

@@ -87,7 +87,7 @@ const timeSelect = (index) => {
 const getScreenInfo = (now) => {
   let windPressureObj = {}
   let windPressureArr = []
-  now.map(item => {
+  now?.map(item => {
     windPressureObj = {
       equipmentId: item.equipmentId,
       max: 120,

src/views/tunnel/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/>
       <div class="tunnel-title"></div>
       <manage-length class="tunnel-length"></manage-length>
       <div class="top-right">
@@ -16,30 +16,30 @@
         </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.leftData" :fan-data="largeScreenData" />
+        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"/>
-        <transducer-list :list="socketData.leftData" :transducer-data="largeScreenData" />
+        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData"/>
-        <used-ele :list="socketData.leftData" :ele-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>
       <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"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-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" />
+        <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>
     </div>
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
-      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false">
+      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" @change="changeTunnel">
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.label }}
@@ -61,13 +61,14 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import ManageLength from "@/components/manageLength/index.vue";
-import { dateFormat } from "@/utils/date.js";
+import {dateFormat} from "@/utils/date.js";
-import { onMounted } from "vue";
+import {onMounted} from "vue";
-import { getToken } from "@/utils/auth";
+import {getToken} from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
+import {useAuthStore} from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo } from "@/api/largeScreen";
+import {getLargeScreen, getLargeScreenInfo} from "@/api/largeScreen";
-import { ElMessageBox } from "element-plus";
+import {ElMessageBox} from "element-plus";
 import {getUserInfo} from "@/api/login";
+
 const authStore = useAuthStore();
 const router = useRouter();
 const selectIndex = ref(-1);
@@ -79,6 +80,7 @@ const currentUser = ref("");
 const currentDate = ref(dateFormat());
 const tunnelBtn = ref();
 const tunnelList = ref([]);
+const tunnelId = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
 const serialNumber = ref("SC00DY00GH00ELBT");
@@ -99,30 +101,46 @@ onMounted(() => {
   });
   getUser()
   getOtherInfo()
-  getScreenInfo();
+
 });
 
-const getUser=()=>{
+const getUser = () => {
-  getUserInfo().then(res=>{
+  getUserInfo().then(res => {
-    currentUser.value=res.data.user.userName
+    currentUser.value = res.data.user.userName
   })
 }
-const getOtherInfo = async () => {
+const getOtherInfo = () => {
-  await getLargeScreenInfo().then((res) => {
+  getLargeScreenInfo().then((res) => {
     if (res?.code === 1000) {
       routeList.value = res.data.routeList
       currentSite.value = res.data.siteOption[0].label
       tunnelList.value = res.data.tunnelOption
+      tunnelId.value = res.data.tunnelOption[0].value
+      getScreenInfo(tunnelId.value);
     }
   });
 };
-const getScreenInfo = async () => {
+const getScreenInfo = async (id) => {
-  await getLargeScreen(1).then((res) => {
+  await getLargeScreen(id).then((res) => {
     if (res?.code === 1000) {
       largeScreenData.value = res.data;
     }
   });
 };
+const changeTunnel = (e) => {
+  console.log('e', e,tunnelList.value)
+  let newObj = {}
+  tunnelList.value.forEach((item, index) => {
+    if (index === e) {
+      newObj = item
+    }
+  })
+  getScreenInfo(newObj.value)
+  nextTick(() => {
+    showFan.value = true;
+  });
+  console.log('newObj', newObj)
+}
 const manageSelect = (index) => {
   console.log("首页点击-", index);
   if (index === 0) {