添加天气图标&&完善环路回温/热用户室温占比饼图

src/api/datahub/index.ts

@@ -52,5 +52,12 @@ export default {
       getWhichCityWeather: (params: object) => get('/region/weather/getInfoById', params),
       getTemperatureEchartById: (params: object) => get('/region/weather/getTemperatureEchartById', params),
       getWindpowerEchartById: (params: object) => get('/region/weather/getWindpowerEchartById', params),
+   },
+
+   statistics:{
+      getStatisticsChartData: (params: object) => get('/statistics/bar/chart/data', params),
+      getStatisticsLineChartData: (params: object) => get('/statistics/broken/line/data', params),
+      getStatisticsTotalData: (params: object) => get('/statistics/city/data', params),
+      getStatisticsPieData: (params: object) => get('/statistics/tempering/ratio/data', params),
    }
 }

src/assets/ele.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1665456136412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6979" width="40" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M271.973 508.68l-0.467 0.516c-15.161 17.134-6.178 44.443 16.396 49.075l162.817 33.411-147.137 354.746c-12.63 30.449 26.067 55.938 49.027 32.294l410.916-423.155 0.486-0.511c15.79-16.999 6.974-44.925-15.926-49.613l-152.962-31.315L718.788 109.69c10.37-30.56-28.32-53.605-50.226-29.915L271.972 508.68z m345.075-285.15l-89.404 263.48-0.215 0.657c-5.298 16.85 5.123 34.684 22.518 38.245l132.675 27.162L418.71 824.845l101.086-243.71 0.25-0.621c6.7-17.199-3.668-36.397-21.844-40.127l-146.367-30.033L617.048 223.53z" fill="#333333" p-id="6980"></path></svg>

src/assets/ele1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1665456136412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6979" width="40" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M271.973 508.68l-0.467 0.516c-15.161 17.134-6.178 44.443 16.396 49.075l162.817 33.411-147.137 354.746c-12.63 30.449 26.067 55.938 49.027 32.294l410.916-423.155 0.486-0.511c15.79-16.999 6.974-44.925-15.926-49.613l-152.962-31.315L718.788 109.69c10.37-30.56-28.32-53.605-50.226-29.915L271.972 508.68z m345.075-285.15l-89.404 263.48-0.215 0.657c-5.298 16.85 5.123 34.684 22.518 38.245l132.675 27.162L418.71 824.845l101.086-243.71 0.25-0.621c6.7-17.199-3.668-36.397-21.844-40.127l-146.367-30.033L617.048 223.53z" fill="#ffffff" p-id="6980"></path></svg>

src/assets/fire.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1665456227936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7514" width="40" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M602.1 1008.1c-9.5 0-18.5-3.3-26.4-9.4-10.8-8.3-16.1-21.4-16.1-35.1 0-6.7 0.1-13.6 0.3-20.8 0.9-40.5 1.7-82.3-26-130.9-18.8-32.8-32.1-66-41.5-95.3C458 772 426 855.9 464.7 946.2c6.4 14.9 4.1 32.1-6 44.8-10.1 12.7-26.4 18.8-42.3 16-154-27.8-290.5-139.1-331.8-270.8-50.9-162-7.4-330.1 110.9-428.1 18.3-15.1 45.3-13.1 61.1 4.6l45.7 51.4c34.5-45.5 73.6-138.3-4.8-283.2-8.7-16.1-6.6-35.9 5.4-49.7 11.9-13.8 31.2-18.9 48.4-12.7 193.1 69.7 278.4 206.8 313.4 308.8 11.8-27.1 22.7-60.5 28.9-100.1 2.3-14.9 12.1-27.6 25.9-33.6 13.8-6 29.8-4.5 42.3 3.9 35.7 24.2 307.1 315.9 150.4 598.8-64.1 115.8-169.4 190.4-296.4 210l-2.9 0.5c-3.7 0.8-7.3 1.3-10.8 1.3z m-87-434.2c5.2 0 10.4 0.9 15.4 2.8 15.7 5.9 26.7 20.1 28.4 36.8 0.1 0.7 8.9 80.2 51.5 154.7 30.1 52.7 36.7 100.7 37.8 140.5 79.5-24 143.5-77 186.8-155.2 90.6-163.6-7.1-341.6-74.6-429.7-29.9 89.2-75.6 139.1-86.5 150.1-6.5 6.6-15 11.3-24.6 12.8-19.1 3.1-37.8-6.8-46.4-24.1-3.3-6.7-4.8-14.1-4.4-21.3-0.2-7-8.6-181.9-179-291.9 49.7 192.5-74.2 300.3-90.9 313.7-18.3 14.7-45 12.5-60.6-5l-46.5-52.3c-65.9 76.9-87.3 193.7-52.7 304 25.1 80.1 101.1 152.7 192.5 189.7-22.9-173.7 117-307.3 123.8-313.7 8.2-7.7 19-11.9 30-11.9z" p-id="7515" fill="#333333"></path></svg>

