547 lines
16 KiB
Vue
547 lines
16 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 pitRange"
|
||
:key="item.value"
|
||
@click="handleDip(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="O2Chart"></div>
|
||
<div id="COChart"></div>
|
||
</div>
|
||
<div class="charts-down">
|
||
<div id="fireChart"></div>
|
||
<div id="H2SChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
queryDeviceByProApi,
|
||
queryPitDataApi,
|
||
queryLimitSpaceApi,
|
||
queryNewLimitSpaceApi,
|
||
queryEnvironmentInfoByIdApi
|
||
} from '@/api/substation/substation'
|
||
import * as echarts from 'echarts'
|
||
export default {
|
||
name: 'dipDialog',
|
||
components: {},
|
||
props: {
|
||
ifOpen: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
proData: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
open: false,
|
||
currentPit: undefined,
|
||
pitVal: undefined,
|
||
pitRange: [],
|
||
dateVal: '',
|
||
currentSelIndex: null
|
||
}
|
||
},
|
||
mounted() {
|
||
},
|
||
methods: {
|
||
//获取设备列表
|
||
async getDeviceData(proId) {
|
||
let res = await queryDeviceByProApi({
|
||
proId,
|
||
devType: 119
|
||
})
|
||
if(res.data.data.length !== 0) {
|
||
this.pitRange = res.data.data.map(item => {
|
||
return {
|
||
label: item.devName,
|
||
value: item.devId
|
||
}
|
||
})
|
||
this.pitVal = this.proData.id;
|
||
this.currentSelIndex = this.proData.id;
|
||
await this.getPitData(this.pitVal)
|
||
}
|
||
},
|
||
//获取ercharts数据
|
||
async getPitData(devId) {
|
||
this.desHander()
|
||
let res = await queryPitDataApi({
|
||
devId
|
||
})
|
||
this.generateCharts(res.data)
|
||
},
|
||
// 打开时触发
|
||
openChart() {
|
||
this.$nextTick(() => {
|
||
this.getDeviceData(this.proData.proId)
|
||
})
|
||
},
|
||
//点击设备
|
||
handleDip(val) {
|
||
this.currentSelIndex = val.value;
|
||
this.getPitData(val.value)
|
||
},
|
||
//搜素
|
||
queryDate() {
|
||
console.log(this.dateVal)
|
||
},
|
||
//渲染echarts
|
||
generateCharts(list) {
|
||
console.log(list)
|
||
let O2Arr = list['含氧量'].map(item => {
|
||
return Number(item.jcValue)
|
||
})
|
||
let O2XList = list['含氧量'].map(item => {
|
||
return item.xtime
|
||
})
|
||
|
||
let COArr = list['一氧化碳'].map(item => {
|
||
return Number(item.jcValue)
|
||
})
|
||
let COXList = list['一氧化碳'].map(item => {
|
||
return item.xtime
|
||
})
|
||
|
||
let fireArr = list['可燃气体'].map(item => {
|
||
return Number(item.jcValue)
|
||
})
|
||
let fireXList = list['可燃气体'].map(item => {
|
||
return item.xtime
|
||
})
|
||
|
||
let H2SArr = list['硫化氢'].map(item => {
|
||
return Number(item.jcValue)
|
||
})
|
||
let H2SXList = list['硫化氢'].map(item => {
|
||
return item.xtime
|
||
})
|
||
|
||
// 含氧量图表
|
||
let O2Option = {
|
||
title: {
|
||
top: 0,
|
||
left: 0,
|
||
text: '含氧量',
|
||
// subtext: '',
|
||
textStyle: {
|
||
color: '#000',
|
||
fontSize: 16,
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
valueFormatter:(value) => {
|
||
return value + ' %vol'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: O2XList,
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '%vol'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '含氧量',
|
||
type: 'bar',
|
||
barWidth: '40%',
|
||
data: O2Arr,
|
||
itemStyle:{
|
||
// 设置柱状渐变色
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#007FFF'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#93D4EA'
|
||
}
|
||
]),
|
||
borderRadius: [3, 3, 0, 0],
|
||
}
|
||
}
|
||
]
|
||
};
|
||
let O2Chart = echarts.init(document.querySelector('#O2Chart'))
|
||
O2Chart.setOption(O2Option)
|
||
// 可燃气体图表
|
||
let fireOption = {
|
||
title: {
|
||
top: 0,
|
||
left: 0,
|
||
text: '可燃气体',
|
||
// subtext: '',
|
||
textStyle: {
|
||
color: '#000',
|
||
fontSize: 16,
|
||
}
|
||
},
|
||
grid: {
|
||
width: '80%',
|
||
height: '60%'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
valueFormatter:(value) => {
|
||
return value + ' %LEL'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: fireXList
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '%LEL',
|
||
},
|
||
series: [
|
||
{
|
||
name: '可燃气体',
|
||
data: fireArr,
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'none',
|
||
lineStyle: {
|
||
color: '#4781FC'
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
x:0,
|
||
y:0,
|
||
x2:0,
|
||
y2:1,
|
||
type: 'linear',
|
||
colorStops: [
|
||
{ offset: 0, color: '#CCDBFF' },
|
||
{ offset: 1, color: '#ECF2FF' },
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
let fireChart = echarts.init(document.querySelector('#fireChart'))
|
||
fireChart.setOption(fireOption)
|
||
// 一氧化碳图表
|
||
let COOption = {
|
||
title: {
|
||
top: 0,
|
||
left: 0,
|
||
text: '一氧化碳',
|
||
// subtext: '',
|
||
textStyle: {
|
||
color: '#000',
|
||
fontSize: 16,
|
||
}
|
||
},
|
||
grid: {
|
||
width: '80%',
|
||
height: '60%'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
valueFormatter:(value) => {
|
||
return value + ' %PPM'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: COXList
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '%PPM',
|
||
},
|
||
series: [
|
||
{
|
||
name: '一氧化碳',
|
||
data: COArr,
|
||
type: 'line',
|
||
smooth: true,
|
||
lineStyle: {
|
||
color: '#FE8511'
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#FE8511'
|
||
}
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
x:0,
|
||
y:0,
|
||
x2:0,
|
||
y2:1,
|
||
type: 'linear',
|
||
colorStops: [
|
||
{ offset: 0, color: '#F5CC91' },
|
||
{ offset: 1, color: '#F8F6F6' },
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
let COChart = echarts.init(document.querySelector('#COChart'))
|
||
COChart.setOption(COOption)
|
||
// 硫化氢图表
|
||
let H2SOption = {
|
||
title: {
|
||
top: 0,
|
||
left: 0,
|
||
text: '硫化氢',
|
||
// subtext: '',
|
||
textStyle: {
|
||
color: '#000',
|
||
fontSize: 16,
|
||
}
|
||
},
|
||
grid: {
|
||
width: '80%',
|
||
height: '60%'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
valueFormatter:(value) => {
|
||
return value + ' %PPM'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: H2SXList
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '%PPM'
|
||
},
|
||
series: [
|
||
/*{
|
||
name: 'PM2.5',
|
||
data: [180, 332, 121, 345, 99, 357, 428],
|
||
type: 'line',
|
||
lineStyle: {
|
||
color: '#FC8B2D'
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#FC8B2D'
|
||
}
|
||
},
|
||
symbol: 'none',
|
||
smooth: true
|
||
},*/
|
||
{
|
||
name: '硫化氢',
|
||
data: H2SArr,
|
||
type: 'line',
|
||
lineStyle: {
|
||
color: '#4B84FC'
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#4B84FC'
|
||
}
|
||
},
|
||
symbol: 'none',
|
||
smooth: true
|
||
},
|
||
]
|
||
};
|
||
let H2SChart = echarts.init(document.querySelector('#H2SChart'))
|
||
H2SChart.setOption(H2SOption)
|
||
},
|
||
desHander(){
|
||
let myChart1 = echarts.init(document.querySelector('#O2Chart'));
|
||
myChart1.dispose();
|
||
let myChart2 = echarts.init(document.querySelector('#fireChart'));
|
||
myChart2.dispose();
|
||
let myChart3 = echarts.init(document.querySelector('#COChart'));
|
||
myChart3.dispose();
|
||
let myChart4 = echarts.init(document.querySelector('#H2SChart'));
|
||
myChart4.dispose();
|
||
},
|
||
getFormattedDate() {
|
||
const today = new Date() // 获取今天的日期
|
||
const year = today.getFullYear() // 获取年份
|
||
let month = today.getMonth() + 1 // 获取月份（注意月份从0开始，所以要加1）
|
||
let day = today.getDate() // 获取日期
|
||
|
||
// 确保月份和日期是两位数格式
|
||
month = month < 10 ? '0' + month : month
|
||
day = day < 10 ? '0' + day : day
|
||
|
||
// 格式化为 yyyy-MM-dd
|
||
return `${year}-${month}-${day}`
|
||
},
|
||
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: 49%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
div {
|
||
width: 49.3%;
|
||
height: 100%;
|
||
border: 1px dashed #98bbda;
|
||
border-radius: 5px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|