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

18
src/api/largeScreen.js
View File

@@ -22,38 +22,44 @@ export const getTunnelBySiteId = (siteId) => {
})
}
// 传感器echarts数据
export const getEchartsInfo = (id,time,type) => {
export const getEchartsInfo = (id,time,type,startTime,endTime) => {
return request({
url: '/tunnel/large/screen/echarts/sensor',
method: 'get',
params: {
id: id,
time: time,
type: type
type: type,
startTime:startTime,
endTime:endTime,
}
})
}
// 有害气体echarts数据
export const getBadGasEchartsInfo = (id,time,type) => {
export const getBadGasEchartsInfo = (id,time,type,startTime,endTime) => {
return request({
url: '/tunnel/large/screen/echarts/gas/sensor/',
method: 'get',
params: {
id: id,
time: time,
type: type
type: type,
startTime:startTime,
endTime:endTime,
}
})
}
//电流监控数据
export const getFanEchartsInfo = (id,time,type) => {
export const getFanEchartsInfo = (id,time,type,startTime,endTime) => {
return request({
url: '/tunnel/large/screen/echarts/current',
method: 'get',
params: {
id: id,
time: time,
type: type
type: type,
startTime:startTime,
endTime:endTime,
}
})
}

21
src/assets/styles/index.scss
View File

@@ -538,7 +538,7 @@ body,
margin: 0;
.el-dialog__header {
padding: 0 0 28px 0;
padding: 0 0 46px 0;
//display: none;
.el-dialog__title {
font-size: 50px;
@@ -608,13 +608,30 @@ body,
top: 20px;
right: 200px;
display: flex;
.choose-dates{
.el-date-editor {
width: 600px!important;
}
}
.choose-day {
margin-right: 40px;
.el-date-editor {
width: 370px;
//width: 600px;
height: 92px;
.el-range__icon,.el-range__close-icon{
font-size: 40px;
color: #FFFFFF;
}
.el-range-input{
font-size: 37px;
color: #FFFFFF;
}
.el-range-separator{
font-size: 36px;
color: #f5f5f5;
}
}
.el-input__wrapper {

147
src/components/chooseDates/index.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<div class="choose-day choose-dates">
<el-date-picker
v-model="selectButton"
type="daterange"
size="large"
range-separator="To"
value-format="YYYY-MM-DD"
@change="dataSelect"
popper-class="choose-day-popper"
start-placeholder="开始日期"
end-placeholder="结束日期"
:disabled-date="disabledDate"
/>
</div>
</template>
<script setup>
import {ElMessage} from "element-plus";
const selectButton = ref();
const emit = defineEmits(["update:modelValue", "select"]);
const disabledDate = (time) => {
// return time.getTime() > Date.now()//不能选择之后的数据
let curDate = (new Date()).toString() // 当前时间戳转为字符串
let curDateYear = (new Date()).getFullYear() // 当前时间的年份
let oneYearAgoDate = curDate.replace(curDateYear, curDateYear - 1)// 字符串年份替换为一年前
let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串转为时间戳
return time.getTime() > Date.now() || time.getTime() < oneYear;
}
const dataSelect = (val) => {
if (val !== null) {
const startDate = new Date(val[0]).getTime();
const endDate = new Date(val[1]).getTime();
if (endDate - startDate > 4 * 24 * 60 * 60 * 1000) {
ElMessage.warning('所选日期范围不能大于5天!')
clearData()
// emit("select", false);//clear重新加载
} else {
emit("select", val);
}
} else {
emit("select", false);
}
emit("update:modelValue", val);
// }
};
const clearData = () => {
selectButton.value = ''
}
defineExpose({
clearData
})
</script>
<style lang="scss">
.el-picker__popper.el-popper {
border: 2px solid #0F82AF !important;
}
.choose-day-popper {
margin-left: 0 !important;
width: auto !important;
.el-picker-panel__body {
background-color: #062247;
.el-date-range-picker__header, .el-date-picker__header {
margin: 0;
height: 40px;
line-height: 40px;
.el-picker-panel__icon-btn, .el-date-picker__header-label {
font-size: 20px;
color: #FFFFFF;
}
> div:last-child {
font-size: 20px;
color: #f5f5f5;
}
}
.el-picker-panel__content {
.el-month-table {
td .cell {
font-size: 18px;
color: #FFFFFF;
}
td.disabled .cell {
background-color: transparent;
color: #a8abb2;
}
td.today .cell {
color: #0BE9FA;
}
}
.el-date-table th {
color: #FFFFFF;
font-size: 17px;
}
.el-date-table__row {
.prev-month, .available, .normal, .next-month {
.el-date-table-cell__text {
font-size: 18px;
}
}
.available {
color: #FFFFFF;
font-weight: bold;
}
.available.in-range {
.el-date-table-cell {
background-color: #264A78;
.el-date-table-cell__text {
background-color: transparent;
}
}
}
.available.today {
.el-date-table-cell__text {
color: #0BE9FA;
}
}
.disabled {
.el-date-table-cell {
background-color: #062247;
}
}
}
}
}
}
</style>

4
src/components/chooseMonth/index.vue
View File

@@ -35,7 +35,3 @@ defineExpose({
clearData
})
</script>
<style scoped>
</style>

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

21
src/views/site/index.vue
View File

@@ -167,7 +167,7 @@ const info = ref({
})
const title = ref('新增站点')
const isVisited = ref(false);
const isUploadVisited = ref(false);
let isUploadVisited = ref(false);
const showFirst = ref(true)
const total = ref(10);
const showAddIcon = ref(true)
@@ -206,7 +206,7 @@ const getList = () => {
lock: true,
text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)',
customClass:'allLoading'
customClass: 'allLoading'
})
getSiteList({
userId: userId,
@@ -272,7 +272,7 @@ const handleEdit = (item) => {
lock: true,
text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)',
customClass:'allLoading'
customClass: 'allLoading'
})
getSiteDetail(item.siteId).then((res) => {
form.value = res.data;
@@ -667,7 +667,7 @@ const handleCurrentChange = (val) => {
.left-img {
margin-top: 50px;
margin-right: 60px;
margin-right: 36px;
width: 500px;
height: 370px;
background-image: url('@/assets/images/site/zdgl_zd.png');
@@ -690,7 +690,7 @@ const handleCurrentChange = (val) => {
.tunnel {
cursor: pointer;
margin-right: 20px;
width: 280px;
width: 320px;
height: 350px;
background: #3FBED1;
border-radius: 16px;
@@ -698,15 +698,24 @@ const handleCurrentChange = (val) => {
flex-direction: column;
align-items: center;
color: #FFFFFF;
text-align: center;
> div:first-child {
height: 37px;
width: 240px;
//height: 37px;
font-size: 32px;
margin-top: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
> div:nth-child(3) {
width: 310px;
margin-bottom: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
> div:nth-child(3), > div:nth-child(4) {

16
src/views/tunnel-manage/index.vue
View File

@@ -327,7 +327,7 @@ const getList = () => {
lock: true,
text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)',
customClass:'allLoading'
customClass: 'allLoading'
})
getTunnelList({
siteId: siteId,
@@ -634,6 +634,7 @@ const handleMoreDelete = () => {
color: #fff;
font-size: 38px;
}
.el-input__suffix-inner {
font-size: 30px;
color: #08B7B8;
@@ -770,7 +771,13 @@ const handleMoreDelete = () => {
font-size: 45px;
font-weight: bold;
color: #FFFFFF;
line-height: 42px;
line-height: 50px;
> span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
> span:nth-child(2) {
font-size: 38px;
@@ -779,6 +786,8 @@ const handleMoreDelete = () => {
> span:last-child {
margin-left: 5px;
width: 95px;
padding: 1px 8px;
font-size: 32px;
border: 2px solid #05FEFF;
@@ -896,8 +905,9 @@ const handleMoreDelete = () => {
color: #60DDDE;
font-size: 38px;
font-weight: bold;
:deep(.el-pagination.is-background ) {
.btn-next,.btn-prev {
.btn-next, .btn-prev {
background-color: transparent;
}