src/assets/fire1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1665456227936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7514" width="40" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M602.1 1008.1c-9.5 0-18.5-3.3-26.4-9.4-10.8-8.3-16.1-21.4-16.1-35.1 0-6.7 0.1-13.6 0.3-20.8 0.9-40.5 1.7-82.3-26-130.9-18.8-32.8-32.1-66-41.5-95.3C458 772 426 855.9 464.7 946.2c6.4 14.9 4.1 32.1-6 44.8-10.1 12.7-26.4 18.8-42.3 16-154-27.8-290.5-139.1-331.8-270.8-50.9-162-7.4-330.1 110.9-428.1 18.3-15.1 45.3-13.1 61.1 4.6l45.7 51.4c34.5-45.5 73.6-138.3-4.8-283.2-8.7-16.1-6.6-35.9 5.4-49.7 11.9-13.8 31.2-18.9 48.4-12.7 193.1 69.7 278.4 206.8 313.4 308.8 11.8-27.1 22.7-60.5 28.9-100.1 2.3-14.9 12.1-27.6 25.9-33.6 13.8-6 29.8-4.5 42.3 3.9 35.7 24.2 307.1 315.9 150.4 598.8-64.1 115.8-169.4 190.4-296.4 210l-2.9 0.5c-3.7 0.8-7.3 1.3-10.8 1.3z m-87-434.2c5.2 0 10.4 0.9 15.4 2.8 15.7 5.9 26.7 20.1 28.4 36.8 0.1 0.7 8.9 80.2 51.5 154.7 30.1 52.7 36.7 100.7 37.8 140.5 79.5-24 143.5-77 186.8-155.2 90.6-163.6-7.1-341.6-74.6-429.7-29.9 89.2-75.6 139.1-86.5 150.1-6.5 6.6-15 11.3-24.6 12.8-19.1 3.1-37.8-6.8-46.4-24.1-3.3-6.7-4.8-14.1-4.4-21.3-0.2-7-8.6-181.9-179-291.9 49.7 192.5-74.2 300.3-90.9 313.7-18.3 14.7-45 12.5-60.6-5l-46.5-52.3c-65.9 76.9-87.3 193.7-52.7 304 25.1 80.1 101.1 152.7 192.5 189.7-22.9-173.7 117-307.3 123.8-313.7 8.2-7.7 19-11.9 30-11.9z" p-id="7515" fill="#ffffff"></path></svg>

src/assets/water.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1665456354407" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9524" width="40" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M505.856 918.016c-177.664 0-322.56-144.896-322.56-322.56 0-220.16 225.28-423.936 293.888-480.768 16.384-13.824 40.448-13.824 56.832 0 69.12 57.344 293.888 260.608 293.888 480.768 0.512 178.176-143.872 322.56-322.048 322.56z m0-755.712c-57.344 48.64-267.776 240.128-267.776 433.664 0 147.968 120.32 267.776 267.776 267.776s267.776-120.32 267.776-267.776c0.512-194.048-210.432-385.536-267.776-433.664z" fill="#000000" p-id="9525"></path><path d="M453.632 800.768c-2.56 0-5.632-0.512-8.192-1.024-79.872-25.6-139.776-92.16-156.672-174.08-3.072-14.848 6.656-29.184 20.992-32.256 14.848-3.072 29.184 6.656 32.256 20.992 12.8 62.464 58.88 113.664 119.808 132.608 14.336 4.608 22.528 19.968 17.92 34.304-4.096 11.776-14.848 19.456-26.112 19.456z" fill="#000000" p-id="9526"></path></svg>

src/assets/water1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1665456354407" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9524" width="40" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M505.856 918.016c-177.664 0-322.56-144.896-322.56-322.56 0-220.16 225.28-423.936 293.888-480.768 16.384-13.824 40.448-13.824 56.832 0 69.12 57.344 293.888 260.608 293.888 480.768 0.512 178.176-143.872 322.56-322.048 322.56z m0-755.712c-57.344 48.64-267.776 240.128-267.776 433.664 0 147.968 120.32 267.776 267.776 267.776s267.776-120.32 267.776-267.776c0.512-194.048-210.432-385.536-267.776-433.664z" fill="#ffffff" p-id="9525"></path><path d="M453.632 800.768c-2.56 0-5.632-0.512-8.192-1.024-79.872-25.6-139.776-92.16-156.672-174.08-3.072-14.848 6.656-29.184 20.992-32.256 14.848-3.072 29.184 6.656 32.256 20.992 12.8 62.464 58.88 113.664 119.808 132.608 14.336 4.608 22.528 19.968 17.92 34.304-4.096 11.776-14.848 19.456-26.112 19.456z" fill="#ffffff" p-id="9526"></path></svg>

