修改中建四局页面(双碳管理)细节处理

This commit is contained in:
yjl 2022-10-20 13:59:11 +08:00
parent 6b45d5dcba
commit 0b7a2c7e80
9 changed files with 218 additions and 186 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 380 B

View File

@ -49,7 +49,14 @@ export default {
// 线'line' | 'shadow' // 线'line' | 'shadow'
} }
}, },
grid: {
// px
top: '15%',
left: '2%',
right: '4%',
bottom: '17%',
containLabel: true
},
xAxis: { xAxis: {
boundaryGap: false, boundaryGap: false,

View File

@ -1,15 +1,26 @@
<template> <template>
<div class="containerBox"> <div class="containerBox">
<div class="right1"> <div class="right1">
<span @click="change(0)" :class="number == 0 ? 'newStyle':'btn_anniu'">实时数据</span> <span @click="change(0)" :class="number == 0 ? 'newStyle' : 'btn_anniu'">实时数据</span>
<span @click="change(1)" :class="number == 1 ? 'newStyle':'btn_anniu'">零碳展厅</span> <span @click="change(1)" :class="number == 1 ? 'newStyle' : 'btn_anniu'">零碳展厅</span>
</div> </div>
<div class="right3"> <div class="right3">
<div class="dropDown" v-show="0 === number">
<el-dropdown>
<span class="el-dropdown-link"> 设备一<i class="el-icon-arrow-down el-icon--right"></i> </span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>设备二</el-dropdown-item>
<el-dropdown-item>设备三</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div> <div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div>
<div class="right4" v-show="1 === number"> <div class="right4" v-show="1 === number">
<!-- <p><img src="@/views/projectAdmin/fourEngin/assets/images/common/video_bg.jpg"></p> --> <!-- <p><img src="@/views/projectAdmin/fourEngin/assets/images/common/video_bg.jpg"></p> -->
<videoPhoto class="video"></videoPhoto> <videoPhoto class="video"></videoPhoto>
</div> </div>
</div> </div>
</div> </div>
@ -18,12 +29,12 @@
<script> <script>
import videoPhoto from '@/views/projectAdmin/fourEngin/components/videoPhotoTwo' import videoPhoto from '@/views/projectAdmin/fourEngin/components/videoPhotoTwo'
// import centerTops from '@/views/projectAdmin/jlw/envirManage/centerTop' // import centerTops from '@/views/projectAdmin/jlw/envirManage/centerTop'
import { environmentDevList } from "@/assets/js/api/environmentManage"; import { environmentDevList } from '@/assets/js/api/environmentManage'
import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage"; import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
import echarts from "echarts4"; import echarts from 'echarts4'
export default { export default {
components:{ components: {
videoPhoto videoPhoto
}, },
data() { data() {
return { return {
@ -34,59 +45,57 @@ export default {
offlineDevNum: 0, offlineDevNum: 0,
realTimeDustNoiseDataTime: null, // realTimeDustNoiseDataTime: null, //
plantCap: { plantCap: {
crc: "--", crc: '--',
humidity: "--", humidity: '--',
noise: "--", noise: '--',
plateHumidity: "--", plateHumidity: '--',
plateTemperature: "--", plateTemperature: '--',
pm10: "--", pm10: '--',
pm25: "--", pm25: '--',
pressure: "--", pressure: '--',
temperature: "--", temperature: '--',
tsp: "--", tsp: '--',
voltage: "--", voltage: '--',
winddirectionName: "--", winddirectionName: '--',
windspeed: "--" windspeed: '--'
} }
} }
}, },
mounted() { mounted() {
this.createCenterChart(); this.createCenterChart()
// this.$nextTick(() => { // this.$nextTick(() => {
// this.getDevList(); // this.getDevList();
// }); // });
}, },
methods: { methods: {
getDevList() { getDevList() {
environmentDevList({ projectSn: this.$store.state.projectSn }).then( environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
result => { console.log('列表', result)
console.log("列表", result); this.devList = result.result
this.devList = result.result; console.log(this.devList)
console.log(this.devList); if (result.result.length > 0) {
if (result.result.length > 0) { this.currentDevDetail = result.result[0]
this.currentDevDetail = result.result[0];
this.$emit('custClick',this.currentDevDetail) this.$emit('custClick', this.currentDevDetail)
this.offlineDevNum = 0; this.offlineDevNum = 0
this.onlineDevNum = 0; this.onlineDevNum = 0
this.devList.forEach(element => { this.devList.forEach(element => {
if (element.isClosed == 2) { if (element.isClosed == 2) {
this.offlineDevNum++; this.offlineDevNum++
} else { } else {
this.onlineDevNum++; this.onlineDevNum++
} }
}); })
this.getRealTimeDustNoiseData(); this.getRealTimeDustNoiseData()
// this.realTimeDustNoiseDataTime = setInterval( () => { // this.realTimeDustNoiseDataTime = setInterval( () => {
// this.getRealTimeDustNoiseData(); // this.getRealTimeDustNoiseData();
// },5000) // },5000)
// this.selectDustNoiseData(); 24H // this.selectDustNoiseData(); 24H
} else { } else {
// this.createCenterChart(); // this.createCenterChart();
}
} }
); })
}, },
/** 查询 */ /** 查询 */
handleQuery() { handleQuery() {
@ -97,12 +106,12 @@ export default {
// // // //
realTimeMonitor(value) { realTimeMonitor(value) {
if (this.realTimeDustNoiseDataTime) { if (this.realTimeDustNoiseDataTime) {
clearInterval(this.realTimeDustNoiseDataTime); clearInterval(this.realTimeDustNoiseDataTime)
} }
console.log("id换了吗", value); console.log('id换了吗', value)
this.currentDevDetail = value; this.currentDevDetail = value
this.getRealTimeDustNoiseData(); this.getRealTimeDustNoiseData()
// this.realTimeDustNoiseDataTime = setInterval( () => { // this.realTimeDustNoiseDataTime = setInterval( () => {
// this.getRealTimeDustNoiseData(); // this.getRealTimeDustNoiseData();
// },5000) // },5000)
@ -115,70 +124,68 @@ export default {
let data = { let data = {
deviceId: this.currentDevDetail.deviceId, deviceId: this.currentDevDetail.deviceId,
projectSn: this.$store.state.projectSn projectSn: this.$store.state.projectSn
}; }
console.log(data); console.log(data)
getRealTimeDustNoiseDataApi(data).then(res => { getRealTimeDustNoiseDataApi(data).then(res => {
if (res.code == 200) { if (res.code == 200) {
console.log(res.result); console.log(res.result)
if (res.result != null) { if (res.result != null) {
this.plantCap = res.result; this.plantCap = res.result
} else { } else {
this.plantCap = { this.plantCap = {
crc: "--", crc: '--',
humidity: "--", humidity: '--',
noise: "--", noise: '--',
plateHumidity: "--", plateHumidity: '--',
plateTemperature: "--", plateTemperature: '--',
pm10: "--", pm10: '--',
pm25: "--", pm25: '--',
pressure: "--", pressure: '--',
temperature: "--", temperature: '--',
tsp: "--", tsp: '--',
voltage: "--", voltage: '--',
winddirectionName: "--", winddirectionName: '--',
windspeed: "--" windspeed: '--'
}; }
} }
this.createCenterChart(); this.createCenterChart()
} }
}); })
}, },
/// ///
change: function(index) { change: function(index) {
console.log(111); console.log(111)
this.number = index this.number = index
}, },
//-- //--
createCenterChart() { createCenterChart() {
let centerChart = echarts.init(this.$refs.centerChart); let centerChart = echarts.init(this.$refs.centerChart)
console.log("this.$refs.centerChart"); console.log('this.$refs.centerChart')
console.log(this.$refs.centerChart.offsetHeight); console.log(this.$refs.centerChart.offsetHeight)
centerChart.clear(); centerChart.clear()
let detailData = this.$t("message.environmentalOverview.plantCap"); let detailData = this.$t('message.environmentalOverview.plantCap')
for (let i = 0; i < detailData.length; i++) { for (let i = 0; i < detailData.length; i++) {
if (detailData[i].id == 1) { if (detailData[i].id == 1) {
detailData[i].value = this.plantCap.humidity; //湿 detailData[i].value = this.plantCap.humidity //湿
} else if (detailData[i].id == 2) { } else if (detailData[i].id == 2) {
detailData[i].value = this.plantCap.pm25; //pm2.5 detailData[i].value = this.plantCap.pm25 //pm2.5
} else if (detailData[i].id == 3) { } else if (detailData[i].id == 3) {
detailData[i].value = this.plantCap.temperature; // detailData[i].value = this.plantCap.temperature //
} else if (detailData[i].id == 4) { } else if (detailData[i].id == 4) {
detailData[i].value = this.plantCap.tsp; //tsp detailData[i].value = this.plantCap.tsp //tsp
} else if (detailData[i].id == 5) { } else if (detailData[i].id == 5) {
detailData[i].value = this.plantCap.windspeed; // detailData[i].value = this.plantCap.windspeed //
} else if (detailData[i].id == 6) { } else if (detailData[i].id == 6) {
detailData[i].value = this.plantCap.pm10; // pm10 detailData[i].value = this.plantCap.pm10 // pm10
} else if (detailData[i].id == 7) { } else if (detailData[i].id == 7) {
detailData[i].value = this.plantCap.winddirectionName; detailData[i].value = this.plantCap.winddirectionName
} else if (detailData[i].id == 8) { } else if (detailData[i].id == 8) {
detailData[i].value = this.plantCap.pressure detailData[i].value = this.plantCap.pressure ? this.plantCap.pressure : '--'
? this.plantCap.pressure
: "--";
} }
detailData[i].value += detailData[i].unit; detailData[i].value += detailData[i].unit
} }
var plantCap = detailData; var plantCap = detailData
var datalist = [ var datalist = [
{ {
@ -188,11 +195,11 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "#29c0fb" color: '#29c0fb'
}, },
{ {
offset: 1, offset: 1,
color: "#2dc5b9" color: '#2dc5b9'
} }
]) ])
}, },
@ -203,11 +210,11 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "#35d17e" color: '#35d17e'
}, },
{ {
offset: 1, offset: 1,
color: "#49ddb2" color: '#49ddb2'
} }
]) ])
}, },
@ -218,11 +225,11 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "#e5d273" color: '#e5d273'
}, },
{ {
offset: 1, offset: 1,
color: "#e4a37f" color: '#e4a37f'
} }
]) ])
}, },
@ -233,11 +240,11 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "#277aec" color: '#277aec'
}, },
{ {
offset: 1, offset: 1,
color: "#57c5ec" color: '#57c5ec'
} }
]) ])
}, },
@ -248,11 +255,11 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "#e54948" color: '#e54948'
}, },
{ {
offset: 1, offset: 1,
color: "#f08456" color: '#f08456'
} }
]) ])
}, },
@ -263,11 +270,11 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "#11c46e" color: '#11c46e'
}, },
{ {
offset: 1, offset: 1,
color: "#f08456" color: '#f08456'
} }
]) ])
}, },
@ -278,21 +285,21 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "#6367E0" color: '#6367E0'
}, },
{ {
offset: 1, offset: 1,
color: "#B667F0" color: '#B667F0'
} }
]) ])
} }
]; ]
var datas = []; var datas = []
for (var i = 0; i < plantCap.length; i++) { for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i]; var item = plantCap[i]
var itemToStyle = datalist[i]; var itemToStyle = datalist[i]
datas.push({ datas.push({
name: item.value + "\n" + item.name, name: item.value + '\n' + item.name,
value: itemToStyle.offset, value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize, symbolSize: itemToStyle.symbolSize,
label: { label: {
@ -310,7 +317,7 @@ export default {
opacity: itemToStyle.opacity opacity: itemToStyle.opacity
} }
} }
}); })
} }
let option1 = { let option1 = {
grid: { grid: {
@ -321,11 +328,11 @@ export default {
xAxis: [ xAxis: [
{ {
gridIndex: 0, gridIndex: 0,
type: "value", type: 'value',
show: false, show: false,
min: 0, min: 0,
max: 100, max: 100,
nameLocation: "middle", nameLocation: 'middle',
nameGap: 5 nameGap: 5
} }
], ],
@ -335,13 +342,13 @@ export default {
min: 0, min: 0,
show: false, show: false,
max: 100, max: 100,
nameLocation: "middle", nameLocation: 'middle',
nameGap: 30 nameGap: 30
} }
], ],
series: [ series: [
{ {
type: "effectScatter", type: 'effectScatter',
// symbol: 'circle', // symbol: 'circle',
// symbolSize: 120, // symbolSize: 120,
@ -349,36 +356,35 @@ export default {
label: { label: {
normal: { normal: {
show: true, show: true,
formatter: "{b}", formatter: '{b}',
color: "#fff", color: '#fff',
textStyle: { textStyle: {
fontSize: "20" fontSize: '20'
} }
} }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#00acea" color: '#00acea'
} }
}, },
data: datas data: datas
} }
] ]
}; }
centerChart.setOption(option1); centerChart.setOption(option1)
window.onresize = centerChart.resize; window.onresize = centerChart.resize
} }
}, },
watch:{ watch: {
'plantCap':{ plantCap: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (newVal != oldVal) { if (newVal != oldVal) {
this.createCenterChart(); this.createCenterChart()
}
} }
} }
}, }
}
} }
</script> </script>
@ -394,7 +400,6 @@ export default {
display: flex; display: flex;
margin-left: 35%; margin-left: 35%;
.btn_anniu { .btn_anniu {
display: inline-block; display: inline-block;
// margin-top: 5px; // margin-top: 5px;
@ -410,7 +415,6 @@ export default {
margin: 0 10px 0 0; margin: 0 10px 0 0;
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
} }
.newStyle { .newStyle {
@ -430,32 +434,49 @@ export default {
} }
} }
.right3 { .right3 {
width: 100%; width: 100%;
height: 80%; height: 80%;
margin-top: 25px; margin-top: 25px;
.centerChart { .centerChart {
width: 100%; width: 100%;
height: calc(100% - 22px); height: calc(100% - 22px);
} }
#right2{ #right2 {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} .right4 {
.right4{ width: 100%;
width: 100%; height: 100%;
height: 100%; .video {
.video{ margin-bottom: -50px;
margin-bottom: -50px; display: inline-block;
display: inline-block; margin-left: 25px;
margin-left: 25px; width: 850px;
width: 850px; height: 550px;
height: 550px; }
}
.dropDown {
float: right;
text-align: center;
margin-right: 40px;
margin-top: -20px;
width: 100px;
height: 30px;
line-height: 30px;
background-color: #305c6d;
background-image: url(../assets/images/common/bg_sby.png);
background-repeat: no-repeat;
background-size: 100%;
font-size: 8px;
.el-dropdown-link {
color: #Fff;
}
.el-icon-arrow-down{
margin-left: 15px;
}
} }
} }
}
} }
</style> </style>

