首页图形位置，显示更新

src/views/heating/home/index.vue

@@ -42,41 +42,32 @@
 			</el-col>
 		</el-row>
 		<el-row :gutter="15" class="home-card-two mb15">
-			<el-col :xs="24" :sm="10" :md="12" :lg="16" :xl="16">
-				<div class="home-card-item">
-					<div class="home-card-item-title" style="display: flex; justify-content: space-between">
-						<span>热网总能耗</span>
-					</div>
-					<el-tabs v-model="tabName" @tab-click="tabChange">
-						<el-tab-pane label="日热耗" name="homeLineRef1">
-							<div style="height: 200px" ref="homeLineRef1"></div>
-						</el-tab-pane>
-						<el-tab-pane label="日电耗" name="homeLineRef2">
-							<div style="height: 200px" ref="homeLineRef2"></div>
-						</el-tab-pane>
-						<el-tab-pane label="日失水量" name="homeLineRef3">
-							<div style="height: 200px" ref="homeLineRef3"></div>
-						</el-tab-pane>
-						<el-tab-pane label="供热负荷" name="homeLineRef4">
-							<div style="height: 200px" ref="homeLineRef4"></div>
-						</el-tab-pane>
-					</el-tabs>
-				</div>
-			</el-col>
-			<el-col :xs="24" :sm="10" :md="12" :lg="8" :xl="8" class="home-media">
+			<div class="home-card-item" style="height: auto">
+				<div class="home-card-item-title">总耗热</div>
+				<div style="height: 200px" ref="homeLineRef1"></div>
+			</div>
+		</el-row>
+		<el-row :gutter="15" class="home-card-two mb15">
+			<div class="home-card-item" style="height: auto">
+				<div class="home-card-item-title">总失水量</div>
+				<div style="height: 200px" ref="homeLineRef3"></div>
+			</div>
+		</el-row>
+		<el-row :gutter="15" class="home-card-two mb15">
+			<div class="home-card-item" style="height: auto">
+				<div class="home-card-item-title">平均供热负荷</div>
+				<div style="height: 200px" ref="homeLineRef4"></div>
+			</div>
+		</el-row>
+		<!-- <el-col :xs="24" :sm="10" :md="12" :lg="8" :xl="8" class="home-media">
 				<div class="home-card-item">
 					<div class="bar-header">
 						<p class="home-card-item-title">环路回温/热用户室温占比</p>
-						<!-- <div class="lable-group1">
-							<div @click="changePieType('1')" :class="pieType == '1' ? 'active' : ''">环路</div>
-							<div @click="changePieType('2')" :class="pieType == '2' ? 'active' : ''">热用户</div>
-						</div> -->
 					</div>
 					<div style="height: 256px" ref="homePieRef"></div>
 				</div>
-			</el-col>
-		</el-row>
-		<el-row :gutter="15" class="home-card-three mb15">
+			</el-col> -->
+		<!-- <el-row :gutter="15" class="home-card-three mb15">
 			<el-col>
 				<div class="home-card-item">
 					<div style="height: 100%" ref="homeBarRef"></div>
@@ -89,7 +80,7 @@
 					<div style="height: 100%" ref="homeFourBarRef"></div>
 				</div>
 			</el-col>
-		</el-row>
+		</el-row> -->
 	</div>
 </template>
 
