优化主页的环路回温显示

src/views/heating/home/index.vue

@@ -1,72 +1,84 @@
 <template>
-  <div class="data-overview">
-    <el-row :gutter="15" class="home-card-one mb15">
-      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in dataOne" :key="k" :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
-        <div class="home-card-item">
-          <div class="item-header">
-            <img :src="isIsDark ? v.iconDark : v.icon" alt="">
-            <span>{{ v.title }}</span>
-          </div>
-          <div class="item-content w100" :class="` home-one-animation${k}`">
-            <p>
-              <span>{{ v.contentTitle1 }}</span>
-              <span>{{ v.val1 }} {{ unitMap[v.contentTitle1]}}</span>
-            </p>
-            <p>
-              <span>{{ v.contentTitle2 }}</span>
-              <span>{{ v.val2 }} {{unitMap[v.title + '：' + v.contentTitle2]? unitMap[v.title + '：' + v.contentTitle2]: unitMap[v.contentTitle2]}}</span>
-            </p>
-          </div>
-        </div>
-      </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-tabs>
-        </div>
-      </el-col>
-      <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 class="data-overview">
+		<el-row :gutter="15" class="home-card-one mb15">
+			<el-col
+				:xs="24"
+				:sm="12"
+				:md="12"
+				:lg="6"
+				:xl="6"
+				v-for="(v, k) in dataOne"
+				:key="k"
+				:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
+			>
+				<div class="home-card-item">
+					<div class="item-header">
+						<img :src="isIsDark ? v.iconDark : v.icon" alt="" />
+						<span>{{ v.title }}</span>
+					</div>
+					<div class="item-content w100" :class="` home-one-animation${k}`">
+						<p>
+							<span>{{ v.contentTitle1 }}</span>
+							<span>{{ v.val1 }} {{ unitMap[v.contentTitle1] }}</span>
+						</p>
+						<p>
+							<span>{{ v.contentTitle2 }}</span>
+							<span
+								>{{ v.val2 }}
+								{{ unitMap[v.title + '：' + v.contentTitle2] ? unitMap[v.title + '：' + v.contentTitle2] : unitMap[v.contentTitle2] }}</span
+							>
+						</p>
+					</div>
+				</div>
+			</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-tabs>
+				</div>
+			</el-col>
+			<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: 90%" ref="homePieRef"></div>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="15" class="home-card-three mb15">
-      <el-col>
-        <div class="home-card-item">
-          <div style="height: 100%" ref="homeBarRef"></div>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="15" class="home-card-four">
-      <el-col>
-        <div class="home-card-item">
-          <div style="height: 100%" ref="homeFourBarRef"></div>
-        </div>
-      </el-col>
-    </el-row>
-  </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>
+				<div class="home-card-item">
+					<div style="height: 100%" ref="homeBarRef"></div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-row :gutter="15" class="home-card-four">
+			<el-col>
+				<div class="home-card-item">
+					<div style="height: 100%" ref="homeFourBarRef"></div>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
 </template>
 
 <script lang="ts">
@@ -87,541 +99,539 @@ import map1 from '/@/assets/img/map1.svg';
 import water from '/@/assets/img/water.svg';
 import water1 from '/@/assets/img/water1.svg';
 
