+ :modal="false" id="airDialog">
@@ -41,6 +41,13 @@
@select="timeSelect"
/>
+
@@ -55,12 +62,16 @@ import * as echarts from 'echarts';
import {getEchartsInfo} from "@/api/largeScreen";
import ChooseDay from "@/components/chooseDay/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
+import elementResizeDetectorMaker from "element-resize-detector";
let myEcharts = reactive({});
const props = defineProps({
list: Array,
airData: Array
});
+const isFullScreen = ref(false);
+let dataZoomTop = reactive('87%')
+let chartData = reactive([])
const chooseDayRef = ref();
const chooseMonthRef = ref();
const windSpeed = ref(0)
@@ -108,19 +119,79 @@ watch(() => props.airData, (now) => {
// }
}, {deep: true});
const daySelect = (val) => {
- getChartInfo(openDialogId.value, 'day', val)
+ if (isFullScreen.value) {
+ getChartInfo(openDialogId.value, 'day', val)
+ } else {
+ getChartInfo(openDialogId.value, 'day', val,true)
+ }
}
const monthSelect = (val) => {
- getChartInfo(openDialogId.value, 'month', val)
+ if (isFullScreen.value) {
+ getChartInfo(openDialogId.value, 'month', val)
+ } else {
+ getChartInfo(openDialogId.value, 'month', val,true)
+ }
}
-const getChartInfo = (equipmentId, type = 'day', time = '') => {
- isWindSpeedVisited.value = true
+//放大弹窗
+const handleFullScreen = () => {
+ const titleName = document.getElementsByClassName('el-dialog__title')[0]
+ const fan = document.getElementById('airDialog')
+ const fanChart = document.getElementById('containerWind')
+ const erd = elementResizeDetectorMaker();
+ fan.classList.remove('shrink-screen-dialog')
+ titleName.style.fontSize = '70px'
+ erd.listenTo(document.getElementById('airDialog'), (element) => {
+ fanChart.style.height = (element.offsetHeight - 120) + 'px'
+ myEcharts.resize();
+ });
+ nextTick(() => {
+ isFullScreen.value = false
+ initChart(chartData.dates, chartData.values, '93%')
+ })
+}
+const shrinkScreen = () => {
+ const fan = document.getElementById('airDialog')
+ const fanChart = document.getElementById('containerWind')
+ const titleName = document.getElementsByClassName('el-dialog__title')[0]
+ titleName.style.fontSize = '50px'
+ fan.classList.add('shrink-screen-dialog')
+ fanChart.style.height = '1200px'
+ myEcharts.resize();
+ nextTick(() => {
+ isFullScreen.value = true
+ initChart(chartData.dates, chartData.values,dataZoomTop)
+ })
+}
+const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
showSpeedLoading.value = true
+ nextTick(() => {
+ if (flag) {
+ const fan = document.getElementById('airDialog')
+ fan.classList.remove('shrink-screen-dialog')
+ if (!isFullScreen.value) {
+ const titleName = document.getElementsByClassName('el-dialog__title')[0]
+ titleName.style.fontSize = '70px'
+ }
+ }
+ })
getEchartsInfo(equipmentId, time, type).then(res => {
if (res?.code === 1000) {
showSpeedLoading.value = false
+ chartData=res.data
nextTick(() => {
- initChart(res.data.dates, res.data.values)
+ if (flag) {
+ const fanChart = document.getElementById('containerWind')
+ const erd = elementResizeDetectorMaker();
+ erd.listenTo(document.getElementById('airDialog'), (element) => {
+ fanChart.style.height = element.offsetHeight - 120 + 'px'
+ myEcharts.resize();
+ });
+ if (!isFullScreen.value) {
+ initChart(res.data.dates, res.data.values,'93%')
+ }
+ } else {
+ shrinkScreen()
+ }
})
} else {
loadingText.value = res.msg
@@ -132,6 +203,7 @@ const getChartInfo = (equipmentId, type = 'day', time = '') => {
}
const handleOpenChart = (id, type) => {
selectTimeButton.value = 2
+ isWindSpeedVisited.value = true
nextTick(() => {
if (chooseMonthRef.value) {
chooseMonthRef.value.clearData()
@@ -140,10 +212,11 @@ const handleOpenChart = (id, type) => {
chooseDayRef.value.clearData()
}
})
+ isFullScreen.value = false
if (type === 'air') {
dialogTitle.value = id.name
openDialogId.value = id.equipmentId
- getChartInfo(id.equipmentId, 'day')
+ getChartInfo(id.equipmentId, 'day','',true)
} else {
if (id === "windDirection") {
dialogTitle.value = '风向'
@@ -151,9 +224,8 @@ const handleOpenChart = (id, type) => {
dialogTitle.value = '风速'
}
openDialogId.value = type
- getChartInfo(type, 'day')
+ getChartInfo(type, 'day','',true)
}
-
}
const changeDate = (index) => {
switch (index) {
@@ -166,7 +238,11 @@ const changeDate = (index) => {
}
}
const timeSelect = (index) => {
- getChartInfo(openDialogId.value, changeDate(index))
+ if (isFullScreen.value) {
+ getChartInfo(openDialogId.value, changeDate(index))
+ } else {
+ getChartInfo(openDialogId.value, changeDate(index),'',true)
+ }
};
const changeData = (item) => {
@@ -215,7 +291,7 @@ const getAirInfo = (now) => {
airList.value = airArr
}
}
-const initChart = (type, values) => {
+const initChart = (type, values,top) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerWind'));
//5.传入数据
@@ -272,7 +348,7 @@ const initChart = (type, values) => {
},
{
type: 'slider',
- top: 1050,
+ top: top,
height: 100,
textStyle: {
fontSize: 45,
diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue
index cfe20da..aafd466 100644
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -21,6 +21,7 @@
title="有害气体监控数据"
width="2175px"
:modal="false"
+ id="badDialog"
>
@@ -41,6 +42,13 @@
@select="timeSelect"
/>
+