src/assets/雷电.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>雷电</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="天气图标" transform="translate(-677.000000, -493.000000)" fill="#2C79FF" fill-rule="nonzero">
+            <g id="形状" transform="translate(677.000000, 493.000000)">
+                <path d="M16.8862475,10.51875 C16.6785673,9.9825 16.1498178,9.62714844 15.5582813,9.62714844 L10.0549976,9.62665859 L13.9914849,1.99111172 C14.2946972,1.40286953 14.125788,0.690017969 13.589949,0.287830469 C13.3724762,0.0949179687 13.0667382,0 12.7211214,0 C12.3869808,0 12.053815,0.114554687 11.788399,0.340570312 L0.484955565,9.96445312 C0.0405277426,10.3418047 -0.117215333,10.9467187 0.090332017,11.4825391 C0.297879367,12.0183594 0.82658453,12.375 1.41812106,12.375 L6.92140477,12.3746176 L2.98491745,20.0101645 C2.68170513,20.5984066 2.85061429,21.3112582 3.38645334,21.7134457 C3.64291877,21.9054687 3.94909985,22 4.25350854,22 C4.58720604,22 4.92081492,21.885875 5.18667404,21.6596016 L16.4901175,12.0732734 C16.9748672,11.6574219 17.1299517,11.0515625 16.8862475,10.51875 Z M4.25350854,20.5863281 L8.18999585,12.9507813 C8.40981703,12.5245312 8.38624419,12.0183594 8.12796206,11.6127344 C7.86963562,11.2073672 7.41324413,10.9604688 6.92184787,10.9604688 L1.41856416,10.9613281 L12.7220076,1.37496181 C12.7221804,1.37496181 12.7212277,1.37496181 12.7220076,1.37496181 C12.7220076,1.37496181 12.721919,1.37496181 12.7220076,1.37496181 L8.78640647,9.01054687 C8.56658529,9.43671094 8.59015813,9.94296875 8.84844026,10.3481641 C9.1067667,10.7536172 9.56315819,11.0004297 10.0545545,11.0004297 L15.5578382,11.0001762 L4.25350854,20.5863281 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/home/index.vue

@@ -32,26 +32,30 @@
 		<el-row :gutter="15" class="home-card-two mb15">
 			<el-col >
 				<div class="home-card-item">
-					<div style="height: 100%" ref="homeLineRef"></div>
+					<div style="height: 100%" ref="homeBarRef"></div>
 				</div>
 			</el-col>
-			<!-- <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
-				<div class="home-card-item">
-					<div class="bar-header">
-						<p>环路回温/热用户室温占比</p>
-						<p>
-							<span>环路</span>
-							<span>热用户</span>
-						</p>
-					</div>
-					<div style="height: 90%" ref="homePieRef"></div>
-				</div>
-			</el-col> -->
 		</el-row>
 		<el-row :gutter="15" class="home-card-three">
 			<el-col :xs="24" :sm="10" :md="14" :lg="16" :xl="16">
 				<div class="home-card-item">
-					<div class="home-card-item-title">热网总能耗</div>
+					<div class="home-card-item-title" style="display: flex;justify-content:space-between;">
+						<span>热网总能耗</span>
+						<el-select @change="getStatisticsLineChartData()" v-model="rangeValue" placeholder="请选择查询范围" size="mini">
+							<el-option
+							v-for="item in [10, 30, 60]"
+							:key="item"
+							:label="'近'+item+'天'"
+							:value="item"
+							/>
+						</el-select>
+					</div>
+					<div class="lable-group">
+						<div @click="changeLineType('calorie', '总热耗')" :class="lineType == 'calorie' ? 'active' : ''">总热耗</div>
+						<div @click="changeLineType('electric', '总电耗')" :class="lineType == 'electric' ? 'active' : ''">总电耗</div>
+						<div @click="changeLineType('water', '总失水量')" :class="lineType == 'water' ? 'active' : ''">总失水量</div>
+					</div>
+					<div style="height: 100%" ref="homeLineRef"></div>
 					<!-- <div class="home-monitor">
 						<div class="flex-warp">
 							<div class="flex-warp-item" v-for="(v, k) in homeThree" :key="k">
@@ -70,11 +74,11 @@
 			<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
 				<div class="home-card-item">
 					<div class="bar-header">
-						<p>环路回温/热用户室温占比</p>
-						<p>
-							<span>环路</span>
-							<span>热用户</span>
-						</p>
+						<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: 90%" ref="homePieRef"></div>
 				</div>
@@ -93,6 +97,21 @@ import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onA
 import * as echarts from 'echarts';
 import { useStore } from '/@/store/index';
 
