admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev-yjl' into 'shenzhen-dev'

Browse Source 
修改中建四局数据渲染(双碳管理,监控设备大屏)

See merge request !44
This commit is contained in:
yjlHub 2022-10-23 19:00:25 +08:00
commit 711a206e1c
9 changed files with 448 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/js/api/waterManage.js
View File

@ -29,4 +29,5 @@ export const selelctWaterMeterThresholdApi = data => post('xmgl/waterMeterThresh
// 实时数据
export const selectWaterMeterStatisticsApi = data => post('xmgl/waterMeterMonthRecord/selectWaterMeterStatistics', data);
export const getCurrentMonthMeterRecordApi = data => post('xmgl/waterMeterMonthRecord/getCurrentMonthMeterRecord', data);
export const selectWaterRecordDetailPageListApi = data => post('xmgl/waterMeterRecordDetail/selectWaterRecordDetailPageList', data);
export const selectWaterRecordDetailPageListApi = data => post('xmgl/waterMeterRecordDetail/selectWaterRecordDetailPageList', data);

13
src/views/projectAdmin/fourEngin/carbon/centerBottom.vue
View File

@ -24,7 +24,9 @@ import echarts from 'echarts4'
export default {
components: { Card },
data() {
return {}
return {
time1:'',
}
},
mounted() {
this.containerEcharts()
@ -131,23 +133,26 @@ export default {
width: 100%;
height: 100%;
.DataTime {
cursor:pointer;
margin-top: 10px;
margin-left: 75%;
margin-left: 72%;
width: 210;
height: 17px;
}
::v-deep .el-date-editor--daterange.el-input__inner {
width: 210px;
cursor:pointer;
width: 235px;
height: 30px;
background-color: #182337;
border: 1px solid #264b5e;
}
::v-deep .el-range-input {
margin-left: 20px;
cursor:pointer;
background-color: #182337;
color: #6ee4f0;
}
::v-deep .el-date-editor {
cursor:pointer;
.el-range__icon {
line-height: 23px;
color: #6ee4f0;

85
src/views/projectAdmin/fourEngin/carbon/rightBottom.vue
View File

@ -3,10 +3,11 @@
<div class="contentBox">
<!-- 上结构 -->
<div class="topWater">
<div class="waterDiv">用水</div>
<div class="electricDiv">用电</div>
<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="开始日期"
@ -16,8 +17,12 @@
></el-date-picker>
</div>
</div>
<!-- 下echarts结构 -->
<div id="waterMain"></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>
@ -25,16 +30,46 @@
<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 {}
return {
index: 1,
time1:'',
show: true,
monthWaterList: '',
count: '',
waterMeter: '',
formInline: {
yearTime: '',
waterMeterNo: '',
projectSn: this.$store.state.projectSn
}
}
},
mounted() {
this.wEacharts()
},
methods: {
wEacharts() {
//用水/用电按钮切换
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() {
@ -46,7 +81,6 @@ export default {
})()
let option = {
title: {
x: '4%',
@ -122,9 +156,9 @@ export default {
}
},
axisLine: {
show:true,
show: true,
lineStyle: {
type:'dashed',
type: 'dashed'
}
},
axisTick: {
@ -170,12 +204,12 @@ export default {
stack: '总量',
barMaxWidth: 25,
barGap: '10%',
symbol:'circle',
symbol: 'circle',
itemStyle: {
normal: {
color: '#6EE4F0',
lineStyle:{
color:'#fff'
lineStyle: {
color: '#fff'
},
label: {
show: false,
@ -189,7 +223,7 @@ export default {
}
}
},
data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078]
data: this.waterMeter
},
{
@ -208,7 +242,7 @@ export default {
}
}
},
data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220]
data: this.count
},
{
type: 'line',
@ -219,8 +253,8 @@ export default {
normal: {
color: '#fff',
barBorderRadius: 2,
lineStyle:{
color:'#FFC303'
lineStyle: {
color: '#FFC303'
},
label: {
show: false,
@ -252,6 +286,7 @@ export default {
height: 20%;
display: flex;
.waterDiv {
cursor:pointer;
display: inline-block;
// margin-top: 5px;
// padding-top: 15px;
@ -269,6 +304,7 @@ export default {
}
.electricDiv {
cursor:pointer;
display: inline-block;
// margin-top: 5px;
// padding-top: 15px;
@ -285,34 +321,43 @@ export default {
font-size: 14px;
}
.DateTime {
cursor:pointer;
flex: 1;
margin-left: 80px;
// margin-left: 80px;
margin-top: 4px;
::v-deep .el-date-editor--daterange.el-input__inner {
width: 210px;
width: 230px;
height: 30px;
background-color: #182337;
border: 1px solid #264b5e;
margin-left: 50px;
}
::v-deep .el-range-input {
margin-left: 15px;
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;
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;
}
}
}
}

80
src/views/projectAdmin/fourEngin/carbon/rightCenter.vue
View File

@ -6,18 +6,18 @@
<div class="leftWaterDiv">
<div class="waterDiv">
<span class="span1">本月用电</span>
<span class="numberStyle">2700</span>
<span class="numberStyle">{{realTimeData.monthUserWater}}</span>
<span>kwh</span>
</div>
<div class="waterDiv">
<span class="span2" id="spanes">用电超标值 </span>
<span class="numberStyle">2700</span>
<span class="numberStyle">{{realTimeData.exceedQuotaNum}}</span>
<span >kwh</span>
</div>
<div class="waterDiv">
<span class="span3">累计节约电量</span>
<span class="numberStyle">2700</span>
<span class="numberStyle">{{realTimeData.alarmNum}}</span>
<span>kwh</span>
</div>
</div>
@ -25,41 +25,99 @@
<div class="rightWaterDiv">
<div class="waterDiv">
<span class="span1">本月用水</span>
<span class="numberStyle">2700</span>
<span class="numberStyle">{{realTimeData.monthUserWater}}</span>
<span>t</span>
</div>
<div class="waterDiv">
<span class="span2">用水超标值</span>
<span class="numberStyle">2700</span>
<span class="numberStyle">{{realTimeData.exceedQuotaNum}}</span>
<span>t</span>
</div>
<div class="waterDiv">
<span class="span3">累计节约水量</span>
<span class="numberStyle">2700</span>
<span class="span3">本月报警次数</span>
<span class="numberStyle">{{realTimeData.alarmNum}}</span>
<span>t</span>
</div>
</div>
</div>
<!-- 年度节电趋势图 -->
<div id="bottomElectric"></div>
<div id="bottomElectric" v-if="show"></div>
<div 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 {
// getwaterMeterListApi,selectWaterMeterStatisticsApi,
// getCurrentMonthMeterRecordApi,} from "@/assets/js/api/waterManage";
import {getCurrentMonthMeterRecordApi,selectWaterMeterStatisticsApi} from'@/assets/js/api/electricDevManage'
import Card from '../components/Card.vue'
import echarts from 'echarts4'
export default {
components: { Card },
data() {
return {}
// return {
// realTimeData:{
// alarmNum: 0,
// currentWaterTonnage: 0,
// exceedQuotaNum: 0,
// monthUserWater: 0,
// thresholdValue: 0
// },
// }
return {
deviceIdArr:[],
show:true,
formInline: {
yearTime: "",
ammeterNo: "",
projectSn: this.$store.state.projectSn
},
realTimeData:{
alarmNum: 0,
currentWaterTonnage: 0,
exceedQuotaNum: 0,
monthUserWater: 0,
thresholdValue: 0,
ammeterL:'',
count:'',
},
gateStatus:''
};
},
mounted() {
this.containerEcharts()
},
methods: {
containerEcharts() {
async containerEcharts() {
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
}
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'))
// 指定图表的配置项和数据
@ -212,7 +270,7 @@ export default {
{
name: '本年度节电趋势图',
data: [55, 51, 61, 93, 56, 150, 44, 170, 90, 30, 40, 50],
data: this.ammeter,
type: 'line',
symbolSize: 0, //设置折线上圆点大小
smooth: true, // 设置折线弧度

4
src/views/projectAdmin/fourEngin/components/videoPhotoTwo.vue
View File

@ -47,7 +47,7 @@
</el-upload>
<!-- 更换图片 -->
<div @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false" class="img">
<!-- <div @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false" class="img">
<el-upload
v-if="showChangeImg"
class="changeImg"
@ -61,7 +61,7 @@
<span style="border: 1px solid #ffffff; padding: 5px">{{ $t('message.companyDiagram.changeImg') }}</span>
</el-upload>
<img v-if="show" class="imgStyle" :src="this.$store.state.FILEURL + imgUrl" alt />
</div>
</div> -->
</div>
</template>

245
src/views/projectAdmin/fourEngin/monitor/index.vue
View File

@ -1,21 +1,192 @@
<template>
<div class="monitor">
<!-- <div class="video" v-for="i in 12" :key="i"></div> -->
<div class="left">
<Left />
</div>
<div class="right">
<Right />
</div>
<Card title="监控设备列表" style="width: 14%; font-size: 15px !important">
<!-- 左边列表 -->
<div class="videoLeft">
<div class="videoList" v-if="dataType == 1">
<!-- <vue-scroll>
<ul v-if="devList.length > 0">
<li @click="changeVideo(item)" v-for="(item, index) in devList" :key="index">
<img v-if="item.deviceType == 2" src="@/assets/images/icon-video2-white.png" />
<img v-else src="@/assets/images/icon-video-white.png" />
{{ item.videoName }}
</li>
</ul>
<div class="placeholderBox" v-else>
<img src="@/assets/images/noData2-dark.png" alt="" srcset="" />
</div>
</vue-scroll> -->
<el-tree
:data="dataList"
:props="defaultProps"
@node-click="changeVideo"
></el-tree>
</div>
<div class="videoBox" v-else>
<vue-scroll>
<el-collapse v-model="activeNames" style="padding: 0 20px">
<el-collapse-item
:title="item.name"
:name="index"
v-for="(item, index) in devList"
:key="index"
>
<ul v-if="item.list.length > 0">
<li
@click="changeVideo(data)"
v-for="(data, index2) in item.list"
:key="index2"
>
<img
v-if="data.deviceType == 2"
src="@/assets/images/icon-video2-white.png"
/>
<img v-else src="@/assets/images/icon-video-white.png" />
{{ data.videoName }}
</li>
</ul>
</el-collapse-item>
</el-collapse>
</vue-scroll>
</div>
</div>
</Card>
<!-- 右边视频 -->
<Card title="视频监控" style="width: 80%; margin-right: 40px">
<div class="videoTight">
<VideoModule
class="playVideoBox"
:type="'project'"
:value="selectList"
:displayBottomMod="false"
:winNumBer="9"
:autoplay="false"
:showCaptrue="false"
:showControl="false"
:showPlayback="false"
:xxx="7"
></VideoModule>
</div>
</Card>
</div>
</template>
<script>
import Left from "./left.vue";
import Right from "./right.vue"
// import Left from "./left.vue";
// import Right from "./right.vue"
import {
selectProjectVideoListApi,
selectUserVideoListApi,
} from "@/assets/js/api/equipmentCenter/cameraList";
import Card from "../components/Card.vue";
import VideoModule from "@/components/videoModule/videoModule.vue";
export default {
components: { Left,Right},
}
components: { Card, VideoModule },
data() {
return {
devList: [],
selectList: [],
dataType: 1,
activeNames: [0],
screens: {},
pluginType: "",
current: -1,
threeIndex: -1,
currentTwo: -1,
dataList: [
{ videoName: "设备1", list: [] },
{ videoName: "设备2", list: [] },
{ videoName: "设备3", list: [] },
{ videoName: "设备4", list: [] },
],
defaultProps: {
children: "list",
label: "videoName",
},
};
},
mounted() {
// console.dir(window.parent)
// console.log(window.parent.document.getElementById("myFrame"), 12312313)
if (this.$store.state.userInfo.accountType != 6) {
this.loadData();
} else {
this.loadData2();
}
},
methods: {
changeVideo(item) {
console.log(item, "xxxxxxxxxx");
this.selectList = [item];
console.log("右边的值", this.selectList);
},
loadData() {
selectProjectVideoListApi({
projectSn: this.$store.state.projectSn,
}).then((res) => {
var DATA = res.result.videoList;
let dataList1 = [];
let dataList2 = [];
let dataList3 = [];
let dataList4 = [];
for (let index = 0; index < DATA.length; index++) {
const element = DATA[index];
if (element.videoName.includes("宜州天地")) {
dataList1.push(element);
} else if (element.videoName.includes("中银金融中心")) {
dataList2.push(element);
} else if (element.videoName.includes("桂林印刷厂")) {
dataList3.push(element);
} else {
dataList4.push(element);
}
}
this.dataList[0].list = dataList1;
this.dataList[1].list = dataList2;
this.dataList[2].list = dataList3;
this.dataList[3].list = dataList4;
console.log("视频的列表", this.dataList);
this.dataType = res.result.type;
});
},
loadData2() {
selectUserVideoListApi({
projectSn: this.$store.state.projectSn,
userId: this.$store.state.userInfo.userId,
}).then((res) => {
var DATA = res.result.videoList;
this.devList = DATA;
this.dataType = res.result.type;
});
},
showThree(a, b) {},
next2(item) {
// this.secondId = item.id;
// this.loadRigthtList();
},
next(index, $event, data, type) {
console.log("data", data);
this.currentTwo = -1;
//
if (this.current != index) {
this.threeIndex = -1;
}
this.threeData = [];
this.type = type;
this.parentid1 = data.id;
if (this.current == index) {
this.current = -1;
} else {
this.current = index;
}
},
},
};
</script>
<style lang="less" scoped>
@ -23,13 +194,53 @@ export default {
width: 100%;
height: 100%;
display: flex;
.left{
width: 15%;
box-sizing: border-box;
padding-right: 2%;
justify-content: space-between;
.textSize {
font-size: 15px !important;
}
.right{
width: 85%;
.videoLeft {
width: 20%;
height: 100%;
.videoList {
margin-top: 20px;
margin-left: 20px;
}
}
.videoTight {
width: 99%;
height: 90%;
margin-left: 9px;
margin-top: 4%;
}
::v-deep .el-tree-node__expand-icon {
position: absolute;
right: -600%;
// color: red;
font-size: 16px;
}
::v-deep .el-tree-node__label {
font-size: 16px;
}
::v-deep .el-tree-node {
// color: #fff;
width: 200px;
}
::v-deep .el-tree-node__content {
font-size: 15px;
}
::v-deep .el-tree-node__children {
width: 300px;
color: #59bdc1 !important;
}
::v-deep .el-tree-node__content {
color:#59bdc1 !important;
// color: #fff !important;
font-size: 20px;
}
}
</style>

3
src/views/projectAdmin/fourEngin/monitor/left.vue
View File

@ -1,4 +1,6 @@
<template>
<!-- 此组件未引用 -->
<Card title="监控设备列表">
<vue-scroll class="treeList">
<div style="padding-top: 10px">
@ -84,6 +86,7 @@ export default {
components: { Card },
data() {
return {
selectList:[],
current: -1,
threeIndex: -1,
currentTwo: -1,

1
src/views/projectAdmin/fourEngin/monitor/right.vue
View File

@ -1,4 +1,5 @@
<template>
<!-- 此组件未引用 -->
<Card title="视频监控">
<!-- <div class="top">
<el-select size="mini" v-model="value1" placeholder="请选择">

73
src/views/projectAdmin/fourEngin/quality/leftMiddle.vue
View File

@ -5,21 +5,21 @@
<div class="icon temperature"></div>
<div class="info">
<div class="label">室内温度</div>
<div class="value"><span>26</span> ℃</div>
<div class="value"><span>{{ currentData.temperature }}</span> ℃</div>
</div>
</div>
<div class="item">
<div class="icon humidity"></div>
<div class="info">
<div class="label">室内湿度</div>
<div class="value"><span>26</span>%RH</div>
<div class="value"><span>{{ currentData.humidity }}</span>%RH</div>
</div>
</div>
<div class="item">
<div class="icon spray"></div>
<div class="info">
<div class="label">喷淋温度</div>
<div class="value"><span>26</span> 次</div>
<div class="value"><span>{{ currentData.currentDayAlarmNum }}</span> 次</div>
</div>
</div>
<div class="btn">远程验收</div>
@ -29,9 +29,74 @@
</template>
<script>
import {
getstandardDevListApi,
selectStandardDevStatisticsBySnApi,
} from "@/assets/js/api/markingRoom";
import Card from '../components/Card.vue'
export default {
components: { Card }
components: { Card },
data(){
return{
currentData: {
currentDayAlarmNum: 0,
humidity: 0,
sampleNum: 0,
temperature: 0,
},
searchSn:'',
devSn:'',
}
},
mounted() {
if (this.$store.state.projectSn) {
this.searchSn = this.$store.state.projectSn;
this.$nextTick(() => {
this.getDevList();
});
} else {
this.initData();
}
},
methods:{
//标养室管理数据
getRealTimeData() {
selectStandardDevStatisticsBySnApi({
projectSn: this.searchSn,
devSn: this.devSn,
}).then((res) => {
console.log('标养室数据',res);
this.currentData = res.result.currentData;
});
},
//获取设备列表--环境监测实时数据--下拉
getDevList() {
getstandardDevListApi({ projectSn: this.searchSn }).then((result) => {
console.log('列表', result)
this.devList = result.result;
if (result.result.length > 0) {
this.devSn = result.result[0].devSn;
this.getRealTimeData();
}
});
},
//初始化数据
initData() {
this.searchSn = this.projectsn;
this.currentData = {
currentDayAlarmNum: 0,
humidity: 0,
sampleNum: 0,
temperature: 0,
};
this.devSn = "";
if (this.personnelTypeChart) {
this.personnelTypeChart.clear();
}
this.getDevList();
},
}
}
</script>