From 24c54caca750e4485ee8f7472292c249d41c1de9 Mon Sep 17 00:00:00 2001 From: dengj <209192278@qq.com> Date: Mon, 18 Dec 2023 14:38:40 +0800 Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E6=9C=89=E5=AE=B3?= =?UTF-8?q?=E6=B0=94=E4=BD=93echarts=E6=95=B0=E6=8D=AE,=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E7=AB=99=E7=82=B9=E4=B8=8E=E9=9A=A7=E9=81=93=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/largeScreen.js | 14 ++ src/assets/styles/index.scss | 1 - .../content/badGasInfo/BadGasInfo.vue | 138 ++++++++++-------- .../content/windPressure/WindPressureList.vue | 3 +- src/views/tunnel/index.vue | 59 +++++++- 5 files changed, 147 insertions(+), 68 deletions(-) diff --git a/src/api/largeScreen.js b/src/api/largeScreen.js index da9aab2..012f9c2 100644 --- a/src/api/largeScreen.js +++ b/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' + }) +} \ No newline at end of file diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 2f0dcb8..323c29f 100644 --- a/src/assets/styles/index.scss +++ b/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; diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue index 68a00e2..983391a 100644 --- a/src/components/content/badGasInfo/BadGasInfo.vue +++ b/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("有害气体弹窗"); - isVisited.value = true; - nextTick(() => { - initChart(); - }); + getBadGasChartInfo() }; 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: [ - "00:00", - "01:00", - "02:00", - "03:00", - "04:00", - "05:00", - "06:00", - "07:00", - "08:00", - "09:00", - "10:00", - "11:00", - "12:00", - "13:00", - "14:00", - "15:00", - "16:00", - "17:00", - "18:00", - "19:00", - "20:00", - "21:00", - "22:00", - "23:00", - "24:00", - ], + // data: [ + // "00:00", + // "01:00", + // "02:00", + // "03:00", + // "04:00", + // "05:00", + // "06:00", + // "07:00", + // "08:00", + // "09:00", + // "10:00", + // "11:00", + // "12:00", + // "13:00", + // "14:00", + // "15:00", + // "16:00", + // "17:00", + // "18:00", + // "19:00", + // "20:00", + // "21:00", + // "22:00", + // "23:00", + // "24:00", + // ], + data:type, axisLabel: { textStyle: { fontSize: 45, @@ -244,10 +262,11 @@ const initChart = () => { series: [ { name: "二氧化碳", - data: [ - 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, - 69, 25, 31, 49, 81, 63, - ], + // data: [ + // 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, + // 69, 25, 31, 49, 81, 63, + // ], + data:values.carbonDioxideValues, type: "line", smooth: true, symbolSize: 24, @@ -257,10 +276,11 @@ const initChart = () => { }, { name: "一氧化碳", - data: [ - 96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11, - 79, 51, 29, 60, 48, 83, 15, - ], + // data: [ + // 96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11, + // 79, 51, 29, 60, 48, 83, 15, + // ], + data:values.carbonMonoxideValues, type: "line", smooth: true, symbolSize: 24, @@ -270,10 +290,11 @@ const initChart = () => { }, { name: "二氧化氮", - data: [ - 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, - ], + // data: [ + // 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, + // ], + data:values.nitrogenDioxideValues, type: "line", smooth: true, symbolSize: 24, @@ -283,10 +304,11 @@ const initChart = () => { }, { name: "一氧化氮", - data: [ - 37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82, - 17, 66, 30, 78, 55, 23, 47, - ], + // data: [ + // 37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82, + // 17, 66, 30, 78, 55, 23, 47, + // ], + data:values.sulfurMonoxideValues, type: "line", smooth: true, symbolSize: 24, @@ -296,10 +318,11 @@ const initChart = () => { }, { name: "二氧化硫", - data: [ - 6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100, - 23, 80, 44, 62, 59, 13, 86, - ], + // data: [ + // 6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100, + // 23, 80, 44, 62, 59, 13, 86, + // ], + data:values.sulfurDioxideValues, type: "line", smooth: true, symbolSize: 24, @@ -309,10 +332,11 @@ const initChart = () => { }, { name: "硫化氢", - data: [ - 13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90, - 100, 11, 21, 31, 41, 51, - ], + // data: [ + // 13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90, + // 100, 11, 21, 31, 41, 51, + // ], + data:values.hydrogenSulfideValues, type: "line", smooth: true, symbolSize: 24, diff --git a/src/components/content/windPressure/WindPressureList.vue b/src/components/content/windPressure/WindPressureList.vue index addb778..68e04f0 100644 --- a/src/components/content/windPressure/WindPressureList.vue +++ b/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(() => { diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue index 3fa8579..985b09a 100644 --- a/src/views/tunnel/index.vue +++ b/src/views/tunnel/index.vue @@ -7,7 +7,14 @@
当前站点：{{ currentSite }} -
+ +
+ +
上午好：{{ currentUser }} @@ -32,7 +39,7 @@ :close-on-click-modal="false" :close-on-press-escape="false"> - +
@@ -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(); +