+import ele from '/@/assets/ele.svg';
+import ele1 from '/@/assets/ele1.svg';
+
+import fire from '/@/assets/fire.svg';
+import fire1 from '/@/assets/fire1.svg';
+
+import map from '/@/assets/map.svg';
+import map1 from '/@/assets/map1.svg';
+
+import water from '/@/assets/water.svg';
+import water1 from '/@/assets/water1.svg';
+
+
+import api from '/@/api/datahub';
+
 let global: any = {
 	homeChartOne: null,
 	homeChartTwo: null,
@@ -100,6 +119,8 @@ let global: any = {
 	dispose: [null, '', undefined],
 };
 
+
+
 export default defineComponent({
 	name: 'home',
 	setup() {
@@ -108,50 +129,52 @@ export default defineComponent({
 		const homeBarRef = ref();
 		const store = useStore();
 		const state = reactive({
+			checkList: ['一网供水温度'],
+			rangeValue: 10,
 			isIsDark: false,
 			dataOne: [
 				{
-					icon: "/@/assets/area.png",
-					iconDark: "/@/assets/area1.png",
+					icon: map,
+					iconDark: map1,
 					title: '供暖面积',
 					contentTitle1: '供热面积',
-					val1: '2112.12',
+					val1: '',
 					unit1: '㎡',
 					contentTitle2: '总面积',
-					val2: '2112.12',
+					val2: '',
 					unit2: '㎡',
 				},
 				{
-					icon: "@/assets/fire.png",
-					iconDark: "/@/assets/fire1.png",
+					icon: fire,
+					iconDark: fire1,
 					title: '热量',
 					contentTitle1: '总耗热',
-					val1: '4500',
+					val1: '',
 					unit1: 'GJ',
 					contentTitle2: '总单耗',
-					val2: '0.34',
+					val2: '',
 					unit2: 'GJ/㎡',
 				},
 				{
-					icon: "@/assets/ele.png",
-					iconDark: "/@/assets/ele1.png",
+					icon: ele,
+					iconDark: ele1,
 					title: '电量',
 					contentTitle1: '总耗电',
-					val1: '5200',
+					val1: '',
 					unit1: 'KW.h',
 					contentTitle2: '总单耗',
-					val2: '0.22',
+					val2: '',
 					unit2: 'KW.h/㎡',
 				},
 				{
-					icon: "@/assets/water.png",
-					iconDark: "/@/assets/water1.png",
+					icon: water,
+					iconDark: water1,
 					title: '水量',
 					contentTitle1: '总耗水',
-					val1: '4500',
+					val1: '',
 					unit1: 'T',
 					contentTitle2: '总单耗',
-					val2: '0.23',
+					val2: '',
 					unit2: 'T/㎡',
 					
 				},
@@ -218,99 +241,212 @@ export default defineComponent({
 				bgColor: '',
 				color: '#303133',
 			},
+			statisticsChartXAxisData: [],
+			inTemperature1: [],
+			outTemperature1: [],
+			lineType: 'calorie',
+			lineName: '总热耗',
+			lineData: [],
+			xAxisData: [],
+			calorieLineData: [],
+			calorieXAxisData: [],
+			electricLineData: [],
+			electricXAxisData: [],
+			waterLineData: [],
+			waterXAxisData: [],
+			pieData: [],
+			pieType: '1'
 		});
-		// 折线图
-		const initLineChart = () => {
+
+		// 获取顶部总数据
+		const getStatisticsTotalData = () => {
+			api.statistics.getStatisticsTotalData({tableNo:16}).then((res:any) => {
+				const { allArea, area, calorie, cityNO, electric, singleCalorie, singleElectric, singleWater, water } = res.Info;
+				// "cityNO": "C003", //城市编号
+				// "area": 7876726.23, //供热面积
+				// "allArea": 7876730, //总面积
+				// "calorie": 0, //总耗热
+				// "singleCalorie": 0, //总单耗
+				// "electric": 0, //总耗电
+				// "singleElectric": 0, //总单耗
+				// "water": 0, //总耗水
+				// "singleWater": 0 //总单耗
+				state.dataOne[0].val1 = area;
+				state.dataOne[0].val2 = allArea;
+
+				state.dataOne[1].val1 = calorie;
+				state.dataOne[1].val2 = singleWater;
+
+				state.dataOne[2].val1 = electric;
+				state.dataOne[2].val2 = singleElectric;
+
+				state.dataOne[3].val1 = water;
+				state.dataOne[3].val2 = singleWater;
+
+			});
+		};
+		
+		// 获取供热监测数据
+		const getStatisticsChartData = () => {
+			api.statistics.getStatisticsChartData({tableNo:17}).then((res:any) => {
+				console.log(res)
+				const data = res.Info
+				// "huanLuNo": "D00140-4", //换热站编号
+				// "huanLuName": "8#楼高区", //换热站名称
+				// "inPressure1": 0, //一网供水压力
+				// "inPressure2": 0, //二网供水压力
+				// "inTemperature1": 0, //一网供水温度
+				// "inTemperature2": 0, //二网供水温度
+				// "outPressure1": 0, //一网回水压力
+				// "outPressure2": 0, //二网回水压力
+				// "outTemperature1": 0, //一网回水温度
+				// "outTemperature2": 0 //二网回水温度
+
+				// <el-checkbox label="一网供水温度" />
+				// <el-checkbox label="一网回水温度" />
+				// <el-checkbox label="二网供回水温差" />
+				// <el-checkbox label="二网供回水压差" />
+				// <el-checkbox label="压力值" />
+				state.statisticsChartXAxisData = [];
+				state.inTemperature1 = [];
+				state.outTemperature1 = [];
+				data.forEach((i:object) => {
+					state.statisticsChartXAxisData.push(i.huanLuName);
+					state.inTemperature1.push(i.inTemperature1);
+					state.outTemperature1.push(i.outTemperature1);
+				});
+
+				console.log(state.statisticsChartXAxisData)
+				nextTick(() => {
+					initBarChart();
+				});
+
+			});
+		};
+		// 柱状图
+		const initBarChart = () => {
+			console.log(323342)
 			if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
-			global.homeChartOne = <any>echarts.init(homeLineRef.value, state.charts.theme);
+			global.homeChartOne = <any>echarts.init(homeBarRef.value, state.charts.theme);
 			const option = {
-				backgroundColor: state.charts.bgColor,
+				tooltip: {
+					trigger: 'axis'
+				},
 				title: {
-					text: '设备消息',
+					text: '供热监测',
 					x: 'left',
 					textStyle: { fontSize: '15', color: state.charts.color },
 				},
-				grid: { top: 70, right: 20, bottom: 30, left: 30 },
-				tooltip: { trigger: 'axis' },
-				legend: { data: ['消息量', '预警量'], right: 0 },
-				xAxis: {
-					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+				legend: {
+					data: ['一网供水温度', '一网回水温度', '二网供回水温差', '二网供回水压差', '压力值'],
+					top: 35
 				},
+				grid: { top: 80, bottom: 30 },
+				calculable: true,
+				xAxis: [
+					{ data: state.statisticsChartXAxisData }
+				],
 				yAxis: [
 					{
-						type: 'value',
-						name: '条数',
-						splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
-					},
+						type: 'value'
+					}
 				],
 				series: [
 					{
-						name: '消息量',
-						type: 'line',
-						symbolSize: 6,
-						symbol: 'circle',
-						smooth: true,
-						data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
-						lineStyle: { color: '#fe9a8b' },
-						itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: '#fe9a8bb3' },
-								{ offset: 1, color: '#fe9a8b03' },
-							]),
-						},
+						name: '一网供水温度',
+						type: 'bar',
+						data: state.inTemperature1,
+						markLine: {
+							data: [{ type: 'average', name: 'Avg' }]
+						}
 					},
 					{
-						name: '预警量',
-						type: 'line',
-						symbolSize: 6,
-						symbol: 'circle',
-						smooth: true,
-						data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
-						lineStyle: { color: '#9E87FF' },
-						itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: '#9E87FFb3' },
-								{ offset: 1, color: '#9E87FF03' },
-							]),
-						},
-						emphasis: {
-							itemStyle: {
-								color: {
-									type: 'radial',
-									x: 0.5,
-									y: 0.5,
-									r: 0.5,
-									colorStops: [
-										{ offset: 0, color: '#9E87FF' },
-										{ offset: 0.4, color: '#9E87FF' },
-										{ offset: 0.5, color: '#fff' },
-										{ offset: 0.7, color: '#fff' },
-										{ offset: 0.8, color: '#fff' },
-										{ offset: 1, color: '#fff' },
-									],
-								},
-								borderColor: '#9E87FF',
-								borderWidth: 2,
-							},
-						},
+						name: '一网回水温度',
+						type: 'bar',
+						data: state.outTemperature1,
+						markLine: {
+							data: [{ type: 'average', name: 'Avg' }]
+						}
 					},
-				],
+					{
+						name: '二网供回水温差',
+						type: 'bar',
+						data: [],
+						markLine: {
+							data: [{ type: 'average', name: 'Avg' }]
+						}
+					},
+					{
+						name: '二网供回水压差',
+						type: 'bar',
+						data: [],
+						markLine: {
+							data: [{ type: 'average', name: 'Avg' }]
+						}
+					},
+					{
+						name: '压力值',
+						type: 'bar',
+						data: [],
+						markLine: {
+							data: [{ type: 'average', name: 'Avg' }]
+						}
+					},
+
+					
+				]
 			};
 			(<any>global.homeChartOne).setOption(option);
 			(<any>state.myCharts).push(global.homeChartOne);
 		};
