302 lines
8.3 KiB
Vue
302 lines
8.3 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<el-dialog
|
|
title=""
|
|
:visible.sync="ifOpen"
|
|
width="70%"
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
@open="openChart"
|
|
@close="closeDialog"
|
|
>
|
|
<template #title>
|
|
<div style="display: flex; align-items: center">
|
|
<img src="../../assets/img/signalPrefix.png" alt="" />
|
|
<span
|
|
style="
|
|
padding: 0 15px 0 10px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
"
|
|
>组塔监测</span
|
|
>
|
|
<img src="../../assets/img/lineSuffix.png" alt="" />
|
|
</div>
|
|
</template>
|
|
<div class="content">
|
|
<div class="cont-lef">
|
|
<div class="sel-top">{{proData.proName}}</div>
|
|
<div
|
|
:class="['single-sel', { isActive: currentSelIndex === item.value }]"
|
|
v-for="item in deviceRange"
|
|
:key="item.value"
|
|
@click="handleEnvir(item)"
|
|
>{{ item.label }}</div
|
|
>
|
|
</div>
|
|
<div class="cont-rig">
|
|
<!-- <div class="rig-top">
|
|
<el-date-picker
|
|
v-model="dateVal"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="请选择日期"
|
|
>
|
|
</el-date-picker>
|
|
<el-button
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
size="mini"
|
|
@click="queryDate"
|
|
>搜索</el-button
|
|
>
|
|
</div> -->
|
|
<div class="rig-charts">
|
|
<div class="charts-up">
|
|
<div id="angleWetChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryDeviceByProApi,
|
|
queryEnvironmentInfoByIdApi,
|
|
getTowerDevAttributeRecordByDevice,
|
|
queryWarnInfoByIdApi
|
|
} from '@/api/substation/substation'
|
|
import * as echarts from 'echarts'
|
|
export default {
|
|
name: 'angleDialog',
|
|
components: {},
|
|
props: {
|
|
ifOpen: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
proData: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
open: false,
|
|
deviceVal: undefined,
|
|
deviceRange: [],
|
|
dateVal: '',
|
|
selList: [
|
|
{ id: 1, name: '一号环境' },
|
|
{ id: 2, name: '二号环境' },
|
|
{ id: 3, name: '三号环境' },
|
|
],
|
|
currentSelIndex: null
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
//获取设备列表
|
|
async getDeviceData(proId) {
|
|
let res = await queryDeviceByProApi({
|
|
proId,
|
|
devType: 117
|
|
})
|
|
if(res.data.data.length !== 0) {
|
|
this.deviceRange = res.data.data.map(item => {
|
|
return {
|
|
label: item.devName,
|
|
value: item.devId
|
|
}
|
|
})
|
|
this.deviceVal = this.proData.id;
|
|
this.currentSelIndex = this.proData.id;
|
|
await this.getChartsData(this.deviceVal)
|
|
}
|
|
},
|
|
//获取echart数据
|
|
async getChartsData(devId) {
|
|
this.desHander()
|
|
let res = await getTowerDevAttributeRecordByDevice({devId})
|
|
this.generateCharts(res.data.slice(0,9))
|
|
},
|
|
//打开时触发
|
|
openChart() {
|
|
this.$nextTick(() => {
|
|
this.getDeviceData(this.proData.proId)
|
|
})
|
|
},
|
|
// 点击设备
|
|
handleEnvir(val) {
|
|
this.currentSelIndex = val.value
|
|
// this.generateCharts()
|
|
this.getChartsData(val.value)
|
|
},
|
|
queryDate() {
|
|
console.log(this.dateVal)
|
|
},
|
|
//渲染echart
|
|
generateCharts(list) {
|
|
console.log(list)
|
|
let tempArr = list.map(item => {
|
|
return Number(item.jcValue)
|
|
})
|
|
let tempXList = list.map(item => {
|
|
return item.xtime
|
|
})
|
|
|
|
// 倾角图表
|
|
let tempOption = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
valueFormatter:(value) => {
|
|
return value + '°'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: tempXList,
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '°'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '倾角',
|
|
type: 'bar',
|
|
barWidth: '40%',
|
|
data: tempArr,
|
|
itemStyle:{
|
|
// 设置柱状渐变色
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#007FFF'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#93D4EA'
|
|
}
|
|
]),
|
|
borderRadius: [3, 3, 0, 0],
|
|
}
|
|
}
|
|
]
|
|
};
|
|
let tempChart = echarts.init(document.querySelector('#angleWetChart'))
|
|
tempChart.setOption(tempOption)
|
|
},
|
|
// 销毁实例
|
|
desHander(){
|
|
let myChart = echarts.init(document.querySelector('#angleWetChart'));
|
|
myChart.dispose();
|
|
},
|
|
closeDialog() {
|
|
this.$emit('closeDialog')
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
height: 600px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.cont-lef {
|
|
width: 25%;
|
|
height: 100%;
|
|
margin-right: 15px;
|
|
border: 1px solid #c6d8fa;
|
|
border-radius: 10px;
|
|
|
|
.sel-top {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 20px 40px;
|
|
background-color: #d3e4fa;
|
|
font-size: 18px;
|
|
color: #000;
|
|
}
|
|
|
|
.single-sel {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 20px 40px;
|
|
font-size: 16px;
|
|
color: #000;
|
|
border-bottom: 1px solid #ced1d5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.isActive{
|
|
|
|
background-color: #d3e4fa;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.cont-rig {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.rig-top {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.rig-charts {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.charts-up,
|
|
.charts-down {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px dashed #98bbda;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|