lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

对接脱硫系统首页、实时监控、能效分析

dev_fgd_scr
selia-zx 2 weeks ago
parent
4a6ef2ee9b
commit
a528af07f5
6 changed files with 2074 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/api/desulfurization/energyAnalysis.js
  2. 505
      src/views/components/densityAndDasage.vue
  3. 312
      src/views/components/sodaDailyDosage.vue
  4. 2
      src/views/desulfurization/desMonitor/desMonitorCenter.vue
  5. 1046
      src/views/desulfurization/energyAnalysis/index.vue
  6. 348
      src/views/index.vue

10
src/api/desulfurization/energyAnalysis.js
Unescape View File

@ -0,0 +1,10 @@
import request from "@/utils/request";
// so2浓度与小苏打用量
export function fgdScrEnergy(data) {
return request({
url: '/fgdScr/energy/sys/query',
method: 'post',
data: data
})
}

505
src/views/components/densityAndDasage.vue
Unescape View File

@ -0,0 +1,505 @@
<template>
<div style="width: 100%; height: 100%">
<div class="charts" ref="chart_ref"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { fgdScrEnergy } from "@/api/desulfurization/energyAnalysis";
export default {
data() {
return {
energyTypes: [],
sharedIndex: 0,
chartInstance: null,
option: {},
colorList: [
{
color: "#00CED1",
offsetColor1: "rgba(0, 206, 209, 0.5)",
offsetColor2: "rgba(0, 206, 209, 0)",
},
{
color: "#ffe21e",
offsetColor1: "rgba(255,226,30, 0.5)",
offsetColor2: "rgba(255,226,30, 0)",
},
{
color: "#1a69f1",
offsetColor1: "rgba(26, 105, 241, 0.5)",
offsetColor2: "rgba(26, 105, 241, 0)",
},
{
color: "#2df499",
offsetColor1: "rgba(45,244,153, 0.5)",
offsetColor2: "rgba(45,244,153, 0)",
},
{
color: "#e87b4b",
offsetColor1: "rgba(232, 123, 75, 0.5)",
offsetColor2: "rgba(232, 123, 75, 0)",
},
],
};
},
mounted() {
this.initChart();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
this.echartsData();
},
destroyed() {
//取消监听器
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
// 选择日月年
handleEnter(index, event) {
console.log("index", index);
console.log("event", event);
this.chartInstance.dispose();
this.initChart();
this.sharedIndex = index;
// 使用 find 方法查找符合条件的对象
const chartsObj = this.energyTypes.find((item) => item.name === event);
const colorObj = this.colorList.find(
(_, currentIndex) => currentIndex === index
);
console.log("当前要渲染的数据对象", chartsObj);
console.log("当前要渲染的颜色对象", colorObj);
const titleFontSize = this.$refs.chart_ref.offsetWidth / 50;
let adapterOption = {};
// 添加折线的配置
adapterOption = {
tooltip: {
trigger: "axis",
// 自定义 tooltip 内容
formatter: function (params) {
var res = params[0].name + "<br/>";
for (var i = 0, l = params.length; i < l; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
var marker =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
params[i].color +
'"></span>';
// 根据不同德seriesName 返回不同的单位
if (chartsObj.unit) {
res +=
marker +
seriesName +
":" +
'<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value +
chartsObj.unit +
"</span><br>";
} else {
res +=
marker +
seriesName +
":" +
'<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value +
"</span><br>";
}
}
return res;
},
},
xAxis: {
data: chartsObj.timeStr,
// axisLabel: {
// fontSize: titleFontSize,
// },
},
yAxis: {
name: chartsObj.unit,
// nameTextStyle: {
// fontSize: titleFontSize,
// },
// axisLabel: {
// fontSize: titleFontSize,
// },
},
series: [
{
data: chartsObj.data,
name: event,
//折线颜色
itemStyle: {
color: colorObj.color, //折线的颜色
},
lineStyle: {
color: colorObj.color, //折线点的颜色
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colorObj.offsetColor1, // 渐变起始颜色
},
{
offset: 1,
color: colorObj.offsetColor2, // 渐变结束颜色
},
],
global: false, // 缺省为 false
},
},
},
],
};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance.setOption(adapterOption);
//手动的调用图标对象的resize才能产生效果
this.chartInstance.resize();
},
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
screenAdapter() {
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
const adapterOption = {};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance.setOption(adapterOption);
//手动的调用图标对象的resize才能产生效果
this.chartInstance.resize();
},
//初始化chartInstance对象
initChart() {
this.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = {
tooltip: {
trigger: "item",
},
legend: {
show: false,
},
grid: {
top: "15%",
left: "4%",
right: "6%",
bottom: "0%",
containLabel: true,
},
xAxis: {
type: "category",
//设置为true代表离零刻度间隔一段距离
boundaryGap: true,
// 修饰刻度标签的颜色即x坐标数据
axisLabel: {
// interval: 0, //强制显示所有x轴数据
// rotate: 30, //x轴坐标字体倾斜30度
color: "rgba(255, 255, 255, 1)",
},
axisTick: {
show: false, // 不显示坐标轴刻度线
},
// x坐标轴的颜色
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x轴分割线
},
yAxis: {
min: 0,
// max:20,
// // // min:'dataMin',
// // // max:'dataMax',
// name: "kwh", // 第一个 y 轴的单位描述
// 设置 name 的样式
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// 显示y坐标轴
axisLine: {
show: true,
lineStyle: {
color: "#365576", // 设置 y 轴线的颜色
},
},
//y轴分割线段数
// splitNumber: 10,
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
color: "#1a3d62", // 设置分割线的颜色
type: "dashed", // 设置分割线为虚线
},
},
},
series: [
{
type: "line",
// 拐点大小
symbolSize: 8,
},
],
};
//把配置项给实例对象
this.chartInstance.setOption(this.option, true);
},
echartsData() {
const now = new Date();
const endTime = now.toISOString().slice(0, 19).replace("T", " ");
const startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000)
.toISOString()
.slice(0, 19)
.replace("T", " ");
const params = {
timeType: "min",
startTime: startTime,
endTime: endTime,
systemType: "8",
pageNum: 0,
pageSize: 10,
};
fgdScrEnergy(params).then((res) => {
console.log("折线图返回值", res);
if (res.code === 200 && res.data && res.data.length > 0) {
const dataMap = {};
res.data.forEach((item) => {
const key = Object.keys(item)[0];
dataMap[key] = item[key];
});
const timeStrArr = dataMap.timeStrArr || [];
const so1Data = dataMap.so1 || [];
const so2Data = dataMap.so2 || [];
const loadCellData = dataMap.loadCell || [];
const allData = [...so1Data, ...so2Data, ...loadCellData].map(Number);
const maxValue = Math.max(...allData, 1);
const minValue = Math.min(...allData.filter(v => v > 0), 0);
this.chartInstance.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
formatter: function (params) {
var res = params[0].name + "<br/>";
for (var i = 0, l = params.length; i < l; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
var marker =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
params[i].color +
'"></span>';
var unit = seriesName.includes("SO2") ? "mg/m³" : "mg";
res +=
marker +
seriesName +
":" +
'<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value +
unit +
"</span><br>";
}
return res;
},
},
legend: {
show: true,
data: ["进SO2浓度", "出SO2浓度", "loadCell"],
textStyle: {
color: "#ffffff",
},
top: "0%",
},
grid: {
left: "8%",
right: "8%",
top: "15%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
data: timeStrArr,
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
},
yAxis: [
{
type: "value",
name: "mg/m³",
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
padding: [0, 0, 10, 0],
},
min: minValue * 0.9 || 0,
max: maxValue * 1.1,
interval: (maxValue * 1.1 - (minValue * 0.9 || 0)) / 5,
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed",
},
},
},
{
type: "value",
name: "mg",
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
padding: [0, 10, 0, 0],
},
min: minValue * 0.9 || 0,
max: maxValue * 1.1,
interval: (maxValue * 1.1 - (minValue * 0.9 || 0)) / 5,
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
show: false,
},
},
],
series: [
{
name: "进SO2浓度",
type: "line",
yAxisIndex: 0,
data: so1Data,
symbolSize: 8,
itemStyle: {
color: "#00CED1",
},
lineStyle: {
color: "#00CED1",
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0, 206, 209, 0.5)",
},
{
offset: 1,
color: "rgba(0, 206, 209, 0)",
},
],
global: false,
},
},
},
{
name: "出SO2浓度",
type: "line",
yAxisIndex: 0,
data: so2Data,
symbolSize: 8,
itemStyle: {
color: "#ffe21e",
},
lineStyle: {
color: "#ffe21e",
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255, 226, 30, 0.5)",
},
{
offset: 1,
color: "rgba(255, 226, 30, 0)",
},
],
global: false,
},
},
},
{
name: "loadCell",
type: "bar",
yAxisIndex: 1,
data: loadCellData,
barWidth: "40%",
itemStyle: {
color: "#1a69f1",
borderRadius: [4, 4, 0, 0],
},
},
],
});
this.chartInstance.resize();
}
});
},
},
};
</script>
<style lang="scss" scoped>
.charts {
margin-top: 20px;
width: 100%;
height: 250px;
}
</style>