+		// 获取环路回温占比数据数据
+		const getStatisticsPieData = () => {
+			api.statistics.getStatisticsPieData({tableNo:21}).then((res:any) => {
+				console.log(res)
+				const data = res.Info
+				// "huanLuNo": "D00140-4", //换热站编号
+				// "huanLuName": "8#楼高区", //换热站名称
+				// "inPressure1": 0, //一网供水压力
+				// "inPressure2": 0, //二网供水压力
+				// "inTemperature1": 0, //一网供水温度
+				// "inTemperature2": 0, //二网供水温度
+				// "outPressure1": 0, //一网回水压力
+				// "outPressure2": 0, //二网回水压力
+				// "outTemperature1": 0, //一网回水温度
+				// "outTemperature2": 0 //二网回水温度
+
+				// <el-checkbox label="一网供水温度" />
+				// <el-checkbox label="一网回水温度" />
+				// <el-checkbox label="二网供回水温差" />
+				// <el-checkbox label="二网供回水压差" />
+				// <el-checkbox label="压力值" />
+				// state.statisticsChartXAxisData = [];
+				// state.inTemperature1 = [];
+				// state.outTemperature1 = [];
+				data.forEach((i:object) => {
+					// state.pieNameArr.push(i.temperatureRange);
+					// state.pieData.push(i.rate);
+					// state.outTemperature1.push(i.outTemperature1);
+					state.pieData.push({name: i.temperatureRange, value: i.rate, num: i.num});
+				});
+
+				console.log(state.statisticsChartXAxisData)
+				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] });
-			}
+			// 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,
@@ -319,7 +455,8 @@ export default defineComponent({
 				// 	x: 'left',
 				// 	textStyle: { fontSize: '15', color: state.charts.color },
 				// },
-				tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
+				//  '{b0}: {c0}<br />{b1}: {c1}', 
+				tooltip: { trigger: 'item', formatter: '{b} <br/> {d}% <br/>' },
 				// graphic: {
 				// 	elements: [
 				// 		{
@@ -377,28 +514,31 @@ export default defineComponent({
 						// 		return colorList[params.dataIndex];
 						// 	},
 						// },
-						radius: ['40%', '70%'],
-						avoidLabelOverlap: false,
+						radius: [60, 100],
+						center: ['50%', '50%'],
+						// roseType: 'area',
+						// avoidLabelOverlap: false,
 						itemStyle: {
-							borderRadius: 10,
-							borderColor: '#fff',
-							borderWidth: 2
+							borderRadius: 8,
+							// borderColor: '#fff',
+							// borderWidth: 2
 						},
 						label: {
-							show: false,
-							position: 'center'
-						},
-						emphasis: {
-							label: {
 							show: true,
-							fontSize: '40',
-							fontWeight: 'bold'
-							}
-						},
-						labelLine: {
-							show: false
+							// position: 'center',
+							formatter: '{b} {d}%'
 						},
-						data: data,
+						// emphasis: {
+						// 	label: {
+						// 	show: true,
+						// 	fontSize: '40',
+						// 	fontWeight: 'bold'
+						// 	}
+						// },
+						// labelLine: {
+						// 	show: false
+						// },
+						data: state.pieData,
 
 
 					},
@@ -407,137 +547,148 @@ export default defineComponent({
 			(<any>global.homeChartTwo).setOption(option);
 			(<any>state.myCharts).push(global.homeChartTwo);
 		};
-		// 柱状图
-		const initBarChart = () => {
+		// 获取热网总能耗数据
+		const getStatisticsLineChartData = () => {
+			api.statistics.getStatisticsLineChartData({tableNo:16, timeInterval: state.rangeValue}).then((res:any) => {
+				console.log(res)
+				const { calorie, electric, water } = res.Info
+				// calorie：总热耗  electric：总电耗  water：总失水量
+				state.lineType = 'calorie';
+				state.lineName = '总热耗';
+				state.calorieLineData = [];
+				state.calorieXAxisData = [];
+				state.electricLineData = [];
+				state.electricXAxisData = [];
+				state.waterLineData = [];
+				state.waterXAxisData = [];
+				calorie.forEach((i:any) => {
+					console.log(i)
+					state.calorieLineData.push(i.values)
+					state.calorieXAxisData.push(i.accessDay)
+				});
+				electric.forEach((i:any) => {
+					state.electricLineData.push(i.values)
+					state.electricXAxisData.push(i.accessDay)
+				});
+				water.forEach((i:any) => {
+					state.waterLineData.push(i.values)
+					state.waterXAxisData.push(i.accessDay)
+				});
+				state.lineData = state.calorieLineData;
+				state.xAxisData = state.calorieXAxisData;
+				console.log(state.xAxisData)
+				nextTick(() => {
+					initLineChart();
+				});
+
+				// const data = res.Info
+				// // "huanLuNo": "D00140-4", //换热站编号
+				// // "huanLuName": "8#楼高区", //换热站名称
+				// // "inPressure1": 0, //一网供水压力
+				// // "inPressure2": 0, //二网供水压力
+				// // "inTemperature1": 0, //一网供水温度
+				// // "inTemperature2": 0, //二网供水温度
+				// // "outPressure1": 0, //一网回水压力
+				// // "outPressure2": 0, //二网回水压力
+				// // "outTemperature1": 0, //一网回水温度
+				// // "outTemperature2": 0 //二网回水温度
+
+				// // <el-checkbox label="一网供水温度" />
+				// // <el-checkbox label="一网回水温度" />
+				// // <el-checkbox label="二网供回水温差" />
+				// // <el-checkbox label="二网供回水压差" />
+				// // <el-checkbox label="压力值" />
+				// state.statisticsChartXAxisData = [];
+				// state.inPressure1Data = [];
+				// data.forEach((i:object) => {
+				// 	state.statisticsChartXAxisData.push(i.huanLuName);
+				// 	state.inPressure1Data.push(i.inPressure1);
+				// });
+
+				// console.log(state.statisticsChartXAxisData)
+				// nextTick(() => {
+				// 	initBarChart();
+				// });
+
+			});
+		};
+		// 折线图
+		const initLineChart  = () => {
 			if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
-			global.homeCharThree = <any>echarts.init(homeBarRef.value, state.charts.theme);
+			global.homeCharThree = <any>echarts.init(homeLineRef.value, state.charts.theme);
 			const option = {
 				backgroundColor: state.charts.bgColor,
-				title: {
-					text: '供热监测',
-					x: 'left',
-					textStyle: { fontSize: '15', color: state.charts.color },
-				},
 				tooltip: { trigger: 'axis' },
-				legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 },
-				grid: { top: 70, right: 80, bottom: 30, left: 80 },
+				legend: { data: [state.lineName], top: 30 },
+				grid: { top: 70, right: 40, bottom: 100, left: 40 },
 				xAxis: [
 					{
 						type: 'category',
-						data: ['1km', '2km', '3km', '4km', '5km', '6km'],
+						data: state.xAxisData,
 						boundaryGap: true,
 						axisTick: { show: false },
 					},
 				],
 				yAxis: [
 					{
-						name: '供回温度(℃）',
-						nameLocation: 'middle',
-						nameTextStyle: { padding: [3, 4, 50, 6] },
-						splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
-						axisLine: { show: false },
-						axisTick: { show: false },
-						axisLabel: { color: state.charts.color, formatter: '{value} ' },
-					},
-					{
-						name: '压力值(Mpa)',
-						nameLocation: 'middle',
-						nameTextStyle: { padding: [50, 4, 5, 6] },
-						splitLine: { show: false },
-						axisLine: { show: false },
-						axisTick: { show: false },
-						axisLabel: { color: state.charts.color, formatter: '{value} ' },
-					},
+						type: 'value'
+					}
 				],
 				series: [
 					{
-						name: '供温',
+						name: state.lineName,
 						type: 'line',
 						smooth: true,
 						showSymbol: true,
-						// 矢量画五角星
-						symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
 						symbolSize: 12,
 						yAxisIndex: 0,
 						areaStyle: {
 							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: 'rgba(250,180,101,0.3)' },
-								{ offset: 1, color: 'rgba(250,180,101,0)' },
+								{ offset: 0, color: 'rgba(22,132,252,0.3)' },
+								{ offset: 1, color: 'rgba(22,132,252,0)' },
 							]),
-							shadowColor: 'rgba(250,180,101,0.2)',
+							shadowColor: 'rgba(22,132,252,0.2)',
 							shadowBlur: 20,
 						},
-						itemStyle: { color: '#FF8000' },
-						// data中可以使用对象，value代表相应的值，另外可加入自定义的属性
-						data: [
-							{ value: 50, stationName: 's1' },
-							{ value: 50, stationName: 's2' },
-							{ value: 60, stationName: 's3' },
-							{ value: 50, stationName: 's4' },
-							{ value: 90, stationName: 's5' },
-							{ value: 35, stationName: 's6' },
-						],
-					},
-					{
-						name: '回温',
-						type: 'line',
-						smooth: true,
-						showSymbol: true,
-						symbol: 'emptyCircle',
-						symbolSize: 12,
-						yAxisIndex: 0,
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(
-								0,
-								0,
-								0,
-								1,
-								[
-									{ offset: 0, color: 'rgba(199, 237, 250,0.5)' },
-									{ offset: 1, color: 'rgba(199, 237, 250,0.2)' },
-								],
-								false
-							),
-						},
-						itemStyle: {
-							color: '#3bbc86',
-						},
-						data: [
-							{ value: 31, stationName: 's1' },
-							{ value: 36, stationName: 's2' },
-							{ value: 54, stationName: 's3' },
-							{ value: 24, stationName: 's4' },
-							{ value: 73, stationName: 's5' },
-							{ value: 22, stationName: 's6' },
-						],
-					},
-					{
-						name: '压力值(Mpa)',
-						type: 'bar',
-						barWidth: 30,
-						yAxisIndex: 1,
-						itemStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: 'rgba(108,80,243,0.3)' },
-								{ offset: 1, color: 'rgba(108,80,243,0)' },
-							]),
-							//柱状图圆角
-							borderRadius: [30, 30, 0, 0],
-						},
-						data: [
-							{ value: 11, stationName: 's1' },
-							{ value: 34, stationName: 's2' },
-							{ value: 54, stationName: 's3' },
-							{ value: 39, stationName: 's4' },
-							{ value: 63, stationName: 's5' },
-							{ value: 24, stationName: 's6' },
-						],
-					},
+						itemStyle: { color: 'rgba(22, 132, 252, 1)' },
+						data: state.lineData,
+					}
 				],
 			};
 			(<any>global.homeCharThree).setOption(option);
 			(<any>state.myCharts).push(global.homeCharThree);
 		};