View File

@ -3,7 +3,9 @@
<div class="electricityBox"> <div class="electricityBox">
<div class="electricityTop"> <div class="electricityTop">
<span class="text1">今日发电</span> <span class="text1">今日发电</span>
<span class="numTop" ><span class="numText">10</span></span> <span class="numTop" >
<span class="numText">10</span>
</span>
<span class="texts"></span> <span class="texts"></span>
</div> </div>
<div class="electricityBottom"> <div class="electricityBottom">
@ -180,7 +182,7 @@ export default {
span{ span{
color: #6EE4F0 ; color: #6EE4F0 ;
font-size: 24px; font-size: 24px;
opacity: 0.7; // opacity: 0.7;
} }
.numTop{ .numTop{
display: inline-block; display: inline-block;
@ -193,13 +195,14 @@ export default {
background-size: 80%; background-size: 80%;
//font-size: 40px; //font-size: 40px;
line-height: 60px; line-height: 60px;
color: #fff !important; // color: #fff !important;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: -15px; margin-right: -15px;
} }
.numText{ .numText{
font-size: 40px; font-size: 40px;
color: #fff; color: #fff !important;
margin-right: 25px; margin-right: 25px;
} }
.text1{ .text1{

View File

@ -91,10 +91,10 @@ export default {
color:#72bdc9; color:#72bdc9;
border-bottom: 1px solid rgba(31, 68, 86, 0.3); border-bottom: 1px solid rgba(31, 68, 86, 0.3);
line-height: 35px; line-height: 35px;
opacity: 0.8; //opacity: 0.8;
} }
td { td {
color: #c5c7cc; color: #FFF;
line-height: 35px; line-height: 35px;
} }
} }

View File

@ -52,11 +52,12 @@ export default {
position: relative; position: relative;
color: #c5c7cc; color: #c5c7cc;
.air { .air {
margin-top: 25px;
width: 100%; width: 100%;
height: 80%; height: 80%;
} }
.text { .text {
margin-top: 10px; margin-top: -20px;
width: 100%; width: 100%;
height: 20%; height: 20%;
text-align: center; text-align: center;

View File

@ -71,7 +71,7 @@ export default {
grid: { grid: {
// px // px
top: '5%', top: '5%',
left: '0%', left: '4%',
right: '4%', right: '4%',
bottom: '25%', bottom: '25%',
containLabel: true containLabel: true

View File

@ -283,7 +283,7 @@ export default {
} }
span { span {
color: #6ee4f0; color: #6ee4f0;
opacity: 0.8;
font-size: 12px; font-size: 12px;
} }
.span1{ .span1{

View File

@ -75,7 +75,7 @@ export default {
var dataArr = 80; var dataArr = 80;
var option = { var option = {
// backgroundColor: "#FFFFFF", // backgroundColor: "#162235",
title: { title: {
show: true, show: true,
text: '优', text: '优',
@ -84,8 +84,8 @@ var option = {
z: 8, z: 8,
textAlign: 'center', textAlign: 'center',
textStyle: { textStyle: {
color: '#458efd', color: '#42A6DD ',
fontSize: 20, fontSize: 15,
fontWeight: 'normal' fontWeight: 'normal'
}, },
@ -94,15 +94,15 @@ var option = {
name: "内部(环形)进度条", name: "内部(环形)进度条",
type: "gauge", type: "gauge",
// center: ['30%', '40%'], // center: ['30%', '40%'],
radius: '50%', radius: '60%',
splitNumber: 20, splitNumber: 20,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: [ color: [
[dataArr / 80, '#6acdc9'], [dataArr / 100, '#6acdc9'],
[1] [1]
], ],
width: 5 width: 3.5
} }
}, },
axisLabel: { axisLabel: {
@ -123,7 +123,7 @@ var option = {
name: '外部刻度', name: '外部刻度',
type: 'gauge', type: 'gauge',
// center: ['20%', '50%'], // center: ['20%', '50%'],
radius: '62%', radius: '70%',
min: 0, // min: 0, //
max: 100, // max: 100, //
splitNumber: 10, // splitNumber: 10, //
@ -133,7 +133,7 @@ var option = {
show: true, show: true,
// 线 // 线
lineStyle: { lineStyle: {
width: 1, width: 0.5,
color: [ color: [
[1] [1]
] ]
@ -141,7 +141,7 @@ var option = {
}, },
// //
axisLabel: { axisLabel: {
show: true, show: false,
color: '#7abec4', color: '#7abec4',
distance: 8, distance: 8,
fontSize:8, fontSize:8,
@ -179,11 +179,11 @@ var option = {
color: '#7abec4', // color: '#7abec4', //
width: 1, width: 1,
}, },
length: -5 length: -3
}, // }, //
splitLine: { splitLine: {
show: true, show: true,
length: -8, length: -5,
lineStyle: { lineStyle: {
color: '#7abec4', // color: '#7abec4', //
width: 1, width: 1,
@ -199,7 +199,7 @@ var option = {
/*内部*/ /*内部*/
{ {
type: 'pie', type: 'pie',
radius: ['37%', '33%'], radius: ["35%",'36'],
center: ['50%', '50%'], center: ['50%', '50%'],
z: 8, z: 8,
hoverAnimation: false, hoverAnimation: false,
@ -223,7 +223,7 @@ var option = {
formatter: function(params) { formatter: function(params) {
return params.value ; return params.value ;
}, },
color: '#458efd', color: '#42A6DD ',
fontSize: 30, fontSize: 30,
fontWeight: "bold", fontWeight: "bold",
position: 'center', position: 'center',
@ -238,7 +238,7 @@ var option = {
/*外一层*/ /*外一层*/
{ {
type: "pie", type: "pie",
radius: ['39%', '35%'], radius: ['43%','36'],
startAngle: 220, startAngle: 220,
endAngle: -40, endAngle: -40,
hoverAnimation: false, hoverAnimation: false,
@ -262,7 +262,7 @@ var option = {
// //
{ {
type: "pie", type: "pie",
radius: ['41%', '38%'], radius: ["48%",'36%'],
center: ["50%", "50%"], center: ["50%", "50%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
z: 0, z: 0,