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

1.统一累积冷量单位kwh，瞬时冷量单位kw 

2.首页、中央热水-项目总览、能源分析页面图表添加最大最小值
dev
selia-zx 1 week ago
parent
083dd6fdbc
commit
e30daf2a0c
12 changed files with 380 additions and 151 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. 4
      src/views/centerairC/energyAnalysis/components/energyAnalysis.vue
  2. 4
      src/views/centerairC/energyAnalysis/components/qnqAnalysis.vue
  3. 4
      src/views/centerairC/energyAnalysis/components/ynyAnalysis.vue
  4. 4
      src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue
  5. 6
      src/views/centerairC/overview/index.vue
  6. 110
      src/views/components/monitor/hotWaterMonitor.vue
  7. 54
      src/views/components/viewEnergy.vue
  8. 51
      src/views/hotWater/energyAnalysis/components/energyReport.vue
  9. 94
      src/views/hotWater/energyAnalysis/components/temReport.vue
  10. 98
      src/views/hotWater/energyAnalysis/components/waterReport.vue
  11. 98
      src/views/hotWater/overview/index.vue
  12. 4
      src/views/index.vue

4
src/views/centerairC/energyAnalysis/components/energyAnalysis.vue
Unescape View File

@ -124,7 +124,7 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td v-if="coldData">制冷量(kwr)</td> <td v-if="coldData">制冷量(kwh)</td>
<td v-for="(item, index) in coldData" :key="index"> <td v-for="(item, index) in coldData" :key="index">
{{ item }} {{ item }}
</td> </td>
@ -454,7 +454,7 @@ export default {
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value + value +
" " + " " +
"kwr" + "kw" +
"</span><br>"; "</span><br>";
} else if (seriesName === "瞬时功率") { } else if (seriesName === "瞬时功率") {
res += res +=

4
src/views/centerairC/energyAnalysis/components/qnqAnalysis.vue
Unescape View File

@ -414,7 +414,7 @@ export default {
console.log("Max2", Max2); console.log("Max2", Max2);
// 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变 // 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变
if (this.timeIndex2 == 0) { if (this.timeIndex2 == 0) {
this.unitValue = "(kwr)"; this.unitValue = "(kwh)";
} else if (this.timeIndex2 == 1) { } else if (this.timeIndex2 == 1) {
this.unitValue = "(kwh)"; this.unitValue = "(kwh)";
} else { } else {
@ -553,7 +553,7 @@ export default {
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value + value +
" " + " " +
"kwr" + "kwh" +
"</span><br>"; "</span><br>";
} else if (seriesName === "上期") { } else if (seriesName === "上期") {
res += res +=

4
src/views/centerairC/energyAnalysis/components/ynyAnalysis.vue
Unescape View File

@ -411,7 +411,7 @@ export default {
console.log("Max2", Max2); console.log("Max2", Max2);
// 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变 // 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变
if (this.timeIndex2 == 0) { if (this.timeIndex2 == 0) {
this.unitValue = "(kwr)"; this.unitValue = "(kwh)";
} else if (this.timeIndex2 == 1) { } else if (this.timeIndex2 == 1) {
this.unitValue = "(kwh)"; this.unitValue = "(kwh)";
} else { } else {
@ -558,7 +558,7 @@ export default {
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value + value +
" " + " " +
"kwr" + "kwh" +
"</span><br>"; "</span><br>";
} else if (seriesName === "上期") { } else if (seriesName === "上期") {
res += res +=

4
src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue
Unescape View File

@ -414,7 +414,7 @@ export default {
// console.log("Max2", Max2); // console.log("Max2", Max2);
// 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变 // 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变
if (this.timeIndex2 == 0) { if (this.timeIndex2 == 0) {
this.unitValue = "(kwr)"; this.unitValue = "(kwh)";
} else if (this.timeIndex2 == 1) { } else if (this.timeIndex2 == 1) {
this.unitValue = "(kwh)"; this.unitValue = "(kwh)";
} else { } else {
@ -565,7 +565,7 @@ export default {
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value + value +
" " + " " +
"kwr" + "kwh" +
"</span><br>"; "</span><br>";
} else if ( } else if (
(seriesName === "本期" || seriesName === "同期") && (seriesName === "本期" || seriesName === "同期") &&

6
src/views/centerairC/overview/index.vue
Unescape View File

@ -109,7 +109,7 @@
<div class="table-content" style="width: 100%"> <div class="table-content" style="width: 100%">
<el-table :data="tableData" style="width: 100%" stripe> <el-table :data="tableData" style="width: 100%" stripe>
<el-table-column prop="date" label="时间"> </el-table-column> <el-table-column prop="date" label="时间"> </el-table-column>
<el-table-column prop="coldData" label="制冷量(kwr)"> <el-table-column prop="coldData" label="制冷量(kwh)">
</el-table-column> </el-table-column>
<el-table-column prop="electData" label="用电量(kwh)"> <el-table-column prop="electData" label="用电量(kwh)">
</el-table-column> </el-table-column>
@ -155,7 +155,7 @@
</tr> </tr>
<tr> <tr>
<th align="center">时间</th> <th align="center">时间</th>
<th align="center">制冷量(kwr)</th> <th align="center">制冷量(kwh)</th>
<th align="center">用电量(kwh)</th> <th align="center">用电量(kwh)</th>
<th align="center">EER</th> <th align="center">EER</th>
</tr> </tr>
@ -579,7 +579,7 @@ export default {
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value + value +
" " + " " +
"kwr" + "kwh" +
"</span><br>"; "</span><br>";
} else if (seriesName === "用电量") { } else if (seriesName === "用电量") {
res += res +=

110
src/views/components/monitor/hotWaterMonitor.vue
Unescape View File

@ -48,8 +48,8 @@
<div class="flow-text text3">无线网关</div> <div class="flow-text text3">无线网关</div>
<div class="flow-text text4">回水阀</div> <div class="flow-text text4">回水阀</div>
<div class="flow-text text5">房间</div> <div class="flow-text text5">房间</div>
<div class="flow-text text20">水箱1</div> <div class="flow-text text20">水箱1(总容量:2.5米)</div>
<div class="flow-text text21">水箱2</div> <div class="flow-text text21">水箱2(总容量:2.5米)</div>
<!-- 供水定位 --> <!-- 供水定位 -->
<img class="supply" v-if=" <img class="supply" v-if="
this.upWaterState1 === '1' || this.upWaterState1 === '1' ||
@ -77,10 +77,10 @@
<!-- 循环加热泵定位--> <!-- 循环加热泵定位-->
<img class="cycle-pipeline" src="../../../assets/flowimg/cycle-pipeline.png" alt="" /> <img class="cycle-pipeline" :src="getCyclePipelineImg()" alt="" />
<img class="cyclepum1" :src="getCyclePump1Img()" alt="" <img class="cyclepum1" :src="getCyclePumpImg('loopPumpState1')" alt=""
@click="handleCyclePumpClick('主楼1号循环泵')" /> @click="handleCyclePumpClick('主楼1号循环泵')" />
<img class="cyclepum2" :src="getCyclePump2Img()" alt="" <img class="cyclepum2" :src="getCyclePumpImg('loopPumpState2')" alt=""
@click="handleCyclePumpClick('主楼2号循环泵')" /> @click="handleCyclePumpClick('主楼2号循环泵')" />
<!-- 热泵定位 --> <!-- 热泵定位 -->
<div :class="getHotPumPositionClass"> <div :class="getHotPumPositionClass">
@ -90,14 +90,14 @@
<div class="hotPump-name">{{ item.pumpName }}</div> <div class="hotPump-name">{{ item.pumpName }}</div>
<img class="hotPump-img" :src="getImageSrc(item)" alt="" <img class="hotPump-img" :src="getImageSrc(item)" alt=""
@click="handleHotPumpClick(item)" /> @click="handleHotPumpClick(item)" />
<!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div> <!-- <div class="hotPump-tem1">温度:{{ item.tempSet }}℃</div>
--> -->
<img class="tem2" src="../../../assets/flowimg/thermometer.png" alt="" /> <img class="tem2" src="../../../assets/flowimg/thermometer.png" alt="" />
<div class="temContainer2"> <div class="temContainer2">
<div class="temprogress" :style="{ height: item.waterTemp + '%' }"> <div class="temprogress" :style="{ height: item.tempSet + '%' }">
</div> </div>
</div> </div>
<b class="temdiv2">{{ item.waterTemp }}℃</b> <b class="temdiv2">{{ item.tempSet }}℃</b>
</template> </template>
<template v-else> <template v-else>
<img class="hotPump-img" :src="getImageSrc(item)" alt="" <img class="hotPump-img" :src="getImageSrc(item)" alt=""
@ -105,10 +105,10 @@
<div class="hotPump-name">{{ item.pumpName }}</div> <div class="hotPump-name">{{ item.pumpName }}</div>
<img class="tem2" src="../../../assets/flowimg/thermometer.png" alt="" /> <img class="tem2" src="../../../assets/flowimg/thermometer.png" alt="" />
<div class="temContainer2"> <div class="temContainer2">
<div class="temprogress" :style="{ height: item.waterTemp + '%' }"> <div class="temprogress" :style="{ height: item.tempSet + '%' }">
</div> </div>
</div> </div>
<b class="temdiv2">{{ item.waterTemp }}℃</b> <b class="temdiv2">{{ item.tempSet }}℃</b>
</template> </template>
</template> </template>
<template v-else-if="tableData.length === 8"> <template v-else-if="tableData.length === 8">
@ -117,15 +117,15 @@
<div class="hotPump-name">{{ item.pumpName }}</div> <div class="hotPump-name">{{ item.pumpName }}</div>
<img class="hotPump-img" :src="getImageSrc(item)" alt="" <img class="hotPump-img" :src="getImageSrc(item)" alt=""
@click="handleHotPumpClick(item)" /> @click="handleHotPumpClick(item)" />
<!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div> <!-- <div class="hotPump-tem1">温度:{{ item.tempSet }}℃</div>
--> -->
<img class="tem2" src="../../../assets/flowimg/thermometer.png" <img class="tem2" src="../../../assets/flowimg/thermometer.png"
alt="" /> alt="" />
<div class="temContainer2"> <div class="temContainer2">
<div class="temprogress" :style="{ height: item.waterTemp + '%' }"> <div class="temprogress" :style="{ height: item.tempSet + '%' }">
</div> </div>
</div> </div>
<b class="temdiv2">{{ item.waterTemp }}℃</b> <b class="temdiv2">{{ item.tempSet }}℃</b>
</template> </template>
<template v-else> <template v-else>
<div class="hotPump-name">{{ item.pumpName }}</div> <div class="hotPump-name">{{ item.pumpName }}</div>
@ -134,10 +134,10 @@
<img class="tem1" src="../../../assets/flowimg/thermometer.png" <img class="tem1" src="../../../assets/flowimg/thermometer.png"
alt="" /> alt="" />
<div class="temContainer1"> <div class="temContainer1">
<div class="temprogress" :style="{ height: item.waterTemp + '%' }"> <div class="temprogress" :style="{ height: item.tempSet + '%' }">
</div> </div>
</div> </div>
<b class="temdiv1">{{ item.waterTemp }}℃</b> <b class="temdiv1">{{ item.tempSet }}℃</b>
</template> </template>
</template> </template>
<template v-else> <template v-else>
@ -145,15 +145,15 @@
<img class="hotPump-img" :src="getImageSrc(item)" alt="" <img class="hotPump-img" :src="getImageSrc(item)" alt=""
@click="handleHotPumpClick(item)" /> @click="handleHotPumpClick(item)" />
<div class="hotPump-name">{{ item.pumpName }}</div> <div class="hotPump-name">{{ item.pumpName }}</div>
<!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div> <!-- <div class="hotPump-tem1">温度:{{ item.tempSet }}℃</div>
--> -->
<img class="tem2" src="../../../assets/flowimg/thermometer.png" <img class="tem2" src="../../../assets/flowimg/thermometer.png"
alt="" /> alt="" />
<div class="temContainer2"> <div class="temContainer2">
<div class="temprogress" :style="{ height: item.waterTemp + '%' }"> <div class="temprogress" :style="{ height: item.tempSet + '%' }">
</div> </div>
</div> </div>
<b class="temdiv2">{{ item.waterTemp }}℃</b> <b class="temdiv2">{{ item.tempSet }}℃</b>
</template> </template>
<template v-else> <template v-else>
<img class="hotPump-img" :src="getImageSrc(item)" alt="" <img class="hotPump-img" :src="getImageSrc(item)" alt=""
@ -162,10 +162,10 @@
<img class="tem1" src="../../../assets/flowimg/thermometer.png" <img class="tem1" src="../../../assets/flowimg/thermometer.png"
alt="" /> alt="" />
<div class="temContainer1"> <div class="temContainer1">
<div class="temprogress" :style="{ height: item.waterTemp + '%' }"> <div class="temprogress" :style="{ height: item.tempSet + '%' }">
</div> </div>
</div> </div>
<b class="temdiv1">{{ item.waterTemp }}℃</b> <b class="temdiv1">{{ item.tempSet }}℃</b>
</template> </template>
</template> </template>
</template> </template>
@ -190,12 +190,12 @@
<div class="progressContainer1" v-if="getWaterPercentage(progress2, 2.5) > 50"> <div class="progressContainer1" v-if="getWaterPercentage(progress2, 2.5) > 50">
<div class="progress" :style="{ height: getWaterPercentage(progress2, 2.5) + '%' }"> <div class="progress" :style="{ height: getWaterPercentage(progress2, 2.5) + '%' }">
</div> </div>
<b class="propo">{{ progress2 }}米</b> <b class="propo">实际容量:{{ progress2 }}米</b>
</div> </div>
<div class="progressContainer2" v-else> <div class="progressContainer2" v-else>
<div class="progress" :style="{ height: getWaterPercentage(progress2, 2.5) + '%' }"> <div class="progress" :style="{ height: getWaterPercentage(progress2, 2.5) + '%' }">
</div> </div>
<b class="propo">{{ progress2 }}米</b> <b class="propo">实际容量:{{ progress2 }}米</b>
</div> </div>
<!-- 保温水箱1定位 --> <!-- 保温水箱1定位 -->
@ -211,12 +211,12 @@
<div class="progressContainer3" v-if="getWaterPercentage(progress1, 2.5) > 50"> <div class="progressContainer3" v-if="getWaterPercentage(progress1, 2.5) > 50">
<div class="progress" :style="{ height: getWaterPercentage(progress1, 2.5) + '%' }"> <div class="progress" :style="{ height: getWaterPercentage(progress1, 2.5) + '%' }">
</div> </div>
<b class="propo">{{ progress1 }}米</b> <b class="propo">实际容量:{{ progress1 }}米</b>
</div> </div>
<div class="progressContainer4" v-else> <div class="progressContainer4" v-else>
<div class="progress" :style="{ height: getWaterPercentage(progress1, 2.5) + '%' }"> <div class="progress" :style="{ height: getWaterPercentage(progress1, 2.5) + '%' }">
</div> </div>
<b class="propo">{{ progress1 }}米</b> <b class="propo">实际容量:{{ progress1 }}米</b>
</div> </div>
</div> </div>
</div> </div>
@ -232,6 +232,7 @@
<div class="flow-text text17">低区回水泵1</div> <div class="flow-text text17">低区回水泵1</div>
<div class="flow-text text18">低区回水泵2</div> <div class="flow-text text18">低区回水泵2</div>
<div class="flow-text text19">回水管</div> <div class="flow-text text19">回水管</div>
<div class="flow-text text22">水箱(总容量:2.5米)</div>
<!-- 左上 --> <!-- 左上 -->
<img class="upperLeft" src="../../../assets/flowimg/upperLeft.png" alt="" /> <img class="upperLeft" src="../../../assets/flowimg/upperLeft.png" alt="" />
<!-- 低区回水 --> <!-- 低区回水 -->
@ -271,10 +272,10 @@
@click="handleHotPumpClick(item)" alt="" /> @click="handleHotPumpClick(item)" alt="" />
<img class="tem1" src="../../../assets/flowimg/thermometer.png" alt="" /> <img class="tem1" src="../../../assets/flowimg/thermometer.png" alt="" />
<div class="temContainer1"> <div class="temContainer1">
<div class="temprogress" :style="{ height: item.waterTemp + '%' }"> <div class="temprogress" :style="{ height: item.tempSet + '%' }">
</div> </div>
</div> </div>
<b class="temdiv1">{{ item.waterTemp }}℃</b> <b class="temdiv1">{{ item.tempSet }}℃</b>
</template> </template>
<template v-else> <template v-else>
<img class="hotPump-img" :src="getImageSrc(item)" <img class="hotPump-img" :src="getImageSrc(item)"
@ -282,10 +283,10 @@
<div class="hotPump-name">{{ item.pumpName }}</div> <div class="hotPump-name">{{ item.pumpName }}</div>
<img class="tem1" src="../../../assets/flowimg/thermometer.png" alt="" /> <img class="tem1" src="../../../assets/flowimg/thermometer.png" alt="" />
<div class="temContainer1"> <div class="temContainer1">
<div class="temprogress" :style="{ height: item.waterTemp + '%' }"> <div class="temprogress" :style="{ height: item.tempSet + '%' }">
</div> </div>
</div> </div>
<b class="temdiv1">{{ item.waterTemp }}℃</b> <b class="temdiv1">{{ item.tempSet }}℃</b>
</template> </template>
</template> </template>
</div> </div>
@ -309,12 +310,12 @@
<div class="progressContainer5" v-if="getWaterPercentage(progress1, 2.5) > 50"> <div class="progressContainer5" v-if="getWaterPercentage(progress1, 2.5) > 50">
<div class="progress" :style="{ height: getWaterPercentage(progress1, 2.5) + '%' }"> <div class="progress" :style="{ height: getWaterPercentage(progress1, 2.5) + '%' }">
</div> </div>
<b class="propo">{{ progress1 }}米</b> <b class="propo">实际容量:{{ progress1 }}米</b>
</div> </div>
<div class="progressContainer6" v-else> <div class="progressContainer6" v-else>
<div class="progress" :style="{ height: getWaterPercentage(progress1, 2.5) + '%' }"> <div class="progress" :style="{ height: getWaterPercentage(progress1, 2.5) + '%' }">
</div> </div>
<b class="propo">{{ progress1 }}米</b> <b class="propo">实际容量:{{ progress1 }}米</b>
</div> </div>
</div> </div>
</div> </div>
@ -1052,21 +1053,24 @@ export default {
isHotPumpRunning() { isHotPumpRunning() {
return this.tableData.some(item => Number(item.runState) !== 0); return this.tableData.some(item => Number(item.runState) !== 0);
}, },
// 获取主楼-循环泵1的图片 // 获取循环泵图片（通用方法）
getCyclePump1Img() { getCyclePumpImg(stateKey) {
if (this.tableData.length === 0) return require('../../../assets/flowimg/closepum.png'); if (this.tableData.length === 0) return require('../../../assets/flowimg/closepum.png');
const state = Number(this.tableData[0].loopPumpState1); const state = Number(this.tableData[0][stateKey]);
if (state === 1) return require('../../../assets/flowimg/startpum.png'); if (state === 1) return require('../../../assets/flowimg/startpum.png');
if (state === 2) return require('../../../assets/flowimg/badpum.png'); if (state === 2) return require('../../../assets/flowimg/badpum.png');
return require('../../../assets/flowimg/closepum.png'); return require('../../../assets/flowimg/closepum.png');
}, },
// 获取主楼-循环泵2的图片 // 获取循环管道图片（判断是否显示动态图）
getCyclePump2Img() { getCyclePipelineImg() {
if (this.tableData.length === 0) return require('../../../assets/flowimg/closepum.png'); if (this.tableData.length === 0) return require('../../../assets/flowimg/cycle-pipeline.png');
const state = Number(this.tableData[0].loopPumpState2); const state1 = Number(this.tableData[0].loopPumpState1);
if (state === 1) return require('../../../assets/flowimg/startpum.png'); const state2 = Number(this.tableData[0].loopPumpState2);
if (state === 2) return require('../../../assets/flowimg/badpum.png'); // 如果任一循环泵状态为1，则显示动态图
return require('../../../assets/flowimg/closepum.png'); if (state1 === 1 || state2 === 1) {
return require('../../../assets/flowimg/cycle-pipeline.gif');
}
return require('../../../assets/flowimg/cycle-pipeline.png');
}, },
// 点击热泵图片事件 // 点击热泵图片事件
handleHotPumpClick(item) { handleHotPumpClick(item) {
@ -1701,14 +1705,20 @@ export default {
.text20 { .text20 {
position: absolute; position: absolute;
top: 3.4rem; top: 3.4rem;
left: 5.4rem; left: 4.8rem;
z-index: 1; z-index: 1;
} }
.text21 { .text21 {
position: absolute; position: absolute;
top: 3.4rem; top: 3.4rem;
left: 2.8rem; left: 2.2rem;
z-index: 1;
}
.text22 {
position: absolute;
top: 3.2rem;
left: 2rem;
z-index: 1; z-index: 1;
} }
@ -1944,7 +1954,7 @@ export default {
width: 0.6rem; width: 0.6rem;
height: 1.15rem; height: 1.15rem;
position: absolute; position: absolute;
top: 1.9rem; top: 1.7rem;
left: 3rem; left: 3rem;
z-index: 3; z-index: 3;
} }
@ -2009,7 +2019,7 @@ export default {
.waterBox3 { .waterBox3 {
position: absolute; position: absolute;
top: 0.7rem; top: 0.5rem;
left: 1.6rem; left: 1.6rem;
width: 2.16rem; width: 2.16rem;
height: 2.6rem; height: 2.6rem;
@ -2045,7 +2055,7 @@ export default {
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
color: #d22727; color: #d22727;
position: absolute; position: absolute;
top: 1.8rem; top: 1.6rem;
left: 3rem; left: 3rem;
z-index: 3; z-index: 3;
} }
@ -2077,6 +2087,7 @@ export default {
color: #d22727; color: #d22727;
position: absolute; position: absolute;
top: -0.3rem; top: -0.3rem;
left:-0.5rem;
z-index: 3; z-index: 3;
white-space: nowrap; white-space: nowrap;
} }
@ -2109,6 +2120,7 @@ export default {
color: #d22727; color: #d22727;
position: absolute; position: absolute;
top: -0.3rem; top: -0.3rem;
left:-0.5rem;
z-index: 3; z-index: 3;
white-space: nowrap; white-space: nowrap;
} }
@ -2141,6 +2153,7 @@ export default {
color: #d22727; color: #d22727;
position: absolute; position: absolute;
top: -0.3rem; top: -0.3rem;
left:-0.4rem;
z-index: 3; z-index: 3;
white-space: nowrap; white-space: nowrap;
} }
@ -2173,6 +2186,7 @@ export default {
color: #d22727; color: #d22727;
position: absolute; position: absolute;
top: -0.3rem; top: -0.3rem;
left:-0.4rem;
z-index: 3; z-index: 3;
white-space: nowrap; white-space: nowrap;
} }
@ -2184,7 +2198,7 @@ export default {
background-color: #dff1fa; background-color: #dff1fa;
margin-left: 2%; margin-left: 2%;
position: absolute; position: absolute;
top: 1.7rem; top: 1.5rem;
left: 1.9rem; left: 1.9rem;
border: solid 0.01rem #11aaea; border: solid 0.01rem #11aaea;
z-index: 3; z-index: 3;
@ -2205,6 +2219,7 @@ export default {
color: #d22727; color: #d22727;
position: absolute; position: absolute;
top: -0.3rem; top: -0.3rem;
left:-0.4rem;
z-index: 3; z-index: 3;
white-space: nowrap; white-space: nowrap;
} }
@ -2216,7 +2231,7 @@ export default {
background-color: #dff1fa; background-color: #dff1fa;
margin-left: 2%; margin-left: 2%;
position: absolute; position: absolute;
top: 1.7rem; top: 1.5rem;
left: 1.9rem; left: 1.9rem;
border: solid 0.01rem red; border: solid 0.01rem red;
z-index: 3; z-index: 3;
@ -2237,6 +2252,7 @@ export default {
color: #d22727; color: #d22727;
position: absolute; position: absolute;
top: -0.3rem; top: -0.3rem;
left:-0.4rem;
z-index: 3; z-index: 3;
white-space: nowrap; white-space: nowrap;
} }

54
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>
@ -174,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
}
}, },
], ],
}; };
@ -299,24 +334,29 @@ export default {
.right-table { .right-table {
padding: 27px 15px 35px 15px; padding: 27px 15px 35px 15px;
} }
.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;

51
src/views/hotWater/energyAnalysis/components/energyReport.vue
Unescape View File

@ -559,6 +559,8 @@ export default {
} }
}, },
renderingBroken() { renderingBroken() {
let unit = "";
let itemColor = "";
if (this.currentIndex === 0) { if (this.currentIndex === 0) {
this.brokenOption.yAxis.name = "吨"; this.brokenOption.yAxis.name = "吨";
this.brokenOption.yAxis.nameTextStyle = { this.brokenOption.yAxis.nameTextStyle = {
@ -577,6 +579,8 @@ export default {
color: "rgba(212, 142, 23,0)", // 100% 处的颜色 color: "rgba(212, 142, 23,0)", // 100% 处的颜色
}, },
]; ];
unit = "吨";
itemColor = "#d48e17";
} else if (this.currentIndex === 1) { } else if (this.currentIndex === 1) {
this.brokenOption.yAxis.name = "度"; this.brokenOption.yAxis.name = "度";
this.brokenOption.yAxis.nameTextStyle = { this.brokenOption.yAxis.nameTextStyle = {
@ -595,6 +599,8 @@ export default {
color: "rgba(26, 179, 149,0)", // 100% 处的颜色 color: "rgba(26, 179, 149,0)", // 100% 处的颜色
}, },
]; ];
unit = "度";
itemColor = "#1ab395";
} else if (this.currentIndex === 2) { } else if (this.currentIndex === 2) {
this.brokenOption.yAxis.name = "度/吨"; this.brokenOption.yAxis.name = "度/吨";
this.brokenOption.yAxis.nameTextStyle = { this.brokenOption.yAxis.nameTextStyle = {
@ -613,9 +619,12 @@ export default {
color: "rgba(31, 141, 238,0)", // 100% 处的颜色 color: "rgba(31, 141, 238,0)", // 100% 处的颜色
}, },
]; ];
unit = "";
itemColor = "#1f8dee";
} }
// 保存当前索引用于闭包 // 保存当前索引用于闭包
const currentIndex = this.currentIndex; const currentIndex = this.currentIndex;
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
// 动态设置 tooltip 格式化函数 // 动态设置 tooltip 格式化函数
this.brokenOption.tooltip = { this.brokenOption.tooltip = {
trigger: "axis", trigger: "axis",
@ -635,6 +644,46 @@ export default {
} }
}, },
}; };
this.brokenOption.series[0].markPoint = {
data: [
{
type: 'max',
name: '最大值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + unit;
}
}
},
{
type: 'min',
name: '最小值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + unit;
}
}
}
],
label: {
fontSize: titleFontSize * 0.8,
color: itemColor,
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: itemColor
},
symbolSize: titleFontSize * 1
}
this.brokenOption.xAxis.data = this.brokenTime; this.brokenOption.xAxis.data = this.brokenTime;
this.brokenInstanc.setOption(this.brokenOption); this.brokenInstanc.setOption(this.brokenOption);
}, },
@ -764,7 +813,7 @@ export default {
}, },
grid: { grid: {
top: "10%", top: "15%",
left: "3%", left: "3%",
right: "4%", right: "4%",
bottom: "5%", bottom: "5%",

94
src/views/hotWater/energyAnalysis/components/temReport.vue
Unescape View File

@ -2,25 +2,10 @@
<div class="big-machine" v-loading="listLoading"> <div class="big-machine" v-loading="listLoading">
<div class="condition"> <div class="condition">
<div class="condition-left"> <div class="condition-left">
<el-select <el-select style="margin-right: 0.1rem" v-model="building" placeholder="请选择楼栋" clearable>
style="margin-right: 0.1rem" <el-option v-for="(item, index) in builds" :key="index" :label="item.building_name" :value="item.id" />
v-model="building"
placeholder="请选择楼栋"
clearable
>
<el-option
v-for="(item, index) in builds"
:key="index"
:label="item.building_name"
:value="item.id"
/>
</el-select> </el-select>
<el-date-picker <el-date-picker v-model="dayDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
v-model="dayDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
>
</el-date-picker> </el-date-picker>
<div class="success-btn" style="margin: 0 0.12rem"> <div class="success-btn" style="margin: 0 0.12rem">
<el-button type="success" @click="findData">查询</el-button> <el-button type="success" @click="findData">查询</el-button>
@ -31,14 +16,8 @@
</div> </div>
</div> </div>
<div class="charts" ref="chart_ref"></div> <div class="charts" ref="chart_ref"></div>
<el-table <el-table :data="tableData" @row-click="handlerow" highlight-current-row height="400" ref="maintable"
:data="tableData" :cell-style="tableRowStyle">
@row-click="handlerow"
highlight-current-row
height="400"
ref="maintable"
:cell-style="tableRowStyle"
>
<el-table-column v-if="showBuild" prop="buildingName" label="楼栋名称"> <el-table-column v-if="showBuild" prop="buildingName" label="楼栋名称">
</el-table-column> </el-table-column>
<el-table-column v-if="!showBuild" prop="deviceName" label="热泵名称"> <el-table-column v-if="!showBuild" prop="deviceName" label="热泵名称">
@ -241,6 +220,7 @@ export default {
color: "rgba(31, 141, 238,0)", // 100% 处的颜色 color: "rgba(31, 141, 238,0)", // 100% 处的颜色
}, },
]; ];
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
// 动态设置 tooltip 格式化函数 // 动态设置 tooltip 格式化函数
this.brokenOption.tooltip = { this.brokenOption.tooltip = {
trigger: "axis", trigger: "axis",
@ -252,6 +232,46 @@ export default {
return `${month}<br/>温度: ${value} ℃`; return `${month}<br/>温度: ${value} ℃`;
}, },
}; };
this.brokenOption.series[0].markPoint = {
data: [
{
type: 'max',
name: '最大值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + '℃';
}
}
},
{
type: 'min',
name: '最小值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + '℃';
}
}
}
],
label: {
fontSize: titleFontSize * 0.8,
color: "#1f8dee",
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: "#1f8dee"
},
symbolSize: titleFontSize * 1
}
this.brokenOption.xAxis.data = this.brokenTime; this.brokenOption.xAxis.data = this.brokenTime;
this.brokenInstanc.setOption(this.brokenOption); this.brokenInstanc.setOption(this.brokenOption);
}, },
@ -576,6 +596,7 @@ export default {
} }
} }
} }
.data-content { .data-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -583,6 +604,7 @@ export default {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-top: 23px; margin-top: 23px;
.data-li { .data-li {
background-color: transparent; background-color: transparent;
border-radius: 8px; border-radius: 8px;
@ -597,16 +619,19 @@ export default {
font-size: 0.16rem; font-size: 0.16rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.use-icon { .use-icon {
width: 0.6rem; width: 0.6rem;
height: 0.6rem; height: 0.6rem;
} }
.use-text { .use-text {
width: 33%; width: 33%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
color: #dbdbdb; color: #dbdbdb;
.data-text { .data-text {
z-index: 11 !important; z-index: 11 !important;
font-family: DIN-Bold; font-family: DIN-Bold;
@ -614,22 +639,26 @@ export default {
margin-top: 0.05rem; margin-top: 0.05rem;
color: #ffffff; color: #ffffff;
} }
.downText { .downText {
color: #ff4027; color: #ff4027;
z-index: 11 !important; z-index: 11 !important;
font-family: DIN-Bold; font-family: DIN-Bold;
font-size: 0.24rem; font-size: 0.24rem;
margin-top: 0.05rem; margin-top: 0.05rem;
.el-icon-bottom { .el-icon-bottom {
margin-right: 0.08rem; margin-right: 0.08rem;
} }
} }
.upText { .upText {
color: #2ff016; color: #2ff016;
z-index: 11 !important; z-index: 11 !important;
font-family: DIN-Bold; font-family: DIN-Bold;
font-size: 0.24rem; font-size: 0.24rem;
margin-top: 0.05rem; margin-top: 0.05rem;
.el-icon-bottom, .el-icon-bottom,
.el-icon-top { .el-icon-top {
margin-right: 0.08rem; margin-right: 0.08rem;
@ -637,6 +666,7 @@ export default {
} }
} }
} }
.type-img { .type-img {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -644,12 +674,14 @@ export default {
height: 0.52rem; height: 0.52rem;
z-index: 10; z-index: 10;
} }
.type1 { .type1 {
border: 1px solid #e8aa13; border: 1px solid #e8aa13;
border-radius: 10px; border-radius: 10px;
/* 设置渐变背景 */ /* 设置渐变背景 */
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
} }
.type1::after { .type1::after {
content: ""; content: "";
width: 100%; width: 100%;
@ -663,12 +695,14 @@ export default {
bottom: -100% !important; bottom: -100% !important;
z-index: 1; z-index: 1;
} }
.type2 { .type2 {
border: 1px solid #27a0f2; border: 1px solid #27a0f2;
border-radius: 10px; border-radius: 10px;
/* 设置渐变背景 */ /* 设置渐变背景 */
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
} }
.type2::after { .type2::after {
content: ""; content: "";
width: 100%; width: 100%;
@ -682,12 +716,14 @@ export default {
bottom: -100% !important; bottom: -100% !important;
z-index: 1; z-index: 1;
} }
.type3 { .type3 {
border: 1px solid #1ad3ef; border: 1px solid #1ad3ef;
border-radius: 10px; border-radius: 10px;
/* 设置渐变背景 */ /* 设置渐变背景 */
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
} }
.type3::after { .type3::after {
content: ""; content: "";
width: 100%; width: 100%;
@ -701,12 +737,14 @@ export default {
bottom: -100% !important; bottom: -100% !important;
z-index: 1; z-index: 1;
} }
.type4 { .type4 {
border: 1px solid #11d47b; border: 1px solid #11d47b;
border-radius: 10px; border-radius: 10px;
/* 设置渐变背景 */ /* 设置渐变背景 */
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
} }
.type4::after { .type4::after {
content: ""; content: "";
width: 100%; width: 100%;
@ -721,19 +759,23 @@ export default {
z-index: 1; z-index: 1;
} }
} }
.choice { .choice {
margin: 20px; margin: 20px;
.mr20 { .mr20 {
padding: 0.05rem 0.2rem; padding: 0.05rem 0.2rem;
white-space: nowrap; white-space: nowrap;
width: auto; width: auto;
} }
} }
.charts { .charts {
width: 100%; width: 100%;
height: 300px; height: 300px;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
} }
// 媒体查询，适配大于2000px分辨率的大屏样式 // 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) { @media (min-width: 2000px) {
.condition { .condition {

98
src/views/hotWater/energyAnalysis/components/waterReport.vue
Unescape View File

@ -2,25 +2,10 @@
<div class="big-machine" v-loading="listLoading"> <div class="big-machine" v-loading="listLoading">
<div class="condition"> <div class="condition">
<div class="condition-left"> <div class="condition-left">
<el-select <el-select style="margin-right: 0.1rem" v-model="building" placeholder="请选择楼栋" clearable>
style="margin-right: 0.1rem" <el-option v-for="(item, index) in builds" :key="index" :label="item.building_name" :value="item.id" />
v-model="building"
placeholder="请选择楼栋"
clearable
>
<el-option
v-for="(item, index) in builds"
:key="index"
:label="item.building_name"
:value="item.id"
/>
</el-select> </el-select>
<el-date-picker <el-date-picker v-model="dayDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
v-model="dayDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
>
</el-date-picker> </el-date-picker>
<div class="success-btn" style="margin: 0 0.12rem"> <div class="success-btn" style="margin: 0 0.12rem">
<el-button type="success" @click="findData">查询</el-button> <el-button type="success" @click="findData">查询</el-button>
@ -31,14 +16,8 @@
</div> </div>
</div> </div>
<div class="charts" ref="chart_ref"></div> <div class="charts" ref="chart_ref"></div>
<el-table <el-table :data="tableData" @row-click="handlerow" highlight-current-row height="400" ref="maintable"
:data="tableData" :cell-style="tableRowStyle">
@row-click="handlerow"
highlight-current-row
height="400"
ref="maintable"
:cell-style="tableRowStyle"
>
<el-table-column prop="buildingName" label="楼栋名称"> </el-table-column> <el-table-column prop="buildingName" label="楼栋名称"> </el-table-column>
<el-table-column v-if="showDeviceName" prop="deviceName" label="设备名称"> <el-table-column v-if="showDeviceName" prop="deviceName" label="设备名称">
</el-table-column> </el-table-column>
@ -241,6 +220,7 @@ export default {
}, },
]; ];
// 动态设置 tooltip 格式化函数 // 动态设置 tooltip 格式化函数
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
this.brokenOption.tooltip = { this.brokenOption.tooltip = {
trigger: "axis", trigger: "axis",
formatter: function (params) { formatter: function (params) {
@ -248,9 +228,49 @@ export default {
const data = params[0]; const data = params[0];
const month = data.name; const month = data.name;
const value = data.value; const value = data.value;
return `${month}<br/>水位: ${value} %`; return `${month}<br/>水位: ${value} 米`;
}, },
}; };
this.brokenOption.series[0].markPoint = {
data: [
{
type: 'max',
name: '最大值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + '米';
}
}
},
{
type: 'min',
name: '最小值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + '米';
}
}
}
],
label: {
fontSize: titleFontSize * 0.8,
color: "#1f8dee",
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: "#1f8dee"
},
symbolSize: titleFontSize * 1
}
this.brokenOption.xAxis.data = this.brokenTime; this.brokenOption.xAxis.data = this.brokenTime;
this.brokenInstanc.setOption(this.brokenOption); this.brokenInstanc.setOption(this.brokenOption);
}, },
@ -437,7 +457,7 @@ export default {
}, },
grid: { grid: {
top: "10%", top: "15%",
left: "3%", left: "3%",
right: "4%", right: "4%",
bottom: "5%", bottom: "5%",
@ -576,6 +596,7 @@ export default {
} }
} }
} }
.data-content { .data-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -583,6 +604,7 @@ export default {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-top: 23px; margin-top: 23px;
.data-li { .data-li {
background-color: transparent; background-color: transparent;
border-radius: 8px; border-radius: 8px;
@ -597,16 +619,19 @@ export default {
font-size: 0.16rem; font-size: 0.16rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.use-icon { .use-icon {
width: 0.6rem; width: 0.6rem;
height: 0.6rem; height: 0.6rem;
} }
.use-text { .use-text {
width: 33%; width: 33%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
color: #dbdbdb; color: #dbdbdb;
.data-text { .data-text {
z-index: 11 !important; z-index: 11 !important;
font-family: DIN-Bold; font-family: DIN-Bold;
@ -614,22 +639,26 @@ export default {
margin-top: 0.05rem; margin-top: 0.05rem;
color: #ffffff; color: #ffffff;
} }
.downText { .downText {
color: #ff4027; color: #ff4027;
z-index: 11 !important; z-index: 11 !important;
font-family: DIN-Bold; font-family: DIN-Bold;
font-size: 0.24rem; font-size: 0.24rem;
margin-top: 0.05rem; margin-top: 0.05rem;
.el-icon-bottom { .el-icon-bottom {
margin-right: 0.08rem; margin-right: 0.08rem;
} }
} }
.upText { .upText {
color: #2ff016; color: #2ff016;
z-index: 11 !important; z-index: 11 !important;
font-family: DIN-Bold; font-family: DIN-Bold;
font-size: 0.24rem; font-size: 0.24rem;
margin-top: 0.05rem; margin-top: 0.05rem;
.el-icon-bottom, .el-icon-bottom,
.el-icon-top { .el-icon-top {
margin-right: 0.08rem; margin-right: 0.08rem;
@ -637,6 +666,7 @@ export default {
} }
} }
} }
.type-img { .type-img {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -644,12 +674,14 @@ export default {
height: 0.52rem; height: 0.52rem;
z-index: 10; z-index: 10;
} }
.type1 { .type1 {
border: 1px solid #e8aa13; border: 1px solid #e8aa13;
border-radius: 10px; border-radius: 10px;
/* 设置渐变背景 */ /* 设置渐变背景 */
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
} }
.type1::after { .type1::after {
content: ""; content: "";
width: 100%; width: 100%;
@ -663,12 +695,14 @@ export default {
bottom: -100% !important; bottom: -100% !important;
z-index: 1; z-index: 1;
} }
.type2 { .type2 {
border: 1px solid #27a0f2; border: 1px solid #27a0f2;
border-radius: 10px; border-radius: 10px;
/* 设置渐变背景 */ /* 设置渐变背景 */
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
} }
.type2::after { .type2::after {
content: ""; content: "";
width: 100%; width: 100%;
@ -682,12 +716,14 @@ export default {
bottom: -100% !important; bottom: -100% !important;
z-index: 1; z-index: 1;
} }
.type3 { .type3 {
border: 1px solid #1ad3ef; border: 1px solid #1ad3ef;
border-radius: 10px; border-radius: 10px;
/* 设置渐变背景 */ /* 设置渐变背景 */
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
} }
.type3::after { .type3::after {
content: ""; content: "";
width: 100%; width: 100%;
@ -701,12 +737,14 @@ export default {
bottom: -100% !important; bottom: -100% !important;
z-index: 1; z-index: 1;
} }
.type4 { .type4 {
border: 1px solid #11d47b; border: 1px solid #11d47b;
border-radius: 10px; border-radius: 10px;
/* 设置渐变背景 */ /* 设置渐变背景 */
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
} }
.type4::after { .type4::after {
content: ""; content: "";
width: 100%; width: 100%;
@ -721,19 +759,23 @@ export default {
z-index: 1; z-index: 1;
} }
} }
.choice { .choice {
margin: 20px; margin: 20px;
.mr20 { .mr20 {
padding: 0.05rem 0.2rem; padding: 0.05rem 0.2rem;
white-space: nowrap; white-space: nowrap;
width: auto; width: auto;
} }
} }
.charts { .charts {
width: 100%; width: 100%;
height: 300px; height: 300px;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
} }
// 媒体查询，适配大于2000px分辨率的大屏样式 // 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) { @media (min-width: 2000px) {
.condition { .condition {

98
src/views/hotWater/overview/index.vue
Unescape View File

@ -8,38 +8,22 @@
</div> </div>
<div class="overview-data"> <div class="overview-data">
<div class="overview-data-li"> <div class="overview-data-li">
<img <img class="overview-img" src="../../../assets/images/overview1.png" alt="" />
class="overview-img"
src="../../../assets/images/overview1.png"
alt=""
/>
<div class="overview-num">{{ useHotWater }}</div> <div class="overview-num">{{ useHotWater }}</div>
<div class="overview-title">昨日用水量(吨)</div> <div class="overview-title">昨日用水量(吨)</div>
</div> </div>
<div class="overview-data-li"> <div class="overview-data-li">
<img <img class="overview-img" src="../../../assets/images/overview2.png" alt="" />
class="overview-img"
src="../../../assets/images/overview2.png"
alt=""
/>
<div class="overview-num">{{ electValue }}</div> <div class="overview-num">{{ electValue }}</div>
<div class="overview-title">昨日用电量(度)</div> <div class="overview-title">昨日用电量(度)</div>
</div> </div>
<div class="overview-data-li"> <div class="overview-data-li">
<img <img class="overview-img" src="../../../assets/images/overview3.png" alt="" />
class="overview-img"
src="../../../assets/images/overview3.png"
alt=""
/>
<div class="overview-num">{{ electWater }}</div> <div class="overview-num">{{ electWater }}</div>
<div class="overview-title">昨日单耗(度/吨)</div> <div class="overview-title">昨日单耗(度/吨)</div>
</div> </div>
<div class="overview-data-li"> <div class="overview-data-li">
<img <img class="overview-img" src="../../../assets/images/overview4.png" alt="" />
class="overview-img"
src="../../../assets/images/overview4.png"
alt=""
/>
<div class="overview-num">{{ allData }}</div> <div class="overview-num">{{ allData }}</div>
<div class="overview-title">通讯设备设备总数(台)</div> <div class="overview-title">通讯设备设备总数(台)</div>
</div> </div>
@ -62,13 +46,8 @@
<div class="special-title">当月数据统计</div> <div class="special-title">当月数据统计</div>
</div> </div>
<div class="choice"> <div class="choice">
<div <div class="mr20" v-for="(item, index) in timeData2" :key="index" @click="handleEnter(index, $event)"
class="mr20" :class="{ timeStyle: currentIndex == index }">
v-for="(item, index) in timeData2"
:key="index"
@click="handleEnter(index, $event)"
:class="{ timeStyle: currentIndex == index }"
>
{{ item.title }} {{ item.title }}
</div> </div>
</div> </div>
@ -504,6 +483,7 @@ export default {
//初始化chartInstance2对象 折线图 //初始化chartInstance2对象 折线图
initChart2() { initChart2() {
this.brokenInstanc = echarts.init(this.$refs.analyse_ref); this.brokenInstanc = echarts.init(this.$refs.analyse_ref);
const titleFontSize = this.$refs.analyse_ref.offsetWidth / 100;
this.brokenOption = { this.brokenOption = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -527,7 +507,7 @@ export default {
}, },
grid: { grid: {
top: "4%", top: "15%",
left: "3%", left: "3%",
right: "4%", right: "4%",
bottom: "5%", bottom: "5%",
@ -711,18 +691,27 @@ export default {
}); });
}, },
renderingBroken() { renderingBroken() {
let unit = "";
let itemColor = "";
if (this.currentIndex === 0) { if (this.currentIndex === 0) {
this.brokenOption.series[0].data = this.brokenData1; this.brokenOption.series[0].data = this.brokenData1;
this.brokenOption.series[0].itemStyle.color = "#d48e17"; this.brokenOption.series[0].itemStyle.color = "#d48e17";
unit = "吨";
itemColor = "#d48e17";
} else if (this.currentIndex === 1) { } else if (this.currentIndex === 1) {
this.brokenOption.series[0].data = this.brokenData2; this.brokenOption.series[0].data = this.brokenData2;
this.brokenOption.series[0].itemStyle.color = "#1ab395"; this.brokenOption.series[0].itemStyle.color = "#1ab395";
unit = "度";
itemColor = "#1ab395";
} else if (this.currentIndex === 2) { } else if (this.currentIndex === 2) {
this.brokenOption.series[0].data = this.brokenData3; this.brokenOption.series[0].data = this.brokenData3;
this.brokenOption.series[0].itemStyle.color = "#1f8dee"; this.brokenOption.series[0].itemStyle.color = "#1f8dee";
unit = "";
itemColor = "#1f8dee";
} }
// 保存当前索引用于闭包 // 保存当前索引用于闭包
const currentIndex = this.currentIndex; const currentIndex = this.currentIndex;
const titleFontSize = this.$refs.analyse_ref.offsetWidth / 100;
// 动态设置 tooltip 格式化函数 // 动态设置 tooltip 格式化函数
this.brokenOption.tooltip = { this.brokenOption.tooltip = {
trigger: "axis", trigger: "axis",
@ -742,6 +731,46 @@ export default {
} }
}, },
}; };
this.brokenOption.series[0].markPoint = {
data: [
{
type: 'max',
name: '最大值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + unit;
}
}
},
{
type: 'min',
name: '最小值',
symbol: 'arrow',
symbolRotate: 180,
label: {
formatter: function (params) {
return params.value + unit;
}
}
}
],
label: {
fontSize: titleFontSize * 0.8,
color: itemColor,
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: itemColor
},
symbolSize: titleFontSize * 1
}
this.brokenOption.xAxis.data = this.brokenTime; this.brokenOption.xAxis.data = this.brokenTime;
this.brokenInstanc.setOption(this.brokenOption); this.brokenInstanc.setOption(this.brokenOption);
}, },
@ -756,8 +785,10 @@ export default {
align-items: stretch; align-items: stretch;
justify-content: space-between; justify-content: space-between;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
.overview-top-left { .overview-top-left {
width: 65%; width: 65%;
.overview-data { .overview-data {
width: 100%; width: 100%;
padding: 0.5rem; padding: 0.5rem;
@ -765,16 +796,19 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.overview-data-li { .overview-data-li {
width: 1.8rem; width: 1.8rem;
height: 1.65rem; height: 1.65rem;
position: relative; position: relative;
.overview-img { .overview-img {
width: 1.8rem; width: 1.8rem;
height: 1.65rem; height: 1.65rem;
position: absolute; position: absolute;
top: 0; top: 0;
} }
.overview-num { .overview-num {
font-family: DIN-Bold; font-family: DIN-Bold;
font-size: 0.3rem; font-size: 0.3rem;
@ -787,6 +821,7 @@ export default {
top: 0.28rem; top: 0.28rem;
right: 0; right: 0;
} }
.overview-title { .overview-title {
font-family: SourceHanSansCN-Regular; font-family: SourceHanSansCN-Regular;
font-size: 0.18rem; font-size: 0.18rem;
@ -802,23 +837,28 @@ export default {
} }
} }
} }
.overview-top-right { .overview-top-right {
width: 33%; width: 33%;
.pump-charts { .pump-charts {
width: 100%; width: 100%;
height: 2.65rem; height: 2.65rem;
} }
} }
} }
.overview-bottom { .overview-bottom {
.choice { .choice {
margin: 20px; margin: 20px 20px 0 20px;
.mr20 { .mr20 {
padding: 0.05rem 0.2rem; padding: 0.05rem 0.2rem;
white-space: nowrap; white-space: nowrap;
width: auto; width: auto;
} }
} }
.brokenEcharts { .brokenEcharts {
width: 100%; width: 100%;
height: 4rem; height: 4rem;

4
src/views/index.vue
Unescape View File

@ -84,7 +84,7 @@
</div> </div>
</div> </div>
<div class="overview-li"> <div class="overview-li">
<div>总产冷量(kw)</div> <div>总产冷量(kwh)</div>
<div class="overview-details"> <div class="overview-details">
{{ projectView.totalCold }} {{ projectView.totalCold }}
</div> </div>
@ -108,7 +108,7 @@
</div> </div>
</div> </div>
<div class="overview-li"> <div class="overview-li">
<div>今年产冷量(kw)</div> <div>今年产冷量(kwh)</div>
<div class="overview-details"> <div class="overview-details">
{{ projectView.yearCold }} {{ projectView.yearCold }}
</div> </div>

Write Preview
Loading…
Cancel
Save