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

更新1.浏览器不点击2.删除风压3.浏览器模型只能左右移动4.鼠标hover显示设备名称

Browse Source
This commit is contained in:
Hcat
2024-03-13 20:50:20 +08:00
parent a8bd594f1d 8253a42847
commit 340189408f
19 changed files with 1369 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

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

@@ -5,11 +5,11 @@
<div>
<img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
<div class="fan-info" @click="handleOpenChart(windSpeedType,windSpeedId)">
<div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
<div class="input-fan"><span>风速</span>{{ windSpeed }} {{ windSpeedUnit }}</div>
</div>
</div>
<div class="wind-direction-info" @click="handleOpenChart(windDirectionSpeedType,windDirectionSpeedId)">
<div class="input-fan"><span>风向</span>{{ windDirection }} °</div>
<div class="input-fan"><span>风向</span>{{ windDirection }} {{ windDirectionUnit }}</div>
</div>
</div>
<item-info
@@ -21,7 +21,7 @@
<div style="height: 1px" v-if="airList.length!==0"></div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="dialogTitle+'监控数据'" width="2175px"
:modal="false">
:modal="false" id="airDialog">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="loading-block" v-if="showSpeedLoading">
@@ -33,6 +33,9 @@
<div style="width: 1px;"></div>
</div>
<div class="time-select">
<div class="export-btn" @click="handleExport">
导出
</div>
<choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
<time-range-btn
@@ -41,6 +44,13 @@
@select="timeSelect"
/>
</div>
<div class="change-screen">
<el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
v-if="isFullScreen">
<FullScreen/>
</el-icon>
<div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
@@ -53,18 +63,26 @@ 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";
import {getNowFormatDate} from "@/utils/date.js";
import CsvExportor from "csv-exportor";
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)
const windSpeedUnit = ref('m/s')
const windDirection = ref(null)
const windDirectionUnit = ref('°')
const loadingText = ref('加载中...')
const windSpeedId = ref(0)
const windSpeedType = ref(null)
@@ -77,6 +95,8 @@ const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const isWindSpeedVisited = ref(false);
const showSpeedLoading = ref(false)
const clickMonth = ref('')
const clickDay = ref('')
watch(() => props.list, (now) => {
airList.value?.forEach(item => {
now.forEach(newItem => {
@@ -105,20 +125,137 @@ watch(() => props.airData, (now) => {
// windSpeed.value = 0
// }
}, {deep: true});
//导出csv
const handleExport = () => {
let clickUnit = ''
if(dialogTitle.value==='风速'){
clickUnit=windSpeedUnit.value
}else if(dialogTitle.value==='风向'){
clickUnit=windDirectionUnit.value
}else {
airList.value.forEach(item => {
if (item.name=== dialogTitle.value) {
clickUnit = item.unit
}
})
}
const header = ['时间', `${dialogTitle.value}值(${clickUnit})`];
let newArray = []
chartData.dates.forEach((item, index) => {
let obj = {
dates: chartData.dates[index],
values: chartData.values[index]
}
newArray.push(obj)
})
let time = ''
if (selectTimeButton.value === 1) {
if (clickMonth.value) {
const index = clickMonth.value.lastIndexOf("\-");
time = clickMonth.value.substring(0, index)
} else {
time = getNowFormatDate(false)
}
} else if (selectTimeButton.value === 2) {
if (clickDay.value) {
if (clickDay.value[1]) {
time = clickDay.value.map(item => item).join('到')
} else {
time = clickDay.value
}
} else {
time = getNowFormatDate(true)
}
} else if (selectTimeButton.value === 0) {
time = new Date().getFullYear() + '年'
}
const name = dialogTitle.value + '监控数据-' + time
CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
}
const daySelect = (val) => {
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 {
if (isFullScreen.value) {
getChartInfo(openDialogId.value, 'day', '')
} else {
getChartInfo(openDialogId.value, 'day', '', true)
}
}
}
const monthSelect = (val) => {
getChartInfo(openDialogId.value, 'month', val)
clickMonth.value = 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 - 140) + '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, startTime, endTime) => {
showSpeedLoading.value = true
getEchartsInfo(equipmentId, time, type).then(res => {
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, startTime, endTime).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 - 140 + 'px'
myEcharts.resize();
});
if (!isFullScreen.value) {
initChart(res.data.dates, res.data.values,'93%')
}
} else {
shrinkScreen()
}
})
} else {
loadingText.value = res.msg
@@ -130,6 +267,9 @@ const getChartInfo = (equipmentId, type = 'day', time = '') => {
}
const handleOpenChart = (id, type) => {
selectTimeButton.value = 2
isWindSpeedVisited.value = true
clickMonth.value=''
clickDay.value=''
nextTick(() => {
if (chooseMonthRef.value) {
chooseMonthRef.value.clearData()
@@ -138,10 +278,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 = '风向'
@@ -149,9 +290,8 @@ const handleOpenChart = (id, type) => {
dialogTitle.value = '风速'
}
openDialogId.value = type
getChartInfo(type, 'day')
getChartInfo(type, 'day','',true)
}
}
const changeDate = (index) => {
switch (index) {
@@ -164,7 +304,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) => {
@@ -172,7 +316,7 @@ const changeData = (item) => {
equipmentId: item.equipmentId,
icon: changeIcon(item.equipmentType),
name: item.equipmentName.slice(0, 2),
max: 120,
max: item.maxRange,
value: item.value,
point: item.valueThreshold,
unit: item.unit
@@ -200,10 +344,12 @@ const getAirInfo = (now) => {
windSpeedType.value = item.equipmentType
windSpeedId.value = item.equipmentId
windSpeed.value = item.value
windSpeedUnit.value = item.unit
} else if (item.equipmentType === "windDirection") {
windDirectionSpeedType.value = item.equipmentType
windDirectionSpeedId.value = item.equipmentId
windDirection.value = item.value
windDirectionUnit.value = item.unit
}
})
if (airArr.length !== 0) {
@@ -211,7 +357,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.传入数据
@@ -268,7 +414,7 @@ const initChart = (type, values) => {
},
{
type: 'slider',
top: 1050,
top: top,
height: 100,
textStyle: {
fontSize: 45,
@@ -367,7 +513,7 @@ const initChart = (type, values) => {
.input-fan {
cursor: pointer;
padding-right: 20px;
&:hover {
//width: 230px;
padding-left: 20px;
@@ -391,8 +537,9 @@ const initChart = (type, values) => {
.input-fan {
//margin: 0 26px;
padding-right: 20px;
&:hover {
width: 230px;
//width: 230px;
background: #2E5589;
border-radius: 6px;
}

6
src/components/content/airInfo/childComps/ItemInfo.vue
View File

@@ -110,8 +110,8 @@ const setValue = () => {
}
.container {
width: 422px;
height: 24px;
width: 468px;
height: 25px;
border-radius: 12px;
border: 1px solid #0f82af;
position: relative;
@@ -138,7 +138,7 @@ const setValue = () => {
.value-num {
height: 37px;
width: 160px;
//width: 160px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #d6f1fa;

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

@@ -7,7 +7,7 @@
<div class="loading" v-if="loading===0"></div>
{{ loading === 0 ? '加载中...' : '暂无数据~' }}
</div>
<div v-else class="info-list" @click="handleOpenChart">
<div v-else class="info-list" @click="handleOpenChart">
<gas-info-item
v-for="item in badGasList"
:key="item.equipmentId"
@@ -21,6 +21,7 @@
title="有害气体监控数据"
width="2175px"
:modal="false"
id="badDialog"
>
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
@@ -33,7 +34,10 @@
<div style="width: 1px"></div>
</div>
<div class="time-select">
<choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<div class="export-btn" @click="handleExport">
导出
</div>
<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"
@@ -41,6 +45,13 @@
@select="timeSelect"
/>
</div>
<div class="change-screen">
<el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
v-if="isFullScreen">
<FullScreen/>
</el-icon>
<div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
@@ -53,8 +64,12 @@ 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";
import {getNowFormatDate} from "@/utils/date.js";
import CsvExportor from "csv-exportor";
const props = defineProps({
list: Array,
@@ -68,8 +83,13 @@ const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const isBadGasVisited = ref(false);
const showLoading = ref(false)
const isFullScreen = ref(false);
let chartData = reactive([])
let dataZoomTop = reactive('87%')
const badGasList = ref([]);
let myEcharts = reactive({});
const clickMonth = ref('')
const clickDay = ref('')
const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
watch(
() => props.list,
@@ -104,11 +124,125 @@ watch(
},
{deep: true}
);
//导出csv
const handleExport = () => {
console.log(badGasList.value)
let dustUnit
let carbonUnit
let carbonMonoxideUnit
let nitrogenUnit
let sulfurMonoxideUnit
let sulfurDioxideUnit
let hydrogenSulfideUnit
badGasList.value.forEach((item) => {
if(item.name==='粉尘'){
dustUnit=item.unit
}else if(item.name==='二氧化碳'){
carbonUnit=item.unit
}else if(item.name==='一氧化碳'){
carbonMonoxideUnit=item.unit
}else if(item.name==='二氧化氮'){
nitrogenUnit=item.unit
}else if(item.name==='一氧化氮'){
sulfurMonoxideUnit=item.unit
}else if(item.name==='二氧化硫'){
sulfurDioxideUnit=item.unit
}else if(item.name==='硫化氢'){
hydrogenSulfideUnit=item.unit
}
});
const header = ['时间', `粉尘(${dustUnit})`, `二氧化碳(${carbonUnit})`, `一氧化碳(${carbonMonoxideUnit})`,`二氧化氮(${nitrogenUnit})`,`一氧化氮(${sulfurMonoxideUnit})`,`二氧化硫(${sulfurDioxideUnit})`,`硫化氢(${hydrogenSulfideUnit})`];
let newArray = []
chartData.dates.forEach((item, index) => {
let obj = {
dates: chartData.dates[index],
dustValues: chartData.dustValues[index],
carbonDioxideValues: chartData.carbonDioxideValues[index],
carbonMonoxideValues: chartData.carbonMonoxideValues[index],
nitrogenDioxideValues: chartData.nitrogenDioxideValues[index],
sulfurMonoxideValues: chartData.sulfurMonoxideValues[index],
sulfurDioxideValues: chartData.sulfurDioxideValues[index],
hydrogenSulfideValues: chartData.hydrogenSulfideValues[index]
}
newArray.push(obj)
})
let time = ''
if (selectTimeButton.value === 1) {
if (clickMonth.value) {
const index = clickMonth.value.lastIndexOf("\-");
time = clickMonth.value.substring(0, index)
} else {
time = getNowFormatDate(false)
}
} else if (selectTimeButton.value === 2) {
if (clickDay.value) {
if (clickDay.value[1]) {
time = clickDay.value.map(item => item).join('到')
} else {
time = clickDay.value
}
} else {
time = getNowFormatDate(true)
}
} else if (selectTimeButton.value === 0) {
time = new Date().getFullYear() + '年'
}
const name = '有害气体监控数据-' + time
CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
}
//放大弹窗
const handleFullScreen = () => {
const titleName = document.getElementsByClassName('el-dialog__title')[0]
const fan = document.getElementById('badDialog')
const fanChart = document.getElementById('containerBad')
const erd = elementResizeDetectorMaker();
fan.classList.remove('shrink-screen-dialog')
titleName.style.fontSize = '70px'
erd.listenTo(document.getElementById('badDialog'), (element) => {
fanChart.style.height = (element.offsetHeight - 140) + 'px'
myEcharts.resize();
});
nextTick(() => {
isFullScreen.value = false
initChart(chartData.dates, chartData, '93%')
})
}
const shrinkScreen = () => {
const fan = document.getElementById('badDialog')
const fanChart = document.getElementById('containerBad')
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, dataZoomTop)
})
}
const daySelect = (val) => {
getBadGasChartInfo('day', val)
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) => {
getBadGasChartInfo('month', val)
clickMonth.value = val
if (isFullScreen.value) {
getBadGasChartInfo('month', val)
} else {
getBadGasChartInfo('month', val, true)
}
}
const changeDate = (index) => {
switch (index) {
@@ -121,7 +255,11 @@ const changeDate = (index) => {
}
}
const timeSelect = (index) => {
getBadGasChartInfo(changeDate(index))
if (isFullScreen.value) {
getBadGasChartInfo(changeDate(index))
} else {
getBadGasChartInfo(changeDate(index), '', true)
}
};
const getBadGasInfo = (now) => {
if (now === null) return;
@@ -147,35 +285,61 @@ const changeData = (item) => {
return {
equipmentId: item.equipmentId,
name: item.equipmentName.slice(0, item.equipmentName.length - 2),
max: 120,
max: item.maxRange,
value: item.value,
point: item.valueThreshold,
unit: item.unit,
};
};
const getBadGasChartInfo = (type, time = '') => {
isBadGasVisited.value = true
const getBadGasChartInfo = (type, time = '', flag,startTime,endTime) => {
showLoading.value = true
let id = props.tunnelId
getBadGasEchartsInfo(id, time, type).then(res => {
nextTick(() => {
if (flag) {
const fan = document.getElementById('badDialog')
fan.classList.remove('shrink-screen-dialog')
if (!isFullScreen.value) {
const titleName = document.getElementsByClassName('el-dialog__title')[0]
titleName.style.fontSize = '70px'
}
}
})
getBadGasEchartsInfo(id, time, type,startTime,endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
nextTick(() => {
initChart(res.data.dates, res.data)
if (flag) {
const fanChart = document.getElementById('containerBad')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('badDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (!isFullScreen.value) {
initChart(res.data.dates, res.data, '93%')
}
} else {
shrinkScreen()
}
})
}
})
}
const handleOpenChart = () => {
nextTick(()=>{
if(chooseMonthRef.value){
clickMonth.value = ''
clickDay.value = ''
nextTick(() => {
if (chooseMonthRef.value) {
chooseMonthRef.value.clearData()
}
if(chooseDayRef.value){
if (chooseDayRef.value) {
chooseDayRef.value.clearData()
}
})
getBadGasChartInfo('day')
isBadGasVisited.value = true
isFullScreen.value = false
getBadGasChartInfo('day', '', true)
};
const getImageUrl = (name) => {
return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
@@ -184,7 +348,7 @@ const getImageUrl = (name) => {
/**
* 初始化echarts实例方法
*/
const initChart = (type, values) => {
const initChart = (type, values, top) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById("containerBad"));
//5.传入数据
@@ -245,7 +409,7 @@ const initChart = (type, values) => {
},
{
type: 'slider',
top: 1050,
top: top,
height: 100,
textStyle: {
fontSize: 45,
@@ -289,7 +453,7 @@ const initChart = (type, values) => {
lineStyle: {
width: 5,
},
},{
}, {
name: "二氧化碳",
// data: [
// 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,

2
src/components/content/badGasInfo/childComps/GasInfoItem.vue
View File

@@ -79,7 +79,7 @@ const option = {
color: `${
params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#FFCE23"
}`,
formatter: "Vo{value}%",
formatter: `{value}${params.gasInfo.unit}`,
},
},
],

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

@@ -13,8 +13,8 @@
<div class="fan-name">{{ changeNum(item) }}号风机</div>
<div class="option-nav">
<div class="state">
<!-- :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
<div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}" >
<!-- :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
<div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}">
<div class="state-icon"></div>
状态：<span class="fan-state">{{ changeStateText(item.breakdown, item.running) }}</span>
</div>
@@ -86,7 +86,7 @@
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="fanIndex+'号风机电流监控数据'"
width="2175px"
:modal="false">
:modal="false" id="fanDialog">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="loading-block" v-if="showLoading">
@@ -98,7 +98,10 @@
<div style="width: 1px;"></div>
</div>
<div class="time-select">
<choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<div class="export-btn" @click="handleExport">
导出
</div>
<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"
@@ -106,6 +109,13 @@
@select="timeSelect"
/>
</div>
<div class="change-screen">
<el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
v-if="isFullScreen">
<FullScreen/>
</el-icon>
<div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
@@ -117,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,
@@ -126,6 +136,9 @@ import {
getFanEchartsInfo
} from "@/api/largeScreen";
import {ElMessage, ElMessageBox} from "element-plus";
import elementResizeDetectorMaker from "element-resize-detector";
import CsvExportor from "csv-exportor";
import {getNowFormatDate} from "@/utils/date.js";
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
@@ -161,8 +174,13 @@ const stateB = ref(false)
const stateC = ref(false)
const isVisited = ref(false)
const showLoading = ref(false)
const isFullScreen = ref(false);
let dataZoomTop = reactive('87%')
let chartData = reactive([])
const fanIndex = ref('')
const openEquipmentId = ref(0)
const clickMonth = ref('')
const clickDay = ref('')
let myEcharts = reactive({});
watch(() => props.loading, (now) => {
props.loading = now
@@ -203,11 +221,67 @@ watch(() => props.list, (now) => {
})
handleOnMounted()
}, {deep: true});
//导出csv
const handleExport = () => {
const header = ['时间', 'A相电流(A)', 'B相电流(A)', 'C相电流(A)'];
let newArray = []
chartData.dates.forEach((item, index) => {
let obj = {
dates: chartData.dates[index],
currentsA: chartData.currentsA[index],
currentsB: chartData.currentsB[index],
currentsC: chartData.currentsC[index]
}
newArray.push(obj)
})
let time = ''
if (selectTimeButton.value === 1) {
if (clickMonth.value) {
const index = clickMonth.value.lastIndexOf("\-");
time = clickMonth.value.substring(0, index)
} else {
time = getNowFormatDate(false)
}
} else if (selectTimeButton.value === 2) {
if (clickDay.value) {
if (clickDay.value[1]) {
time = clickDay.value.map(item => item).join('到')
} else {
time = clickDay.value
}
} else {
time = getNowFormatDate(true)
}
} else if (selectTimeButton.value === 0) {
time = new Date().getFullYear() + '年'
}
const name = fanIndex.value + '号风机电流监控数据-' + time
CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
}
const daySelect = (val) => {
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 {
if (isFullScreen.value) {
getFanInfo(openEquipmentId.value, 'day', '')
} else {
getFanInfo(openEquipmentId.value, 'day', '', true)
}
}
}
const monthSelect = (val) => {
getFanInfo(openEquipmentId.value, 'month', val)
clickMonth.value = val
if (isFullScreen.value) {
getFanInfo(openEquipmentId.value, 'month', val)
} else {
getFanInfo(openEquipmentId.value, 'month', val, true)
}
}
const changeDate = (index) => {
switch (index) {
@@ -220,8 +294,42 @@ const changeDate = (index) => {
}
}
const timeSelect = (index) => {
getFanInfo(openEquipmentId.value, changeDate(index))
};
if (isFullScreen.value) {
getFanInfo(openEquipmentId.value, changeDate(index))
} else {
getFanInfo(openEquipmentId.value, changeDate(index), '', true)
}
}
//放大弹窗
const handleFullScreen = () => {
const titleName = document.getElementsByClassName('el-dialog__title')[0]
const fan = document.getElementById('fanDialog')
const fanChart = document.getElementById('containerFan')
const erd = elementResizeDetectorMaker();
fan.classList.remove('shrink-screen-dialog')
titleName.style.fontSize = '70px'
erd.listenTo(document.getElementById('fanDialog'), (element) => {
fanChart.style.height = (element.offsetHeight - 140) + 'px'
myEcharts.resize();
});
nextTick(() => {
isFullScreen.value = false
initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, '93%')
})
}
const shrinkScreen = () => {
const fan = document.getElementById('fanDialog')
const fanChart = document.getElementById('containerFan')
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.currentsA, chartData.currentsB, chartData.currentsC, dataZoomTop)
})
}
const packageData = (item, type, flag) => {
let number = 0
if (item.equipmentType === "frequency1") {
@@ -302,14 +410,39 @@ const changeModel = (item) => {
item.autoMode = !item.autoMode
});
}
const getFanInfo = (equipmentId, type = 'day', time = '') => {
isVisited.value = true
const getFanInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
showLoading.value = true
getFanEchartsInfo(equipmentId, time, type).then(res => {
nextTick(() => {
if (flag) {
const fan = document.getElementById('fanDialog')
fan.classList.remove('shrink-screen-dialog')
if (!isFullScreen.value) {
const titleName = document.getElementsByClassName('el-dialog__title')[0]
titleName.style.fontSize = '70px'
}
}
})
getFanEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
nextTick(() => {
initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC)
if (flag) {
const fanChart = document.getElementById('containerFan')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('fanDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (!isFullScreen.value) {
initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, '93%')
}
} else {
shrinkScreen()
// const fan = document.getElementById('fanDialog')
// fan.classList.add('shrink-screen-dialog')
// initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop)
}
})
}
})
@@ -323,10 +456,14 @@ const handleOpenChart = (item) => {
chooseDayRef.value.clearData()
}
})
clickMonth.value = ''
clickDay.value = ''
isVisited.value = true
selectTimeButton.value = 2
openEquipmentId.value = item.equipmentId
getFanInfo(item.equipmentId, 'day')
if (item.equipmentId === 22) {
isFullScreen.value = false
getFanInfo(item.equipmentId, 'day', '', true)
if (item.equipmentType === "frequency1") {
fanIndex.value = '一'
} else {
fanIndex.value = '二'
@@ -338,7 +475,7 @@ const getTransData = (data) => {
data?.map(item => {
tranObj = {
equipmentId: item.equipmentId,
max: 800,
max: 600,
valueA: item.phaseCurrentA,
pointA: item.phaseCurrentAThreshold,
valueB: item.phaseCurrentB,
@@ -357,10 +494,10 @@ const getTransData = (data) => {
}
const changeNum = (item) => {
switch (item.equipmentName) {
case '1号变频器':
switch (item.equipmentType) {
case "frequency1":
return '一';
case '2号变频器':
case "frequency2":
return '二';
}
}
@@ -388,7 +525,6 @@ const getBasicData = (data) => {
}
const handleOnMounted = () => {
// console.log('socketData.value[i]',socketData.value)
const chart = document.getElementsByClassName('echart');
for (let i = 0; i < chart.length; i++) {
Echarts_info1 = echarts.init(chart[i]);
@@ -530,7 +666,7 @@ const changeStateText = (breakdown, running) => {
/**
* 初始化echarts实例方法
*/
const initChart = (type, valueA, valueB, valueC) => {
const initChart = (type, valueA, valueB, valueC, top) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerFan'));
//5.传入数据
@@ -575,21 +711,12 @@ const initChart = (type, valueA, valueB, valueC) => {
return res
},
},
toolbox: {
show: false,
right: 10,
feature: {
dataZoom: {
yAxisIndex: 'none'
}
}
},
dataZoom: [{
type: 'inside',
},
{
type: 'slider',
top: 1050,
top: top,
height: 100,
textStyle: {
fontSize: 45,
@@ -665,6 +792,11 @@ const initChart = (type, valueA, valueB, valueC) => {
<style lang="scss" scoped>
#fanDialog {
overflow: hidden;
}
:deep( .el-radio__input.is-checked + .el-radio__label) {
color: #38CAFB;
}
@@ -711,7 +843,7 @@ input[type="number"] {
}
:deep( .el-radio__label) {
font-size: 28px;
font-size: 30px;
color: #38cafb;
margin-top: -5px;
}
@@ -843,7 +975,7 @@ input[type="number"] {
.fan-name {
width: 39px;
height: 140px;
font-size: 26px;
font-size: 29px;
color: #38cafb;
line-height: 35px;
text-align: center;
@@ -861,7 +993,7 @@ input[type="number"] {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 28px;
font-size: 29px;
color: #38cafb;
line-height: 35px;
gap: 40px;
@@ -874,7 +1006,7 @@ input[type="number"] {
display: flex;
align-items: center;
height: 45px;
margin-right: 15px;
//margin-right: 15px;
color: #fff;
background-color: #3eab3f;
padding-left: 10px;
@@ -919,9 +1051,9 @@ input[type="number"] {
flex-direction: column;
justify-content: center;
//padding: 0 20px;
font-size: 28px;
font-size: 29px;
color: #38cafb;
line-height: 37px;
line-height: 43px;
gap: 40px;
.check-box {
@@ -1011,7 +1143,7 @@ input[type="number"] {
margin-right: 20px;
margin-left: 26px;
//height: 37px;
font-size: 28px;
font-size: 29px;
color: #FFFFFF;
cursor: pointer;

149
src/components/content/usedEle/UsedEle.vue
View File

@@ -1,10 +1,10 @@
<template>
<div id="used-ele" :style="{ backgroundColor: bgImage }" @click="handleOpenChart">
<!-- <div v-if="electricityConsumptionMonthly===0&&monthlySavings===0" class="showNull ">-->
<!-- <div class="loading" v-if="loading===0"></div>-->
<!-- {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
<!-- </div>-->
<div class="content">
<!-- <div v-if="electricityConsumptionMonthly===0&&monthlySavings===0" class="showNull ">-->
<!-- <div class="loading" v-if="loading===0"></div>-->
<!-- {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
<!-- </div>-->
<div class="content">
<div class="item">
<div class="container" ref="length">
<div class="value" ref="valueA"></div>
@@ -29,7 +29,7 @@
</div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false" id="eleDialog">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="user-select">
@@ -72,6 +72,9 @@
<div style="width: 1px;"></div>
</div>
<div class="time-select">
<div class="export-btn" @click="handleExport">
导出
</div>
<choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
<time-range-btn
:buttonList="timeList"
@@ -79,6 +82,12 @@
@select="timeSelect"
/>
</div>
<div class="change-screen">
<el-icon size="55" color="#05feff" class="full-icon" title="放大" @click="fullScreen" v-if="isFullScreen">
<FullScreen/>
</el-icon>
<div v-else class="shrink-icon" title="缩小" @click="shrinkScreen"></div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
@@ -90,6 +99,9 @@ import * as echarts from 'echarts';
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
import {getEleEchartsInfo} from "@/api/largeScreen";
import elementResizeDetectorMaker from "element-resize-detector";
import CsvExportor from "csv-exportor";
import {getNowFormatDate} from "@/utils/date.js";
const props = defineProps({
list: Array,
@@ -104,6 +116,9 @@ const chooseMonthRef = ref();
const monthValue = ref('');
const chooseChartFan = ref('');
let myEcharts = reactive({});
const isFullScreen = ref(false);
let chartData = reactive([])
let dataZoomTop = reactive('89%')
const isVisited = ref(false);
const showLoading = ref(false)
const electricityConsumptionMonthly = ref(0)
@@ -137,7 +152,7 @@ watch(() => props.eleData, (now) => {
})
getBasicData(now.largeScreenElectricity)
}
nextTick(() => {
nextTick(() => {
setValueA()
setValueB()
})
@@ -156,6 +171,59 @@ watch(() => props.eleData, (now) => {
// setValueA()
// setValueB()
// }, {deep: true});
const handleExport = () => {
const header = ['月总用电量(kwh)', '月总节省电量(kwh)', '时间', '日用电量(kwh)', '日节省量(kwh)'];
let newArray = []
chartData.dates.forEach((item, index) => {
let obj = {
totalElectricityConsumption: chartData.totalElectricityConsumption,
saveElectricity: chartData.saveElectricity,
dates: chartData.dates[index],
consumptionValues: chartData.consumptionValues[index],
saveElectricityValues: chartData.saveElectricityValues[index]
}
newArray.push(obj)
})
let time = ''
if (selectTimeButton.value === 1) {
if (monthValue.value) {
const index = monthValue.value.lastIndexOf("\-");
time = monthValue.value.substring(0, index)
} else {
time = getNowFormatDate(false)
}
} else if (selectTimeButton.value === 0) {
time = new Date().getFullYear() + '年'
}
const name = changeNum(chooseChartFan.value) + '用电量监控数据-' + time
CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
}
//放大弹窗
const fullScreen = () => {
const fan = document.getElementById('eleDialog')
const fanChart = document.getElementById('containerEle')
const erd = elementResizeDetectorMaker();
fan.classList.remove('shrink-screen-dialog')
erd.listenTo(document.getElementById('eleDialog'), (element) => {
fanChart.style.height = (element.offsetHeight - 280) + 'px'
myEcharts.resize();
});
nextTick(() => {
isFullScreen.value = false
initChart(chartData.dates, chartData.consumptionValues, chartData.saveElectricityValues, '94%')
})
}
const shrinkScreen = () => {
const fan = document.getElementById('eleDialog')
const fanChart = document.getElementById('containerEle')
fan.classList.add('shrink-screen-dialog')
fanChart.style.height = '1010px'
myEcharts.resize();
nextTick(() => {
isFullScreen.value = true
initChart(chartData.dates, chartData.consumptionValues, chartData.saveElectricityValues, dataZoomTop)
})
}
const changeNum = (item) => {
switch (item) {
case 22:
@@ -168,14 +236,14 @@ const setValueA = () => {
if (electricityConsumptionMonthly.value === 0 || length.value === null) {
valueA.value.style.height = `0px`;
}
let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 40000;
let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 100000;
valueA.value.style.height = `${width}px`;
}
const setValueB = () => {
if (monthlySavings.value === 0 || length.value === null) {
valueB.value.style.height = `0px`;
}
let width = (monthlySavings.value * length.value?.offsetHeight) / 40000;
let width = (monthlySavings.value * length.value?.offsetHeight) / 100000;
valueB.value.style.height = `${width}px`;
}
const getBasicData = (data) => {
@@ -185,7 +253,12 @@ const getBasicData = (data) => {
const monthSelect = (val) => {
monthValue.value = val
getFanInfo(openEquipmentId.value, 'month', val)
if (isFullScreen.value) {
getFanInfo(openEquipmentId.value, 'month', val)
} else {
getFanInfo(openEquipmentId.value, 'month', val, true)
}
}
const changeDate = (index) => {
switch (index) {
@@ -193,27 +266,59 @@ const changeDate = (index) => {
return 'years'
case 1:
return 'month'
default:
return 1
}
}
const timeSelect = (index) => {
monthValue.value = ''
getFanInfo(openEquipmentId.value, changeDate(index))
if (isFullScreen.value) {
getFanInfo(openEquipmentId.value, changeDate(index))
} else {
getFanInfo(openEquipmentId.value, changeDate(index), '', true)
}
};
const changeFanData = (val) => {
selectTimeButton.value = 1
// selectTimeButton.value = 1
openEquipmentId.value = val
getFanInfo(val, 'month', monthValue.value)
if (isFullScreen.value) {
getFanInfo(val, changeDate(selectTimeButton.value), monthValue.value)
} else {
getFanInfo(val, changeDate(selectTimeButton.value), monthValue.value, true)
}
}
const getFanInfo = (equipmentId, type = 'month', time = '') => {
isVisited.value = true
const getFanInfo = (equipmentId, type = 'month', time = '', flag) => {
showLoading.value = true
nextTick(() => {
if (flag) {
const fan = document.getElementById('eleDialog')
fan.classList.remove('shrink-screen-dialog')
if (!isFullScreen.value) {
const titleName = document.getElementsByClassName('el-dialog__title')[0]
titleName.style.fontSize = '70px'
}
}
})
getEleEchartsInfo(equipmentId, time, type).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
totalElectricityConsumption.value = res.data.totalElectricityConsumption
saveElectricity.value = res.data.saveElectricity
nextTick(() => {
initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues)
if (flag) {
const fanChart = document.getElementById('containerEle')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('eleDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 280 + 'px'
myEcharts.resize();
});
if (!isFullScreen.value) {
initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues, '94%')
}
} else {
shrinkScreen()
}
})
}
})
@@ -222,19 +327,23 @@ const getFanInfo = (equipmentId, type = 'month', time = '') => {
})
}
const handleOpenChart = () => {
monthValue.value=''
selectTimeButton.value = 1
isVisited.value = true
openEquipmentId.value = fanList.value[0].value
chooseChartFan.value = fanList.value[0].value
nextTick(() => {
chooseMonthRef.value.clearData()
if (chooseMonthRef.value) {
chooseMonthRef.value.clearData()
}
})
getFanInfo(openEquipmentId.value, 'month')
isFullScreen.value = false
getFanInfo(openEquipmentId.value, 'month', '', true)
}
/**
* 初始化echarts实例方法
*/
const initChart = (type, valueA, valueB) => {
const initChart = (type, valueA, valueB, top) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerEle'));
//5.传入数据
@@ -292,7 +401,7 @@ const initChart = (type, valueA, valueB) => {
},
{
type: 'slider',
top: 900,
top: top,
height: 100,
textStyle: {
fontSize: 45,

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

@@ -11,7 +11,7 @@
</div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="windSort+'监控数据'" width="2175px"
:modal="false">
:modal="false" id="windDialog">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="loading-block" v-if="showLoading">
@@ -23,6 +23,9 @@
<div style="width: 1px;"></div>
</div>
<div class="time-select">
<div class="export-btn" @click="handleExport">
导出
</div>
<choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
<time-range-btn
@@ -31,6 +34,13 @@
@select="timeSelect"
/>
</div>
<div class="change-screen">
<el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
v-if="isFullScreen">
<FullScreen/>
</el-icon>
<div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
@@ -43,8 +53,11 @@ 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";
import {getNowFormatDate} from "@/utils/date.js";
const props = defineProps({
list: Array,
@@ -59,9 +72,14 @@ const windSortId = ref(1)
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const isVisited = ref(false);
const isFullScreen = ref(false);
let chartData = reactive([])
let dataZoomTop = reactive('87%')
const showLoading = ref(false)
let myEcharts = reactive({});
const wpList = ref([]);
const clickMonth = ref('')
const clickDay = ref('')
watch(() => props.list, (now) => {
wpList.value.forEach(item => {
now.forEach(newItem => {
@@ -75,22 +93,134 @@ watch(() => props.list, (now) => {
watch(() => props.winData, (now) => {
getScreenInfo(now.windPressureSensorList)
}, {deep: true});
//导出csv
const handleExport = () => {
let clickUnit = ''
wpList.value.forEach(item => {
if (item.equipmentName === windSort.value) {
clickUnit = item.unit
}
})
const header = ['时间', `风压值(${clickUnit})`];
let newArray = []
chartData.dates.forEach((item, index) => {
let obj = {
dates: chartData.dates[index],
values: chartData.values[index]
}
newArray.push(obj)
})
let time = ''
if (selectTimeButton.value === 1) {
if (clickMonth.value) {
const index = clickMonth.value.lastIndexOf("\-");
time = clickMonth.value.substring(0, index)
} else {
time = getNowFormatDate(false)
}
} else if (selectTimeButton.value === 2) {
if (clickDay.value) {
if (clickDay.value[1]) {
time = clickDay.value.map(item => item).join('到')
} else {
time = clickDay.value
}
} else {
time = getNowFormatDate(true)
}
} else if (selectTimeButton.value === 0) {
time = new Date().getFullYear() + '年'
}
const name = windSort.value + '监控数据-' + time
CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
}
//放大弹窗
const handleFullScreen = () => {
const titleName = document.getElementsByClassName('el-dialog__title')[0]
const fan = document.getElementById('windDialog')
const fanChart = document.getElementById('container')
const erd = elementResizeDetectorMaker();
fan.classList.remove('shrink-screen-dialog')
titleName.style.fontSize = '70px'
erd.listenTo(document.getElementById('windDialog'), (element) => {
fanChart.style.height = (element.offsetHeight - 140) + 'px'
myEcharts.resize();
});
nextTick(() => {
isFullScreen.value = false
initChart(chartData.dates, chartData.values, '93%')
})
}
const shrinkScreen = () => {
const fan = document.getElementById('windDialog')
const fanChart = document.getElementById('container')
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 daySelect = (val) => {
getWindInfo(windSortId.value, 'day', val)
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) => {
getWindInfo(windSortId.value, 'month', val)
clickMonth.value = val
if (isFullScreen.value) {
getWindInfo(windSortId.value, 'month', val)
} else {
getWindInfo(windSortId.value, 'month', val, true)
}
}
const getWindInfo = (equipmentId, type = 'day', time = '') => {
const getWindInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
isVisited.value = true
showLoading.value = true
getEchartsInfo(equipmentId, time, type).then(res => {
nextTick(() => {
if (flag) {
const fan = document.getElementById('windDialog')
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, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
nextTick(() => {
initChart(res.data.dates, res.data.values)
if (flag) {
const fanChart = document.getElementById('container')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('windDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (!isFullScreen.value) {
initChart(res.data.dates, res.data.values, '93%')
}
} else {
shrinkScreen()
}
})
}else {
} else {
loadingText.value = res.msg
}
})
@@ -101,15 +231,18 @@ const getWindInfo = (equipmentId, type = 'day', time = '') => {
const handleOpenChart = (item) => {
selectTimeButton.value = 2
nextTick(()=>{
if(chooseMonthRef.value){
clickMonth.value = ''
clickDay.value = ''
nextTick(() => {
if (chooseMonthRef.value) {
chooseMonthRef.value.clearData()
}
if(chooseDayRef.value){
if (chooseDayRef.value) {
chooseDayRef.value.clearData()
}
})
getWindInfo(item.equipmentId)
isFullScreen.value = false
getWindInfo(item.equipmentId, 'day', '', true)
windSort.value = item.equipmentName
windSortId.value = item.equipmentId
}
@@ -124,7 +257,11 @@ const changeDate = (index) => {
}
}
const timeSelect = (index) => {
getWindInfo(windSortId.value, changeDate(index))
if (isFullScreen.value) {
getWindInfo(windSortId.value, changeDate(index))
} else {
getWindInfo(windSortId.value, changeDate(index), '', true)
}
};
const getScreenInfo = (now) => {
let windPressureObj = {}
@@ -133,14 +270,14 @@ const getScreenInfo = (now) => {
windPressureObj = {
equipmentId: item.equipmentId,
equipmentName: item.equipmentName,
max: 120,
max: item.maxRange,
value: item.value,
point: item.valueThreshold,
unit: item.unit
}
windPressureArr.push(windPressureObj)
})
if(windPressureArr.map(item=>item.equipmentName).includes('10号风压')){
if (windPressureArr.map(item => item.equipmentName).includes('10号风压')) {
windPressureArr.push(windPressureArr.shift())
}
wpList.value = windPressureArr
@@ -148,7 +285,7 @@ const getScreenInfo = (now) => {
/**
* 初始化echarts实例方法
*/
const initChart = (type, values) => {
const initChart = (type, values, top) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('container'));
//5.传入数据
@@ -204,7 +341,7 @@ const initChart = (type, values) => {
},
{
type: 'slider',
top: 1050,
top: top,
height: 100,
textStyle: {
fontSize: 45,

12
src/components/content/windPressure/childComps/WindPressureItem.vue
View File

@@ -1,7 +1,7 @@
<template>
<div id="wind-pressure-item" :class="{ abnormal:isWaring }">
<div class="label">
<img src="../../../../assets/images/windPressure/icon.png" alt=""/>
<img src="@/assets/images/windPressure/icon.png" alt=""/>
<span>{{params.wp.equipmentName}}</span>
</div>
<div class="container" ref="length">
@@ -27,17 +27,15 @@ const params = defineProps({
const length = ref(null);
const value = ref(null);
const point = ref(null);
onMounted(handleOnMounted);
function handleOnMounted() {
onMounted(()=>{
setValue();
}
});
watch(() => params.wp.value, () => {
setValue();
});
function setValue() {
const setValue=()=> {
let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
value.value.style.width = `${width}px`;
let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
@@ -107,7 +105,7 @@ let isWaring = computed(() => {
.container {
width: 500px;
height: 24px;
height: 25px;
border-radius: 12px;
border: 1px solid #0f82af;
position: relative;