<template>
|
<div class="statistics">
|
<div class="date">
|
<div v-for="item in dateList" :class="item.active === 1 ? 'date-active' : '' " @click="changeDate(item.dictValue)">{{item.dictLabel}}</div>
|
</div>
|
<div class="container">
|
<div class="echarts">
|
<div class="title"><span>6#出口压力{{ title[0] }}</span></div>
|
<div id="echarts-one"></div>
|
</div>
|
|
<div class="echarts">
|
<div class="title"><span>6#出口流量{{ title[1] }}</span></div>
|
<div id="echarts-two"></div>
|
</div>
|
|
<div class="echarts">
|
<div class="title"><span>6#水池液位{{ title[2] }}</span></div>
|
<div id="echarts-three"></div>
|
</div>
|
|
<div class="echarts">
|
<div class="title"><span>7#出口压力{{ title[3] }}</span></div>
|
<div id="echarts-four"></div>
|
</div>
|
<div class="echarts">
|
<div class="title"><span>7#出口流量</span></div>
|
<div id="pressure-one"></div>
|
</div>
|
<div class="echarts">
|
<div class="title"><span>7#水池液位</span></div>
|
<div id="pressure-two"></div>
|
</div>
|
<!-- <div class="echarts">
|
<div class="title">1#压力计</div>
|
<div id="pressure-one"></div>
|
</div>
|
<div class="echarts">
|
<div class="title">2#压力计</div>
|
<div id="pressure-two"></div>
|
</div>
|
<div class="echarts">
|
<div class="title">3#压力计</div>
|
<div id="pressure-three"></div>
|
</div>
|
<div class="echarts">
|
<div class="title">1#液位计</div>
|
<div id="liquid-one"></div>
|
</div>
|
<div class="echarts">
|
<div class="title">2#液位计</div>
|
<div id="liquid-two"></div>
|
</div>
|
<div class="echarts">
|
<div class="title">2#液位计</div>
|
<div id="liquid-two"></div>
|
</div>
|
<div class="echarts">
|
<div class="title">3#液位计</div>
|
<div id="liquid-three"></div>
|
</div>
|
<div class="echarts">
|
<div class="title">1#流量计</div>
|
<div id="flow-one"></div>
|
</div>
|
<div class="echarts">
|
<div class="title">2#流量计</div>
|
<div id="flow-two"></div>
|
</div>
|
<div class="echarts">
|
<div class="title">3#流量计</div>
|
<div id="flow-three"></div>
|
</div> -->
|
<!-- <div class="date">
|
<div v-for="item in dateList" :class="item.active === 1 ? 'date-active' : '' " @click="changeDate(item.dictValue)">{{item.dictLabel}}</div>
|
</div> -->
|
|
<!-- <div class="search">
|
<el-select v-model="pointId" filterable placeholder="请选择监控点">
|
<el-option
|
v-for="(item,index) in pointList"
|
:key="index"
|
:label="item.pointName"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
<el-button type="primary" class="search-btn" @click="searchPoint">搜 索</el-button>
|
</div> -->
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import statistics from '@/api/screen/statistics/index'
|
import pointApi from "@/api/facility/point.js";
|
import { sysDictData } from '@/api/system/dict'
|
import * as echarts from 'echarts'
|
import { useRoute } from 'vue-router'
|
const route = ref(useRoute())
|
//echarts 初始化
|
let echartsOne = null;
|
let echartsTwo = null;
|
let echartsThree = null;
|
let echartsFour = null;
|
|
// let pressureOneEcharts = undefined;
|
// let pressureTwoEcharts = undefined;
|
// let pressureThreeEcharts = undefined;
|
|
// let liquidOneEcharts = undefined;
|
// let liquidTwoEcharts = undefined;
|
// let liquidThreeEcharts = undefined;
|
|
// let flowOneEcharts = undefined;
|
// let flowTwoEcharts = undefined;
|
// let flowThreeEcharts = undefined;
|
const initEcharts = () => {
|
|
echartsOne = echarts.init(document.getElementById('echarts-one'))
|
echartsTwo = echarts.init(document.getElementById('echarts-two'))
|
echartsThree = echarts.init(document.getElementById('echarts-three'))
|
echartsFour = echarts.init(document.getElementById('echarts-four'))
|
|
// pressureOneEcharts = echarts.init(document.getElementById('pressure-one'))
|
// pressureTwoEcharts = echarts.init(document.getElementById('pressure-two'))
|
// pressureThreeEcharts = echarts.init(document.getElementById('pressure-three'))
|
|
// liquidOneEcharts = echarts.init(document.getElementById('liquid-one'))
|
// liquidTwoEcharts = echarts.init(document.getElementById('liquid-two'))
|
// liquidThreeEcharts = echarts.init(document.getElementById('liquid-three'))
|
|
// flowOneEcharts = echarts.init(document.getElementById('flow-one'))
|
// flowTwoEcharts = echarts.init(document.getElementById('flow-two'))
|
// flowThreeEcharts = echarts.init(document.getElementById('flow-three'))
|
}
|
|
//echarts 配置项
|
let baseOption = {
|
tooltip:{
|
trigger:'axis',
|
axisPointer: {
|
label:{
|
formatter:'上传时间：{value}'
|
},
|
type: 'line' ,
|
lineStyle:{
|
color:'rgba(231,237,244,0.48)',
|
},
|
snap:true,
|
},
|
},
|
xAxis: {
|
axisLine:{
|
show: true,
|
lineStyle:{
|
color:'rgba(231,236,240,0.4)',
|
width:1
|
}
|
},
|
axisTick:{
|
inside:true
|
},
|
axisLabel:{
|
show:false,
|
},
|
type: 'time',
|
},
|
yAxis: {
|
axisLine:{
|
show: true,
|
lineStyle:{
|
color:'rgba(231,236,240,0.4)',
|
width:1
|
}
|
},
|
splitLine:{
|
show:false,
|
lineStyle:{
|
color:'rgba(231,236,240,0.2)',
|
}
|
},
|
axisLabel:{
|
color:'#B3E3E5',
|
fontSize:12,
|
},
|
type: 'value'
|
},
|
dataset:{
|
dimensions:['uploadTimeView','columnsValue'],
|
// source:data,
|
},
|
series:{
|
name:'',
|
type: 'line',
|
smooth: true,
|
symbol:'none',
|
lineStyle:{
|
color:'#007aff',
|
width:1
|
},
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: 'rgba(4,228,243,0.7)'
|
},
|
{
|
offset: 1,
|
color: 'rgba(18,51,114,0.5)'
|
}
|
])
|
},
|
},
|
grid:{
|
width:'90%',
|
height:'80%',
|
top:'8%',
|
left:'6%',
|
}
|
};
|
//日期列表
|
const dateList = ref()
|
const dateValue = ref()
|
const getDate = async () =>{
|
await sysDictData().searchType('date_type').then((res)=>{
|
dateList.value = res.data
|
dateList.value.forEach((item,index)=>{
|
if(index === 0){
|
item.active = 1
|
}else{
|
item.active = 0
|
}
|
item.dictLabel = item.dictLabel.replace('统计','')
|
})
|
dateValue.value = dateList.value[0].dictValue
|
})
|
}
|
//选中日期
|
const changeDate = (dateType) =>{
|
dateValue.value = dateType
|
dateList.value.forEach((item)=>{
|
item.active = 0
|
if(item.dictValue === dateType){
|
item.active = 1
|
}
|
})
|
// getData({dateType:dateValue.value,pointId:pointId.value})
|
}
|
//监控点列表
|
const pointList = ref([])
|
const pointId = ref();
|
// const getPointList = async() =>{-
|
|
// //区域列表
|
// let res = await pointApi().search({limit: 100, page: 1});
|
// if(res.code == 200){
|
// pointList.value = res.data.list
|
// pointId.value = pointList.value[0].id
|
// console.log("获取监控点数据",pointList.value);
|
// }else{
|
// proxy.$modal.msgError('获取数据失败,请刷新再试！')
|
// }
|
// }
|
//选中数据
|
const searchPoint = () =>{
|
getData({dateType:dateValue.value,pointId:pointId.value})
|
}
|
//请求数据
|
let loadingE = {
|
text: 'loading',
|
textColor: 'rgba(105,133,219, 1)',
|
maskColor: 'rgba(202, 224, 252, 0.2)',
|
fontSize: '20px',
|
}
|
const loadingEcharts = () =>{
|
echartsOne.showLoading(loadingE)
|
echartsTwo.showLoading(loadingE)
|
echartsThree.showLoading(loadingE)
|
echartsFour.showLoading(loadingE)
|
|
|
// pressureOneEcharts.showLoading(loadingE)
|
// pressureTwoEcharts.showLoading(loadingE)
|
// pressureThreeEcharts.showLoading(loadingE)
|
|
// liquidOneEcharts.showLoading(loadingE)
|
// liquidTwoEcharts.showLoading(loadingE)
|
// liquidThreeEcharts.showLoading(loadingE)
|
|
// flowOneEcharts.showLoading(loadingE)
|
// flowTwoEcharts.showLoading(loadingE)
|
// flowThreeEcharts.showLoading(loadingE)
|
}
|
const hideEcharts = () =>{
|
|
echartsOne.hideLoading()
|
echartsTwo.hideLoading()
|
echartsThree.hideLoading()
|
echartsFour.hideLoading()
|
|
// pressureOneEcharts.hideLoading()
|
// pressureTwoEcharts.hideLoading()
|
// pressureThreeEcharts.hideLoading()
|
|
// liquidOneEcharts.hideLoading()
|
// liquidTwoEcharts.hideLoading()
|
// liquidThreeEcharts.hideLoading()
|
|
// flowOneEcharts.hideLoading()
|
// flowTwoEcharts.hideLoading()
|
// flowThreeEcharts.hideLoading()
|
}
|
// let pressureOneData = []
|
// let pressureTwoData = []
|
// let pressureThreeData = []
|
// let liquidOneData = []
|
// let liquidTwoData = []
|
// let liquidThreeData = []
|
// let flowOneData = []
|
// let flowTwoData = []
|
// let flowThreeData = []
|
// let dataOne = []
|
// let dataTwo = []
|
// let dataThree = []
|
// let dataFour = []
|
let title = ref(['','','',''])
|
let data = [[],[],[],[]]
|
const getData = async (val) =>{
|
loadingEcharts()
|
if(!val){
|
val = {dateType:dateValue.value,pointId:pointId.value}
|
}
|
await statistics().search(val).then((res) =>{
|
hideEcharts()
|
data = [[],[],[],[]]
|
Object.keys(res.data).forEach((key,index)=>{
|
title.value[index] = key
|
res.data[key].forEach((item)=>{
|
data[index].push({uploadTimeView:item.uploadTimeView,columnsValue:item.columnsValue})
|
})
|
})
|
})
|
setOptions()
|
}
|
const setOptions = () =>{
|
|
let option1 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
option1.dataset.source = data[0]; // 修改数据
|
option1.series.name = title.value[0]; // 修改数据
|
echartsOne.setOption(option1);
|
|
let option2 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
option2.dataset.source = data[1]; // 修改数据
|
option2.series.name = title.value[1]; // 修改数据
|
console.log('title',title.value[1])
|
echartsTwo.setOption(option2);
|
|
let option3 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
option3.dataset.source = data[2]; // 修改数据
|
option3.series.name = title.value[2]; // 修改数据
|
echartsThree.setOption(option3);
|
|
let option4 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
option4.dataset.source = data[3]; // 修改数据
|
option4.series.name = title.value[3]; // 修改数据
|
echartsFour.setOption(option4);
|
|
// let option1 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
// option1.dataset.source = pressureOneData; // 修改数据
|
// option1.series.name = '压力'; // 修改数据
|
// pressureOneEcharts.setOption(option1);
|
|
// let option2 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
// option2.dataset.source = pressureTwoData; // 修改数据
|
// option2.series.name = '压力'; // 修改数据
|
// pressureTwoEcharts.setOption(option2);
|
|
// let option3 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
// option3.dataset.source = pressureThreeData; // 修改数据
|
// option3.series.name = '压力'; // 修改数据
|
// pressureThreeEcharts.setOption(option3);
|
|
// let option4 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
// option4.dataset.source = liquidOneData; // 修改数据
|
// option4.series.name = '液位'; // 修改数据
|
// liquidOneEcharts.setOption(option4);
|
|
// let option5 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
// option5.dataset.source = liquidTwoData; // 修改数据
|
// option5.series.name = '液位'; // 修改数据
|
// liquidTwoEcharts.setOption(option5);
|
|
// let option6 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
// option6.dataset.source = liquidThreeData; // 修改数据
|
// option6.series.name = '液位'; // 修改数据
|
// liquidThreeEcharts.setOption(option6);
|
|
// let option7 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
// option7.dataset.source = flowOneData; // 修改数据
|
// option7.series.name = '流量'; // 修改数据
|
// flowOneEcharts.setOption(option7);
|
|
// let option8 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
// option8.dataset.source = flowTwoData; // 修改数据
|
// option8.series.name = '流量'; // 修改数据
|
// flowTwoEcharts.setOption(option8);
|
|
// let option9 = JSON.parse(JSON.stringify(baseOption)); // 复制基础option
|
// option9.dataset.source = flowThreeData; // 修改数据
|
// option9.series.name = '流量'; // 修改数据
|
// flowThreeEcharts.setOption(option9);
|
}
|
window.addEventListener('resize', function() {
|
|
echartsOne.resize()
|
echartsTwo.resize()
|
echartsThree.resize()
|
echartsFour.resize()
|
|
// pressureOneEcharts.resize()
|
// pressureTwoEcharts.resize()
|
// pressureThreeEcharts.resize()
|
|
// liquidOneEcharts.resize()
|
// liquidTwoEcharts.resize()
|
// liquidThreeEcharts.resize()
|
|
// flowOneEcharts.resize()
|
// flowTwoEcharts.resize()
|
// flowThreeEcharts.resize()
|
});
|
onMounted(async ()=>{
|
initEcharts()
|
// await getPointList()
|
await getDate()
|
// await getData({dateType:dateValue.value,pointId:pointId.value})
|
setOptions()
|
})
|
//卸载前销毁图表
|
const disposeEcharts = (echarts) => {
|
if (echarts) {
|
echarts.dispose();
|
echarts = null;
|
}
|
}
|
onBeforeUnmount(async ()=> {
|
|
disposeEcharts(echartsOne)
|
disposeEcharts(echartsTwo)
|
disposeEcharts(echartsThree)
|
disposeEcharts(echartsFour)
|
|
// disposeEcharts(pressureOneEcharts)
|
// disposeEcharts(pressureTwoEcharts)
|
// disposeEcharts(pressureThreeEcharts)
|
// disposeEcharts(liquidOneEcharts)
|
// disposeEcharts(liquidTwoEcharts)
|
// disposeEcharts(liquidThreeEcharts)
|
// disposeEcharts(flowOneEcharts)
|
// disposeEcharts(flowTwoEcharts)
|
// disposeEcharts(flowThreeEcharts)
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.date{
|
position: absolute;
|
width: 12.4%;
|
height: 6.1%;
|
background-image: url("../../../assets/images/screen/statistics/date.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
top: 1%;
|
right:3%;
|
display: flex;
|
align-items: center;
|
justify-content:center;
|
font-weight: 400;
|
font-size: 18px;
|
color: #DDDDDD;
|
div{
|
width: 25%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.date-active{
|
background-image: url("../../../assets/images/screen/statistics/select-date.png");
|
}
|
}
|
.statistics{
|
width: 100%;
|
height: 100%;
|
.container{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-wrap:wrap;
|
justify-content: space-between;
|
align-items: center;
|
padding:2%;
|
box-sizing: border-box;
|
position: relative;
|
.echarts{
|
width:33%;
|
height:45%;
|
background-image: url("../../../assets/images/screen/statistics/echarts-box.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
// margin-bottom:50px;
|
div:first-child{
|
width:100%;
|
height:14%;
|
background-image: url("../../../assets/images/screen/statistics/title-icon.png");
|
background-repeat: no-repeat;
|
background-size:5.8% 52%;
|
background-position:40% 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding-left:6%;
|
span{
|
font-weight: 400;
|
font-size: 18px;
|
color: #FFFFFF;
|
text-align: center;
|
}
|
}
|
div:last-child{
|
width:100%;
|
height:86%;
|
}
|
}
|
|
.search{
|
width:12.2%;
|
height:4%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
position: absolute;
|
right:3%;
|
top:9%;
|
.search-select{
|
height:100%;
|
width: 80%;
|
:deep(.el-select__wrapper){
|
height: 100%;
|
width: 100%;
|
background:transparent !important;
|
border: 1px solid #1fb0be !important;
|
border-radius: 5px 0 0 5px;
|
}
|
}
|
.search-btn{
|
height:100%;
|
width: 20%;
|
border-radius:5px;
|
background: #2a6bb6;
|
font-weight: 400;
|
font-size: 16px;
|
color: #B9F9FF;
|
margin-left:5px;
|
}
|
}
|
}
|
}
|
</style>
|