312
src/views/components/sodaDailyDosage.vue
Unescape View File

@ -0,0 +1,312 @@
<template>
<div style="width: 100%; height: 100%">
<div class="charts" ref="chart_ref"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { fgdScrEnergy } from "@/api/desulfurization/energyAnalysis";
export default {
data() {
return {
energyTypes: [],
sharedIndex: 0,
chartInstance: null,
option: {},
colorList: [
{
color: "#00CED1",
offsetColor1: "rgba(0, 206, 209, 0.5)",
offsetColor2: "rgba(0, 206, 209, 0)",
},
{
color: "#ffe21e",
offsetColor1: "rgba(255,226,30, 0.5)",
offsetColor2: "rgba(255,226,30, 0)",
},
{
color: "#1a69f1",
offsetColor1: "rgba(26, 105, 241, 0.5)",
offsetColor2: "rgba(26, 105, 241, 0)",
},
{
color: "#2df499",
offsetColor1: "rgba(45,244,153, 0.5)",
offsetColor2: "rgba(45,244,153, 0)",
},
{
color: "#e87b4b",
offsetColor1: "rgba(232, 123, 75, 0.5)",
offsetColor2: "rgba(232, 123, 75, 0)",
},
],
};
},
mounted() {
this.initChart();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
this.echartsData();
},
destroyed() {
//取消监听器
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
// 选择日月年
handleEnter(index, event) {
console.log("index", index);
console.log("event", event);
this.chartInstance.dispose();
this.initChart();
this.sharedIndex = index;
// 使用 find 方法查找符合条件的对象
const chartsObj = this.energyTypes.find((item) => item.name === event);
const colorObj = this.colorList.find(
(_, currentIndex) => currentIndex === index
);
console.log("当前要渲染的数据对象", chartsObj);
console.log("当前要渲染的颜色对象", colorObj);
const titleFontSize = this.$refs.chart_ref.offsetWidth / 50;
let adapterOption = {};
// 添加折线的配置
adapterOption = {
tooltip: {
trigger: "axis",
// 自定义 tooltip 内容
formatter: function (params) {
var res = params[0].name + "<br/>";
for (var i = 0, l = params.length; i < l; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
var marker =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
params[i].color +
'"></span>';
// 根据不同德seriesName 返回不同的单位
if (chartsObj.unit) {
res +=
marker +
seriesName +
":" +
'<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value +
chartsObj.unit +
"</span><br>";
} else {
res +=
marker +
seriesName +
":" +
'<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value +
"</span><br>";
}
}
return res;
},
},
xAxis: {
data: chartsObj.timeStr,
// axisLabel: {
// fontSize: titleFontSize,
// },
},
yAxis: {
name: chartsObj.unit,
// nameTextStyle: {
// fontSize: titleFontSize,
// },
// axisLabel: {
// fontSize: titleFontSize,
// },
},
series: [
{
data: chartsObj.data,
name: event,
//折线颜色
itemStyle: {
color: colorObj.color, //折线的颜色
},
lineStyle: {
color: colorObj.color, //折线点的颜色
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colorObj.offsetColor1, // 渐变起始颜色
},
{
offset: 1,
color: colorObj.offsetColor2, // 渐变结束颜色
},
],
global: false, // 缺省为 false
},
},
},
],
};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance.setOption(adapterOption);
//手动的调用图标对象的resize才能产生效果
this.chartInstance.resize();
},
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
screenAdapter() {
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
const adapterOption = {};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance.setOption(adapterOption);
//手动的调用图标对象的resize才能产生效果
this.chartInstance.resize();
},
//初始化chartInstance对象
initChart() {
this.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = {
tooltip: {
trigger: "item",
},
legend: {
show: false,
},
grid: {
top: "15%",
left: "4%",
right: "6%",
bottom: "0%",
containLabel: true,
},
xAxis: {
type: "category",
//设置为true代表离零刻度间隔一段距离
boundaryGap: true,
// 修饰刻度标签的颜色即x坐标数据
axisLabel: {
// interval: 0, //强制显示所有x轴数据
// rotate: 30, //x轴坐标字体倾斜30度
color: "rgba(255, 255, 255, 1)",
},
axisTick: {
show: false, // 不显示坐标轴刻度线
},
// x坐标轴的颜色
axisLine: {
show: true,
lineStyle: {
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x轴分割线
},
yAxis: {
min: 0,
// max:20,
// // // min:'dataMin',
// // // max:'dataMax',
// name: "kwh", // 第一个 y 轴的单位描述
// 设置 name 的样式
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// 显示y坐标轴
axisLine: {
show: true,
lineStyle: {
color: "#365576", // 设置 y 轴线的颜色
},
},
//y轴分割线段数
// splitNumber: 10,
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
color: "#1a3d62", // 设置分割线的颜色
type: "dashed", // 设置分割线为虚线
},
},
},
series: [
{
type: "line",
// 拐点大小
symbolSize: 8,
},
],
};
//把配置项给实例对象
this.chartInstance.setOption(this.option, true);
},
echartsData() {
const now = new Date();
const endTime = now.toISOString().slice(0, 10);
const startTime = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
.toISOString()
.slice(0, 10);
const params = {
timeType: "day",
startTime: startTime,
endTime: endTime,
systemType: "8",
pageNum: 0,
pageSize: 10,
};
fgdScrEnergy(params).then((res) => {
console.log("折线图返回值", res);
if (res.code === 200 && res.data && res.data.length > 0) {
const dataMap = {};
res.data.forEach((item) => {
const key = Object.keys(item)[0];
dataMap[key] = item[key];
});
this.energyTypes = [
{
name: "小苏打日用量",
data: dataMap.loadCell || [],
timeStr: dataMap.timeStrArr || [],
unit: "mg",
},
];
if (this.energyTypes.length > 0) {
this.handleEnter(0, this.energyTypes[0].name);
}
}
});
},
},
};
</script>
<style lang="scss" scoped>
.charts {
margin-top: 20px;
width: 100%;
height: 250px;
}
</style>

