单体电池图表、设备列表点位清单图表
This commit is contained in:
@ -1,25 +1,33 @@
|
||||
<!--电位展示图表-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="show"
|
||||
:title="pointName"
|
||||
:close-on-click-modal="false"
|
||||
show-close
|
||||
destroy-on-close
|
||||
lock-scroll
|
||||
append-to-body
|
||||
width="1000px"
|
||||
class="ems-dialog"
|
||||
:before-close="handleColsed"
|
||||
:visible.sync="show"
|
||||
:title="pointName"
|
||||
:close-on-click-modal="false"
|
||||
show-close
|
||||
destroy-on-close
|
||||
lock-scroll
|
||||
append-to-body
|
||||
width="1000px"
|
||||
class="ems-dialog"
|
||||
:before-close="handleColsed"
|
||||
>
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="common-card-container common-card-container-body-no-padding time-range-card"
|
||||
>
|
||||
<div slot="header" class="time-range-header">
|
||||
<el-radio-group class="card-title" v-model="dataUnit">
|
||||
<el-radio :label="1">分钟</el-radio>
|
||||
<el-radio :label="2">小时</el-radio>
|
||||
<el-radio :label="3">天</el-radio>
|
||||
</el-radio-group>
|
||||
<date-time-select ref="dateTimeSelect" :data-unit="dataUnit" @initDate="((e)=>dataRange=e||[])" @updateDate="updateDate"/>
|
||||
<date-time-select
|
||||
ref="dateTimeSelect"
|
||||
:data-unit="dataUnit"
|
||||
@initDate="(e) => (dataRange = e || [])"
|
||||
@updateDate="updateDate"
|
||||
/>
|
||||
</div>
|
||||
<div style="height: 350px" id="searchChart"></div>
|
||||
</el-card>
|
||||
@ -29,177 +37,196 @@
|
||||
import * as echarts from "echarts";
|
||||
import resize from "@/mixins/ems/resize";
|
||||
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
|
||||
import {getPointValueList} from "@/api/ems/search";
|
||||
import { getPointValueList } from "@/api/ems/search";
|
||||
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
|
||||
export default {
|
||||
components: {DateRangeSelect, DateTimeSelect},
|
||||
components: { DateRangeSelect, DateTimeSelect },
|
||||
mixins: [resize],
|
||||
props: {
|
||||
siteId:{
|
||||
siteId: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isDtdc(){
|
||||
return this.categoryName === '单体电池'
|
||||
isDtdc() {
|
||||
return this.categoryName === "单体电池";
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
watch: {
|
||||
show(val) {
|
||||
if(!val){
|
||||
this.pointName=''
|
||||
this.categoryName=''
|
||||
this.deviceId=''
|
||||
this.dataUnit=1
|
||||
if (!val) {
|
||||
this.pointName = "";
|
||||
this.categoryName = "";
|
||||
this.deviceId = "";
|
||||
this.dataUnit = 1;
|
||||
this.child = "";
|
||||
if (!this.chart) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
this.hideLoading()
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
this.hideLoading();
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
},
|
||||
dataUnit:{
|
||||
handler(newVal,oldVal){
|
||||
if(!this.show) return
|
||||
console.log('wacth到了dataUnit的变化',newVal,oldVal)
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.dateTimeSelect.init()
|
||||
this.getDate()
|
||||
})
|
||||
dataUnit: {
|
||||
handler(newVal, oldVal) {
|
||||
if (!this.show) return;
|
||||
console.log("wacth到了dataUnit的变化", newVal, oldVal);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dateTimeSelect.init();
|
||||
this.getDate();
|
||||
});
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
show:false,
|
||||
chart:null,
|
||||
dataUnit:1,
|
||||
dataRange:[],
|
||||
child:[],//单体电池需要数据 暂不删除
|
||||
pointName:'',
|
||||
categoryName:'',
|
||||
deviceId:''
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
chart: null,
|
||||
dataUnit: 1,
|
||||
dataRange: [],
|
||||
child: "", //单体电池需要数据
|
||||
pointName: "",
|
||||
categoryName: "",
|
||||
deviceId: "",
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
showChart({pointName,categoryName,deviceId}){
|
||||
methods: {
|
||||
showChart({ pointName, categoryName, deviceId, child = "" }) {
|
||||
//初始化数据
|
||||
this.pointName=pointName
|
||||
this.categoryName=categoryName
|
||||
this.deviceId=deviceId
|
||||
this.show = true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.dateTimeSelect.init()
|
||||
this.initChart()
|
||||
this.getDate()
|
||||
})
|
||||
this.pointName = pointName;
|
||||
this.categoryName = categoryName;
|
||||
this.deviceId = deviceId;
|
||||
child && (this.child = child);
|
||||
this.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dateTimeSelect.init();
|
||||
this.initChart();
|
||||
this.getDate();
|
||||
});
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#searchChart'))
|
||||
this.chart = echarts.init(document.querySelector("#searchChart"));
|
||||
},
|
||||
showLoading(){
|
||||
this.chart && this.chart.showLoading()
|
||||
showLoading() {
|
||||
this.chart && this.chart.showLoading();
|
||||
},
|
||||
hideLoading(){
|
||||
this.chart && this.chart.hideLoading()
|
||||
hideLoading() {
|
||||
this.chart && this.chart.hideLoading();
|
||||
},
|
||||
getDate(){
|
||||
this.showLoading()
|
||||
const{dataUnit,dataRange:[start='',end=''],child}=this
|
||||
let siteDeviceMap={}
|
||||
child.forEach(([first,second,third])=>{
|
||||
if(siteDeviceMap[first]){
|
||||
siteDeviceMap[first].push(third)
|
||||
}else{
|
||||
siteDeviceMap[first]=[]
|
||||
siteDeviceMap[first].push(third)
|
||||
}
|
||||
})
|
||||
let startDate,endDate
|
||||
if(start && dataUnit===3){
|
||||
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
||||
startDate = start + ' 00:00:00'
|
||||
}else{
|
||||
startDate=start
|
||||
}
|
||||
if(end && dataUnit===3){
|
||||
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
||||
endDate = end + ' 00:00:00'
|
||||
}else{
|
||||
endDate=end
|
||||
}
|
||||
getDate() {
|
||||
this.showLoading();
|
||||
const {
|
||||
siteId,
|
||||
dataUnit,
|
||||
dataRange: [start = "", end = ""],
|
||||
child,
|
||||
deviceId,
|
||||
categoryName,
|
||||
pointName,
|
||||
} = this;
|
||||
let siteDeviceMap = {};
|
||||
child && (siteDeviceMap[siteId] = child);
|
||||
let startDate, endDate;
|
||||
if (start && dataUnit === 3) {
|
||||
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
||||
startDate = start + " 00:00:00";
|
||||
} else {
|
||||
startDate = start;
|
||||
}
|
||||
if (end && dataUnit === 3) {
|
||||
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
||||
endDate = end + " 00:00:00";
|
||||
} else {
|
||||
endDate = end;
|
||||
}
|
||||
|
||||
getPointValueList({siteIds:[this.siteId],deviceId:this.deviceId,dataUnit,categoryName:this.categoryName,pointName:this.pointName,startDate,endDate,siteDeviceMap:{}}).then(response => {
|
||||
this.setOption(response?.data || [])
|
||||
}).finally(()=>{
|
||||
this.hideLoading()
|
||||
getPointValueList({
|
||||
siteIds: [siteId],
|
||||
deviceId,
|
||||
dataUnit,
|
||||
categoryName,
|
||||
pointName,
|
||||
startDate,
|
||||
endDate,
|
||||
siteDeviceMap,
|
||||
})
|
||||
.then((response) => {
|
||||
this.setOption(response?.data || []);
|
||||
})
|
||||
.finally(() => {
|
||||
this.hideLoading();
|
||||
});
|
||||
},
|
||||
setOption(data) {
|
||||
if(!this.chart) return
|
||||
this.chart.clear()
|
||||
console.log('返回的数据',data)
|
||||
let dataset=[]
|
||||
if(data.length>0){
|
||||
data.forEach((item,index)=>{
|
||||
item.deviceList.forEach(inner=>{
|
||||
if (!this.chart) return;
|
||||
this.chart.clear();
|
||||
console.log("返回的数据", data);
|
||||
let dataset = [];
|
||||
if (data.length > 0) {
|
||||
data.forEach((item, index) => {
|
||||
item.deviceList.forEach((inner) => {
|
||||
dataset.push({
|
||||
name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${this.pointName}`,
|
||||
type:'line',
|
||||
xdata:[],
|
||||
data:[]
|
||||
})
|
||||
const length = dataset.length
|
||||
inner.pointValueList.forEach(value=>{
|
||||
dataset[length-1].xdata.push(value.valueDate)
|
||||
dataset[length-1].data.push(value.pointValue)
|
||||
})
|
||||
})
|
||||
})
|
||||
}else{
|
||||
this.$message.warning('暂无数据')
|
||||
name: `${
|
||||
this.isDtdc
|
||||
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
|
||||
: ""
|
||||
}${this.isDtdc ? inner.deviceId : this.pointName}`,
|
||||
type: "line",
|
||||
xdata: [],
|
||||
data: [],
|
||||
});
|
||||
const length = dataset.length;
|
||||
inner.pointValueList.forEach((value) => {
|
||||
dataset[length - 1].xdata.push(value.valueDate);
|
||||
dataset[length - 1].data.push(value.pointValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$message.warning("暂无数据");
|
||||
}
|
||||
console.log('图表数据',dataset)
|
||||
console.log("图表数据", dataset);
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
// left: 'center',
|
||||
// top: '10',
|
||||
},
|
||||
grid: {
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
|
||||
xAxis: { type: "category", data: dataset?.[0]?.xdata || [] },
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: dataset
|
||||
})
|
||||
series: dataset,
|
||||
});
|
||||
},
|
||||
updateDate(val){
|
||||
this.dataRange =val || []
|
||||
this.getDate()
|
||||
updateDate(val) {
|
||||
this.dataRange = val || [];
|
||||
this.getDate();
|
||||
},
|
||||
handleColsed(done) {
|
||||
if (!this.chart) {
|
||||
@ -209,14 +236,13 @@ export default {
|
||||
this.chart = null;
|
||||
done();
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.card-title .el-radio{
|
||||
.card-title .el-radio {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user