594 lines
16 KiB
Vue
594 lines
16 KiB
Vue
<template>
|
|
<!-- 实时数据 -->
|
|
<vue-scroll style="height: 100%">
|
|
<div class="operationInfo">
|
|
<div class="title whiteBlock">
|
|
<el-form
|
|
:inline="true"
|
|
size="medium"
|
|
:model="formInline"
|
|
class="demo-form-inline"
|
|
>
|
|
<el-form-item :label="$t('message.lifter.devName')">
|
|
<el-select
|
|
v-model="formInline.ammeterNo"
|
|
:placeholder="$t('message.lifter.pleaseSelect')"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in deviceIdArr"
|
|
:key="index"
|
|
:label="item.ammeterName"
|
|
:value="item.ammeterNo"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit" plain>{{
|
|
$t('message.lifter.demand')
|
|
}}</el-button>
|
|
<!-- <el-button type="warning" plain @click="onSubmit">{{
|
|
$t("message.lifter.refresh")
|
|
}}</el-button> -->
|
|
</el-form-item>
|
|
<!-- 年份筛选 -->
|
|
<el-form-item
|
|
style="float: right"
|
|
:label="$t('message.energyManage.yearFilter')"
|
|
>
|
|
<!-- 请选择 -->
|
|
<el-date-picker
|
|
:clearable="false"
|
|
v-model="formInline.yearTime"
|
|
type="year"
|
|
:placeholder="$t('message.energyManage.material.pleaseChoose')"
|
|
value-format="yyyy"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="content">
|
|
<div class="direction_data_wrap flex">
|
|
<div class="data_wrap whiteBlock">
|
|
<div class="state_title pageTitle">
|
|
{{ $t('message.lifter.realTimeData') }}
|
|
</div>
|
|
<div class="flex">
|
|
<div class="data_type">
|
|
<div class="type bg1 flex2">
|
|
<div class="left">
|
|
<img src="@/assets/images/waterAndElectricity/water.png" />
|
|
<div>
|
|
{{ $t('message.energyManage.valveControl') }}
|
|
<!-- 阀控状态 -->
|
|
</div>
|
|
</div>
|
|
<div class="value">
|
|
{{ gateStatus == 1 ? '开' : gateStatus == 2 ? '关' : '无' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data_type">
|
|
<div class="type bg1 flex2">
|
|
<div class="left">
|
|
<img
|
|
src="@/assets/images/waterAndElectricity/electricity.png"
|
|
/>
|
|
<div>
|
|
{{ $t('message.energyManage.nowUseElectricity') }}
|
|
<!-- 当前用电量 -->
|
|
</div>
|
|
</div>
|
|
<div class="value">{{ realTimeData.currentDegree }}kwh</div>
|
|
</div>
|
|
</div>
|
|
<div class="data_type">
|
|
<div class="type bg2 flex2">
|
|
<div class="left">
|
|
<img src="@/assets/images/waterAndElectricity/gross.png" />
|
|
<div>
|
|
{{ $t('message.energyManage.overUseElectricity') }}
|
|
<!-- 超标总数 -->
|
|
</div>
|
|
</div>
|
|
<div class="value">{{ realTimeData.exceedQuotaNum }}kwh</div>
|
|
</div>
|
|
</div>
|
|
<div class="data_type">
|
|
<div class="type bg4 flex2">
|
|
<div class="left">
|
|
<img src="@/assets/images/waterAndElectricity/power.png" />
|
|
<div>
|
|
{{ $t('message.energyManage.monthUseElectricity2') }}
|
|
<!-- 本月用电量 -->
|
|
</div>
|
|
</div>
|
|
<div class="value">{{ realTimeData.monthUserWater }}kwh</div>
|
|
</div>
|
|
</div>
|
|
<div class="data_type">
|
|
<div class="type bg4 flex2">
|
|
<div class="left">
|
|
<img src="@/assets/images/waterAndElectricity/power.png" />
|
|
<div>
|
|
<!-- 阈值 -->
|
|
{{ $t('message.energyManage.valveValue') }}
|
|
</div>
|
|
</div>
|
|
<div class="value">{{ realTimeData.thresholdValue }}kwh</div>
|
|
</div>
|
|
</div>
|
|
<div class="data_type">
|
|
<div class="type bg3 flex2">
|
|
<div class="left">
|
|
<img src="@/assets/images/waterAndElectricity/alarm.png" />
|
|
<div>
|
|
<!-- 预警次数 -->
|
|
{{ $t('message.energyManage.alarmTimes') }}
|
|
</div>
|
|
</div>
|
|
<div class="value">{{ realTimeData.alarmNum }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom_info flex">
|
|
<div class="T_H_wrap">
|
|
<div class="load whiteBlock">
|
|
<div class="state_title pageTitle">
|
|
<!-- 近一个月用电统计 -->
|
|
用电统计
|
|
</div>
|
|
<div style="height: 85%; width: 100%" ref="liftingWeight"></div>
|
|
</div>
|
|
<div class="altitude whiteBlock">
|
|
<div class="state_title pageTitle">
|
|
<!-- 近一个月报警趋势 -->
|
|
报警趋势
|
|
</div>
|
|
<div style="height: 85%; width: 100%" ref="gradient"></div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="T_H_wrap">
|
|
<div class="load">
|
|
<div class="state_title pageTitle">
|
|
{{
|
|
$t("message.lifter.realTime") + $t("message.lifter.altitude")
|
|
}}
|
|
</div>
|
|
<div style="height: 85%; width: 100%" ref="height"></div>
|
|
</div>
|
|
<div class="altitude">
|
|
<div class="state_title pageTitle">
|
|
{{ $t("message.lifter.realTime") + $t("message.lifter.alarm") }}
|
|
</div>
|
|
<div style="height: 85%; width: 100%" ref="alarm"></div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts4'
|
|
import {
|
|
getwaterMeterListApi,
|
|
selectWaterMeterStatisticsApi,
|
|
getCurrentMonthMeterRecordApi,
|
|
selectAmmeterStatisticsListByYearApi
|
|
} from '@/assets/js/api/electricDevManage'
|
|
export default {
|
|
data() {
|
|
return {
|
|
deviceIdArr: [],
|
|
formInline: {
|
|
ammeterNo: '',
|
|
yearTime: '',
|
|
waterMeterNo: '',
|
|
projectSn: this.$store.state.projectSn
|
|
},
|
|
realTimeData: {
|
|
alarmNum: 0,
|
|
currentWaterTonnage: 0,
|
|
exceedQuotaNum: 0,
|
|
monthUserWater: 0,
|
|
thresholdValue: 0
|
|
},
|
|
gateStatus: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
var a = new Date()
|
|
this.formInline.yearTime = a.getFullYear() + ''
|
|
this.getDevice()
|
|
this.createdEcharts()
|
|
},
|
|
methods: {
|
|
getDevice() {
|
|
getwaterMeterListApi({ projectSn: this.$store.state.projectSn }).then(
|
|
(result) => {
|
|
if (result.success) {
|
|
this.deviceIdArr = result.result
|
|
if (this.deviceIdArr.length > 0) {
|
|
this.formInline.ammeterNo = this.deviceIdArr[0].ammeterNo
|
|
console.log('电表号：：：', this.formInline.ammeterNo);
|
|
this.selectWaterMeterStatistics()
|
|
this.getCurrentMonthMeterRecord()
|
|
}
|
|
console.log('get设备列表', this.deviceIdArr)
|
|
}
|
|
}
|
|
)
|
|
},
|
|
getCurrentMonthMeterRecord() {
|
|
getCurrentMonthMeterRecordApi(this.formInline).then((res) => {
|
|
this.gateStatus = res.result.ammeter.gateStatus
|
|
this.realTimeData = res.result.count
|
|
})
|
|
},
|
|
selectWaterMeterStatistics() {
|
|
selectAmmeterStatisticsListByYearApi(this.formInline).then((res) => {
|
|
var alarmList = res.result.alarmList
|
|
var monthWaterList = res.result.monthWaterList
|
|
var xData = [],
|
|
yData = []
|
|
alarmList.forEach((element) => {
|
|
xData.push(element.titleTime)
|
|
yData.push(element.num)
|
|
})
|
|
var xData1 = [],
|
|
yData1 = []
|
|
monthWaterList.forEach((element) => {
|
|
xData1.push(element.monthTime)
|
|
yData1.push(element.useDegree)
|
|
})
|
|
this.createdEcharts(xData, yData, xData1, yData1)
|
|
})
|
|
},
|
|
|
|
onSubmit() {
|
|
console.log('submit!')
|
|
this.getCurrentMonthMeterRecord()
|
|
this.createdEcharts()
|
|
},
|
|
//创建图表
|
|
createdEcharts(xData, yData, xData1, yData1) {
|
|
var chart1 = echarts.init(this.$refs.liftingWeight)
|
|
var chart2 = echarts.init(this.$refs.gradient)
|
|
// var chart3 = echarts.init(this.$refs.height);
|
|
// var chart4 = echarts.init(this.$refs.alarm);
|
|
chart1.clear()
|
|
chart2.clear()
|
|
// chart3.clear();
|
|
// chart4.clear();
|
|
chart1.setOption(this.getOption1(xData1, yData1))
|
|
chart2.setOption(this.getOption2(xData, yData))
|
|
// chart3.setOption(this.getOption(2));
|
|
// chart4.setOption(this.getOption(3));
|
|
},
|
|
|
|
getOption1(xData, yData) {
|
|
var colors = ['#3A7BFF', '#55CBBB', '#B59CF2', '#F3D025']
|
|
var opt = {
|
|
color: colors[0],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
top: 30,
|
|
bottom: 30,
|
|
left: '3%',
|
|
right: 30
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
data: xData,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#9fa2ad'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
// name: "用电量(WH)",
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#9fa2ad'
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: 'rgba(231, 233, 243, 0.5)'
|
|
}
|
|
}
|
|
},
|
|
// dataZoom: [
|
|
// {
|
|
// show: true,
|
|
// // realtime: true,
|
|
// start: 0,
|
|
// end: 100,
|
|
// height: 8,
|
|
// borderColor: "transparent",
|
|
// backgroundColor: "#e8e8e8",
|
|
// filterColor: "#999999",
|
|
// bottom: 0,
|
|
// },
|
|
// ],
|
|
series: [
|
|
{
|
|
// name: ["用电量"],
|
|
type: 'line',
|
|
symbol: 'none',
|
|
smooth: true,
|
|
data: yData,
|
|
itemStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: colors[0]
|
|
},
|
|
areaStyle: {
|
|
color: colors[0],
|
|
opacity: 0.1
|
|
}
|
|
}
|
|
},
|
|
markLine: {
|
|
data: [{ type: 'max', name: '最大值' }],
|
|
lineStyle: {
|
|
color: '#FC806B'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
return opt
|
|
},
|
|
getOption2(xData, yData) {
|
|
var colors = ['#F46650', '#F3D12C']
|
|
var opt = {
|
|
color: colors,
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
top: 30,
|
|
bottom: 30,
|
|
left: '3%',
|
|
right: 30
|
|
},
|
|
legend: {
|
|
data: ['预警', '报警']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
data: xData,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#9fa2ad'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#9fa2ad'
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: 'rgba(231, 233, 243, 0.5)'
|
|
}
|
|
}
|
|
},
|
|
// dataZoom: [
|
|
// {
|
|
// show: true,
|
|
// // realtime: true,
|
|
// start: 0,
|
|
// end: 100,
|
|
// height: 8,
|
|
// borderColor: "transparent",
|
|
// backgroundColor: "#e8e8e8",
|
|
// filterColor: "#999999",
|
|
// bottom: 0,
|
|
// },
|
|
// ],
|
|
series: [
|
|
{
|
|
name: '报警',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
smooth: true,
|
|
data: yData,
|
|
itemStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: '#F46650'
|
|
// type: 'dashed'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// {
|
|
// name: "预警",
|
|
// type: "line",
|
|
// symbol: "none",
|
|
// smooth: true,
|
|
// data:[120, 132, 101, 134, 90, 230, 210, 11] ,
|
|
// itemStyle: {
|
|
// normal: {
|
|
// lineStyle: {
|
|
// color: '#F3D025',
|
|
// },
|
|
// areaStyle: {
|
|
// color: '#F3D025',
|
|
// opacity: 0.1,
|
|
// },
|
|
// },
|
|
// },
|
|
// },
|
|
// {
|
|
// type: "line",
|
|
// symbol: "none",
|
|
// smooth: true,
|
|
// data: [1, 2, 3, 4, 2, 6, 2, 8],
|
|
// // markLine: getMarkLine(index),
|
|
// itemStyle: {
|
|
// normal: {
|
|
// lineStyle: {
|
|
// color: colors[1],
|
|
// },
|
|
// areaStyle: {
|
|
// color: colors[1],
|
|
// opacity: 0.1,
|
|
// },
|
|
// },
|
|
// },
|
|
|
|
// },
|
|
]
|
|
}
|
|
return opt
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.flex2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.operationInfo {
|
|
width: 100%;
|
|
height: 100%;
|
|
.title {
|
|
// background-color: #ffffff;
|
|
padding: 0 20px;
|
|
padding-top: 17px;
|
|
height: 70px;
|
|
box-sizing: border-box;
|
|
}
|
|
.content {
|
|
margin-top: 12px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 720px;
|
|
.pageTitle {
|
|
line-height: 20px;
|
|
}
|
|
.direction_data_wrap {
|
|
box-sizing: border-box;
|
|
height: 155px;
|
|
width: 100%;
|
|
|
|
.data_wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
// background: #fff;
|
|
padding: 12px 20px;
|
|
box-sizing: border-box;
|
|
.data_type {
|
|
width: 16%;
|
|
margin-right: 12px;
|
|
.type {
|
|
width: 100%;
|
|
height: 80px;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 10px 15px;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
.left {
|
|
width: 45%;
|
|
}
|
|
}
|
|
.value {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.marg_t {
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
}
|
|
.bottom_info {
|
|
width: 100%;
|
|
height: calc(100% - 150px);
|
|
margin-top: 12px;
|
|
box-sizing: border-box;
|
|
.T_H_wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
.load {
|
|
width: 100%;
|
|
height: calc(50% - 6px);
|
|
// background: #fff;
|
|
padding: 12px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.altitude {
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
height: calc(50% - 6px);
|
|
// background: #fff;
|
|
padding: 12px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bg1 {
|
|
background-color: #7ba6ff;
|
|
}
|
|
.bg2 {
|
|
background-color: #f6b87d;
|
|
}
|
|
.bg3 {
|
|
background-color: #cb5555;
|
|
}
|
|
.bg4 {
|
|
background-color: #60d385;
|
|
}
|
|
}
|
|
</style>
|