-
 import api from '/@/api/datahub';
 
 let global: any = {
-  homeChartOne: null,
-  homeChartTwo: null,
-  homeCharThree: null,
-  homeCharFour: null,
-  dispose: [null, '', undefined],
+	homeChartOne: null,
+	homeChartTwo: null,
+	homeCharThree: null,
+	homeCharFour: null,
+	dispose: [null, '', undefined],
 };
 
 export default defineComponent({
-  name: 'heating-home',
-  setup() {
-    const tabName = ref('homeLineRef1');
-    const homeLineRef1 = ref();
-    const homeLineRef2 = ref();
-    const homeLineRef3 = ref();
-    const homePieRef = ref();
-    const homeBarRef = ref();
-    const homeFourBarRef = ref();
-    const unitMap = ref<any>({});
-    const store = useStore();
-
-    // 统计信息的单位的字典
-    apiDatahub.template.getDictData({ DictType: 'overview_unit' }).then((res: any) => {
-      res.values.forEach((v: any) => {
-        unitMap.value[v.value] = v.key;
-      });
-    });
-
-    const state = reactive({
-      checkList: ['一网供水温度'],
-      rangeValue: 10,
-      isIsDark: false,
-      dataOne: [
-        {
-          icon: map,
-          iconDark: map1,
-          title: '供热面积',
-          contentTitle1: '供热面积',
-          val1: '',
-          unit1: '万㎡',
-          contentTitle2: '总面积',
-          val2: '',
-          unit2: '万㎡',
-        },
-        {
-          icon: fire,
-          iconDark: fire1,
-          title: '热量',
-          contentTitle1: '总耗热',
-          val1: '',
-          unit1: '万GJ',
-          contentTitle2: '总单耗',
-          val2: '',
-          unit2: 'GJ/㎡',
-        },
-        {
-          icon: ele,
-          iconDark: ele1,
-          title: '电量',
-          contentTitle1: '总耗电',
-          val1: '',
-          unit1: '万KW.h',
-          contentTitle2: '总单耗',
-          val2: '',
-          unit2: 'KW.h/㎡',
-        },
-        {
-          icon: water,
-          iconDark: water1,
-          title: '水量',
-          contentTitle1: '总耗水',
-          val1: '',
-          unit1: 'T',
-          contentTitle2: '总单耗',
-          val2: '',
-          unit2: 'kg/㎡',
-
-        },
-      ],
-      myCharts: [],
-      charts: {
-        theme: '',
-        bgColor: '',
-        color: '#303133',
-      },
-      statisticsChartXAxisData: [],
-      inTemperature: [],
-      outTemperature: [],
-      diffTemperature: [],
-      chartXAxisData: [],
-      flowLossData: [],
-      elctricConsumptionData: [],
-      unitConsumptionData: [],
-      pieData: [],
-      pieType: '1',
-      pressureXAxisData: [],
-      inPressureData: [],
-      outPressureData: [],
-      diffPressureData: []
-    });
-
-    // 获取顶部总数据
-    const getStatisticsTotalData = () => {
-      api.statistics.getStatisticsOverview({ queryType: 'num' }).then((res: any) => {
-        const {
-          elctricConsumption,
-          elctricConsumptionTotal,
-          flowLoss,
-          flowLossTotal,
-          forRealArea,
-          heatingArea,
-          unitConsumption,
-          unitConsumptionTotal
-        } = res.data;
-        state.dataOne[0].val1 = heatingArea;
-        state.dataOne[0].val2 = forRealArea;
-
-        state.dataOne[1].val1 = unitConsumptionTotal;
-        state.dataOne[1].val2 = unitConsumption;
-
-        state.dataOne[2].val1 = elctricConsumptionTotal;
-        state.dataOne[2].val2 = elctricConsumption;
-
-        state.dataOne[3].val1 = flowLossTotal;
-        state.dataOne[3].val2 = flowLoss;
-
-      });
-    };
-
-    // 获取温度监测数据
-    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: 80, bottom: 30 },
-        // 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: 80, bottom: 30 },
-        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: 80, bottom: 10 },
-        tooltip: { trigger: 'item', formatter: '{b} <br/> {d}% <br/>' },
-        legend: {
-          top: 35,
-          color: state.charts.color,
-          textStyle: {
-            color: state.charts.color,
-          },
-        },
-        series: [
-          {
-            type: 'pie',
-            radius: [60, 100],
-            center: ['50%', '65%'],
-            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;
-      api.statistics.getStatisticsOverview({ queryType: 'energy' }).then((res: any) => {
-        const { flowLoss, elctricConsumption, unitConsumption } = res.data
-        // calorie：总热耗  electric：总电耗  water：总失水量
-        state.chartXAxisData = [];
-        state.flowLossData = [];
-        state.elctricConsumptionData = [];
-        state.unitConsumptionData = [];
-        flowLoss.forEach((i: any) => {
-          state.chartXAxisData.push(i.date)
-          state.flowLossData.push(i.total)
-        });
-        elctricConsumption.forEach((i: any) => {
-          state.elctricConsumptionData.push(i.total)
-        });
-        unitConsumption.forEach((i: any) => {
-          state.unitConsumptionData.push(i.total)
-        });
-        if (state.rangeValue == 10) return
-        nextTick(() => {
-          initLineChart();
-        });
-
-      });
-    };
-    // 折线图
-    const initLineChart = () => {
-      if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
-
-      let dom: any
-      let data: any
-      if (tabName.value === 'homeLineRef1') {
-        dom = homeLineRef1.value
-        data = state.flowLossData
-      } else if (tabName.value === 'homeLineRef2') {
-        dom = homeLineRef2.value
-        data = state.elctricConsumptionData
-      } else {
-        dom = homeLineRef3.value
-        data = state.unitConsumptionData
-      }
-
-      global.homeCharThree = <any>echarts.init(dom, state.charts.theme);
-
-      const common = {
-        type: 'line',
-        smooth: true,
-        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 },
-        xAxis: [
-          {
-            type: 'category',
-            data: state.chartXAxisData,
-            boundaryGap: true,
-            axisTick: { show: false }
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            ...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(data.paneName);
-      }, 100)
-    };
-    // 切换饼图类型
-    const changePieType = (type: string, name: string) => {
-      state.pieType = type;
-      nextTick(() => {
-        initPieChart();
-      });
-    };
-    // 批量设置 echarts resize
-    const initEchartsResizeFun = () => {
-      nextTick(() => {
-        for (let i = 0; i < state.myCharts.length; i++) {
-          setTimeout(() => {
-            (<any>state.myCharts[i]).resize();
-          }, i * 1000);
-        }
-      });
-    };
-    // 批量设置 echarts resize
-    const initEchartsResize = () => {
-      window.addEventListener('resize', initEchartsResizeFun);
-    };
-    // 页面加载时
-    onMounted(() => {
-      initEchartsResize();
-      getStatisticsTotalData();
-      getStatisticsChartData();
-      getStatisticsPressureChartData();
-      getStatisticsLineChartData();
-      getStatisticsPieData();
-      // 获取布局配置信息
-      state.isIsDark = store.state.themeConfig.themeConfig.isIsDark;
-    });
-    // 由于页面缓存原因，keep-alive
-    onActivated(() => {
-      initEchartsResizeFun();
-    });
-    // 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
-    watch(
-      () => store.state.tagsViewRoutes.isTagsViewCurrenFull,
-      () => {
-        initEchartsResizeFun();
-      }
-    );
-    // 监听 vuex 中是否开启深色主题
-    watch(
-      () => store.state.themeConfig.themeConfig.isIsDark,
-      () => {
-        state.isIsDark = store.state.themeConfig.themeConfig.isIsDark
-      },
-      {
-        deep: true,
-        immediate: true,
-      }
-    );
-    // 监听 vuex 中是否开启深色主题
-    watch(
-      () => store.state.themeConfig.themeConfig.isIsDark,
-      (isIsDark) => {
-        nextTick(() => {
-          // if(!isIsDark) return
-          state.charts.theme = isIsDark ? 'transparent' : '';
-          state.charts.bgColor = isIsDark ? 'transparent' : '';
-          state.charts.color = isIsDark ? '#dadada' : '#303133';
-          setTimeout(() => {
-            initLineChart();
-            initPieChart();
-            initBarChart();
-            initBarFourChart();
-          }, 1000);
-        });
-      },
-      {
-        deep: true,
-        immediate: true,
-      }
-    );
-    return {
-      unitMap,
-      tabName,
-      homeLineRef1,
-      homeLineRef2,
-      homeLineRef3,
-      tabChange,
-      homePieRef,
-      homeBarRef,
-      homeFourBarRef,
-      changePieType,
-      getStatisticsLineChartData,
-      ...toRefs(state),
-    };
-  },
+	name: 'heating-home',
+	setup() {
+		const tabName = ref('homeLineRef1');
+		const homeLineRef1 = ref();
+		const homeLineRef2 = ref();
+		const homeLineRef3 = ref();
+		const homePieRef = ref();
+		const homeBarRef = ref();
+		const homeFourBarRef = ref();
+		const unitMap = ref<any>({});
+		const store = useStore();
+
+		// 统计信息的单位的字典
+		apiDatahub.template.getDictData({ DictType: 'overview_unit' }).then((res: any) => {
+			res.values.forEach((v: any) => {
+				unitMap.value[v.value] = v.key;
+			});
+		});
+
+		const state = reactive({
+			checkList: ['一网供水温度'],
+			rangeValue: 10,
+			isIsDark: false,
+			dataOne: [
+				{
+					icon: map,
+					iconDark: map1,
+					title: '供热面积',
+					contentTitle1: '供热面积',
+					val1: '',
+					unit1: '万㎡',
+					contentTitle2: '总面积',
+					val2: '',
+					unit2: '万㎡',
+				},
+				{
+					icon: fire,
+					iconDark: fire1,
+					title: '热量',
+					contentTitle1: '总耗热',
+					val1: '',
+					unit1: '万GJ',
+					contentTitle2: '总单耗',
+					val2: '',
+					unit2: 'GJ/㎡',
+				},
+				{
+					icon: ele,
+					iconDark: ele1,
+					title: '电量',
+					contentTitle1: '总耗电',
+					val1: '',
+					unit1: '万KW.h',
+					contentTitle2: '总单耗',
+					val2: '',
+					unit2: 'KW.h/㎡',
+				},
+				{
+					icon: water,
+					iconDark: water1,
+					title: '水量',
+					contentTitle1: '总耗水',
+					val1: '',
+					unit1: 'T',
+					contentTitle2: '总单耗',
+					val2: '',
+					unit2: 'kg/㎡',
+				},
+			],
+			myCharts: [],
+			charts: {
+				theme: '',
+				bgColor: '',
+				color: '#303133',
+			},
+			statisticsChartXAxisData: [],
+			inTemperature: [],
+			outTemperature: [],
+			diffTemperature: [],
+			chartXAxisData: [],
+			flowLossData: [],
+			elctricConsumptionData: [],
+			unitConsumptionData: [],
+			pieData: [],
+			pieType: '1',
+			pressureXAxisData: [],
+			inPressureData: [],
+			outPressureData: [],
+			diffPressureData: [],
+		});
+
+		// 获取顶部总数据
+		const getStatisticsTotalData = () => {
+			api.statistics.getStatisticsOverview({ queryType: 'num' }).then((res: any) => {
+				const {
+					elctricConsumption,
+					elctricConsumptionTotal,
+					flowLoss,
+					flowLossTotal,
+					forRealArea,
+					heatingArea,
+					unitConsumption,
+					unitConsumptionTotal,
+				} = res.data;
+				state.dataOne[0].val1 = heatingArea;
+				state.dataOne[0].val2 = forRealArea;
+
+				state.dataOne[1].val1 = unitConsumptionTotal;
+				state.dataOne[1].val2 = unitConsumption;
+
+				state.dataOne[2].val1 = elctricConsumptionTotal;
+				state.dataOne[2].val2 = elctricConsumption;
+
+				state.dataOne[3].val1 = flowLossTotal;
+				state.dataOne[3].val2 = flowLoss;
+			});
+		};
+
+		// 获取温度监测数据
+		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: 80, bottom: 30 },
+				// 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: 80, bottom: 30 },
+				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;
+			api.statistics.getStatisticsOverview({ queryType: 'energy' }).then((res: any) => {
+				const { flowLoss, elctricConsumption, unitConsumption } = res.data;
+				// calorie：总热耗  electric：总电耗  water：总失水量
+				state.chartXAxisData = [];
+				state.flowLossData = [];
+				state.elctricConsumptionData = [];
+				state.unitConsumptionData = [];
+				flowLoss.forEach((i: any) => {
+					state.chartXAxisData.push(i.date);
+					state.flowLossData.push(i.total);
+				});
+				elctricConsumption.forEach((i: any) => {
+					state.elctricConsumptionData.push(i.total);
+				});
+				unitConsumption.forEach((i: any) => {
+					state.unitConsumptionData.push(i.total);
+				});
+				if (state.rangeValue == 10) return;
+				nextTick(() => {
+					initLineChart();
+				});
+			});
+		};
+		// 折线图
+		const initLineChart = () => {
+			if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
+
+			let dom: any;
+			let data: any;
+			if (tabName.value === 'homeLineRef1') {
+				dom = homeLineRef1.value;
+				data = state.flowLossData;
+			} else if (tabName.value === 'homeLineRef2') {
+				dom = homeLineRef2.value;
+				data = state.elctricConsumptionData;
+			} else {
+				dom = homeLineRef3.value;
+				data = state.unitConsumptionData;
+			}
+
+			global.homeCharThree = <any>echarts.init(dom, state.charts.theme);
+
+			const common = {
+				type: 'line',
+				smooth: true,
+				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 },
+				xAxis: [
+					{
+						type: 'category',
+						data: state.chartXAxisData,
+						boundaryGap: true,
+						axisTick: { show: false },
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+					},
+				],
+				series: [
+					{
+						...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(data.paneName);
+			}, 100);
+		};
+		// 切换饼图类型
+		const changePieType = (type: string, name: string) => {
+			state.pieType = type;
+			nextTick(() => {
+				initPieChart();
+			});
+		};
+		// 批量设置 echarts resize
+		const initEchartsResizeFun = () => {
+			nextTick(() => {
+				for (let i = 0; i < state.myCharts.length; i++) {
+					setTimeout(() => {
+						(<any>state.myCharts[i]).resize();
+					}, i * 1000);
+				}
+			});
+		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
+			window.addEventListener('resize', initEchartsResizeFun);
+		};
+		// 页面加载时
+		onMounted(() => {
+			initEchartsResize();
+			getStatisticsTotalData();
+			getStatisticsChartData();
+			getStatisticsPressureChartData();
+			getStatisticsLineChartData();
+			getStatisticsPieData();
+			// 获取布局配置信息
+			state.isIsDark = store.state.themeConfig.themeConfig.isIsDark;
+		});
+		// 由于页面缓存原因，keep-alive
+		onActivated(() => {
+			initEchartsResizeFun();
+		});
+		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
+		watch(
+			() => store.state.tagsViewRoutes.isTagsViewCurrenFull,
+			() => {
+				initEchartsResizeFun();
+			}
+		);
+		// 监听 vuex 中是否开启深色主题
+		watch(
+			() => store.state.themeConfig.themeConfig.isIsDark,
+			() => {
+				state.isIsDark = store.state.themeConfig.themeConfig.isIsDark;
+			},
+			{
+				deep: true,
+				immediate: true,
+			}
+		);
+		// 监听 vuex 中是否开启深色主题
+		watch(
+			() => store.state.themeConfig.themeConfig.isIsDark,
+			(isIsDark) => {
+				nextTick(() => {
+					// if(!isIsDark) return
+					state.charts.theme = isIsDark ? 'transparent' : '';
+					state.charts.bgColor = isIsDark ? 'transparent' : '';
+					state.charts.color = isIsDark ? '#dadada' : '#303133';
+					setTimeout(() => {
+						initLineChart();
+						initPieChart();
+						initBarChart();
+						initBarFourChart();
+					}, 1000);
+				});
+			},
+			{
+				deep: true,
+				immediate: true,
+			}
+		);
+		return {
+			unitMap,
+			tabName,
+			homeLineRef1,
+			homeLineRef2,
+			homeLineRef3,
+			tabChange,
+			homePieRef,
+			homeBarRef,
+			homeFourBarRef,
+			changePieType,
+			getStatisticsLineChartData,
+			...toRefs(state),
+		};
+	},
 });
 </script>