中建四局 -双碳管理页面图片更换
This commit is contained in:
yjl
parent
503afa6089
commit
088fa08877
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<Card title="建材碳排放">
|
||||
<div class="containerBox">
|
||||
<img src="./image/img5.png" alt="">
|
||||
|
||||
<img src="./image/centerBottomImage.png" alt="" />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -14,7 +13,7 @@ export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
time1:'',
|
||||
time1: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -30,17 +29,17 @@ export default {
|
||||
// text: '日报表'
|
||||
// subtext: '单位：条'
|
||||
},
|
||||
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
top:'20%',
|
||||
top: '20%',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'line'
|
||||
// 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
grid: {
|
||||
// 图表距离边框的距离，可用百分比和数字（px）配置
|
||||
top: '15%',
|
||||
left: '2%',
|
||||
@ -50,15 +49,28 @@ export default {
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
boundaryGap: false,
|
||||
boundaryGap: false,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
data: [
|
||||
'1月',
|
||||
'2月',
|
||||
'3月',
|
||||
'4月',
|
||||
'5月',
|
||||
'6月',
|
||||
'7月',
|
||||
'8月',
|
||||
'9月',
|
||||
'10月',
|
||||
'11月',
|
||||
'12月'
|
||||
],
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#D0FFF6', type: 'dashed' } }, //x轴
|
||||
axisTick: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
@ -76,21 +88,21 @@ export default {
|
||||
color: '#fff'
|
||||
},
|
||||
// axisLine: { show: true, lineStyle: { color: '#D0FFF6' } },
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: 'rgba(255, 255, 255,0.3)', type: 'dashed'
|
||||
},
|
||||
}, // 除x轴的横轴
|
||||
axisTick:{
|
||||
show:false
|
||||
},
|
||||
axisLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type:'dashed'
|
||||
}
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255,0.3)',
|
||||
type: 'dashed'
|
||||
}
|
||||
|
||||
}, // 除x轴的横轴
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
@ -121,32 +133,32 @@ export default {
|
||||
.containerBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
img {
|
||||
width: 98%;
|
||||
height: 92%;
|
||||
margin: 13px 0 0 14px;
|
||||
}
|
||||
.DataTime {
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
margin-left: 72%;
|
||||
width: 210;
|
||||
height: 17px;
|
||||
}
|
||||
::v-deep .el-date-editor--daterange.el-input__inner {
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
width: 235px;
|
||||
height: 30px;
|
||||
background-color: #182337;
|
||||
border: 1px solid #264b5e;
|
||||
}
|
||||
::v-deep .el-range-input {
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
background-color: #182337;
|
||||
color: #6ee4f0;
|
||||
}
|
||||
::v-deep .el-date-editor {
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
.el-range__icon {
|
||||
line-height: 23px;
|
||||
color: #6ee4f0;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card title="项目碳排放趋势">
|
||||
<div class="containerBox">
|
||||
<img src="./image/imgFour.png" alt>
|
||||
<img src="./image/centerTopImage.png" alt />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
getDevList() {
|
||||
console.log('环境下拉列表进来了吗--------')
|
||||
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
|
||||
result => {
|
||||
(result) => {
|
||||
console.log('环境监测下拉列表', result)
|
||||
this.devList = result.result
|
||||
if (result.result.length > 0) {
|
||||
@ -100,7 +100,7 @@ export default {
|
||||
projectSn: this.projectSn,
|
||||
deviceId: this.currentDevDetail.deviceId
|
||||
}
|
||||
selectDustNoiseDataApi(data).then(res => {
|
||||
selectDustNoiseDataApi(data).then((res) => {
|
||||
// console.log(res)
|
||||
this.dustData_24 = res.result
|
||||
this.createdEcharts2()
|
||||
@ -111,7 +111,7 @@ export default {
|
||||
let data = {
|
||||
projectSn: this.projectSn
|
||||
}
|
||||
selectNewEnvironmentAlarmListApi(data).then(res => {
|
||||
selectNewEnvironmentAlarmListApi(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.alarmList = res.result
|
||||
}
|
||||
@ -122,14 +122,16 @@ export default {
|
||||
projectSn: this.$store.state.projectSn,
|
||||
operateType: operateType,
|
||||
deviceId: deviceId
|
||||
}).then(res => {
|
||||
}).then((res) => {
|
||||
this.sprayDevList = res.result
|
||||
})
|
||||
},
|
||||
getSprayDevList() {
|
||||
sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||||
this.sprayDevList = res.result
|
||||
})
|
||||
sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(
|
||||
(res) => {
|
||||
this.sprayDevList = res.result
|
||||
}
|
||||
)
|
||||
},
|
||||
/** 查询 */
|
||||
handleQuery() {
|
||||
@ -172,7 +174,7 @@ export default {
|
||||
projectSn: this.projectSn,
|
||||
deviceId: this.currentDevDetail.deviceId
|
||||
}
|
||||
selectDustNoiseDataApi(data).then(res => {
|
||||
selectDustNoiseDataApi(data).then((res) => {
|
||||
// console.log(res)
|
||||
this.dustData_24 = res.result
|
||||
this.createdEcharts2()
|
||||
@ -185,7 +187,7 @@ export default {
|
||||
projectSn: this.$store.state.projectSn
|
||||
}
|
||||
console.log(data)
|
||||
getRealTimeDustNoiseDataApi(data).then(res => {
|
||||
getRealTimeDustNoiseDataApi(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log('获取环境设备详情数据------', res.result)
|
||||
if (res.result != null) {
|
||||
@ -212,7 +214,7 @@ export default {
|
||||
})
|
||||
},
|
||||
//展示数据/视频播放切换
|
||||
change: function(index) {
|
||||
change: function (index) {
|
||||
console.log(111)
|
||||
this.number = index
|
||||
},
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
src/views/projectAdmin/fourEngin/carbon/image/centerTopImage.png
Normal file
BIN
src/views/projectAdmin/fourEngin/carbon/image/centerTopImage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
src/views/projectAdmin/fourEngin/carbon/image/leftBottomImg.png
Normal file
BIN
src/views/projectAdmin/fourEngin/carbon/image/leftBottomImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
src/views/projectAdmin/fourEngin/carbon/image/leftTopImage.png
Normal file
BIN
src/views/projectAdmin/fourEngin/carbon/image/leftTopImage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<Card title="用水用电碳排放图">
|
||||
<div class="containerBox">
|
||||
<img src="./image/img2.png" alt="">
|
||||
<img src="./image/leftCenterImage.png" alt="" />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { environmentDevList, environmentAlarmList, environmentAlarmTypeList } from '@/assets/js/api/environmentManage'
|
||||
import {
|
||||
environmentDevList,
|
||||
environmentAlarmList,
|
||||
environmentAlarmTypeList
|
||||
} from '@/assets/js/api/environmentManage'
|
||||
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
@ -243,19 +247,27 @@ export default {
|
||||
this.getList()
|
||||
},
|
||||
getDevice() {
|
||||
environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
|
||||
if (result.success) {
|
||||
this.deviceIdArr = result.result
|
||||
console.log('get设备列表', this.deviceIdArr)
|
||||
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
|
||||
(result) => {
|
||||
if (result.success) {
|
||||
this.deviceIdArr = result.result
|
||||
console.log('get设备列表', this.deviceIdArr)
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
},
|
||||
getList() {
|
||||
let timeObj = {
|
||||
startTime: this.time ? this.time[0] : '',
|
||||
endTime: this.time ? this.time[1] : ''
|
||||
}
|
||||
environmentAlarmList(Object.assign(this.pagInfo, { projectSn: this.$store.state.projectSn }, timeObj)).then(result => {
|
||||
environmentAlarmList(
|
||||
Object.assign(
|
||||
this.pagInfo,
|
||||
{ projectSn: this.$store.state.projectSn },
|
||||
timeObj
|
||||
)
|
||||
).then((result) => {
|
||||
if (result.success) {
|
||||
this.List = result.result.records
|
||||
this.pagInfo.total = result.result.total
|
||||
@ -264,7 +276,7 @@ export default {
|
||||
})
|
||||
},
|
||||
getEnvironmentAlarmTypeList() {
|
||||
environmentAlarmTypeList().then(result => {
|
||||
environmentAlarmTypeList().then((result) => {
|
||||
if (result.success) this.alarmTypeIdArr = result.result
|
||||
})
|
||||
},
|
||||
@ -295,12 +307,11 @@ export default {
|
||||
.containerBox {
|
||||
width: 103%;
|
||||
height: 320px;
|
||||
img{
|
||||
img {
|
||||
width: 72%;
|
||||
height: 81%;
|
||||
margin-top: 40px;
|
||||
margin-left: 73px;
|
||||
|
||||
}
|
||||
.titleTxt {
|
||||
font-size: 18px;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<Card title="总碳排放">
|
||||
<!-- 环境监测 -->
|
||||
<div class="contentBox">
|
||||
<img src="./image/img1.png" alt="">
|
||||
<img src="./image/leftTopImage.png" alt="" />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -18,7 +18,7 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.contentBox {
|
||||
img{
|
||||
img {
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
margin: 30px 0 0 40px;
|
||||
@ -38,17 +38,16 @@ export default {
|
||||
margin-top: 25px;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
margin-left: 15px;
|
||||
margin-top: -20px;
|
||||
margin-left: 15px;
|
||||
margin-top: -20px;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
text-align: center;
|
||||
.ps {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card title="分区域碳排放图">
|
||||
<div class="contentBox">
|
||||
<img src="./image/img3.png" alt="">
|
||||
<img src="./image/leftBottomImg.png" alt="" />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -9,13 +9,17 @@
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import echarts from 'echarts4'
|
||||
import { getwaterMeterListApi, selectWaterMeterStatisticsApi, getCurrentMonthMeterRecordApi } from '@/assets/js/api/waterManage'
|
||||
import {
|
||||
getwaterMeterListApi,
|
||||
selectWaterMeterStatisticsApi,
|
||||
getCurrentMonthMeterRecordApi
|
||||
} from '@/assets/js/api/waterManage'
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
index: 1,
|
||||
time1:'',
|
||||
time1: '',
|
||||
show: true,
|
||||
monthWaterList: '',
|
||||
count: '',
|
||||
@ -33,11 +37,11 @@ export default {
|
||||
methods: {
|
||||
//用水/用电按钮切换
|
||||
select(i) {
|
||||
this.index = i;
|
||||
this.index = i
|
||||
},
|
||||
|
||||
|
||||
//echart图表
|
||||
async wEacharts() {
|
||||
async wEacharts() {
|
||||
const res = await getCurrentMonthMeterRecordApi(this.formInline)
|
||||
this.waterMeter = res.result.waterMeter
|
||||
if (this.waterMeter === null) {
|
||||
@ -46,12 +50,14 @@ export default {
|
||||
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 })
|
||||
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 xData = (function () {
|
||||
let data = []
|
||||
for (let i = 1; i < 13; i++) {
|
||||
data.push(i + '月')
|
||||
@ -196,7 +202,7 @@ export default {
|
||||
color: '#fff'
|
||||
},
|
||||
position: 'inside',
|
||||
formatter: function(p) {
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
@ -215,7 +221,7 @@ export default {
|
||||
label: {
|
||||
show: false,
|
||||
position: 'inside',
|
||||
formatter: function(p) {
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
@ -238,13 +244,16 @@ export default {
|
||||
label: {
|
||||
show: false,
|
||||
position: 'bottom',
|
||||
formatter: function(p) {
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
|
||||
data: [
|
||||
1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865,
|
||||
4298
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -260,95 +269,93 @@ export default {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
img {
|
||||
width: 92%;
|
||||
height: 153%;
|
||||
margin-left: 13px;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
::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;
|
||||
}
|
||||
::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;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
|
||||
}
|
||||
#waterMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<Card title="施工碳排放">
|
||||
<div class="contentBox">
|
||||
<img src="./image/img7.png" alt="">
|
||||
|
||||
<img src="./image/rightCenterImage.png" alt="" />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -12,7 +11,10 @@
|
||||
// getwaterMeterListApi,selectWaterMeterStatisticsApi,
|
||||
// getCurrentMonthMeterRecordApi,} from "@/assets/js/api/waterManage";
|
||||
|
||||
import {getCurrentMonthMeterRecordApi,selectWaterMeterStatisticsApi} from'@/assets/js/api/electricDevManage'
|
||||
import {
|
||||
getCurrentMonthMeterRecordApi,
|
||||
selectWaterMeterStatisticsApi
|
||||
} from '@/assets/js/api/electricDevManage'
|
||||
import Card from '../components/Card.vue'
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
@ -28,52 +30,51 @@ export default {
|
||||
// },
|
||||
// }
|
||||
return {
|
||||
deviceIdArr:[],
|
||||
show:true,
|
||||
deviceIdArr: [],
|
||||
show: true,
|
||||
formInline: {
|
||||
yearTime: "",
|
||||
ammeterNo: "",
|
||||
yearTime: '',
|
||||
ammeterNo: '',
|
||||
projectSn: this.$store.state.projectSn
|
||||
},
|
||||
realTimeData:{
|
||||
realTimeData: {
|
||||
alarmNum: 0,
|
||||
currentWaterTonnage: 0,
|
||||
exceedQuotaNum: 0,
|
||||
monthUserWater: 0,
|
||||
thresholdValue: 0,
|
||||
ammeterL:'',
|
||||
count:'',
|
||||
ammeterL: '',
|
||||
count: ''
|
||||
},
|
||||
gateStatus:''
|
||||
};
|
||||
gateStatus: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.containerEcharts()
|
||||
},
|
||||
methods: {
|
||||
|
||||
async containerEcharts() {
|
||||
const res= await getCurrentMonthMeterRecordApi(this.formInline)
|
||||
if(res.result.ammeter===null){
|
||||
this.show=false
|
||||
const res = await getCurrentMonthMeterRecordApi(this.formInline)
|
||||
if (res.result.ammeter === null) {
|
||||
this.show = false
|
||||
}
|
||||
this.ammeter=res.result.ammeter
|
||||
this.count=res.result.count
|
||||
const res1=await selectWaterMeterStatisticsApi(this.formInline)
|
||||
console.log('res1',res1);
|
||||
|
||||
if(res1.result.monthWaterList.length===0){
|
||||
this.realTimeData.monthUserWater=0
|
||||
}else{
|
||||
this.realTimeData.monthUserWater=res1.result.monthWaterList
|
||||
this.ammeter = res.result.ammeter
|
||||
this.count = res.result.count
|
||||
const res1 = await selectWaterMeterStatisticsApi(this.formInline)
|
||||
console.log('res1', res1)
|
||||
|
||||
if (res1.result.monthWaterList.length === 0) {
|
||||
this.realTimeData.monthUserWater = 0
|
||||
} else {
|
||||
this.realTimeData.monthUserWater = res1.result.monthWaterList
|
||||
}
|
||||
|
||||
if(res1.result.alarmList.length===0){
|
||||
this.realTimeData.alarmNum=0
|
||||
}else{
|
||||
this.realTimeData.alarmNum=res1.result.alarmList
|
||||
if (res1.result.alarmList.length === 0) {
|
||||
this.realTimeData.alarmNum = 0
|
||||
} else {
|
||||
this.realTimeData.alarmNum = res1.result.alarmList
|
||||
}
|
||||
|
||||
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
const day = echarts.init(document.getElementById('bottomElectric'))
|
||||
// 指定图表的配置项和数据
|
||||
@ -136,7 +137,7 @@ export default {
|
||||
orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
|
||||
x: 'left', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
|
||||
y: '-2%', // 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
|
||||
itemGap: 90,
|
||||
itemGap: 90,
|
||||
data: ['本年度节电趋势图', '本年度节水趋势图'],
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
@ -156,7 +157,20 @@ export default {
|
||||
xAxis: {
|
||||
boundaryGap: false,
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
data: [
|
||||
'1月',
|
||||
'2月',
|
||||
'3月',
|
||||
'4月',
|
||||
'5月',
|
||||
'6月',
|
||||
'7月',
|
||||
'8月',
|
||||
'9月',
|
||||
'10月',
|
||||
'11月',
|
||||
'12月'
|
||||
],
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
@ -169,16 +183,16 @@ export default {
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
type:'value',
|
||||
// scale:true,
|
||||
min:0, // 配置 Y 轴刻度最小值
|
||||
max:200, // 配置 Y 轴刻度最大值
|
||||
type: 'value',
|
||||
// scale:true,
|
||||
min: 0, // 配置 Y 轴刻度最小值
|
||||
max: 200, // 配置 Y 轴刻度最大值
|
||||
splitNumber: 7, // 配置 Y 轴数值间隔
|
||||
// boundaryGap : [ 0.2, 0.2 ],
|
||||
// boundaryGap : [ 0.2, 0.2 ],
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
type: 'dashed',
|
||||
color: 'rgba(255, 255, 255,0.3)'
|
||||
}
|
||||
},
|
||||
@ -187,12 +201,12 @@ export default {
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle:{
|
||||
type:'dashed'
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: function() {
|
||||
formatter: function () {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
@ -202,8 +216,8 @@ export default {
|
||||
{
|
||||
name: '本年度节水趋势图',
|
||||
data: [23, 51, 61, 13, 66, 18, 90, 120, 17, 10, 83, 29],
|
||||
textStyle:{
|
||||
fontSize:10
|
||||
textStyle: {
|
||||
fontSize: 10
|
||||
},
|
||||
type: 'line',
|
||||
symbolSize: 0, //设置折线上圆点大小
|
||||
@ -263,7 +277,7 @@ export default {
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
img{
|
||||
img {
|
||||
width: 92%;
|
||||
height: 90%;
|
||||
margin-top: -37px;
|
||||
@ -273,7 +287,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 37%;
|
||||
margin:15px 0px 20px 10px;
|
||||
margin: 15px 0px 20px 10px;
|
||||
// margin-top: 5px;
|
||||
.leftWaterDiv,
|
||||
.rightWaterDiv {
|
||||
@ -287,7 +301,7 @@ export default {
|
||||
margin-right: 20px;
|
||||
.numberStyle {
|
||||
display: inline-block;
|
||||
// margin-top: 5px;
|
||||
// margin-top: 5px;
|
||||
// padding-top: 15px;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
@ -305,17 +319,15 @@ export default {
|
||||
color: #6ee4f0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.span1{
|
||||
.span1 {
|
||||
margin-right: 26px;
|
||||
}
|
||||
.span2{
|
||||
.span2 {
|
||||
margin-right: 14px !important;
|
||||
}
|
||||
.span3{
|
||||
.span3 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user