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

修改中建四局页面（双碳管理）细节处理

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/views/projectAdmin/fourEngin/assets/images/common/bg_sby.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 380 B

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

@ -49,7 +49,14 @@ export default {
// 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
// 图表距离边框的距离，可用百分比和数字（px）配置
top: '15%',
left: '2%',
right: '4%',
bottom: '17%',
containLabel: true
},
xAxis: {
boundaryGap: false,

343
src/views/projectAdmin/fourEngin/carbon/centerTop.vue
View File

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

11
src/views/projectAdmin/fourEngin/carbon/leftBottom.vue
View File

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

4
src/views/projectAdmin/fourEngin/carbon/leftCenter.vue
View File

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

3
src/views/projectAdmin/fourEngin/carbon/leftTop.vue
View File

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

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

@ -71,7 +71,7 @@ export default {
grid: {
// 图表距离边框的距离，可用百分比和数字（px）配置
top: '5%',
left: '0%',
left: '4%',
right: '4%',
bottom: '25%',
containLabel: true

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

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

30
src/views/projectAdmin/fourEngin/components/environmentWatchTwo.vue
View File

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