设备监控点击数据查看表格
This commit is contained in:
白菜
221
src/views/ems/dzjk/sbjk/PointChart.vue
Normal file
221
src/views/ems/dzjk/sbjk/PointChart.vue
Normal file
@ -0,0 +1,221 @@
|
||||
<!--电位展示图表-->
|
||||
<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"
|
||||
>
|
||||
<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"/>
|
||||
</div>
|
||||
<div style="height: 350px" id="searchChart"></div>
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
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 DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
|
||||
export default {
|
||||
components: {DateRangeSelect, DateTimeSelect},
|
||||
mixins: [resize],
|
||||
props: {
|
||||
siteId:{
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isDtdc(){
|
||||
return this.categoryName === '单体电池'
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
show(val) {
|
||||
if(!val){
|
||||
this.pointName=''
|
||||
this.categoryName=''
|
||||
this.deviceId=''
|
||||
this.dataUnit=1
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.hideLoading()
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
}
|
||||
},
|
||||
dataUnit:{
|
||||
handler(newVal,oldVal){
|
||||
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:''
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
showChart({pointName,categoryName,deviceId}){
|
||||
//初始化数据
|
||||
this.pointName=pointName
|
||||
this.categoryName=categoryName
|
||||
this.deviceId=deviceId
|
||||
this.show = true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.dateTimeSelect.init()
|
||||
this.initChart()
|
||||
this.getDate()
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#searchChart'))
|
||||
},
|
||||
showLoading(){
|
||||
this.chart && this.chart.showLoading()
|
||||
},
|
||||
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
|
||||
}
|
||||
|
||||
getPointValueList({siteIds:[this.siteId],dataUnit,categoryName:this.categoryName,pointName:this.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=>{
|
||||
dataset.push({
|
||||
name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${inner.deviceId}`,
|
||||
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)
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
// left: 'center',
|
||||
// top: '10',
|
||||
},
|
||||
grid: {
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: dataset
|
||||
})
|
||||
},
|
||||
updateDate(val){
|
||||
this.dataRange =val || []
|
||||
this.getDate()
|
||||
},
|
||||
handleColsed(done) {
|
||||
if (!this.chart) {
|
||||
return done();
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
done();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.card-title .el-radio{
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user