odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : 新增图表多日期选择功能

Browse Source
This commit is contained in:
odjbin
2024-03-13 17:20:20 +08:00
parent 499de290ab
commit d915fd378c
10 changed files with 292 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/content/airInfo/AirInfo.vue
View File

@@ -63,7 +63,7 @@ import ItemInfo from "./childComps/ItemInfo.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import * as echarts from 'echarts';
import {getEchartsInfo} from "@/api/largeScreen";
import ChooseDay from "@/components/chooseDay/index.vue"
import ChooseDay from "@/components/chooseDates/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
import elementResizeDetectorMaker from "element-resize-detector";
@@ -158,7 +158,11 @@ const handleExport = () => {
}
} else if (selectTimeButton.value === 2) {
if (clickDay.value) {
time = clickDay.value
if (clickDay.value[1]) {
time = clickDay.value.map(item => item).join('到')
} else {
time = clickDay.value
}
} else {
time = getNowFormatDate(true)
}
@@ -169,13 +173,21 @@ const handleExport = () => {
CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
}
const daySelect = (val) => {
clickDay.value = val
if (isFullScreen.value) {
getChartInfo(openDialogId.value, 'day', val)
if (val) {
clickDay.value = val
if (isFullScreen.value) {
getChartInfo(openDialogId.value, 'day', '', '', val[0], val[1])
} else {
getChartInfo(openDialogId.value, 'day', '', true, val[0], val[1])
}
} else {
getChartInfo(openDialogId.value, 'day', val,true)
if (isFullScreen.value) {
getChartInfo(openDialogId.value, 'day', '')
} else {
getChartInfo(openDialogId.value, 'day', '', true)
}
}
}
const monthSelect = (val) => {
clickMonth.value = val
if (isFullScreen.value) {
@@ -214,7 +226,7 @@ const shrinkScreen = () => {
initChart(chartData.dates, chartData.values,dataZoomTop)
})
}
const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
const getChartInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
showSpeedLoading.value = true
nextTick(() => {
if (flag) {
@@ -226,7 +238,7 @@ const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
}
}
})
getEchartsInfo(equipmentId, time, type).then(res => {
getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showSpeedLoading.value = false
chartData=res.data

32
src/components/content/badGasInfo/BadGasInfo.vue
View File

@@ -37,7 +37,7 @@
<div class="export-btn" @click="handleExport">
导出
</div>
<choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-dates v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
<time-range-btn
:buttonList="timeList"
@@ -64,7 +64,7 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
import * as echarts from "echarts";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
import {getBadGasEchartsInfo} from "@/api/largeScreen";
import ChooseDay from "@/components/chooseDay/index.vue"
import ChooseDates from "@/components/chooseDates/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
import elementResizeDetectorMaker from "element-resize-detector";
@@ -176,7 +176,11 @@ const handleExport = () => {
}
} else if (selectTimeButton.value === 2) {
if (clickDay.value) {
time = clickDay.value
if (clickDay.value[1]) {
time = clickDay.value.map(item => item).join('到')
} else {
time = clickDay.value
}
} else {
time = getNowFormatDate(true)
}
@@ -217,11 +221,19 @@ const shrinkScreen = () => {
})
}
const daySelect = (val) => {
clickDay.value = val
if (isFullScreen.value) {
getBadGasChartInfo('day', val)
} else {
getBadGasChartInfo('day', val, true)
if (val) {
clickDay.value = val
if (isFullScreen.value) {
getBadGasChartInfo('day', '','', val[0], val[1])
} else {
getBadGasChartInfo('day', '', true, val[0], val[1])
}
}else {
if (isFullScreen.value) {
getBadGasChartInfo('day', '')
} else {
getBadGasChartInfo('day', '', true)
}
}
}
const monthSelect = (val) => {
@@ -279,7 +291,7 @@ const changeData = (item) => {
unit: item.unit,
};
};
const getBadGasChartInfo = (type, time = '', flag) => {
const getBadGasChartInfo = (type, time = '', flag,startTime,endTime) => {
showLoading.value = true
let id = props.tunnelId
nextTick(() => {
@@ -292,7 +304,7 @@ const getBadGasChartInfo = (type, time = '', flag) => {
}
}
})
getBadGasEchartsInfo(id, time, type).then(res => {
getBadGasEchartsInfo(id, time, type,startTime,endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data

34
src/components/content/fanInfo/FanInfo.vue
View File

@@ -101,7 +101,7 @@
<div class="export-btn" @click="handleExport">
导出
</div>
<choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-dates v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
<time-range-btn
:buttonList="timeList"
@@ -127,7 +127,7 @@
import * as echarts from "echarts";
import FanInfoItem from "./FanInfoItem.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import ChooseDay from "@/components/chooseDay/index.vue"
import ChooseDates from "@/components/chooseDates/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
import {
editFrequency,
@@ -245,7 +245,11 @@ const handleExport = () => {
}
} else if (selectTimeButton.value === 2) {
if (clickDay.value) {
time = clickDay.value
if (clickDay.value[1]) {
time = clickDay.value.map(item => item).join('到')
} else {
time = clickDay.value
}
} else {
time = getNowFormatDate(true)
}
@@ -256,11 +260,19 @@ const handleExport = () => {
CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
}
const daySelect = (val) => {
clickDay.value = val
if (isFullScreen.value) {
getFanInfo(openEquipmentId.value, 'day', val)
if (val) {
clickDay.value = val
if (isFullScreen.value) {
getFanInfo(openEquipmentId.value, 'day', '', '', val[0], val[1])
} else {
getFanInfo(openEquipmentId.value, 'day', '', true, val[0], val[1])
}
} else {
getFanInfo(openEquipmentId.value, 'day', val, true)
if (isFullScreen.value) {
getFanInfo(openEquipmentId.value, 'day', '')
} else {
getFanInfo(openEquipmentId.value, 'day', '', true)
}
}
}
const monthSelect = (val) => {
@@ -398,7 +410,7 @@ const changeModel = (item) => {
item.autoMode = !item.autoMode
});
}
const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
const getFanInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
showLoading.value = true
nextTick(() => {
if (flag) {
@@ -410,7 +422,7 @@ const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
}
}
})
getFanEchartsInfo(equipmentId, time, type).then(res => {
getFanEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
@@ -444,8 +456,8 @@ const handleOpenChart = (item) => {
chooseDayRef.value.clearData()
}
})
clickMonth.value=''
clickDay.value=''
clickMonth.value = ''
clickDay.value = ''
isVisited.value = true
selectTimeButton.value = 2
openEquipmentId.value = item.equipmentId

30
src/components/content/windPressure/WindPressureList.vue
View File

@@ -53,7 +53,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 ChooseDay from "@/components/chooseDay/index.vue"
import ChooseDay from "@/components/chooseDates/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
import elementResizeDetectorMaker from "element-resize-detector";
import CsvExportor from "csv-exportor";
@@ -120,7 +120,11 @@ const handleExport = () => {
}
} else if (selectTimeButton.value === 2) {
if (clickDay.value) {
time = clickDay.value
if (clickDay.value[1]) {
time = clickDay.value.map(item => item).join('到')
} else {
time = clickDay.value
}
} else {
time = getNowFormatDate(true)
}
@@ -161,11 +165,19 @@ const shrinkScreen = () => {
})
}
const daySelect = (val) => {
clickDay.value = val
if (isFullScreen.value) {
getWindInfo(windSortId.value, 'day', val)
} else {
getWindInfo(windSortId.value, 'day', val, true)
if (val) {
clickDay.value = val
if (isFullScreen.value) {
getWindInfo(windSortId.value, 'day', '','', val[0], val[1])
} else {
getWindInfo(windSortId.value, 'day', '', true, val[0], val[1])
}
}else {
if (isFullScreen.value) {
getWindInfo(windSortId.value, 'day', '')
} else {
getWindInfo(windSortId.value, 'day', '', true)
}
}
}
const monthSelect = (val) => {
@@ -176,7 +188,7 @@ const monthSelect = (val) => {
getWindInfo(windSortId.value, 'month', val, true)
}
}
const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
const getWindInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
isVisited.value = true
showLoading.value = true
nextTick(() => {
@@ -189,7 +201,7 @@ const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
}
}
})
getEchartsInfo(equipmentId, time, type).then(res => {
getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data