+		// 切换折线图类型
+		const changeLineType = (type: string, name: string) => {
+			state.lineType = type;
+			state.lineName = name;
+			console.log(type)
+			console.log(name)
+			let keyWord = type+'LineData'
+			state.lineData = state[keyWord];
+			// if(type=='calorie') {
+			// 	state.lineData = 
+			// }
+			nextTick(() => {
+				initLineChart();
+			});
+		};
+		// 切换饼图类型
+		const changePieType = (type: string, name: string) => {
+			state.pieType = type;
+			console.log(type)
+			// state.lineName = name;
+			// console.log(type)
+			// console.log(name)
+			// let keyWord = type+'LineData'
+			// state.lineData = state[keyWord];
+			// if(type=='calorie') {
+			// 	state.lineData = 
+			// }
+			nextTick(() => {
+				initPieChart();
+			});
+		};
 		// 批量设置 echarts resize
 		const initEchartsResizeFun = () => {
 			nextTick(() => {
@@ -555,8 +706,12 @@ export default defineComponent({
 		// 页面加载时
 		onMounted(() => {
 			initEchartsResize();
-				// 获取布局配置信息
-				state.isIsDark =  store.state.themeConfig.themeConfig.isIsDark;
+			getStatisticsTotalData();
+			getStatisticsChartData();
+			getStatisticsLineChartData();
+			getStatisticsPieData();
+			// 获取布局配置信息
+			state.isIsDark =  store.state.themeConfig.themeConfig.isIsDark;
 		});
 		// 由于页面缓存原因，keep-alive
 		onActivated(() => {
@@ -589,14 +744,15 @@ export default defineComponent({
 					state.charts.bgColor = isIsDark ? 'transparent' : '';
 					state.charts.color = isIsDark ? '#dadada' : '#303133';
 					setTimeout(() => {
+						initBarChart();
+					}, 1000);
+					setTimeout(() => {
 						initLineChart();
 					}, 500);
 					setTimeout(() => {
 						initPieChart();
 					}, 700);
-					setTimeout(() => {
-						initBarChart();
-					}, 1000);
+					
 				});
 			},
 			{
@@ -608,6 +764,9 @@ export default defineComponent({
 			homeLineRef,
 			homePieRef,
 			homeBarRef,
+			changePieType,
+			getStatisticsLineChartData,
+			changeLineType,
 			...toRefs(state),
 		};
 	},
@@ -785,4 +944,33 @@ $homeNavLengh: 8;
     margin-top: 20px;
   }
 }
+.lable-group,
+.lable-group1 {
+	// background-color: pink;
+	display: flex;
+	width: 100%;
+	margin-top: 20px;
+	border: 1px solid rgba(22, 132, 252, 1);
+	>div {
+		cursor: pointer;
+		width: 33%;
+		text-align: center;
+		padding: 6px 0;
+		
+		color: rgba(22, 132, 252, 1);
+	}
+	div:nth-child(2) {
+		border-left: 1px solid rgba(22, 132, 252, 1);
+		border-right: 1px solid rgba(22, 132, 252, 1);
+	}
+	.active {
+		background-color: rgba(22, 132, 252, 1);
+		color: #fff;
+	}
+
+}
+.lable-group1 > div {
+	width: 50%;
+}
+
 </style>

src/views/monitor/weather.vue

@@ -21,6 +21,7 @@
 					<div class="weather-info">
 						<section>
 							<span class="temperature">{{oneCityInfo.Temperature}}℃</span>
+							<img :src="weatherObj[oneCityInfo.weather]" alt="">
 							<span class="weather">{{oneCityInfo.weather}}</span>
 							<span>{{oneCityInfo.reporttime}}更新</span>
 							
@@ -84,6 +85,22 @@ import { useStore } from '/@/store/index';
 
 import api from '/@/api/datahub';
 
+import weather1 from '/@/assets/冰雹.svg';
+import weather2 from '/@/assets/多云（白天）.svg';
+import weather3 from '/@/assets/多云（夜晚）.svg';
+import weather4 from '/@/assets/雷电.svg';
+import weather5 from '/@/assets/雷阵雨.svg';
+import weather6 from '/@/assets/沙尘.svg';
+import weather7 from '/@/assets/雾.svg';
+import weather8 from '/@/assets/雪.svg';
+import weather9 from '/@/assets/夜晚.svg';
+import weather10 from '/@/assets/阴.svg';
+import weather11 from '/@/assets/雨.svg';
+import weather12 from '/@/assets/雨加雪.svg';
+import weather13 from '/@/assets/阵雨.svg';
+import weather14 from '/@/assets/晴天.svg';
+
+
 let global: any = {
 	homeChartOne: null,
 	homeChartTwo: null,
@@ -94,6 +111,22 @@ let global: any = {
 export default defineComponent({
 	name: 'home',
 	setup() {
+		const weatherObj = ref({
+			'冰雹': weather1,
+			'多云': weather2,
+			'多云（夜晚）': weather3,
+			'雷电': weather4,
+			'雷阵雨': weather5,
+			'沙尘': weather6,
+			'雾': weather7,
+			'雪': weather8,
+			'夜晚': weather9,
+			'阴': weather10,
+			'雨': weather11,
+			'雨加雪': weather12,
+			'阵雨': weather13,
+			'晴天': weather14
+		});
 		const homeTemLineRef = ref();
 		const homeWindLineRef = ref();
 		// const homePieRef = ref();
@@ -487,6 +520,7 @@ export default defineComponent({
 			}
 		);
 		return {
+			weatherObj,
 			homeTemLineRef,
 			homeWindLineRef,
 			getWhichCityWeather,
@@ -568,8 +602,11 @@ $homeNavLengh: 8;
 					font-size: 50px;
 					font-weight: bold;
 				}
+				img {
+					margin: 0 10px 0 30px;
+				}
 				.weather {
-					margin: 0 30px;
+					margin-right: 30px;
 				}
 				img {
 					width: 24px;