2
src/views/desulfurization/desMonitor/desMonitorCenter.vue
Unescape View File

@ -4,7 +4,7 @@
<img class="title-left" src="../../../assets/images/title-left.png" alt="" /> <img class="title-left" src="../../../assets/images/title-left.png" alt="" />
<img class="title-center" @click="goSys" src="../../../assets/images/title-center.png" alt="" /> <img class="title-center" @click="goSys" src="../../../assets/images/title-center.png" alt="" />
<img class="title-right" src="../../../assets/images/title-right.png" alt="" /> <img class="title-right" src="../../../assets/images/title-right.png" alt="" />
<div class="sys-title" @click="goSys">铭汉空压热回收系统</div> <div class="sys-title" @click="goSys">铭汉脱硫系统</div>
<!-- logo --> <!-- logo -->
<img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" /> <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
<div class="nowTime">{{ formattedDate }}</div> <div class="nowTime">{{ formattedDate }}</div>

1046
src/views/desulfurization/energyAnalysis/index.vue
View File

File diff suppressed because it is too large Load Diff

348
src/views/index.vue
Unescape View File

@ -5,42 +5,25 @@
<div class="special-title">项目简介</div> <div class="special-title">项目简介</div>
</div> </div>
<div class="project-all"> <div class="project-all">
<img <img class="project-img" :src="imgUrl + projectObj.logo" @click="showDialog" alt="Base64 Image" />
class="project-img"
:src="imgUrl + projectObj.logo"
@click="showDialog"
alt="Base64 Image"
/>
<div class="project-li"> <div class="project-li">
<div class="list-con"> <div class="list-con">
<div class="project-left"> <div class="project-left">
<img <img class="left-icon" src="../assets/images/project-icon1.png" alt="" />
class="left-icon"
src="../assets/images/project-icon1.png"
alt=""
/>
<div class="project-name">项目名称</div> <div class="project-name">项目名称</div>
</div> </div>
<div class="project-right">{{ projectObj.proName }}</div> <div class="project-right">{{ projectObj.proName }}</div>
</div> </div>
<div class="list-con"> <div class="list-con">
<div class="project-left"> <div class="project-left">
<img <img class="left-icon" src="../assets/images/project-icon2.png" alt="" />
class="left-icon"
src="../assets/images/project-icon2.png"
alt=""
/>
<div class="project-name">建筑面积</div> <div class="project-name">建筑面积</div>
</div> </div>
<div class="project-right">{{ projectObj.buildingArea }}m³</div> <div class="project-right">{{ projectObj.buildingArea }}m³</div>
</div> </div>
<div class="list-con"> <div class="list-con">
<div class="project-left"> <div class="project-left">
<img <img class="left-icon" src="../assets/images/project-icon3.png" alt="" />
class="left-icon"
src="../assets/images/project-icon3.png"
alt=""
/>
<div class="project-name">运营地址</div> <div class="project-name">运营地址</div>
</div> </div>
<div class="project-right">{{ projectObj.proAddr }}</div> <div class="project-right">{{ projectObj.proAddr }}</div>
@ -49,11 +32,7 @@
<div class="project-li"> <div class="project-li">
<div class="list-con"> <div class="list-con">
<div class="project-left"> <div class="project-left">
<img <img class="left-icon" src="../assets/images/project-icon3.png" alt="" />
class="left-icon"
src="../assets/images/project-icon3.png"
alt=""
/>
<div class="project-name">项目运行开始时间</div> <div class="project-name">项目运行开始时间</div>
</div> </div>
<div class="project-right">{{ projectObj.operateStartTime }}</div> <div class="project-right">{{ projectObj.operateStartTime }}</div>
@ -61,68 +40,43 @@
</div> </div>
</div> </div>
</div> </div>
<div class="project-data"> <div class=" special-div" style="width: 100%">
<div class="special-div" style="width: 60%">
<div class="special-top"> <div class="special-top">
<div class="special-title">项目概况</div> <div class="special-title">脱硫系统</div>
</div> </div>
<div class="project-data">
<div class="project-data-left">
<div class="overview"> <div class="overview">
<div class="overview-li" @click="goEnergy"> <div class="overview-item" >
<div>总耗电量(kwh)</div> <div class="overview-label">反应前SO2浓度</div>
<div class="overview-details">{{ projectView.totalEle }}</div> <div class="overview-unit">(mg/m³)</div>
</div> <div class="overview-details">{{ projectView.beforeSO2 }}</div>
<div class="overview-li" @click="goEnergy"> </div>
<div>总热水补水(吨)</div> <div class="overview-divider"></div>
<div class="overview-details"> <div class="overview-item">
{{ projectView.totalWater }} <div class="overview-label">反应后SO2浓度</div>
</div> <div class="overview-unit">(mg/m³)</div>
</div>
<div class="overview-li" @click="goEnergy">
<div>总蒸汽流量(吨)</div>
<div class="overview-details"> <div class="overview-details">
{{ projectView.totalGas }} {{ projectView.afterSO2 }}
</div> </div>
</div> </div>
<div class="overview-li" @click="goEnergy">
<div>总产冷量(kw)</div>
<div class="overview-details">
{{ projectView.totalCold }}
</div>
</div> </div>
<div class="overview-li" @click="goEnergy">
<div>今年耗电量(kwh)</div>
<div class="overview-details">
{{ projectView.yearEle }}
</div> </div>
<div class="project-data-right">
<div class="tight-title">
最近30日小苏打日用量
</div> </div>
<div class="overview-li" @click="goEnergy"> <soda-daily-dosage></soda-daily-dosage>
<div>今年热水补水(吨)</div>
<div class="overview-details">
{{ projectView.yearWater }}
</div> </div>
</div> </div>
<div class="overview-li" @click="goEnergy"> <div class="project-data-right density">
<div>今年蒸汽流量(吨)</div> <div class="tight-title">
<div class="overview-details"> SO2最近24小时浓度与小苏打用量
{{ projectView.yearGas }}
</div> </div>
<density-and-dasage></density-and-dasage>
</div> </div>
<div class="overview-li" @click="goEnergy">
<div>今年产冷量(kw)</div>
<div class="overview-details">
{{ projectView.yearCold }}
</div> </div>
</div> <!-- <div class="project-bie">
</div>
</div>
<div class="special-div" style="width: 39%">
<div class="special-top">
<div class="special-title">冷源系统</div>
</div>
<view-energy></view-energy>
</div>
</div>
<div class="project-bie">
<div class="special-div"> <div class="special-div">
<div class="special-top"> <div class="special-top">
<div class="special-title">冷源能耗</div> <div class="special-title">冷源能耗</div>
@ -147,28 +101,13 @@
</div> </div>
<tem-meter :subData="temSys"></tem-meter> <tem-meter :subData="temSys"></tem-meter>
</div> </div>
</div> </div> -->
<el-dialog <el-dialog :visible.sync="dialogVisible" title="上传图片" width="500px" @close="addExpenseClose">
:visible.sync="dialogVisible"
title="上传图片"
width="500px"
@close="addExpenseClose"
>
<!-- 使用 el-upload 组件 --> <!-- 使用 el-upload 组件 -->
<el-upload <el-upload class="upload-demo" ref="uploadComponent" action="#" list-type="picture-card"
class="upload-demo" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeUpload" :limit="1"
ref="uploadComponent" :on-exceed="handleExceed" :on-change="handleFileChange" accept="image/png, image/jpeg"
action="#" :http-request="customHttpRequest">
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:limit="1"
:on-exceed="handleExceed"
:on-change="handleFileChange"
accept="image/png, image/jpeg"
:http-request="customHttpRequest"
>
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</el-upload> </el-upload>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -190,19 +129,15 @@ import {
viewProfile, viewProfile,
viewMainParams, viewMainParams,
} from "@/api/index"; } from "@/api/index";
import viewEnergy from "./components/viewEnergy.vue";
import ViewColdSys from "./components/viewColdSys.vue"; import SodaDailyDosage from "./components/sodaDailyDosage.vue";
import HotWater from "./components/hotWater.vue"; import DensityAndDasage from "./components/densityAndDasage.vue";
import AircAndWindcMeter from "./components/aircAndWindcMeter.vue";
import TemMeter from "./components/temMeter.vue";
export default { export default {
components: { components: {
viewEnergy,
ViewColdSys, SodaDailyDosage,
HotWater, DensityAndDasage
AircAndWindcMeter,
TemMeter,
}, },
data() { data() {
return { return {
@ -215,14 +150,8 @@ export default {
operateStartTime: "", operateStartTime: "",
}, },
projectView: { projectView: {
totalEle: "", beforeSO2: "",
totalWater: "", afterSO2: "",
totalGas: "",
totalCold: "",
yearEle: "",
yearWater: "",
yearGas: "",
yearCold: "",
}, },
dialogVisible: false, dialogVisible: false,
selectedFile: null, selectedFile: null,
@ -245,7 +174,6 @@ export default {
}, },
mounted() { mounted() {
this.getProject(); this.getProject();
this.getHomeData();
this.getSubData(); this.getSubData();
// // 在组件挂载后尝试进入全屏 // // 在组件挂载后尝试进入全屏
// setTimeout(() => { // setTimeout(() => {
@ -320,7 +248,7 @@ export default {
this.viewImageUrl = file.url; this.viewImageUrl = file.url;
}, },
// 上传成功 // 上传成功
handleUploadSuccess(response, file, fileList) {}, handleUploadSuccess(response, file, fileList) { },
// 处理文件 // 处理文件
handleFileChange(file, fileList) { handleFileChange(file, fileList) {
console.log("file", file); console.log("file", file);
@ -373,15 +301,7 @@ export default {
} }
}); });
}, },
// 项目概况 goEnergy() {
getHomeData() {
viewProfile().then((res) => {
if (res.code == 200) {
this.projectView = res.rows[0];
}
});
},
goEnergy(){
this.$router.push("/comprehensiveEnergy/systemEnergy") this.$router.push("/comprehensiveEnergy/systemEnergy")
}, },
//初始化chartInstance对象 //初始化chartInstance对象
@ -614,27 +534,20 @@ export default {
getSubData() { getSubData() {
viewMainParams().then((res) => { viewMainParams().then((res) => {
console.log("系统参数返回", res); console.log("系统参数返回", res);
console.log("冷源监控返回", res.rows[0]);
this.coldSys = [];
this.hotWaterSys = [];
this.airAndWindSys = [];
this.temSys = [];
if (res.code == 200 && res.rows) { if (res.code == 200 && res.rows) {
res.rows.forEach((val) => { console.log("rows数组:", res.rows);
if (val.name.includes("冷源")) { const desulfurSystem = res.rows.find(item => item.name === "脱硫系统");
this.coldSys = val.values; if (desulfurSystem && desulfurSystem.values) {
console.log("this.coldSys111111111111", this.coldSys); const beforeSO2 = desulfurSystem.values.find(v => v.name === "反应前SO2浓度");
} const afterSO2 = desulfurSystem.values.find(v => v.name === "反应后SO2浓度");
if (val.name.includes("热水")) { console.log("反应前SO2:", beforeSO2);
this.hotWaterSys = val.values; console.log("反应后SO2:", afterSO2);
} this.projectView = {
if (val.name.includes("风柜")) { beforeSO2: beforeSO2 ? beforeSO2.value : "",
this.airAndWindSys = val.values; afterSO2: afterSO2 ? afterSO2.value : ""
} };
if (val.name.includes("温度")) { console.log("最终projectView:", this.projectView);
this.temSys = val.values;
} }
});
} }
}); });
}, },
@ -649,6 +562,7 @@ export default {
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
padding: 0.35rem; padding: 0.35rem;
.project-img { .project-img {
width: 1.4rem; width: 1.4rem;
height: 1.4rem; height: 1.4rem;
@ -657,24 +571,29 @@ export default {
margin-right: 0.4rem; margin-right: 0.4rem;
cursor: pointer; cursor: pointer;
} }
.project-li { .project-li {
width: calc((100% - 0.7rem) / 2); width: calc((100% - 0.7rem) / 2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.list-con { .list-con {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.project-left { .project-left {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
.left-icon { .left-icon {
width: 0.2rem; width: 0.2rem;
height: 0.2rem; height: 0.2rem;
} }
.project-name { .project-name {
font-family: SourceHanSansCN-Regular; font-family: SourceHanSansCN-Regular;
font-size: 0.18rem; font-size: 0.18rem;
@ -684,6 +603,7 @@ export default {
margin-left: 0.15rem; margin-left: 0.15rem;
} }
} }
.project-right { .project-right {
font-family: SourceHanSansCN-Regular; font-family: SourceHanSansCN-Regular;
font-size: 0.18rem; font-size: 0.18rem;
@ -692,82 +612,182 @@ export default {
} }
} }
} }
.project-li:nth-last-child(1) { .project-li:nth-last-child(1) {
margin-left: 1.5rem; margin-left: 1.5rem;
} }
} }
.project-data {
.special-div {
margin: 16px 0;
.project-data {
width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
justify-content: space-between; justify-content: space-between;
margin: 16px 0; gap: 0.2rem;
padding: 0.2rem;
min-height: 4rem;
.project-data-left {
width: 30%;
flex-shrink: 0;
display: flex;
flex-direction: column;
.overview { .overview {
flex: 1;
width: 100%; width: 100%;
padding-top: 0.32rem;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; align-items: stretch;
flex-wrap: wrap;
.overview-li { .overview-item {
cursor: pointer; cursor: pointer;
width: calc(25%); flex: 1;
height: 1.65rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-image: url(../assets/images/overview-img.png); padding: 0.25rem 0;
background-repeat: no-repeat; background: rgba(21, 225, 253, 0.08);
background-size: 1.65rem 1.65rem; border-radius: 0.12rem;
background-position: center center; box-shadow: 0 0 20px rgba(11, 136, 185, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
margin-bottom: 0.3rem;
.overview-label {
font-family: SourceHanSansCN-Regular; font-family: SourceHanSansCN-Regular;
font-size: 0.15rem; font-size: 0.16rem;
color: #ffffff; color: rgba(255, 255, 255, 1);
letter-spacing: 0.02rem;
}
.overview-unit {
font-family: SourceHanSansCN-Regular;
font-size: 0.14rem;
color: rgba(255, 255, 255, 0.6);
margin-top: 0.03rem;
}
.overview-details { .overview-details {
font-family: DIN-Bold; font-family: DIN-Bold;
font-size: 0.2rem; font-size: 0.28rem;
color: #15e1fd; color: #15e1fd;
margin-top: 0.05rem; margin-top: 0.1rem;
text-shadow: 0 0 15px rgba(21, 225, 253, 0.5);
letter-spacing: 0.01rem;
}
}
.overview-divider {
height: 1px;
margin: 0.1rem 0.2rem;
background: linear-gradient(90deg, transparent 0%, rgba(21, 225, 253, 0.3) 50%, transparent 100%);
}
}
} }
} }
.project-data-right {
width: 69%;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: rgba(21, 225, 253, 0.08);
border-radius: 0.12rem;
box-shadow: 0 0 20px rgba(11, 136, 185, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
padding: 0 0 20px 0;
.tight-title {
font-family: SourceHanSansCN-Bold;
font-size: 20px;
color: #e9ecea;
font-weight: 700;
padding:15px 15px 15px 35px;
margin: 0;
position: relative;
text-shadow: 0 0 15px rgba(21, 225, 253, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
letter-spacing: 0.03rem;
background: rgba(32, 185, 245, 0.1);
&::before {
content: '';
position: absolute;
top: 50%;
left: 15px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(8, 238, 207);
box-shadow: 0 0 10px rgba(8, 238, 207, 0.8);
transform: translateY(-50%);
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(15, 253, 233, 0.4) 50%, transparent 100%);
}
}
> :not(.tight-title) {
flex: 1;
min-height: 0;
}
}
.density {
width: calc(100% - 0.4rem);
margin: 0 0.2rem 0.2rem 0.2rem;
} }
} }
.chartsDiv { .chartsDiv {
width: 100%; width: 100%;
height: 4rem; height: 4rem;
} }
.project-bie { .project-bie {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
justify-content: space-between; justify-content: space-between;
.special-div { .special-div {
width: 24.5%; width: 24.5%;
} }
} }
@media (max-width: 1485px) { @media (max-width: 1485px) {
.overview-li { .overview-li {
width: calc(33.33%) !important; width: calc(50%) !important;
height: 2.5rem !important; height: 2.5rem !important;
background-size: 2.5rem 2.5rem !important; background-size: 2.5rem 2.5rem !important;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
font-size: 0.22rem !important; font-size: 0.22rem !important;
.overview-details { .overview-details {
font-size: 0.27rem !important; font-size: 0.27rem !important;
} }
} }
.project-bie { .project-bie {
flex-wrap: wrap !important; flex-wrap: wrap !important;
.special-div { .special-div {
width: 49.5% !important; width: 49.5% !important;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
} }
} }
// 媒体查询，适配大于2000px分辨率的大屏样式 // 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) { @media (min-width: 2000px) {}
}
</style> </style>

Write Preview
Loading…
Cancel
Save