You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
923 lines
36 KiB
923 lines
36 KiB
<template>
|
|
<div class="app-container">
|
|
<el-row :gutter="10">
|
|
<el-card class="box-card card-4col">
|
|
<el-row>
|
|
<span>消防压力预警</span>
|
|
</el-row>
|
|
<el-row class="big-number">
|
|
{{earlyWarning}} 次
|
|
</el-row>
|
|
<el-row>
|
|
<div style="width: 100%; height: 20px;"></div>
|
|
</el-row>
|
|
<!-- <el-row class="over-style">
|
|
<el-col :span="12">
|
|
周同比
|
|
<i class="el-icon-caret-bottom"
|
|
style="color: #00aa00;"></i>
|
|
2%
|
|
</el-col>
|
|
<el-col :span="12">
|
|
日环比
|
|
<i class="el-icon-caret-bottom"
|
|
style="color: #00aa00;"></i>
|
|
3%
|
|
</el-col>
|
|
</el-row> -->
|
|
</el-card>
|
|
<el-card class="box-card card-4col">
|
|
<el-row>
|
|
<span>消防压力表设备总数</span>
|
|
</el-row>
|
|
<el-row class="big-number">
|
|
{{allMessage}} 个
|
|
</el-row>
|
|
<el-row>
|
|
<div style="width: 100%; height: 20px;"></div>
|
|
</el-row>
|
|
<!-- <el-row class="over-style">
|
|
<el-col :span="12">
|
|
周同比
|
|
<i class="el-icon-caret-bottom"
|
|
style="color: #00aa00;"></i>
|
|
2%
|
|
</el-col>
|
|
<el-col :span="12">
|
|
日环比
|
|
<i class="el-icon-caret-bottom"
|
|
style="color: #00aa00;"></i>
|
|
3%
|
|
</el-col>
|
|
</el-row> -->
|
|
</el-card>
|
|
<el-card class="box-card card-4col">
|
|
<el-row>
|
|
<span>消防压力表离线总数</span>
|
|
</el-row>
|
|
<el-row class="big-number">
|
|
{{offLine}} 个
|
|
</el-row>
|
|
<el-row>
|
|
<div style="width: 100%; height: 20px;"></div>
|
|
</el-row>
|
|
<!-- <el-row class="over-style">
|
|
<el-col :span="12">
|
|
周同比
|
|
<i class="el-icon-caret-bottom"
|
|
style="color: #00aa00;"></i>
|
|
2%
|
|
</el-col>
|
|
<el-col :span="12">
|
|
日环比
|
|
<i class="el-icon-caret-bottom"
|
|
style="color: #00aa00;"></i>
|
|
3%
|
|
</el-col>
|
|
</el-row> -->
|
|
</el-card>
|
|
<el-card class="box-card card-4col">
|
|
<el-row>
|
|
<span>压力表上报次数</span>
|
|
</el-row>
|
|
<el-row class="big-number">
|
|
{{sumallreport}} 次
|
|
</el-row>
|
|
<el-row>
|
|
<div style="width: 100%; height: 20px;"></div>
|
|
</el-row>
|
|
<!-- <el-row class="over-style">
|
|
<el-col :span="12">
|
|
周同比
|
|
<i class="el-icon-caret-bottom"
|
|
style="color: #00aa00;"></i>
|
|
2%
|
|
</el-col>
|
|
<el-col :span="12">
|
|
日环比
|
|
<i class="el-icon-caret-bottom"
|
|
style="color: #00aa00;"></i>
|
|
3%
|
|
</el-col>
|
|
</el-row> -->
|
|
</el-card>
|
|
</el-row>
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-top: 25px;">
|
|
<el-form-item label="统计类型" style="margin-right: 20px;">
|
|
<el-radio-group size="small" v-model="queryParams.statisticalType" @change="typeChangeFun">
|
|
<el-radio-button label="1">预警</el-radio-button>
|
|
<!-- <el-radio-button label="2">离线</el-radio-button> -->
|
|
<el-radio-button label="3">压力</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="所属隧道">
|
|
<el-select v-model="queryParams.tunnelId" placeholder="请选择隧道" size="small" @change="getEquId">
|
|
<el-option
|
|
v-for="item in tunnelData"
|
|
:key="item.tunnelId"
|
|
:label="item.tunnelName"
|
|
:value="item.tunnelId"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="设备名称" v-show="queryParams.statisticalType == '3'" >
|
|
<el-select v-model="queryParams.equipmentId" placeholder="请选择设备" size="small" @change="handleChange">
|
|
<el-option
|
|
v-for="item in equipmentData"
|
|
:key="item.eqId"
|
|
:label="item.eqName"
|
|
:value="item.eqId"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="日期选择" v-show="queryParams.statisticalType == '3'">
|
|
<el-date-picker
|
|
v-model="daterange"
|
|
size="small"
|
|
style="width: 240px"
|
|
value-format="yyyy-MM-dd"
|
|
type="daterange"
|
|
range-separator="-"
|
|
unlink-panels
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:picker-options="pickerOptions"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="日期选择" v-show="queryParams.statisticalType == '1'">
|
|
<el-radio-group v-model="pickerType" style="margin-right: 15px" @change="changeDate()">
|
|
<el-radio-button label="year">年</el-radio-button>
|
|
<el-radio-button label="month">月</el-radio-button>
|
|
<el-radio-button label="date">日</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item v-show="queryParams.statisticalType == '1'">
|
|
<el-date-picker v-if="pickerType == 'date'" type="date" size="small" v-model="dateTime"
|
|
placeholder="选择日期" @change="changeDate" key='day' :picker-options="pickerOptions">
|
|
</el-date-picker>
|
|
<el-date-picker v-if="pickerType == 'month'" type="month" size="small" v-model="monthTime"
|
|
placeholder="选择月" @change="changeDate" key='month'>
|
|
</el-date-picker>
|
|
|
|
<el-date-picker v-if="pickerType == 'year'" type="year" size="small" v-model="yearTime"
|
|
placeholder="选择年" @change="changeDate" key='year'>
|
|
</el-date-picker>
|
|
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row :gutter="10" >
|
|
<el-col :span="12">
|
|
<div id="alarmChartL" style="width: 100%; height: 250px;"></div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div id="alarmChartR" style="width: 100%; height: 250px;"></div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- <div id="alarmChart" style="width: 80%; height: 250px;margin: 0 auto;" v-if="queryParams.statisticalType == '3'"></div> -->
|
|
<el-table v-loading="loading" :default-sort = "{prop: 'state', order: 'descending'}"
|
|
style="margin-top: 10px;" :data="earlyWarningData" max-height="300"
|
|
v-show="queryParams.statisticalType == '1'">
|
|
<el-table-column label="所属隧道" align="center" prop="tunnel_name" />
|
|
<el-table-column label="方向" align="center" prop="direction" >上行</el-table-column>
|
|
<el-table-column label="报警次数" align="center" prop="num" >
|
|
<template slot-scope="scope">
|
|
<div v-show="queryParams.statisticalType == '1' && pickerType == 'year'">{{scope.row.num}}</div>
|
|
<div v-show="queryParams.statisticalType == '1' && pickerType == 'month'">{{scope.row.sum_flow_num}}</div>
|
|
<div v-show="queryParams.statisticalType == '1' && pickerType == 'date'">{{scope.row.num}}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="报警时间" align="center" prop="date" sortable>
|
|
<template slot-scope="scope">
|
|
<div v-show="queryParams.statisticalType == '1' && pickerType == 'year'">{{scope.row.date}}</div>
|
|
<div v-show="queryParams.statisticalType == '1' && pickerType == 'month'">{{scope.row.curr_date}}</div>
|
|
<div v-show="queryParams.statisticalType == '1' && pickerType == 'date'">{{scope.row.order_hour}}:00</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-table v-loading="loading" :default-sort = "{prop: 'state', order: 'descending'}"
|
|
style="margin-top: 10px;" v-show="queryParams.statisticalType == '2'">
|
|
<el-table-column label="所属隧道" align="center" prop="tunnelName" />
|
|
<el-table-column label="方向" align="center" prop="direction" />
|
|
<el-table-column label="离线次数" align="center" prop="pressure" />
|
|
<el-table-column label="报警时间" align="center" prop="state" sortable></el-table-column>
|
|
</el-table>
|
|
<el-table v-loading="loading" :default-sort = "{prop: 'create_time', order: 'descending'}"
|
|
style="margin-top: 10px;" v-show="queryParams.statisticalType == '3'" :data="pressureData">
|
|
<el-table-column label="所属隧道" align="center" prop="tunnel_name" />
|
|
<el-table-column label="方向" align="center" prop="eq_direction" >
|
|
<template slot-scope="scope">
|
|
<div>
|
|
{{formatDirect(scope.row.eq_direction)}}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="设备名称" align="center" prop="equipment_name" />
|
|
<el-table-column label="压力值" align="center" prop="analog_quantity">
|
|
<template slot-scope="scope">
|
|
<div>{{scope.row.analog_quantity}}Mp</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="采集时间" align="center" prop="create_time" sortable>
|
|
<template slot-scope="scope">
|
|
<div>{{changeTime(scope.row.create_time)}}</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="handleQuery"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import *as echarts from 'echarts'
|
|
import { getPressureGauges, allMessage, earlyWarning, offLine, frequencyAll, listXfpipeline, getXfpipeline, delXfpipeline, addXfpipeline, updateXfpipeline, exportXfpipeline } from "@/api/xfpipeline/xfpipeline";
|
|
import { listTunnels } from "@/api/equipment/tunnel/api";
|
|
import {listDevices} from "@/api/equipment/eqlist/api";
|
|
|
|
export default {
|
|
name: "Xfanalysis",
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
total: 0, // 总条数
|
|
// 压力 表格
|
|
pressureData:[],
|
|
// 预警 表格
|
|
earlyWarningData:[],
|
|
// 获取所有压力表一天上报次数
|
|
sumallreport:'',
|
|
// 离线总数
|
|
offLine:'',
|
|
// 预警设备总数
|
|
earlyWarning:'',
|
|
// 所有压力表总数
|
|
allMessage:'',
|
|
// 遮罩层
|
|
loading: false,
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
statisticalType:'3',
|
|
tunnelId: null,
|
|
// state: null,
|
|
// pickerDate:"",
|
|
params:{}
|
|
},
|
|
pickerType: "year",
|
|
// 所属隧道
|
|
tunnelData:{},
|
|
// 设备名称
|
|
equipmentData:[],
|
|
// 时间选择 数组
|
|
daterange:[],
|
|
dateTime:new Date(),
|
|
monthTime: new Date(),
|
|
yearTime: new Date(),
|
|
dateTimes: new Date(),
|
|
// 限制时间段不能选今天以后的
|
|
pickerOptions:{
|
|
onPick: (obj) => {
|
|
console.log(obj)
|
|
|
|
// if(obj.maxDate && obj.minDate){
|
|
// if(Date.parse(obj.minDate) == Date.parse(obj.maxDate)){
|
|
// this.$modal.msgWarning('不要选择同一天,请重新选择')
|
|
// return
|
|
// }
|
|
// }
|
|
},
|
|
disabledDate:(time)=> {
|
|
return time.getTime() >= Date.now()+0 * 24 * 3600 * 1000
|
|
|
|
},
|
|
},
|
|
}
|
|
},
|
|
created(){
|
|
// 获取表格信息
|
|
// this.getList()
|
|
// 获取隧道列表
|
|
this.getTunnel()
|
|
// 获取所有压力表一天上报次数
|
|
this.getFrequency()
|
|
// 获取所有状态数据
|
|
// this.handleQuery()
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
/** 所属隧道 */
|
|
getTunnel() {
|
|
listTunnels().then(response => {
|
|
this.tunnelData = response.rows;
|
|
this.queryParams.tunnelId = response.rows[0].tunnelId
|
|
this.handleQuery()
|
|
const params = {
|
|
eqType:111,
|
|
eqDirection:0,
|
|
eqTunnelId: this.queryParams.tunnelId
|
|
}
|
|
listDevices(params).then((response) => {
|
|
console.log(response.rows,"设备Id")
|
|
if(response.rows.length>0){
|
|
this.equipmentData = response.rows
|
|
this.queryParams.equipmentId = response.rows[0].eqId
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
},
|
|
// 获取压力表当天四个数据
|
|
getFrequency(){
|
|
// 所有压力表
|
|
frequencyAll().then(response => {
|
|
this.sumallreport = response.data[0].sumallreport
|
|
});
|
|
// 指定压力表
|
|
offLine().then(response =>{
|
|
this.offLine = response.data
|
|
})
|
|
earlyWarning().then(response =>{
|
|
this.earlyWarning = response.data.length
|
|
})
|
|
allMessage().then(response =>{
|
|
this.allMessage = response.data.length
|
|
})
|
|
},
|
|
// 选中隧道后 获取该隧道内的压力表id
|
|
getEquId(data){
|
|
this.equipmentData = []
|
|
this.queryParams.equipmentId = ''
|
|
const params = {
|
|
eqType:111,
|
|
eqDirection:0,
|
|
eqTunnelId: data
|
|
}
|
|
listDevices(params).then((response) => {
|
|
console.log(response.rows,"设备ID")
|
|
this.equipmentData = response.rows
|
|
});
|
|
},
|
|
// 选择时间 年月日
|
|
changeDate(){
|
|
if (this.pickerType == 'date') {
|
|
this.dateTimes = this.dateTime;
|
|
} else if (this.pickerType == 'month') {
|
|
this.dateTimes = this.monthTime;
|
|
} else if (this.pickerType == 'year') {
|
|
this.dateTimes = this.yearTime
|
|
}
|
|
this.handleQuery()
|
|
},
|
|
|
|
formatDirect(direction){
|
|
if(direction == "0"){
|
|
return "上行"
|
|
}else{
|
|
return "下行"
|
|
}
|
|
},
|
|
// 手动刷新
|
|
handleChange() {
|
|
this.$forceUpdate()
|
|
},
|
|
getDuration(type,start,stop){
|
|
var arr = [];
|
|
var current = new Date(start);
|
|
stop = new Date(stop);
|
|
while (current <= stop) {
|
|
var date = new Date (current)
|
|
|
|
arr.push( date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() );
|
|
if(type == 'hour'){//小时
|
|
current.setHours(current.getHours() + 1);
|
|
}else if(type == 'day'){//天
|
|
current.setDate(current.getDate() + 1);
|
|
}else if(type == 'week'){//周
|
|
current.setDate(current.getDate() + 7);
|
|
}else if(type == 'month'){//月
|
|
current.setMonth(current.getMonth() + 1);
|
|
}else{//默认天
|
|
current.setDate(current.getDate() + 1);
|
|
}
|
|
}
|
|
return arr;
|
|
},
|
|
/* 查询 */
|
|
handleQuery(){
|
|
this.queryParams.params = {};
|
|
// 预警
|
|
if(this.queryParams.statisticalType == '1'){
|
|
this.queryParams.params[this.pickerType] = this.dateTimes
|
|
}else{
|
|
// 压力
|
|
if (null != this.daterange && "" != this.daterange) {
|
|
if(this.daterange[0] == this.daterange[1]){
|
|
alert(this.daterange[0])
|
|
this.queryParams.params["beginChangeTime"] = this.daterange[0] + " 00:00:00";
|
|
this.queryParams.params["endChangeTime"] = this.daterange[1] + " 23:59:59";
|
|
}else{
|
|
this.queryParams.params["beginChangeTime"] = this.daterange[0] + " 00:00:00";
|
|
this.queryParams.params["endChangeTime"] = this.daterange[1] + " 23:59:59";
|
|
}
|
|
}else if(this.daterange.length == 0){
|
|
let n = 7;
|
|
let d = '';
|
|
d = new Date();
|
|
let year = d.getFullYear();
|
|
let mon = d.getMonth() + 1;
|
|
let day = d.getDate();
|
|
if(day <= n) {
|
|
if(mon > 1) {
|
|
mon = mon - 1;
|
|
} else {
|
|
year = year - 1;
|
|
mon = 12;
|
|
}
|
|
}
|
|
d.setDate(d.getDate() - n);
|
|
year = d.getFullYear();
|
|
mon = d.getMonth() + 1;
|
|
day = d.getDate();
|
|
|
|
let s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day) ;
|
|
this.queryParams.params["beginChangeTime"] = s
|
|
this.daterange.push(s)
|
|
var t = this.appendZero(new Date().getFullYear()) + "-" + this.appendZero((new Date().getMonth() + 1)) + "-" + this.appendZero(new Date().getDate())
|
|
this.queryParams.params["endChangeTime"] = t
|
|
this.daterange.push(t)
|
|
}
|
|
}
|
|
// var a = this.queryParams
|
|
getPressureGauges(this.queryParams).then(response =>{
|
|
console.log(response,"response")
|
|
var params = {
|
|
xData1:[],
|
|
yData1:[],
|
|
eq_direction1:'',
|
|
xData2:[],
|
|
yData2:[],
|
|
eq_direction2:'',
|
|
}
|
|
if(this.queryParams.statisticalType == '3'){
|
|
// 判断当前设备所属上行还是下行
|
|
this.pressureData = response.data
|
|
this.total = response.data.length || 0
|
|
params.eq_direction1 = '上行'
|
|
params.eq_direction2 = '下行'
|
|
if(response.data.length>0){
|
|
for(var item of response.data){
|
|
if(item.create_time.indexOf('T')){
|
|
var items = item.create_time.split("T");
|
|
params.xData1.push(" "+items[0].slice(5,10)+" "+items[1])
|
|
params.yData1.push(item.analog_quantity)
|
|
params.xData2.push(" "+items[0].slice(5,10)+" "+items[1])
|
|
params.yData2.push(0)
|
|
}
|
|
|
|
}
|
|
}
|
|
else if(response.data.length == 0){
|
|
// 改为时间范围内的数据
|
|
var arr = this.getDuration('day',this.queryParams.params["beginChangeTime"],this.queryParams.params["endChangeTime"])
|
|
for(var i = 0;i<arr.length;i++){
|
|
params.xData1.push(arr[i])
|
|
params.xData2.push(arr[i])
|
|
params.yData1.push(0)
|
|
params.yData2.push(0)
|
|
}
|
|
|
|
}
|
|
|
|
}else{
|
|
// 处理数据给echarts
|
|
params.eq_direction1 = '上行'
|
|
params.eq_direction2 = '下行'
|
|
if(this.pickerType == 'year'){
|
|
this.earlyWarningData = response.data[0].year
|
|
this.total = response.data[0].year.length || 0
|
|
if(response.data[0].year.length>0){
|
|
for(var y of response.data[0].year){
|
|
params.xData1.push(y.date)
|
|
params.yData1.push(y.num)
|
|
}
|
|
if(!response.data[1]){
|
|
for(var y of response.data[0].year){
|
|
params.xData2.push(y.date)
|
|
params.yData2 = [0,0,0,0,0,0,0,0,0,0,0,0]
|
|
}
|
|
}
|
|
}else if(response.data[0].year.length == 0){
|
|
params.xData1 = [1,2,3,4,5,6,7,8,9,10,11,12]
|
|
params.yData1 = [0,0,0,0,0,0,0,0,0,0,0,0]
|
|
params.xData2 = [1,2,3,4,5,6,7,8,9,10,11,12]
|
|
params.yData2 = [0,0,0,0,0,0,0,0,0,0,0,0]
|
|
}
|
|
|
|
}else if(this.pickerType == 'month'){
|
|
this.earlyWarningData = response.data[0].month
|
|
this.total = response.data[0].month.length || 0
|
|
for(var n=1;n<=31;n++){
|
|
params.xData1.push(n)
|
|
params.xData2.push(n)
|
|
}
|
|
params.yData1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
|
|
params.yData2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
|
|
// debugger
|
|
if(response.data[0] && response.data[0].month.length>0){
|
|
params.xData1 = []
|
|
params.yData1 = []
|
|
for(var m of response.data[0].month){
|
|
params.xData1.push(m.curr_date.substr(m.curr_date.length-2))
|
|
params.yData1.push(m.sum_flow_num)
|
|
}
|
|
}else if(response.data[1] && response.data[1].month.length>0){
|
|
for(var m of response.data[1].month){
|
|
params.xData2 = []
|
|
params.yData2 = []
|
|
params.xData2.push(m.curr_date.substr(m.curr_date.length-2))
|
|
params.yData2.push(m.sum_flow_num)
|
|
}
|
|
}
|
|
}else if(this.pickerType == 'date'){
|
|
this.earlyWarningData = response.data[0].date
|
|
this.total = response.data[0].date.length || 0
|
|
for(var n=0;n<=23;n++){
|
|
params.xData1.push(n)
|
|
params.xData2.push(n)
|
|
}
|
|
params.yData1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
|
|
params.yData2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
|
|
if(response.data[0] && response.data[0].date.length>0){
|
|
params.xData1 = []
|
|
params.yData1 = []
|
|
for(var m of response.data[0].date){
|
|
params.xData1.push(m.order_hour)
|
|
params.yData1.push(m.num)
|
|
}
|
|
}else if(response.data[1] && response.data[1].date.length>0){
|
|
params.xData2 = []
|
|
params.yData2 = []
|
|
for(var m of response.data[1].date){
|
|
params.xData2.push(m.order_hour)
|
|
params.yData2.push(m.num)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
console.log(params,"params")
|
|
this.getAlarmEchart(params)
|
|
})
|
|
},
|
|
// 补0
|
|
appendZero(obj) {
|
|
if (obj < 10) {
|
|
return "0" + obj;
|
|
} else {
|
|
return obj;
|
|
}
|
|
},
|
|
// 修改采集时间格式 去 T
|
|
changeTime(str){
|
|
if(str){
|
|
if(str.indexOf('T') != -1){
|
|
return str.replace('T'," ")
|
|
}
|
|
}
|
|
},
|
|
/* 重置 */
|
|
resetQuery(){
|
|
this.getTunnel()
|
|
this.queryParams.statisticalType = '3'
|
|
// this.queryParams.equipmentId =''
|
|
// this.queryParams.tunnelId = this.tunnelData[0].tunnelId
|
|
this.pickerType = "year"
|
|
this.daterange = []
|
|
// this.equipmentData = []
|
|
this.queryParams.params = {};
|
|
this.handleQuery()
|
|
},
|
|
/* 类型改变方法 */
|
|
typeChangeFun(){
|
|
this.queryParams.tunnelId = ''
|
|
this.getTunnel()
|
|
// this.handleQuery()
|
|
},
|
|
/* 预警图 */
|
|
getAlarmEchart(params){
|
|
this.alarmEchartL = echarts.init(document.getElementById('alarmChartL'));
|
|
this.alarmEchartR = echarts.init(document.getElementById('alarmChartR'));
|
|
this.alarmEchartL.clear()
|
|
this.alarmEchartR.clear()
|
|
var XName1= params.xData1
|
|
var XName2= params.xData2
|
|
var xAxisName = ''
|
|
if(this.queryParams.statisticalType == 1) {
|
|
xAxisName = this.pickerType == 'year' ? '月份' : this.pickerType == 'month' ? '日期' : '时刻'
|
|
} else {
|
|
xAxisName = '日期'
|
|
}
|
|
var statisticalType = this.queryParams.statisticalType
|
|
var data1 = []
|
|
var data2 = []
|
|
var Line = []
|
|
if(statisticalType == '1'){
|
|
data1 = params.yData1
|
|
data2 = params.yData2
|
|
Line = ["预警信息数"]
|
|
}else if(statisticalType == '2'){
|
|
data1 = [
|
|
[123,154, 234, 321,120,390, 634]
|
|
]
|
|
Line = ["设备离线"]
|
|
}else if(statisticalType == '3'){
|
|
data1 = params.yData1
|
|
data2 = params.yData2
|
|
// data1 = [1.2,1.5,1.4,1.6,1.2,1.7,1.3,1.5,1.3]
|
|
// data2 = [1.1,1.2,1.3,1.5,1.3,1.3,1.0,1.2,1.4]
|
|
Line = ["压力值"]
|
|
}
|
|
var img = [
|
|
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
|
|
'image://data:image/png;base64,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',
|
|
];
|
|
var color =['#ff0000','#55ff00'];
|
|
|
|
var option1 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
backgroundColor: '#0e2147',
|
|
grid: {
|
|
left: '5%',
|
|
top: '25%',
|
|
bottom: '35%',
|
|
right: '5%',
|
|
},
|
|
title: {
|
|
"text": params.eq_direction1,
|
|
x: "4%",
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '18'
|
|
}
|
|
},
|
|
legend: {
|
|
type: "scroll",
|
|
data:Line,
|
|
itemWidth:18,
|
|
itemHeight:12,
|
|
textStyle: {
|
|
color:"#00ffff",
|
|
fontSize:14
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
position: 'right',
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: statisticalType=='1'?'单位：件':'单位：Mp',
|
|
position: 'left',
|
|
nameTextStyle: {
|
|
color: '#00FFFF'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: 'rgba(135,140,147,0.8)'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
color: '#fff',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
],
|
|
xAxis: [
|
|
{
|
|
name: xAxisName,
|
|
type: 'category',
|
|
nameTextStyle: {
|
|
color: '#fff'
|
|
},
|
|
data: XName1,
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#fff',// x轴颜色
|
|
fontWeight: 'normal',
|
|
fontSize: '14',
|
|
lineHeight: 22
|
|
},
|
|
show: true,
|
|
|
|
}
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
show: true,
|
|
height: 20,
|
|
xAxisIndex: [0],
|
|
bottom: 30,
|
|
start: 10,
|
|
end: 80,
|
|
handleIcon:
|
|
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|
handleSize: "110%",
|
|
handleStyle: {
|
|
color: "#5B3AAE"
|
|
},
|
|
textStyle: {
|
|
color: "rgba(204,187,225,0.5)"
|
|
},
|
|
fillerColor: "rgba(67,55,160,0.4)",
|
|
borderColor: "rgba(204,187,225,0.5)"
|
|
},
|
|
{
|
|
type: "inside",
|
|
show: true,
|
|
height: 10,
|
|
start: 1,
|
|
end: 35
|
|
}
|
|
],
|
|
series: {
|
|
symbolSize: 150,
|
|
symbol: img[0],
|
|
name: statisticalType=='1'?'预警信息数':'压力值',
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
data: data1 ,
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
color: color[0],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
var option2 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
backgroundColor: '#0e2147',
|
|
grid: {
|
|
left: '5%',
|
|
top: '25%',
|
|
bottom: '35%',
|
|
right: '5%',
|
|
},
|
|
"title": {
|
|
"text": params.eq_direction2,
|
|
x: "4%",
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '18'
|
|
}
|
|
},
|
|
legend: {
|
|
type: "scroll",
|
|
data:Line,
|
|
itemWidth:18,
|
|
itemHeight:12,
|
|
textStyle: {
|
|
color:"#00ffff",
|
|
fontSize:14
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
position: 'right',
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: statisticalType=='1'?'单位：件':'单位：Mp',
|
|
position: 'left',
|
|
nameTextStyle: {
|
|
color: '#00FFFF'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: 'rgba(135,140,147,0.8)'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
color: '#fff',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
],
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
name: xAxisName,
|
|
nameTextStyle: {
|
|
color: '#fff'
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#fff',// x轴颜色
|
|
fontWeight: 'normal',
|
|
fontSize: '14',
|
|
lineHeight: 22
|
|
},
|
|
show: true,
|
|
},
|
|
data: XName2,
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
show: true,
|
|
height: 20,
|
|
xAxisIndex: [0],
|
|
bottom: 30,
|
|
start: 10,
|
|
end: 80,
|
|
handleIcon:
|
|
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|
handleSize: "110%",
|
|
handleStyle: {
|
|
color: "#5B3AAE"
|
|
},
|
|
textStyle: {
|
|
color: "rgba(204,187,225,0.5)"
|
|
},
|
|
fillerColor: "rgba(67,55,160,0.4)",
|
|
borderColor: "rgba(204,187,225,0.5)"
|
|
},
|
|
{
|
|
type: "inside",
|
|
show: true,
|
|
height: 10,
|
|
start: 1,
|
|
end: 35
|
|
}
|
|
],
|
|
series: {
|
|
symbolSize: 150,
|
|
symbol: img[0],
|
|
name: statisticalType=='1'?'预警信息数':'压力值',
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
data: data2,
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
color: color[0],
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
this.alarmEchartL.setOption(option1)
|
|
this.alarmEchartR.setOption(option2)
|
|
},
|
|
|
|
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.card-4col {
|
|
width: calc(100%/4 - 10px);
|
|
float: left;
|
|
margin: 0px 5px 10px 5px;
|
|
border: 0px;
|
|
color: #000000;
|
|
}
|
|
.big-number {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
padding: 10px 0px 10px 5px;
|
|
}
|
|
::v-deep .el-range-editor--small .el-range__close-icon{
|
|
display: none !important;
|
|
}
|
|
::v-deep .el-input__suffix{
|
|
display: none !important;
|
|
}
|
|
</style>
|