@@ -126,7 +117,6 @@ export default defineComponent({
 	setup() {
 		const tabName = ref('homeLineRef1');
 		const homeLineRef1 = ref();
-		const homeLineRef2 = ref();
 		const homeLineRef3 = ref();
 		const homeLineRef4 = ref();
 		const homePieRef = ref();
@@ -182,7 +172,7 @@ export default defineComponent({
 					title: '水量',
 					contentTitle1: '总耗水',
 					val1: '',
-					contentTitle2: '总单耗',
+					contentTitle2: '小时补水量',
 					val2: '',
 				},
 			],
@@ -229,210 +219,6 @@ export default defineComponent({
 			});
 		};
 
-		// 获取温度监测数据
-		const getStatisticsChartData = () => {
-			api.statistics.getStatisticsOverview({ queryType: 'temperature' }).then((res: any) => {
-				const data = res.data;
-				state.statisticsChartXAxisData = [];
-				state.inTemperature = [];
-				state.outTemperature = [];
-				state.diffTemperature = [];
-				Object.values(data).forEach((i: object) => {
-					state.statisticsChartXAxisData.push(i.name);
-					state.inTemperature.push(i.inTemperature);
-					state.outTemperature.push(i.outTemperature);
-					state.diffTemperature.push(i.diff);
-				});
-
-				nextTick(() => {
-					initBarChart();
-				});
-			});
-		};
-		// 获取压力监测数据
-		const getStatisticsPressureChartData = () => {
-			api.statistics.getStatisticsOverview({ queryType: 'pressure' }).then((res: any) => {
-				const data = res.data;
-				state.pressureXAxisData = [];
-				state.inPressureData = [];
-				state.outPressureData = [];
-				state.diffPressureData = [];
-				Object.values(data).forEach((i: object) => {
-					state.pressureXAxisData.push(i.name);
-					state.inPressureData.push(i.inPressure);
-					state.outPressureData.push(i.outPressure);
-					state.diffPressureData.push(i.diff);
-				});
-
-				nextTick(() => {
-					initBarFourChart();
-				});
-			});
-		};
-		// 温度检测
-		const initBarChart = () => {
-			if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
-			global.homeChartOne = <any>echarts.init(homeBarRef.value, state.charts.theme);
-			const option = {
-				tooltip: {
-					trigger: 'axis',
-				},
-				title: {
-					text: '温度监测',
-					x: 'left',
-					textStyle: { fontSize: '15', color: state.charts.color },
-				},
-				legend: {
-					data: ['二网供水温度', '二网回水温度', '二网供回水温差'],
-					top: 35,
-					textStyle: {
-						color: state.charts.color,
-					},
-				},
-				grid: { top: 60, bottom: 20, left: 30, right: 30, containLabel: true },
-				// calculable: true,
-				xAxis: [{ data: state.statisticsChartXAxisData }],
-				yAxis: [
-					{
-						name: '℃',
-						type: 'value',
-					},
-				],
-				series: [
-					{
-						name: '二网供水温度',
-						type: 'bar',
-						data: state.inTemperature,
-					},
-					{
-						name: '二网回水温度',
-						type: 'bar',
-						data: state.outTemperature,
-					},
-					{
-						name: '二网供回水温差',
-						type: 'bar',
-						data: state.diffTemperature,
-					},
-				],
-			};
-			(<any>global.homeChartOne).setOption(option);
-			(<any>state.myCharts).push(global.homeChartOne);
-		};
-		// 柱状图
-		const initBarFourChart = () => {
-			if (!global.dispose.some((b: any) => b === global.homeCharFour)) global.homeCharFour.dispose();
-			global.homeCharFour = <any>echarts.init(homeFourBarRef.value, state.charts.theme);
-			const option = {
-				tooltip: {
-					trigger: 'axis',
-				},
-				title: {
-					text: '压力监测',
-					x: 'left',
-					textStyle: { fontSize: '15', color: state.charts.color },
-				},
-				legend: {
-					data: ['二网供水压力', '二网回水压力', '二网供回水压差'],
-					top: 35,
-					textStyle: {
-						color: state.charts.color,
-					},
-				},
-				grid: { top: 60, bottom: 20, left: 30, right: 30, containLabel: true },
-				xAxis: [{ data: state.pressureXAxisData }],
-				yAxis: [
-					{
-						type: 'value',
-					},
-				],
-				series: [
-					{
-						name: '二网供水压力',
-						type: 'bar',
-						data: state.inPressureData,
-					},
-					{
-						name: '二网回水压力',
-						type: 'bar',
-						data: state.outPressureData,
-					},
-					{
-						name: '二网供回水压差',
-						type: 'bar',
-						data: state.diffPressureData,
-					},
-				],
-			};
-			(<any>global.homeCharFour).setOption(option);
-			(<any>state.myCharts).push(global.homeCharFour);
-		};
-		// 获取环路回温占比数据数据
-		const getStatisticsPieData = () => {
-			api.statistics.getStatisticsOverview({ queryType: 'ratio' }).then((res: any) => {
-				const data = res.data;
-				const arr = Object.values(data);
-				let sum = 0;
-				arr.forEach((item) => {
-					sum += item;
-				});
-				Object.keys(data).forEach((key: string) => {
-					state.pieData.push({ name: key, value: (data[key] / sum).toFixed(2) * 1, num: data[key] });
-				});
-
-				nextTick(() => {
-					initPieChart();
-				});
-			});
-		};
-		// 饼图
-		const initPieChart = () => {
-			if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
-			global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
-			// var getname = ['提示', '建议', '警告', '严重警告', '故障'];
-			// var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
-			// var data = [];
-			// for (var i = 0; i < getname.length; i++) {
-			// 	data.push({ name: getname[i], value: getvalue[i] });
-			// }
-			// const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#FF0000'];
-			const option = {
-				backgroundColor: state.charts.bgColor,
-				grid: { top: 10, bottom: 10 },
-				tooltip: { trigger: 'item', formatter: '{b} <br/> {d}% <br/>' },
-				legend: {
-					top: 0,
-					color: state.charts.color,
-					orient: 'horizontal',
-					left: 'center',
-					itemWidth: 8,
-					itemHeight: 8,
-					itemGap: 3,
-					textStyle: {
-						color: state.charts.color,
-						fontSize: 12,
-					},
-				},
-				series: [
-					{
-						type: 'pie',
-						radius: [50, 90],
-						center: ['50%', '57%'],
-						itemStyle: {
-							borderRadius: 8,
-						},
-						label: {
-							show: true,
-							color: state.charts.color,
-							formatter: '{b} {d}%',
-						},
-						data: state.pieData,
-					},
-				],
-			};
-			(<any>global.homeChartTwo).setOption(option);
-			(<any>state.myCharts).push(global.homeChartTwo);
-		};
 		// 获取热网总能耗数据
 		const getStatisticsLineChartData = () => {
 			if (!state.rangeValue) return;
@@ -441,45 +227,41 @@ export default defineComponent({
 				// calorie：总热耗  electric：总电耗  water：总失水量 heatDemand: 供热负荷
 				state.chartXAxisData = flowLoss.map((item: any) => item.date);
 				state.flowLossData = flowLoss.map((item: any) => item.total);
-				state.elctricConsumptionData = elctricConsumption.map((item: any) => item.total);
 				state.unitConsumptionData = unitConsumption.map((item: any) => item.total);
 				state.heatDemandData = heatDemand.map((item: any) => item.total);
 				if (state.rangeValue == 10) return;
 				nextTick(() => {
-					initLineChart();
+					initLineChart('homeLineRef1');
+					initLineChart('homeLineRef3');
+					initLineChart('homeLineRef4');
 				});
 			});
 		};
 		// 折线图
-		const initLineChart = () => {
+		const initLineChart = (ref: string) => {
 			if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
 
 			let dom: any;
 			let data: any;
 			let unit: any;
-			// 日热耗：GJ
-			// 日电耗：KW.h
+			// 总耗热：GJ
 			// 日失水量：T
-			// 供热功率：W
-			if (tabName.value === 'homeLineRef1') {
+			// 平均供热负荷： W/m²
+			if (ref === 'homeLineRef1') {
 				dom = homeLineRef1.value;
 				data = state.flowLossData;
 				unit = 'GJ';
-			} else if (tabName.value === 'homeLineRef2') {
-				dom = homeLineRef2.value;
-				data = state.elctricConsumptionData;
-				unit = 'KW.h';
-			} else if (tabName.value === 'homeLineRef3') {
+			} else if (ref === 'homeLineRef3') {
 				dom = homeLineRef3.value;
 				data = state.unitConsumptionData;
 				unit = 'T';
 			} else {
 				dom = homeLineRef4.value;
 				data = state.heatDemandData;
-				unit = 'W';
+				unit = 'W/m²';
 			}
 
-			global.homeCharThree = <any>echarts.init(dom, state.charts.theme);
+			const chart = <any>echarts.init(dom, state.charts.theme);
 
 			const common = {
 				type: 'line',
@@ -487,24 +269,11 @@ export default defineComponent({
 				showSymbol: true,
 				symbolSize: 12,
 				yAxisIndex: 0,
-				// areaStyle: {
-				// 	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-				// 		{ offset: 0, color: 'rgba(22,132,252,0.3)' },
-				// 		{ offset: 1, color: 'rgba(22,132,252,0)' },
-				// 	]),
-				// 	shadowColor: 'rgba(22,132,252,0.2)',
-				// 	shadowBlur: 20,
-				// },
-				// itemStyle: { color: 'rgba(22, 132, 252, 1)' },
 			};
 			const option = {
 				backgroundColor: state.charts.bgColor,
 				tooltip: { trigger: 'axis' },
-				// legend: {
-				//   data: ['总热耗', '总电耗', '总失水量'],
-				//   top: 30, textStyle: { color: state.charts.color }
-				// },
-				grid: { top: 30, right: 20, bottom: 20, left: 20, containLabel: true },
+				grid: { top: 30, right: 40, bottom: 30, left: 25, containLabel: true },
 				xAxis: [
 					{
 						type: 'category',
@@ -535,34 +304,9 @@ export default defineComponent({
 						...common,
 						data,
 					},
-					// {
-					//   name: '总电耗',
-					//   ...common,
-					//   data: state.elctricConsumptionData,
-					// },
-					// {
-					//   name: '总失水量',
-					//   ...common,
-					//   data: state.unitConsumptionData,
-					// }
 				],
 			};
-			(<any>global.homeCharThree).setOption(option);
-			(<any>state.myCharts).push(global.homeCharThree);
-		};
-
-		// 切换图形
-		const tabChange = (data: any) => {
-			setTimeout(() => {
-				initLineChart();
-			}, 100);
-		};
-		// 切换饼图类型
-		const changePieType = (type: string, name: string) => {
-			state.pieType = type;
-			nextTick(() => {
-				initPieChart();
-			});
+			chart.setOption(option);
 		};
 		// 批量设置 echarts resize
 		const initEchartsResizeFun = () => {
@@ -582,10 +326,7 @@ export default defineComponent({
 		onMounted(() => {
 			initEchartsResize();
 			getStatisticsTotalData();
-			getStatisticsChartData();
-			getStatisticsPressureChartData();
 			getStatisticsLineChartData();
-			getStatisticsPieData();
 			// 获取布局配置信息
 			state.isIsDark = store.state.themeConfig.themeConfig.isIsDark;
 		});
@@ -621,10 +362,9 @@ export default defineComponent({
 					state.charts.bgColor = isIsDark ? 'transparent' : '';
 					state.charts.color = isIsDark ? '#dadada' : '#303133';
 					setTimeout(() => {
-						initLineChart();
-						initPieChart();
-						initBarChart();
-						initBarFourChart();
+						initLineChart('homeLineRef1');
+						initLineChart('homeLineRef3');
+						initLineChart('homeLineRef4');
 					}, 1000);
 				});
 			},
@@ -637,14 +377,12 @@ export default defineComponent({
 			unitMap,
 			tabName,
 			homeLineRef1,
-			homeLineRef2,
 			homeLineRef3,
 			homeLineRef4,
-			tabChange,
 			homePieRef,
 			homeBarRef,
 			homeFourBarRef,
-			changePieType,
+			// changePieType,
 			getStatisticsLineChartData,
 			...toRefs(state),
 		};
@@ -655,6 +393,11 @@ export default defineComponent({
 <style scoped lang="scss">
 $homeNavLengh: 8;
 
+.home-card-item-title {
+	margin-left: 12px;
+	margin-top: 3px;
+}
+
 .data-overview {
 	overflow: hidden;
 

src/views/heating/monitor/loopSupervision/heatStationDetail.vue

@@ -142,7 +142,7 @@ export default defineComponent({
 					title: '水量',
 					contentTitle1: '总耗水',
 					val1: '0',
-					contentTitle2: '总单耗',
+					contentTitle2: '小时补水量',
 					val2: '0',
 				},
 			],

src/views/heating/monitor/loopSupervision/loopDetail.vue

@@ -156,7 +156,7 @@ export default defineComponent({
 					title: '水量',
 					contentTitle1: '总耗水',
 					val1: '0',
-					contentTitle2: '总单耗',
+					contentTitle2: '小时补水量',
 					val2: '0',
 				},
 			],