370 lines
9.0 KiB
Vue
370 lines
9.0 KiB
Vue
<template>
|
||
<Card title="用电用水">
|
||
<div class="contentBox">
|
||
<!-- 上结构 -->
|
||
<div class="topWater">
|
||
<div @click="select(1)" :class="index ==1?'electricDiv':'waterDiv'">用水</div>
|
||
<div @click="select(2)" :class="index ==2?'electricDiv':'waterDiv'">用电</div>
|
||
<div class="DateTime">
|
||
<el-date-picker
|
||
v-model="time1"
|
||
type="daterange"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="yyyy-MM-dd"
|
||
size="mini"
|
||
></el-date-picker>
|
||
</div>
|
||
</div>
|
||
<!-- 暂无数据结构 -->
|
||
<div id="waterMain" v-if="show"></div>
|
||
<div style="margin-top: 50px;" v-else>
|
||
<img style="margin: auto 190px;" src="@/assets/images/noData.png" alt="" />
|
||
<p style="text-align: center;">暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import Card from '../components/Card.vue'
|
||
import echarts from 'echarts4'
|
||
import { getwaterMeterListApi, selectWaterMeterStatisticsApi, getCurrentMonthMeterRecordApi } from '@/assets/js/api/waterManage'
|
||
export default {
|
||
components: { Card },
|
||
data() {
|
||
return {
|
||
index: 1,
|
||
time1:'',
|
||
show: true,
|
||
monthWaterList: '',
|
||
count: '',
|
||
waterMeter: '',
|
||
formInline: {
|
||
yearTime: '',
|
||
waterMeterNo: '',
|
||
projectSn: this.$store.state.projectSn
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.wEacharts()
|
||
},
|
||
methods: {
|
||
//用水/用电按钮切换
|
||
select(i) {
|
||
this.index = i;
|
||
},
|
||
|
||
//echart图表
|
||
async wEacharts() {
|
||
const res = await getCurrentMonthMeterRecordApi(this.formInline)
|
||
this.waterMeter = res.result.waterMeter
|
||
if (this.waterMeter === null) {
|
||
this.show = false
|
||
}
|
||
this.count = res.result.count
|
||
const res2 = await selectWaterMeterStatisticsApi(this.formInline)
|
||
this.monthWaterList = res2.result.monthWaterList
|
||
const res3 = await getwaterMeterListApi({ projectSn: this.$store.state.projectSn })
|
||
console.log('res3', res3)
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let waterEch = echarts.init(document.getElementById('waterMain'))
|
||
let xData = (function() {
|
||
let data = []
|
||
for (let i = 1; i < 13; i++) {
|
||
data.push(i + '月')
|
||
}
|
||
return data
|
||
})()
|
||
|
||
let option = {
|
||
title: {
|
||
x: '4%',
|
||
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '8'
|
||
},
|
||
subtextStyle: {
|
||
color: '#90979c',
|
||
fontSize: '8'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
// 图表距离边框的距离，可用百分比和数字（px）配置
|
||
top: '5%',
|
||
left: '4%',
|
||
right: '4%',
|
||
bottom: '25%',
|
||
containLabel: true
|
||
},
|
||
|
||
legend: {
|
||
x: '4%',
|
||
top: '5%',
|
||
bottom: '0%',
|
||
textStyle: {
|
||
color: '#90979c'
|
||
}
|
||
},
|
||
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
interval: 0
|
||
},
|
||
data: xData
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255,0.3)',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
// "dataZoom": [{
|
||
// "show": true,
|
||
// "height": 30,
|
||
// "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:"#d3dee5",
|
||
|
||
// },
|
||
// textStyle:{
|
||
// color:"#fff"},
|
||
// borderColor:"#90979c"
|
||
|
||
// }, {
|
||
// "type": "inside",
|
||
// "show": true,
|
||
// "height": 15,
|
||
// "start": 1,
|
||
// "end": 35
|
||
// }],
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barMaxWidth: 25,
|
||
barGap: '10%',
|
||
symbol: 'circle',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#6EE4F0',
|
||
lineStyle: {
|
||
color: '#fff'
|
||
},
|
||
label: {
|
||
show: false,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
position: 'inside',
|
||
formatter: function(p) {
|
||
return p.value > 0 ? p.value : ''
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: this.waterMeter
|
||
},
|
||
|
||
{
|
||
type: 'bar',
|
||
stack: '总量',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#E7622A',
|
||
barBorderRadius: 0,
|
||
label: {
|
||
show: false,
|
||
position: 'inside',
|
||
formatter: function(p) {
|
||
return p.value > 0 ? p.value : ''
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: this.count
|
||
},
|
||
{
|
||
type: 'line',
|
||
symbolSize: 8,
|
||
symbol: 'circle',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#fff',
|
||
barBorderRadius: 2,
|
||
lineStyle: {
|
||
color: '#FFC303'
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'bottom',
|
||
formatter: function(p) {
|
||
return p.value > 0 ? p.value : ''
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
|
||
}
|
||
]
|
||
}
|
||
waterEch.setOption(option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.contentBox {
|
||
box-sizing: border-box;
|
||
padding-top: 20px;
|
||
width: 100%;
|
||
height: 100%;
|
||
.topWater {
|
||
width: 100%;
|
||
height: 20%;
|
||
display: flex;
|
||
.waterDiv {
|
||
cursor:pointer;
|
||
display: inline-block;
|
||
// margin-top: 5px;
|
||
// padding-top: 15px;
|
||
width: 80px;
|
||
height: 35px;
|
||
text-align: center;
|
||
background-image: url(../assets/images/common/bg_water.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
font-size: 16px;
|
||
line-height: 38px;
|
||
margin: 0 10px 0 0;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.electricDiv {
|
||
cursor:pointer;
|
||
display: inline-block;
|
||
// margin-top: 5px;
|
||
// padding-top: 15px;
|
||
width: 80px;
|
||
height: 35px;
|
||
text-align: center;
|
||
background-image: url(../assets/images/common/num_bg.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
font-size: 16px;
|
||
line-height: 38px;
|
||
margin: 0 10px 0 0;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
.DateTime {
|
||
cursor:pointer;
|
||
flex: 1;
|
||
// margin-left: 80px;
|
||
margin-top: 4px;
|
||
::v-deep .el-date-editor--daterange.el-input__inner {
|
||
width: 230px;
|
||
height: 30px;
|
||
background-color: #182337;
|
||
border: 1px solid #264b5e;
|
||
margin-left: 50px;
|
||
}
|
||
::v-deep .el-range-input {
|
||
cursor:pointer;
|
||
margin-left: 13px;
|
||
background-color: #182337;
|
||
color: #6ee4f0;
|
||
}
|
||
::v-deep .el-date-editor {
|
||
cursor:pointer;
|
||
.el-range__icon {
|
||
|
||
line-height: 20px;
|
||
color: #6ee4f0;
|
||
}
|
||
.el-range-separator {
|
||
cursor:pointer;
|
||
line-height: 20px;
|
||
color: #757d88;
|
||
}
|
||
.el-range__close-icon {
|
||
cursor:pointer;
|
||
color: #757d88;
|
||
line-height: 20px;
|
||
}
|
||
.el-range-separator{
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
#waterMain {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style>
|