diff --git a/src/api/largeScreen.js b/src/api/largeScreen.js index 45c92b0..8677be3 100644 --- a/src/api/largeScreen.js +++ b/src/api/largeScreen.js @@ -22,23 +22,23 @@ export const getTunnelBySiteId = (siteId) => { }) } // 传感器echarts数据 -export const getEchartsInfo = (equipmentId) => { +export const getEchartsInfo = (equipmentId,type) => { return request({ - url: `/tunnel/large/screen/echarts/sensor/${equipmentId}`, + url: `/tunnel/large/screen/echarts/sensor/${equipmentId}/${type}`, method: 'get' }) } // 有害气体echarts数据 -export const getBadGasEchartsInfo = (tunnelId) => { +export const getBadGasEchartsInfo = (tunnelId,type) => { return request({ - url: `/tunnel/large/screen/echarts/gas/sensor/${tunnelId}`, + url: `/tunnel/large/screen/echarts/gas/sensor/${tunnelId}/${type}`, method: 'get' }) } //电流监控数据 -export const getFanEchartsInfo = (equipmentId) => { +export const getFanEchartsInfo = (equipmentId,type) => { return request({ - url: `/tunnel/large/screen/echarts/current/${equipmentId}`, + url: `/tunnel/large/screen/echarts/current/${equipmentId}/${type}`, method: 'get' }) } diff --git a/src/api/tunnelScene.js b/src/api/tunnelScene.js index 43b4edc..8f6a4ff 100644 --- a/src/api/tunnelScene.js +++ b/src/api/tunnelScene.js @@ -8,7 +8,7 @@ export const getEquipmentType = () => { }); }; // 获取设备 -export const getEquipment = (tunnelId, typeKey, equipmentIds = "1") => { +export const getEquipment = (tunnelId, typeKey, equipmentIds='0') => { return request({ url: "/tunnel/model/equipment/option", method: "post", diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index b46e794..22903fd 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -316,6 +316,11 @@ body, height: 1160px; //width: 1300px; } + #containerWindDirection { + flex: 1; + height: 1160px; + //width: 1300px; + } #containerEle { flex: 1; diff --git a/src/components/content/airInfo/AirInfo.vue b/src/components/content/airInfo/AirInfo.vue index 1b4cadd..d022522 100644 --- a/src/components/content/airInfo/AirInfo.vue +++ b/src/components/content/airInfo/AirInfo.vue @@ -1,32 +1,32 @@ @@ -74,11 +50,9 @@ import ItemInfo from "./childComps/ItemInfo.vue"; import TimeRangeBtn from "@/components/timeRangeBtn/index.vue" import * as echarts from 'echarts'; -import {getEchartsInfo} from "../../../api/largeScreen"; -import {ElMessage} from "element-plus"; +import {getEchartsInfo} from "@/api/largeScreen"; let myEcharts = reactive({}); -let myAirEcharts = reactive({}); const props = defineProps({ list: Array, airData: Array @@ -87,14 +61,14 @@ const windSpeed = ref(0) const windDirection = ref(0) const loadingText = ref('加载中...') const windSpeedId = ref(0) -const airTitle = ref('') +const windDirectionSpeedId = ref(0) +const dialogTitle = ref('风速') +const openDialogId = ref(0) const airList = ref([]) const timeList = ref(["年", "月", "日"]); const selectTimeButton = ref(2); const isWindSpeedVisited = ref(false); const showSpeedLoading = ref(false) -const isAirVisited = ref(false); -const showLoading = ref(false) watch(() => props.list, (now) => { airList.value?.forEach(item => { now.forEach(newItem => { @@ -111,59 +85,56 @@ watch(() => props.airData, (now) => { } else { getAirInfo(now.sensorList) } - }else { + } else { airList.value = [] windSpeed.value = 0 } }, {deep: true}); -const getChartInfo = (equipmentId) => { + +const getChartInfo = (equipmentId, type = 'day') => { isWindSpeedVisited.value = true - showSpeedLoading.value=true - getEchartsInfo(equipmentId).then(res => { + showSpeedLoading.value = true + getEchartsInfo(equipmentId, type).then(res => { if (res?.code === 1000) { - showSpeedLoading.value=false + showSpeedLoading.value = false nextTick(() => { initChart(res.data.dates, res.data.values) }) - }else { - loadingText.value=res.msg + } else { + loadingText.value = res.msg } }) -} -const getGasChartInfo = (equipmentId) => { - isAirVisited.value = true - showLoading.value=true - getEchartsInfo(equipmentId).then(res => { - if (res?.code === 1000) { - showLoading.value = false - nextTick(() => { - initAirChart(res.data.dates, res.data.values) - }) - } + nextTick(() => { + loadingText.value = '加载中...' }) } -const handleOpenChart = () => { - getChartInfo(windSpeedId.value) +const handleOpenChart = (id, type) => { + selectTimeButton.value = 2 + if (type === 'air') { + dialogTitle.value = id.name + openDialogId.value = id.equipmentId + getChartInfo(id.equipmentId, 'day') + } else { + if (id === 11) { + dialogTitle.value = '风向' + } else { + dialogTitle.value = '风速' + } + openDialogId.value = id + getChartInfo(id, 'day') + } } -const handleOpenAirChart = (item) => { - // isAirVisited.value = true - airTitle.value = item.name - getGasChartInfo(item.equipmentId) - // nextTick(() => { - // initAirChart() - // }) -} const timeSelect = (index) => { - console.log('选择时间', index) if (index === 0) { - console.log('--年') + getChartInfo(openDialogId.value, 'year') } else if (index === 1) { - console.log('--月') + getChartInfo(openDialogId.value, 'month') } else if (index === 2) { - console.log('--日') + getChartInfo(openDialogId.value, 'day') } }; + const changeData = (item) => { return { equipmentId: item.equipmentId, @@ -199,12 +170,13 @@ const getAirInfo = (now) => { windSpeedId.value = item.equipmentId windSpeed.value = item.value } else if (item.equipmentType === "windDirection") { + windDirectionSpeedId.value = item.equipmentId windDirection.value = item.value } }) - if(airArr.length!==0){ + if (airArr.length !== 0) { airArr.push(airArr.shift()) - airList.value = airArr + airList.value = airArr } } const initChart = (type, values) => { @@ -305,101 +277,6 @@ const initChart = (type, values) => { myEcharts.resize(); } } -const initAirChart = (type, values) => { - //3.初始化container容器 - myAirEcharts = echarts.init(document.getElementById('containerAir')); - //5.传入数据 - let option = { - //图例 - legend: { - // left: 0, - textStyle: { - color: '#FFFFFF', - fontSize: 40 - } - }, - //离容器四侧的距离 - grid: { - left: 0, // 左边距 - right: 20, // 右边距 - top: 80, // 顶边距 - bottom: 0, // 底边距 - containLabel: true, - }, - //提示框组件 - tooltip: { - show: true, - trigger: 'axis', - backgroundColor: "transparent", // 设置背景颜色为透明 - borderColor: "transparent", // 设置边框颜色为透明 - padding: 0, // 设置内边距为0 - textStyle: { - fontSize: 40 - }, - formatter: function (params) { - let content = ` -
-
${params[0].name}
-
${params[0].value}
-
`; - return content; - }, - }, - toolbox: { - show: false, - right: 10, - feature: { - dataZoom: { - yAxisIndex: 'none' - } - } - }, - dataZoom: [{ - type: 'inside' - }], - //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: type, - axisLabel: { - textStyle: { - fontSize: 45, - color: '#D6F1FA' - }, - }, - }, - //Y轴 - yAxis: { - type: 'value', - axisLabel: { - textStyle: { - fontSize: 45, - color: '#D6F1FA' - }, - }, - }, - //配置项 - series: [ - { - // 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, - type: 'line', - smooth: true, - symbolSize: 24, - lineStyle: { - width: 5 - } - } - ] - } - myAirEcharts.setOption(option); - //图表大小自适应窗口大小变化 - window.onresize = () => { - myAirEcharts.resize(); - } -} -