-
@@ -174,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
+ }
},
],
};
@@ -299,24 +334,29 @@ export default {
.right-table {
padding: 27px 15px 35px 15px;
}
+
.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;
diff --git a/src/views/hotWater/energyAnalysis/components/energyReport.vue b/src/views/hotWater/energyAnalysis/components/energyReport.vue
index 32d6880..65bcbcd 100644
--- a/src/views/hotWater/energyAnalysis/components/energyReport.vue
+++ b/src/views/hotWater/energyAnalysis/components/energyReport.vue
@@ -559,6 +559,8 @@ export default {
}
},
renderingBroken() {
+ let unit = "";
+ let itemColor = "";
if (this.currentIndex === 0) {
this.brokenOption.yAxis.name = "吨";
this.brokenOption.yAxis.nameTextStyle = {
@@ -577,6 +579,8 @@ export default {
color: "rgba(212, 142, 23,0)", // 100% 处的颜色
},
];
+ unit = "吨";
+ itemColor = "#d48e17";
} else if (this.currentIndex === 1) {
this.brokenOption.yAxis.name = "度";
this.brokenOption.yAxis.nameTextStyle = {
@@ -595,6 +599,8 @@ export default {
color: "rgba(26, 179, 149,0)", // 100% 处的颜色
},
];
+ unit = "度";
+ itemColor = "#1ab395";
} else if (this.currentIndex === 2) {
this.brokenOption.yAxis.name = "度/吨";
this.brokenOption.yAxis.nameTextStyle = {
@@ -613,9 +619,12 @@ export default {
color: "rgba(31, 141, 238,0)", // 100% 处的颜色
},
];
+ unit = "";
+ itemColor = "#1f8dee";
}
// 保存当前索引用于闭包
const currentIndex = this.currentIndex;
+ const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
// 动态设置 tooltip 格式化函数
this.brokenOption.tooltip = {
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.brokenInstanc.setOption(this.brokenOption);
},
@@ -764,7 +813,7 @@ export default {
},
grid: {
- top: "10%",
+ top: "15%",
left: "3%",
right: "4%",
bottom: "5%",
diff --git a/src/views/hotWater/energyAnalysis/components/temReport.vue b/src/views/hotWater/energyAnalysis/components/temReport.vue
index e6eab20..a3e230f 100644
--- a/src/views/hotWater/energyAnalysis/components/temReport.vue
+++ b/src/views/hotWater/energyAnalysis/components/temReport.vue
@@ -2,25 +2,10 @@
-
-
+
+
-
+
查询
@@ -31,14 +16,8 @@
-
+
@@ -241,6 +220,7 @@ export default {
color: "rgba(31, 141, 238,0)", // 100% 处的颜色
},
];
+ const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
// 动态设置 tooltip 格式化函数
this.brokenOption.tooltip = {
trigger: "axis",
@@ -252,6 +232,46 @@ export default {
return `${month}
温度: ${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.brokenInstanc.setOption(this.brokenOption);
},
@@ -576,6 +596,7 @@ export default {
}
}
}
+
.data-content {
display: flex;
flex-direction: row;
@@ -583,6 +604,7 @@ export default {
justify-content: space-between;
width: 100%;
margin-top: 23px;
+
.data-li {
background-color: transparent;
border-radius: 8px;
@@ -597,16 +619,19 @@ export default {
font-size: 0.16rem;
position: relative;
overflow: hidden;
+
.use-icon {
width: 0.6rem;
height: 0.6rem;
}
+
.use-text {
width: 33%;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #dbdbdb;
+
.data-text {
z-index: 11 !important;
font-family: DIN-Bold;
@@ -614,22 +639,26 @@ export default {
margin-top: 0.05rem;
color: #ffffff;
}
+
.downText {
color: #ff4027;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
+
.el-icon-bottom {
margin-right: 0.08rem;
}
}
+
.upText {
color: #2ff016;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
+
.el-icon-bottom,
.el-icon-top {
margin-right: 0.08rem;
@@ -637,6 +666,7 @@ export default {
}
}
}
+
.type-img {
position: absolute;
bottom: 0;
@@ -644,12 +674,14 @@ export default {
height: 0.52rem;
z-index: 10;
}
+
.type1 {
border: 1px solid #e8aa13;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
}
+
.type1::after {
content: "";
width: 100%;
@@ -663,12 +695,14 @@ export default {
bottom: -100% !important;
z-index: 1;
}
+
.type2 {
border: 1px solid #27a0f2;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
}
+
.type2::after {
content: "";
width: 100%;
@@ -682,12 +716,14 @@ export default {
bottom: -100% !important;
z-index: 1;
}
+
.type3 {
border: 1px solid #1ad3ef;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
}
+
.type3::after {
content: "";
width: 100%;
@@ -701,12 +737,14 @@ export default {
bottom: -100% !important;
z-index: 1;
}
+
.type4 {
border: 1px solid #11d47b;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
}
+
.type4::after {
content: "";
width: 100%;
@@ -721,19 +759,23 @@ export default {
z-index: 1;
}
}
+
.choice {
margin: 20px;
+
.mr20 {
padding: 0.05rem 0.2rem;
white-space: nowrap;
width: auto;
}
}
+
.charts {
width: 100%;
height: 300px;
margin-bottom: 0.1rem;
}
+
// 媒体查询,适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.condition {
diff --git a/src/views/hotWater/energyAnalysis/components/waterReport.vue b/src/views/hotWater/energyAnalysis/components/waterReport.vue
index b686cd6..409a315 100644
--- a/src/views/hotWater/energyAnalysis/components/waterReport.vue
+++ b/src/views/hotWater/energyAnalysis/components/waterReport.vue
@@ -2,25 +2,10 @@
-
-
+
+
-
+
查询
@@ -31,14 +16,8 @@
-
+
@@ -241,6 +220,7 @@ export default {
},
];
// 动态设置 tooltip 格式化函数
+ const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
this.brokenOption.tooltip = {
trigger: "axis",
formatter: function (params) {
@@ -248,9 +228,49 @@ export default {
const data = params[0];
const month = data.name;
const value = data.value;
- return `${month}
水位: ${value} %`;
+ return `${month}
水位: ${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.brokenInstanc.setOption(this.brokenOption);
},
@@ -437,7 +457,7 @@ export default {
},
grid: {
- top: "10%",
+ top: "15%",
left: "3%",
right: "4%",
bottom: "5%",
@@ -576,6 +596,7 @@ export default {
}
}
}
+
.data-content {
display: flex;
flex-direction: row;
@@ -583,6 +604,7 @@ export default {
justify-content: space-between;
width: 100%;
margin-top: 23px;
+
.data-li {
background-color: transparent;
border-radius: 8px;
@@ -597,16 +619,19 @@ export default {
font-size: 0.16rem;
position: relative;
overflow: hidden;
+
.use-icon {
width: 0.6rem;
height: 0.6rem;
}
+
.use-text {
width: 33%;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #dbdbdb;
+
.data-text {
z-index: 11 !important;
font-family: DIN-Bold;
@@ -614,22 +639,26 @@ export default {
margin-top: 0.05rem;
color: #ffffff;
}
+
.downText {
color: #ff4027;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
+
.el-icon-bottom {
margin-right: 0.08rem;
}
}
+
.upText {
color: #2ff016;
z-index: 11 !important;
font-family: DIN-Bold;
font-size: 0.24rem;
margin-top: 0.05rem;
+
.el-icon-bottom,
.el-icon-top {
margin-right: 0.08rem;
@@ -637,6 +666,7 @@ export default {
}
}
}
+
.type-img {
position: absolute;
bottom: 0;
@@ -644,12 +674,14 @@ export default {
height: 0.52rem;
z-index: 10;
}
+
.type1 {
border: 1px solid #e8aa13;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
}
+
.type1::after {
content: "";
width: 100%;
@@ -663,12 +695,14 @@ export default {
bottom: -100% !important;
z-index: 1;
}
+
.type2 {
border: 1px solid #27a0f2;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
}
+
.type2::after {
content: "";
width: 100%;
@@ -682,12 +716,14 @@ export default {
bottom: -100% !important;
z-index: 1;
}
+
.type3 {
border: 1px solid #1ad3ef;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
}
+
.type3::after {
content: "";
width: 100%;
@@ -701,12 +737,14 @@ export default {
bottom: -100% !important;
z-index: 1;
}
+
.type4 {
border: 1px solid #11d47b;
border-radius: 10px;
/* 设置渐变背景 */
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
}
+
.type4::after {
content: "";
width: 100%;
@@ -721,19 +759,23 @@ export default {
z-index: 1;
}
}
+
.choice {
margin: 20px;
+
.mr20 {
padding: 0.05rem 0.2rem;
white-space: nowrap;
width: auto;
}
}
+
.charts {
width: 100%;
height: 300px;
margin-bottom: 0.1rem;
}
+
// 媒体查询,适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.condition {
diff --git a/src/views/hotWater/overview/index.vue b/src/views/hotWater/overview/index.vue
index 5942af5..2199f90 100644
--- a/src/views/hotWater/overview/index.vue
+++ b/src/views/hotWater/overview/index.vue
@@ -8,38 +8,22 @@
-

+
{{ useHotWater }}
昨日用水量(吨)
-

+
{{ electValue }}
昨日用电量(度)
-

+
{{ electWater }}
昨日单耗(度/吨)
-

+
{{ allData }}
通讯设备设备总数(台)
@@ -62,13 +46,8 @@
当月数据统计
-
@@ -504,6 +483,7 @@ export default {
//初始化chartInstance2对象 折线图
initChart2() {
this.brokenInstanc = echarts.init(this.$refs.analyse_ref);
+ const titleFontSize = this.$refs.analyse_ref.offsetWidth / 100;
this.brokenOption = {
tooltip: {
trigger: "axis",
@@ -527,7 +507,7 @@ export default {
},
grid: {
- top: "4%",
+ top: "15%",
left: "3%",
right: "4%",
bottom: "5%",
@@ -711,18 +691,27 @@ export default {
});
},
renderingBroken() {
+ let unit = "";
+ let itemColor = "";
if (this.currentIndex === 0) {
this.brokenOption.series[0].data = this.brokenData1;
this.brokenOption.series[0].itemStyle.color = "#d48e17";
+ unit = "吨";
+ itemColor = "#d48e17";
} else if (this.currentIndex === 1) {
this.brokenOption.series[0].data = this.brokenData2;
this.brokenOption.series[0].itemStyle.color = "#1ab395";
+ unit = "度";
+ itemColor = "#1ab395";
} else if (this.currentIndex === 2) {
this.brokenOption.series[0].data = this.brokenData3;
this.brokenOption.series[0].itemStyle.color = "#1f8dee";
+ unit = "";
+ itemColor = "#1f8dee";
}
// 保存当前索引用于闭包
const currentIndex = this.currentIndex;
+ const titleFontSize = this.$refs.analyse_ref.offsetWidth / 100;
// 动态设置 tooltip 格式化函数
this.brokenOption.tooltip = {
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.brokenInstanc.setOption(this.brokenOption);
},
@@ -756,8 +785,10 @@ export default {
align-items: stretch;
justify-content: space-between;
margin-bottom: 0.2rem;
+
.overview-top-left {
width: 65%;
+
.overview-data {
width: 100%;
padding: 0.5rem;
@@ -765,16 +796,19 @@ export default {
flex-direction: row;
align-items: center;
justify-content: space-between;
+
.overview-data-li {
width: 1.8rem;
height: 1.65rem;
position: relative;
+
.overview-img {
width: 1.8rem;
height: 1.65rem;
position: absolute;
top: 0;
}
+
.overview-num {
font-family: DIN-Bold;
font-size: 0.3rem;
@@ -787,6 +821,7 @@ export default {
top: 0.28rem;
right: 0;
}
+
.overview-title {
font-family: SourceHanSansCN-Regular;
font-size: 0.18rem;
@@ -802,23 +837,28 @@ export default {
}
}
}
+
.overview-top-right {
width: 33%;
+
.pump-charts {
width: 100%;
height: 2.65rem;
}
}
}
+
.overview-bottom {
.choice {
- margin: 20px;
+ margin: 20px 20px 0 20px;
+
.mr20 {
padding: 0.05rem 0.2rem;
white-space: nowrap;
width: auto;
}
}
+
.brokenEcharts {
width: 100%;
height: 4rem;
diff --git a/src/views/index.vue b/src/views/index.vue
index ee63482..d591919 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -84,7 +84,7 @@
-
总产冷量(kw)
+
总产冷量(kwh)
{{ projectView.totalCold }}
@@ -108,7 +108,7 @@
-
今年产冷量(kw)
+
今年产冷量(kwh)
{{ projectView.yearCold }}