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
Unified 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. 243
      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 = '/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: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 VUE_CLI_BABEL_TRANSPILE_MODULES = true

2
src/utils/global.js
Unescape View File

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

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

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

243
src/views/index.vue
Unescape View File

@ -5,25 +5,32 @@
<div class="special-title">项目简介</div> <div class="special-title">项目简介</div>
</div> </div>
<div class="project-all"> <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="project-li">
<div class="list-con"> <div class="list-con">
<div class="project-left"> <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 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 class="left-icon" src="../assets/images/project-icon2.png" alt="" /> <img
<div class="project-name">建筑面积</div> class="left-icon"
</div> src="../assets/images/project-icon3.png"
<div class="project-right">{{ projectObj.buildingArea }}m³</div> alt=""
</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 class="project-name">运营地址</div>
</div> </div>
<div class="project-right">{{ projectObj.proAddr }}</div> <div class="project-right">{{ projectObj.proAddr }}</div>
@ -32,7 +39,22 @@
<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 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 class="project-name">项目运行开始时间</div>
</div> </div>
<div class="project-right">{{ projectObj.operateStartTime }}</div> <div class="project-right">{{ projectObj.operateStartTime }}</div>
@ -40,139 +62,39 @@
</div> </div>
</div> </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-top">
<div class="special-title">中央空调冷源系统(实时EER系数)</div> <div class="special-title">中央空调冷源系统(实时EER系数)</div>
</div> </div>
<sys-energy ref="sysEnergy"></sys-energy> <sys-energy ref="sysEnergy"></sys-energy>
</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-top">
<div class="special-title">空压热回收系统</div> <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>
<div class="project-bie"> <view-energy></view-energy>
<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>
<div class="tem-li"> <el-dialog
<div class="tem-title">离心机出水温度</div> :visible.sync="dialogVisible"
<div class="tem-detail" v-html="getTempDisplay('离心机出水温度', systemData)"></div> title="上传图片"
</div> width="500px"
<div class="tem-li"> @close="addExpenseClose"
<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>
</div>
<el-dialog :visible.sync="dialogVisible" title="上传图片" width="500px" @close="addExpenseClose">
<!-- 使用 el-upload 组件 --> <!-- 使用 el-upload 组件 -->
<el-upload class="upload-demo" ref="uploadComponent" action="#" list-type="picture-card" <el-upload
:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeUpload" :limit="1" class="upload-demo"
:on-exceed="handleExceed" :on-change="handleFileChange" accept="image/png, image/jpeg" ref="uploadComponent"
:http-request="customHttpRequest"> 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> <i class="el-icon-plus"></i>
</el-upload> </el-upload>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -191,12 +113,14 @@ import { introduction, changeLogo, ersDatas } from "@/api/index";
import ViewColdSys from "./components/viewColdSys.vue"; import ViewColdSys from "./components/viewColdSys.vue";
import HotWater from "./components/hotWater.vue"; import HotWater from "./components/hotWater.vue";
import SysEnergy from "./components/sysEnergy.vue"; import SysEnergy from "./components/sysEnergy.vue";
import ViewEnergy from "./components/viewEnergy.vue";
export default { export default {
components: { components: {
ViewColdSys, ViewColdSys,
HotWater, HotWater,
SysEnergy SysEnergy,
ViewEnergy,
}, },
data() { data() {
return { return {
@ -285,7 +209,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);
@ -433,11 +357,11 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: center;
padding: 0.35rem; padding: 0.35rem;
.project-img { .project-img {
width: 1.4rem; width: 1.7rem;
height: 1.4rem; height: 1.4rem;
border-radius: 0.1rem; border-radius: 0.1rem;
border: solid 1px #0163a8; border: solid 1px #0163a8;
@ -492,9 +416,11 @@ export default {
} }
.sysBg { .sysBg {
background: linear-gradient(180deg, background: linear-gradient(
180deg,
rgba(0, 68, 126, 0.45) 0%, rgba(0, 68, 126, 0.45) 0%,
rgba(0, 40, 80, 0.2) 100%); rgba(0, 40, 80, 0.2) 100%
);
border: 1px solid rgba(0, 136, 240, 0.25); border: 1px solid rgba(0, 136, 240, 0.25);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@ -508,9 +434,11 @@ export default {
left: 0; left: 0;
width: 40px; width: 40px;
height: 40px; height: 40px;
background: radial-gradient(circle at top left, background: radial-gradient(
circle at top left,
rgba(0, 180, 255, 0.15) 0%, rgba(0, 180, 255, 0.15) 0%,
transparent 70%); transparent 70%
);
pointer-events: none; pointer-events: none;
} }
@ -522,9 +450,11 @@ export default {
right: 0; right: 0;
width: 60px; width: 60px;
height: 60px; height: 60px;
background: radial-gradient(circle at bottom right, background: radial-gradient(
circle at bottom right,
rgba(0, 136, 240, 0.1) 0%, rgba(0, 136, 240, 0.1) 0%,
transparent 70%); transparent 70%
);
pointer-events: none; pointer-events: none;
} }
@ -536,9 +466,11 @@ export default {
color: #ffffff; color: #ffffff;
letter-spacing: 2px; letter-spacing: 2px;
position: relative; position: relative;
background: linear-gradient(90deg, background: linear-gradient(
90deg,
rgba(0, 121, 206, 0.5) 0%, rgba(0, 121, 206, 0.5) 0%,
rgba(0, 121, 206, 0.08) 100%); rgba(0, 121, 206, 0.08) 100%
);
border-bottom: 1px solid rgba(0, 136, 240, 0.2); border-bottom: 1px solid rgba(0, 136, 240, 0.2);
// 标题左侧装饰竖条 // 标题左侧装饰竖条
@ -550,9 +482,7 @@ export default {
transform: translateY(-50%); transform: translateY(-50%);
width: 3px; width: 3px;
height: 60%; height: 60%;
background: linear-gradient(180deg, background: linear-gradient(180deg, #00b4ff 0%, #0079ce 100%);
#00b4ff 0%,
#0079ce 100%);
border-radius: 2px; border-radius: 2px;
box-shadow: 0 0 6px rgba(0, 180, 255, 0.6); box-shadow: 0 0 6px rgba(0, 180, 255, 0.6);
} }
@ -582,7 +512,6 @@ export default {
justify-content: space-between; justify-content: space-between;
margin: 20px; margin: 20px;
.overview { .overview {
width: 100%; width: 100%;
padding: 30px 20px 5px 20px; padding: 30px 20px 5px 20px;
@ -605,10 +534,12 @@ export default {
font-size: 15px; font-size: 15px;
color: #ffffff; color: #ffffff;
/* 从 rgba(41, 128, 185, 0.8) 渐变到透明 */ /* 从 rgba(41, 128, 185, 0.8) 渐变到透明 */
background: linear-gradient(to bottom, background: linear-gradient(
to bottom,
rgba(31, 100, 146, 0.6) 0%, rgba(31, 100, 146, 0.6) 0%,
rgba(33, 65, 87, 0.3) 50%, rgba(33, 65, 87, 0.3) 50%,
rgba(40, 62, 77, 0) 100%); rgba(40, 62, 77, 0) 100%
);
border-radius: 8px; border-radius: 8px;
padding: 5px; padding: 5px;
color: white; color: white;
@ -732,8 +663,10 @@ export default {
} }
} }
@media (max-width: 1485px) {} @media (max-width: 1485px) {
}
// 媒体查询，适配大于2000px分辨率的大屏样式 // 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {} @media (min-width: 2000px) {
}
</style> </style>

Write Preview
Loading…
Cancel
Save