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

修改首页资料显示位置、首页添加能耗分析

blvilla_ers
selia-zx 3 weeks ago
parent
d897bf8f56
commit
89b245cbe3
4 changed files with 155 additions and 177 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      .env.development
  2. 2
      src/utils/global.js
  3. 67
      src/views/components/viewEnergy.vue
  4. 255
      src/views/index.vue

8
.env.development
Unescape View File

@ -6,12 +6,12 @@ ENV = 'development'
# 开发环境
# VUE_APP_BASE_API = '/dev-api'
# 后台
VUE_APP_BASE_API = 'http://192.168.1.222:8080'
# 梅州云端
# # 后台
# VUE_APP_BASE_API = 'http://192.168.1.222:8080'
# # 梅州云端
# VUE_APP_BASE_API = 'http://106.55.173.225:8091'
# 保利山庄
# VUE_APP_BASE_API = 'http://106.55.173.225:8092'
VUE_APP_BASE_API = 'http://106.55.173.225:8093'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

2
src/utils/global.js
Unescape View File

@ -1,6 +1,6 @@
// 图片url
export const imgUrl = "http://106.55.173.225:8090";
export const imgUrl = "http://106.55.173.225:8093";
export default {

67
src/views/components/viewEnergy.vue
Unescape View File

@ -2,13 +2,8 @@
<div style="width: 100%; height: 100%">
<div class="right-table">
<div class="choice">
<div
class="mr20"
v-for="(item, index) in energyTypes"
:key="index"
@click="handleEnter(index, item.name)"
:class="{ timeStyle: sharedIndex == index }"
>
<div class="mr20" v-for="(item, index) in energyTypes" :key="index" @click="handleEnter(index, item.name)"
:class="{ timeStyle: sharedIndex == index }">
{{ item.name }}
</div>
</div>
@ -81,12 +76,16 @@ export default {
);
console.log("当前要渲染的数据对象", chartsObj);
console.log("当前要渲染的颜色对象", colorObj);
const titleFontSize = this.$refs.chart_ref.offsetWidth / 50;
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
let adapterOption = {};
// 添加折线的配置
adapterOption = {
tooltip: {
trigger: "axis",
textStyle: {
// 设置提示框内文字的大小
fontSize: titleFontSize,
},
// 自定义 tooltip 内容
formatter: function (params) {
var res = params[0].name + "<br/>";
@ -139,9 +138,13 @@ export default {
{
data: chartsObj.data,
name: event,
// 拐点大小
symbolSize: titleFontSize * 0.5,
//折线颜色
itemStyle: {
color: colorObj.color, //折线的颜色
// 设置折线的厚度
width: titleFontSize * 0.1,
},
lineStyle: {
color: colorObj.color, //折线点的颜色
@ -166,6 +169,46 @@ export default {
global: false, // 缺省为 false
},
},
markPoint: {
data: [
{
type: 'max',
name: '最大值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + chartsObj.unit;
}
}
},
{
type: 'min',
name: '最小值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + chartsObj.unit;
}
}
}
],
label: {
fontSize: titleFontSize * 0.8,
color: colorObj.color,
fontWeight: 'bold',
padding: [4, 8],
borderRadius: 4,
backgroundColor: 'rgba(0, 0, 0, 0.7)',
// symbolSize: titleFontSize * 0.8,
offset: [0, -titleFontSize * 1.5]
},
itemStyle: {
color: colorObj.color
},
symbolSize: titleFontSize * 1
}
},
],
};
@ -291,27 +334,29 @@ export default {
.right-table {
padding: 27px 15px 35px 15px;
}
.choice {
margin-left: 0 !important;
}
.mr20 {
width: 92px;
padding: 2px;
}
.charts {
margin-top: 20px;
width: 100%;
height: 300px;
}
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.right-table {
padding: 0.27rem 0.15rem 0.25rem 0.15rem !important;
}
.mr20 {
width: 0.92rem !important;
padding: 0.02rem !important;
}
.charts {
margin-top: 0.2rem !important;
height: 3rem !important;

255
src/views/index.vue
Unescape View File

@ -5,25 +5,32 @@
<div class="special-title">项目简介</div>
</div>
<div class="project-all">
<img class="project-img" :src="imgUrl + projectObj.logo" @click="showDialog" alt="Base64 Image" />
<img
class="project-img"
:src="imgUrl + projectObj.logo"
@click="showDialog"
alt="Base64 Image"
/>
<div class="project-li">
<div class="list-con">
<div class="project-left">
<img class="left-icon" src="../assets/images/project-icon1.png" alt="" />
<img
class="left-icon"
src="../assets/images/project-icon1.png"
alt=""
/>
<div class="project-name">项目名称</div>
</div>
<div class="project-right">{{ projectObj.proName }}</div>
</div>
<div class="list-con">
<div class="project-left">
<img class="left-icon" src="../assets/images/project-icon2.png" alt="" />
<div class="project-name">建筑面积</div>
</div>
<div class="project-right">{{ projectObj.buildingArea }}m³</div>
</div>
<div class="list-con">
<div class="project-left">
<img class="left-icon" src="../assets/images/project-icon3.png" alt="" />
<img
class="left-icon"
src="../assets/images/project-icon3.png"
alt=""
/>
<div class="project-name">运营地址</div>
</div>
<div class="project-right">{{ projectObj.proAddr }}</div>
@ -32,7 +39,22 @@
<div class="project-li">
<div class="list-con">
<div class="project-left">
<img class="left-icon" src="../assets/images/project-icon3.png" alt="" />
<img
class="left-icon"
src="../assets/images/project-icon2.png"
alt=""
/>
<div class="project-name">建筑面积</div>
</div>
<div class="project-right">{{ projectObj.buildingArea }}m³</div>
</div>
<div class="list-con">
<div class="project-left">
<img
class="left-icon"
src="../assets/images/project-icon3.png"
alt=""
/>
<div class="project-name">项目运行开始时间</div>
</div>
<div class="project-right">{{ projectObj.operateStartTime }}</div>
@ -40,139 +62,39 @@
</div>
</div>
</div>
<div class=" special-div" style="width: 100%;margin-top: 20px;">
<div class="special-div" style="width: 100%; margin-top: 20px">
<div class="special-top">
<div class="special-title">中央空调冷源系统(实时EER系数)</div>
</div>
<sys-energy ref="sysEnergy"></sys-energy>
</div>
<div class=" special-div" style="width: 100%;margin-top: 20px;">
<div class="special-div" style="width: 100%; margin-top: 20px">
<div class="special-top">
<div class="special-title">空压热回收系统</div>
</div>
<div class="project-data">
<div class="sysBg" style="width: 49.4%">
<div class="sysBg-title">出水温度</div>
<div class="overview">
<div class="overview-li" @click="goEnergy">
<div>离心机高温出水温度</div>
<div class="overview-details" v-html="getTempDisplay('离心机高温出水温度', outWaterTemperature)"></div>
</div>
<div class="overview-li" @click="goEnergy">
<div>中温换热出水温度</div>
<div class="overview-details" v-html="getTempDisplay('中温换热出水温度', outWaterTemperature)"></div>
</div>
<div class="overview-li" @click="goEnergy">
<div>低温1换热出水温度</div>
<div class="overview-details" v-html="getTempDisplay('低温1换热出水温度', outWaterTemperature)"></div>
</div>
<div class="overview-li" @click="goEnergy">
<div>低温2换热出水温度</div>
<div class="overview-details" v-html="getTempDisplay('低温2换热出水温度', outWaterTemperature)"></div>
</div>
</div>
</div>
<div class="sysBg" style="width: 49.4%">
<div class="sysBg-title">热量数据</div>
<div class="overview">
<div class="overview-li" @click="goEnergy">
<div>生产累计热量</div>
<div class="overview-details">
{{ heatData.productionHeatSum }}kwh
</div>
</div>
<div class="overview-li" @click="goEnergy">
<div>散热累计热量</div>
<div class="overview-details">
{{ heatData.dissipationHeatSum }}kwh
</div>
</div>
<div class="overview-li" @click="goEnergy">
<div>总热量回收</div>
<div class="overview-details">
{{ heatData.totalHeatRecoverySum }}kwh
</div>
</div>
<div class="overview-li" @click="goEnergy">
<div>热利用率</div>
<div class="overview-details">{{ heatData.heatUtilization }}%</div>
</div>
</div>
</div>
</div>
<div class="project-bie">
<div class="sysBg" style="width: 49.4%">
<div class="sysBg-title">系统数据</div>
<div class="hot-tem">
<div class="tem-li">
<div class="tem-title">离心机入口温度</div>
<div class="tem-detail" v-html="getTempDisplay('离心机入口温度', systemData)"></div>
</div>
<div class="tem-li">
<div class="tem-title">离心机出水温度</div>
<div class="tem-detail" v-html="getTempDisplay('离心机出水温度', systemData)"></div>
</div>
<div class="tem-li">
<div class="tem-title">保障进水温度</div>
<div class="tem-detail" v-html="getTempDisplay('保障进水温度', systemData)"></div>
</div>
</div>
<div class="pressure">
<view-cold-sys :subData="getDeviceData('离心机进水压力')" :title="'离心机进水压力'"></view-cold-sys>
<view-cold-sys :subData="getDeviceData('离心机出水压力')" :title="'离心机出水压力'"></view-cold-sys>
<view-cold-sys :subData="getDeviceData('离心机压差')" :title="'离心机压差'"></view-cold-sys>
</div>
</div>
<div class="bir-right">
<div class="sysBg">
<div class="sysBg-title">阀门开度</div>
<hot-water :subData="valveData"></hot-water>
</div>
<div class="later-data">
<div class="sysBg" style="width:49%">
<div class="sysBg-title">热回收数据</div>
<div class="hot-data">
<div class="hot-li">
<div class="hot-title">瞬时热量:</div>
<div class="hot-detail">{{ heatRecoveryData.instantaneousHeatSum }}kw</div>
</div>
<div class="hot-li">
<div class="hot-title">日累计热量:</div>
<div class="hot-detail">{{ heatRecoveryData.dailyAccumulatedHeat }}kwh</div>
</div>
<div class="hot-li">
<div class="hot-title">累计热量:</div>
<div class="hot-detail">{{ heatRecoveryData.accumulatedHeatSum }}kwh</div>
</div>
</div>
</div>
<div class="sysBg" style="width:49%">
<div class="sysBg-title">应用测数据</div>
<div class="hot-data">
<div class="hot-li">
<div class="hot-title">瞬时热量:</div>
<div class="hot-detail">{{ applicationData.instantaneousHeatSum }}kw</div>
</div>
<div class="hot-li">
<div class="hot-title">日累计热量:</div>
<div class="hot-detail">{{ applicationData.dailyAccumulatedHeat }}kwh</div>
</div>
<div class="hot-li">
<div class="hot-title">累计热量:</div>
<div class="hot-detail">{{ applicationData.accumulatedHeatSum }}kwh</div>
</div>
</div>
</div>
</div>
</div>
<div class="special-title">能耗分析</div>
</div>
<view-energy></view-energy>
</div>
<el-dialog :visible.sync="dialogVisible" title="上传图片" width="500px" @close="addExpenseClose">
<el-dialog
:visible.sync="dialogVisible"
title="上传图片"
width="500px"
@close="addExpenseClose"
>
<!-- 使用 el-upload 组件 -->
<el-upload class="upload-demo" ref="uploadComponent" action="#" 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">
<el-upload
class="upload-demo"
ref="uploadComponent"
action="#"
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>
</el-upload>
<div slot="footer" class="dialog-footer">
@ -191,12 +113,14 @@ import { introduction, changeLogo, ersDatas } from "@/api/index";
import ViewColdSys from "./components/viewColdSys.vue";
import HotWater from "./components/hotWater.vue";
import SysEnergy from "./components/sysEnergy.vue";
import ViewEnergy from "./components/viewEnergy.vue";
export default {
components: {
ViewColdSys,
HotWater,
SysEnergy
SysEnergy,
ViewEnergy,
},
data() {
return {
@ -285,7 +209,7 @@ export default {
this.viewImageUrl = file.url;
},
// 上传成功
handleUploadSuccess(response, file, fileList) { },
handleUploadSuccess(response, file, fileList) {},
// 处理文件
handleFileChange(file, fileList) {
console.log("file", file);
@ -433,11 +357,11 @@ export default {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
align-items: center;
padding: 0.35rem;
.project-img {
width: 1.4rem;
width: 1.7rem;
height: 1.4rem;
border-radius: 0.1rem;
border: solid 1px #0163a8;
@ -492,9 +416,11 @@ export default {
}
.sysBg {
background: linear-gradient(180deg,
rgba(0, 68, 126, 0.45) 0%,
rgba(0, 40, 80, 0.2) 100%);
background: linear-gradient(
180deg,
rgba(0, 68, 126, 0.45) 0%,
rgba(0, 40, 80, 0.2) 100%
);
border: 1px solid rgba(0, 136, 240, 0.25);
border-radius: 8px;
overflow: hidden;
@ -508,9 +434,11 @@ export default {
left: 0;
width: 40px;
height: 40px;
background: radial-gradient(circle at top left,
rgba(0, 180, 255, 0.15) 0%,
transparent 70%);
background: radial-gradient(
circle at top left,
rgba(0, 180, 255, 0.15) 0%,
transparent 70%
);
pointer-events: none;
}
@ -522,9 +450,11 @@ export default {
right: 0;
width: 60px;
height: 60px;
background: radial-gradient(circle at bottom right,
rgba(0, 136, 240, 0.1) 0%,
transparent 70%);
background: radial-gradient(
circle at bottom right,
rgba(0, 136, 240, 0.1) 0%,
transparent 70%
);
pointer-events: none;
}
@ -536,9 +466,11 @@ export default {
color: #ffffff;
letter-spacing: 2px;
position: relative;
background: linear-gradient(90deg,
rgba(0, 121, 206, 0.5) 0%,
rgba(0, 121, 206, 0.08) 100%);
background: linear-gradient(
90deg,
rgba(0, 121, 206, 0.5) 0%,
rgba(0, 121, 206, 0.08) 100%
);
border-bottom: 1px solid rgba(0, 136, 240, 0.2);
// 标题左侧装饰竖条
@ -550,9 +482,7 @@ export default {
transform: translateY(-50%);
width: 3px;
height: 60%;
background: linear-gradient(180deg,
#00b4ff 0%,
#0079ce 100%);
background: linear-gradient(180deg, #00b4ff 0%, #0079ce 100%);
border-radius: 2px;
box-shadow: 0 0 6px rgba(0, 180, 255, 0.6);
}
@ -582,7 +512,6 @@ export default {
justify-content: space-between;
margin: 20px;
.overview {
width: 100%;
padding: 30px 20px 5px 20px;
@ -605,10 +534,12 @@ export default {
font-size: 15px;
color: #ffffff;
/* 从 rgba(41, 128, 185, 0.8) 渐变到透明 */
background: linear-gradient(to bottom,
rgba(31, 100, 146, 0.6) 0%,
rgba(33, 65, 87, 0.3) 50%,
rgba(40, 62, 77, 0) 100%);
background: linear-gradient(
to bottom,
rgba(31, 100, 146, 0.6) 0%,
rgba(33, 65, 87, 0.3) 50%,
rgba(40, 62, 77, 0) 100%
);
border-radius: 8px;
padding: 5px;
color: white;
@ -732,8 +663,10 @@ export default {
}
}
@media (max-width: 1485px) {}
@media (max-width: 1485px) {
}
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {}
@media (min-width: 2000px) {
}
</style>

Write Preview
Loading…
Cancel
Save