Merge pull request '邓洁 : 有害气体echarts数据,切换站点与隧道数据渲染' (#164) from dengjie into dev

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

src/api/largeScreen.js

@@ -14,6 +14,13 @@ export const getLargeScreenInfo = () => {
     method: 'get'
   })
 }
+//通过站点id获取隧道信息
+export const getTunnelBySiteId = (siteId) => {
+  return request({
+    url: `/tunnel/large/screen/tunnel/option/${siteId}`,
+    method: 'get'
+  })
+}
 // 风压echarts数据
 export const getEchartsInfo = (equipmentId) => {
   return request({
@@ -21,3 +28,10 @@ export const getEchartsInfo = (equipmentId) => {
     method: 'get'
   })
 }
+// 有害气体echarts数据
+export const getBadGasEchartsInfo = (tunnelId) => {
+  return request({
+    url: `/tunnel/large/screen/echarts/gas/sensor/${tunnelId}`,
+    method: 'get'
+  })
+}

src/assets/styles/index.scss

@@ -81,7 +81,6 @@ body,
     .current-site {
       display: flex;
       align-items: center;
-
       > span:first-child {
         color: #f7b500;
         margin-right: 20px;

src/components/content/badGasInfo/BadGasInfo.vue

@@ -44,10 +44,12 @@
 import GasInfoItem from "./childComps/GasInfoItem.vue";
 import * as echarts from "echarts";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
+import {getBadGasEchartsInfo} from "@/api/largeScreen";
 
 const props = defineProps({
   list: Array,
   badGasData: Array,
+  tunnelId:Number
 });
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
@@ -80,6 +82,14 @@ watch(
   },
   { deep: true }
 );
+
+watch(
+    () => props.tunnelId,
+    (now) => {
+      props.tunnelId=now
+    },
+    { deep: true }
+);
 const timeSelect = (index) => {
   console.log("选择时间", index);
   if (index === 0) {
@@ -119,12 +129,19 @@ const changeData = (item) => {
     unit: item.unit,
   };
 };
+const getBadGasChartInfo = () => {
+  console.log('tunnnelid--------',props.tunnelId)
+  getBadGasEchartsInfo(props.tunnelId).then(res => {
+    if (res?.code === 1000) {
+      isVisited.value = true
+      nextTick(() => {
+        initChart(res.data.dates, res.data)
+      })
+    }
+  })
+}
 const handleOpenChart = () => {
-  console.log("有害气体弹窗");
+  getBadGasChartInfo()
-  isVisited.value = true;
-  nextTick(() => {
-    initChart();
-  });
 };
 const getImageUrl = (name) => {
   return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
@@ -133,7 +150,7 @@ const getImageUrl = (name) => {
 /**
  * 初始化echarts实例方法
  */
-const initChart = () => {
+const initChart = (type, values) => {
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById("containerBad"));
   //5.传入数据
@@ -196,33 +213,34 @@ const initChart = () => {
     //X轴
     xAxis: {
       type: "category",
-      data: [
+      // data: [
-        "00:00",
+      //   "00:00",
-        "01:00",
+      //   "01:00",
-        "02:00",
+      //   "02:00",
-        "03:00",
+      //   "03:00",
-        "04:00",
+      //   "04:00",
-        "05:00",
+      //   "05:00",
-        "06:00",
+      //   "06:00",
-        "07:00",
+      //   "07:00",
-        "08:00",
+      //   "08:00",
-        "09:00",
+      //   "09:00",
-        "10:00",
+      //   "10:00",
-        "11:00",
+      //   "11:00",
-        "12:00",
+      //   "12:00",
-        "13:00",
+      //   "13:00",
-        "14:00",
+      //   "14:00",
-        "15:00",
+      //   "15:00",
-        "16:00",
+      //   "16:00",
-        "17:00",
+      //   "17:00",
-        "18:00",
+      //   "18:00",
-        "19:00",
+      //   "19:00",
-        "20:00",
+      //   "20:00",
-        "21:00",
+      //   "21:00",
-        "22:00",
+      //   "22:00",
-        "23:00",
+      //   "23:00",
-        "24:00",
+      //   "24:00",
-      ],
+      // ],
+      data:type,
       axisLabel: {
         textStyle: {
           fontSize: 45,
@@ -244,10 +262,11 @@ const initChart = () => {
     series: [
       {
         name: "二氧化碳",
-        data: [
+        // data: [
-          56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
+        //   56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
-          69, 25, 31, 49, 81, 63,
+        //   69, 25, 31, 49, 81, 63,
-        ],
+        // ],
+        data:values.carbonDioxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -257,10 +276,11 @@ const initChart = () => {
       },
       {
         name: "一氧化碳",
-        data: [
+        // data: [
-          96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11,
+        //   96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11,
-          79, 51, 29, 60, 48, 83, 15,
+        //   79, 51, 29, 60, 48, 83, 15,
-        ],
+        // ],
+        data:values.carbonMonoxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -270,10 +290,11 @@ const initChart = () => {
       },
       {
         name: "二氧化氮",
-        data: [
+        // data: [
-          53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25,
+        //   53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25,
-          77, 82, 13, 68, 49, 55, 7, 39,
+        //   77, 82, 13, 68, 49, 55, 7, 39,
-        ],
+        // ],
+        data:values.nitrogenDioxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -283,10 +304,11 @@ const initChart = () => {
       },
       {
         name: "一氧化氮",
-        data: [
+        // data: [
-          37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82,
+        //   37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82,
-          17, 66, 30, 78, 55, 23, 47,
+        //   17, 66, 30, 78, 55, 23, 47,
-        ],
+        // ],
+        data:values.sulfurMonoxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -296,10 +318,11 @@ const initChart = () => {
       },
       {
         name: "二氧化硫",
-        data: [
+        // data: [
-          6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100,
+        //   6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100,
-          23, 80, 44, 62, 59, 13, 86,
+        //   23, 80, 44, 62, 59, 13, 86,
-        ],
+        // ],
+        data:values.sulfurDioxideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,
@@ -309,10 +332,11 @@ const initChart = () => {
       },
       {
         name: "硫化氢",
-        data: [
+        // data: [
-          13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90,
+        //   13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90,
-          100, 11, 21, 31, 41, 51,
+        //   100, 11, 21, 31, 41, 51,
-        ],
+        // ],
+        data:values.hydrogenSulfideValues,
         type: "line",
         smooth: true,
         symbolSize: 24,

src/components/content/windPressure/WindPressureList.vue

@@ -31,7 +31,7 @@
 import WindPressureItem from "./childComps/WindPressureItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
-import {getEchartsInfo} from "../../../api/largeScreen";
+import {getEchartsInfo} from "@/api/largeScreen";
 
 const props = defineProps({
   list: Array,
@@ -60,7 +60,6 @@ watch(() => props.winData, (now) => {
 
 const getWindInfo = (equipmentId) => {
   getEchartsInfo(equipmentId).then(res => {
-    console.log('res-wind', res)
     if (res?.code === 1000) {
       isVisited.value = true
       nextTick(() => {

src/views/tunnel/index.vue

@@ -7,7 +7,14 @@
       <div class="top-right">
         <div class="current-site">
           当前站点：<span>{{ currentSite }}</span>
-          <div class="toggle"></div>
+          <el-dropdown trigger="click" @command="handleCommand">
+            <div class="toggle"></div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
         <div class="current-user">
           上午好：<span>{{ currentUser }}</span>
@@ -32,7 +39,7 @@
                  :close-on-click-modal="false" :close-on-press-escape="false">
         <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"/>
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -62,10 +69,9 @@ 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 {onMounted} from "vue";
 import {getToken} from "@/utils/auth";
 import {useAuthStore} from "@/store/userstore.js";
-import {getLargeScreen, getLargeScreenInfo} from "@/api/largeScreen";
+import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
 import {ElMessageBox} from "element-plus";
 import {getUserInfo} from "@/api/login";
 
@@ -75,7 +81,8 @@ const selectIndex = ref(-1);
 const showFan = ref(false);
 const drawerLeft = ref(true);
 const drawerRight = ref(true);
-const currentSite = ref("松江站");
+const currentSite = ref("");
+const siteList = ref([])
 const currentUser = ref("");
 const currentDate = ref(dateFormat());
 const tunnelBtn = ref();
@@ -114,8 +121,9 @@ const getOtherInfo = () => {
     if (res?.code === 1000) {
       routeList.value = res.data.routeList
       currentSite.value = res.data.siteOption[0].label
-      tunnelList.value = res.data.tunnelOption
+      siteList.value = res.data.siteOption
       tunnelId.value = res.data.tunnelOption[0].value
+      getTunnel(res.data.siteOption[0].value)
       getScreenInfo(tunnelId.value);
     }
   });
@@ -127,8 +135,17 @@ const getScreenInfo = async (id) => {
     }
   });
 };
+//根据站点id获取隧道信息
+const getTunnel = (id) => {
+  getTunnelBySiteId(id).then((res) => {
+    if (res?.code === 1000) {
+      tunnelList.value = res.data
+      getScreenInfo(res.data[0].value)
+    }
+  });
+}
 const changeTunnel = (e) => {
-  console.log('e', e,tunnelList.value)
+  tunnelId.value = e
   let newObj = {}
   tunnelList.value.forEach((item, index) => {
     if (index === e) {
@@ -139,7 +156,6 @@ const changeTunnel = (e) => {
   nextTick(() => {
     showFan.value = true;
   });
-  console.log('newObj', newObj)
 }
 const manageSelect = (index) => {
   console.log("首页点击-", index);
@@ -149,6 +165,11 @@ const manageSelect = (index) => {
     router.push("/tunnel/1");
   }
 };
+const handleCommand=(item)=>{
+  console.log('commads',item)
+  currentSite.value=item.label
+  getTunnel(item.value)
+}
 const closeLeft = () => {
   drawerLeft.value = !drawerLeft.value;
 };
@@ -216,7 +237,29 @@ const closeSocket = () => {
 };
 initWebSocket();
 </script>
+<style lang="scss">
+.el-popper{
+  border: 1px solid #0F82AF;
 
+  .el-scrollbar__wrap {
+    .el-dropdown__list {
+      .el-dropdown-menu {
+
+        background-color:#072247;
+        .el-dropdown-menu__item{
+          color: #FFFFFF;
+          border:none;
+        }
+        .el-dropdown-menu__item:hover{
+          background-color:#072247;
+          color: #08B7B8;
+        }
+      }
+    }
+  }
+}
+
+</style>
 <style lang="scss" scoped>
 #main {
   height: 100%;