首页及详情页顶部卡片名称显示

src/theme/index.scss

@@ -13,4 +13,13 @@
 .v-disabled{
   pointer-events: none;
   opacity: 0.7;
+}
+
+.no-wrap {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+.text-no-wrap {
+	white-space: nowrap;
 }

src/views/heating/home/index.vue

@@ -1,83 +1,96 @@
 <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>
-            <p style="height:30px">
-              <template v-if="v.contentTitle3">
-                <span>{{ v.contentTitle3  || ' '}}</span>
-                <span>{{ v.val3 || ' ' }}
-                  {{ unitMap[v.title + '：' + v.contentTitle3] ? unitMap[v.title + '：' + v.contentTitle3] : unitMap[v.contentTitle3] }}</span>
-              </template>
-            </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-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">
-          <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 class="text-no-wrap">{{ v.contentTitle1 }}</span>
+							<span>{{ v.val1 }} {{ unitMap[v.contentTitle1] }}</span>
+						</p>
+						<p>
+							<span class="text-no-wrap">{{ v.contentTitle2 }}</span>
+							<span
+								>{{ v.val2 }}
+								{{ unitMap[v.title + '：' + v.contentTitle2] ? unitMap[v.title + '：' + v.contentTitle2] : unitMap[v.contentTitle2] }}</span
+							>
+						</p>
+						<p style="height: 30px">
+							<template v-if="v.contentTitle3">
+								<span class="text-no-wrap">{{ v.contentTitle3 || ' ' }}</span>
+								<span
+									>{{ v.val3 || ' ' }}
+									{{ unitMap[v.title + '：' + v.contentTitle3] ? unitMap[v.title + '：' + v.contentTitle3] : unitMap[v.contentTitle3] }}</span
+								>
+							</template>
+						</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-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">
+					<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>
-        <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">
@@ -101,564 +114,541 @@ 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 homeLineRef4 = 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: '万㎡',
-          contentTitle3: '供热率',
-          val3: '',
-          unit3: '',
-        },
-        {
-          icon: fire,
-          iconDark: fire1,
-          title: '热量',
-          contentTitle1: '总耗热',
-          val1: '',
-          unit1: '万GJ',
-          contentTitle2: '总单耗',
-          val2: '',
-          unit2: 'GJ/㎡',
-          contentTitle3: '供热负荷',
-          val3: '',
-          unit3: 'W',
-        },
-        {
-          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: [],
-      heatDemandData: [],
-      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,
-          heatRate,
-          heatDemand,
-        } = res.data;
-        state.dataOne[0].val1 = forRealArea;
-        state.dataOne[0].val2 = heatingArea;
-        state.dataOne[0].val3 = heatRate;
-
-        state.dataOne[1].val1 = unitConsumptionTotal;
-        state.dataOne[1].val2 = unitConsumption;
-        state.dataOne[1].val3 = heatDemand;
-
-        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: 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;
-      api.statistics.getStatisticsOverview({ queryType: 'energy' }).then((res: any) => {
-        const { flowLoss, elctricConsumption, unitConsumption, heatDemand } = res.data;
-        // 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();
-        });
-      });
-    };
-    // 折线图
-    const initLineChart = () => {
-      if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
-
-      let dom: any;
-      let data: any;
-      let unit: any;
-      // 日热耗：GJ
-      // 日电耗：KW.h
-      // 日失水量：T
-      // 供热功率：W
-      if (tabName.value === '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') {
-        dom = homeLineRef3.value;
-        data = state.unitConsumptionData;
-        unit = 'T'
-      } else {
-        dom = homeLineRef4.value;
-        data = state.heatDemandData;
-        unit = 'W'
-      }
-
-      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',
-            name: unit,
-          },
-        ],
-        dataZoom: [
-          {
-            type: 'inside',
-            start: 0,
-            end: 30
-          },
-          {
-            start: 0,
-            end: 30
-          }
-        ],
-        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();
-      }, 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,
-      homeLineRef4,
-      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 homeLineRef4 = 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: '',
+					contentTitle2: '实供面积',
+					val2: '',
+					contentTitle3: '供热率',
+					val3: '',
+				},
+				{
+					icon: fire,
+					iconDark: fire1,
+					title: '热量',
+					contentTitle1: '总耗热',
+					val1: '',
+					contentTitle2: '总单耗',
+					val2: '',
+				},
+				{
+					icon: ele,
+					iconDark: ele1,
+					title: '负荷',
+					contentTitle1: '供热负荷',
+					val1: '0',
+					contentTitle2: '平均供热负荷',
+					val2: '0',
+				},
+				{
+					icon: water,
+					iconDark: water1,
+					title: '水量',
+					contentTitle1: '总耗水',
+					val1: '',
+					contentTitle2: '总单耗',
+					val2: '',
+				},
+			],
+			myCharts: [],
+			charts: {
+				theme: '',
+				bgColor: '',
+				color: '#303133',
+			},
+			statisticsChartXAxisData: [],
+			inTemperature: [],
+			outTemperature: [],
+			diffTemperature: [],
+			chartXAxisData: [],
+			flowLossData: [],
+			elctricConsumptionData: [],
+			unitConsumptionData: [],
+			heatDemandData: [],
+			pieData: [],
+			pieType: '1',
+			pressureXAxisData: [],
+			inPressureData: [],
+			outPressureData: [],
+			diffPressureData: [],
+		});
+
+		// 获取顶部总数据
+		const getStatisticsTotalData = () => {
+			api.statistics.getStatisticsOverview({ queryType: 'num' }).then((res: any) => {
+				const { flowLoss, flowLossTotal, forRealArea, heatingArea, unitConsumption, unitConsumptionTotal, heatRate, heatDemandAvg, heatDemand } =
+					res.data;
+				state.dataOne[0].val1 = forRealArea;
+				state.dataOne[0].val2 = heatingArea;
+				state.dataOne[0].val3 = heatRate;
+
+				state.dataOne[1].val1 = unitConsumptionTotal;
+				state.dataOne[1].val2 = unitConsumption;
+
+				state.dataOne[2].val1 = heatDemand;
+				state.dataOne[2].val2 = heatDemandAvg;
+
+				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: 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;
+			api.statistics.getStatisticsOverview({ queryType: 'energy' }).then((res: any) => {
+				const { flowLoss, elctricConsumption, unitConsumption, heatDemand } = res.data;
+				// 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();
+				});
+			});
+		};
+		// 折线图
+		const initLineChart = () => {
+			if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
+
+			let dom: any;
+			let data: any;
+			let unit: any;
+			// 日热耗：GJ
+			// 日电耗：KW.h
+			// 日失水量：T
+			// 供热功率：W
+			if (tabName.value === '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') {
+				dom = homeLineRef3.value;
+				data = state.unitConsumptionData;
+				unit = 'T';
+			} else {
+				dom = homeLineRef4.value;
+				data = state.heatDemandData;
+				unit = 'W';
+			}
+
+			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',
+						name: unit,
+					},
+				],
+				dataZoom: [
+					{
+						type: 'inside',
+						start: 0,
+						end: 30,
+					},
+					{
+						start: 0,
+						end: 30,
+					},
+				],
+				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();
+			}, 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,
+			homeLineRef4,
+			tabChange,
+			homePieRef,
+			homeBarRef,
+			homeFourBarRef,
+			changePieType,
+			getStatisticsLineChartData,
+			...toRefs(state),
+		};
+	},
 });
 </script>
 

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

@@ -1,40 +1,54 @@
 <template>
-  <div class="system-dic-container data-overview">
-    <el-row :gutter="15" class="home-card-one">
-      <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>
-            <p style="height:30px">
-              <template v-if="v.contentTitle3">
-                <span>{{ v.contentTitle3  || ' '}}</span>
-                <span>{{ v.val3 || ' ' }}
-                  {{ unitMap[v.title + '：' + v.contentTitle3] ? unitMap[v.title + '：' + v.contentTitle3] : unitMap[v.contentTitle3] }}</span>
-              </template>
-            </p>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="15" class="home-card-one mt15">
-      <el-col :span="24">
-        <div class="home-card-item p20">
-          <div class="home-card-item-title" style="display: flex;justify-content:space-between;">
-            <span>热网总能耗</span>
-
-            <el-button type="text" @click="goDetail()">更多 &gt;</el-button>
-            <!-- <el-select @change="getStatisticsLineChartData()" v-model="rangeValue" placeholder="请选择查询范围" size="mini">
+	<div class="system-dic-container data-overview">
+		<el-row :gutter="15" class="home-card-one">
+			<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 class="text-no-wrap">{{ v.contentTitle1 }}</span>
+							<span>{{ v.val1 }} {{ unitMap[v.contentTitle1] }}</span>
+						</p>
+						<p>
+							<span class="text-no-wrap">{{ v.contentTitle2 }}</span>
+							<span
+								>{{ v.val2 }}
+								{{ unitMap[v.title + '：' + v.contentTitle2] ? unitMap[v.title + '：' + v.contentTitle2] : unitMap[v.contentTitle2] }}</span
+							>
+						</p>
+						<p style="height: 30px">
+							<template v-if="v.contentTitle3">
+								<span class="text-no-wrap">{{ v.contentTitle3 || ' ' }}</span>
+								<span
+									>{{ v.val3 || ' ' }}
+									{{ unitMap[v.title + '：' + v.contentTitle3] ? unitMap[v.title + '：' + v.contentTitle3] : unitMap[v.contentTitle3] }}</span
+								>
+							</template>
+						</p>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-row :gutter="15" class="home-card-one mt15">
+			<el-col :span="24">
+				<div class="home-card-item p20">
+					<div class="home-card-item-title" style="display: flex; justify-content: space-between">
+						<span>热网总能耗</span>
+
+						<el-button type="text" @click="goDetail()">更多 &gt;</el-button>
+						<!-- <el-select @change="getStatisticsLineChartData()" v-model="rangeValue" placeholder="请选择查询范围" size="mini">
 							<el-option
 							v-for="item in [10, 30, 60]"
 							:key="item"
@@ -42,17 +56,17 @@
 							:value="item"
 							/>
 						</el-select> -->
-          </div>
-          <div style="height: 300px" ref="homeLineRef"></div>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
+					</div>
+					<div style="height: 300px" ref="homeLineRef"></div>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
 </template>
 
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent, nextTick, watch } from 'vue';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import { FormInstance } from 'element-plus';
 import * as echarts from 'echarts';
 import api from '/@/api/loopSupervision';
 
@@ -69,257 +83,251 @@ import { useStore } from '/@/store/index';
 import apiDatahub from '/@/api/datahub';
 
 let global: any = {
-  homeCharThree: null,
-  dispose: [null, '', undefined],
+	homeCharThree: null,
+	dispose: [null, '', undefined],
 };
 
 export default defineComponent({
-  name: 'deviceproduct',
-  setup() {
-    const addDicRef = ref();
-    const editDicRef = ref();
-    const queryRef = ref();
-    const homeLineRef = ref();
-    const router = useRouter()
-    const route = useRoute()
-    const store = useStore()
-    const unitMap = ref<any>({});
-
-    // 统计信息的单位的字典
-    apiDatahub.template.getDictData({ DictType: 'overview_unit' }).then((res: any) => {
-      res.values.forEach((v: any) => {
-        unitMap.value[v.value] = v.key;
-      });
-    });
-    const state = reactive({
-      dataOne: [
-        {
-          icon: map,
-          iconDark: map1,
-          title: '供热面积',
-          contentTitle1: '联网面积',
-          val1: '0',
-          unit1: '㎡',
-          contentTitle2: '实供面积',
-          val2: '0',
-          unit2: '㎡',
-          contentTitle3: '供热率',
-          val3: '',
-          unit3: '',
-        },
-        {
-          icon: fire,
-          iconDark: fire1,
-          title: '热量',
-          contentTitle1: '总耗热',
-          val1: '0',
-          unit1: 'GJ',
-          contentTitle2: '总单耗',
-          val2: '0',
-          unit2: 'GJ/㎡',
-          contentTitle3: '供热负荷',
-          val3: '-',
-          unit3: 'W',
-        },
-        {
-          icon: ele,
-          iconDark: ele1,
-          title: '电量',
-          contentTitle1: '总耗电',
-          val1: '0',
-          unit1: 'KW.h',
-          contentTitle2: '总单耗',
-          val2: '0',
-          unit2: 'KW.h/㎡',
-        },
-        {
-          icon: water,
-          iconDark: water1,
-          title: '水量',
-          contentTitle1: '总耗水',
-          val1: '0',
-          unit1: 'T',
-          contentTitle2: '总单耗',
-          val2: '0',
-          unit2: 'T/㎡',
-        },
-      ],
-      lineName: '换热站监测',
-      myCharts: [],
-      charts: {
-        theme: '',
-        bgColor: '',
-        color: '#303133',
-      },
-      searchParams: {
-        name: ''
-      },
-      xAxisData: [],
-      inTemperatureEchart: [], // 供水温度
-      outTemperatureEchart: [], // 回水温度
-      isIsDark: false
-    });
-
-    const getNumDetail = () => {
-      api.getLoopRegulationDetail({
-        QueryType: 'num',
-        types: 'station',
-        code: route.query.code
-      }).then((res: any) => {
-        let data = res
-        state.dataOne[0].val1 = data.forRealArea
-        state.dataOne[0].val2 = data.heatingArea
-        state.dataOne[0].val3 = data.heatRate
-        state.dataOne[1].val1 = data.unitConsumptionTotal //总热耗
-        state.dataOne[1].val2 = data.unitConsumption //热单耗
-        state.dataOne[1].val3 = data.heatDemand
-        state.dataOne[2].val1 = data.elctricConsumptionTotal //总电量
-        state.dataOne[2].val2 = data.elctricConsumption //电单耗
-        state.dataOne[3].val1 = data.flowLossTotal //总水量
-        state.dataOne[3].val2 = data.flowLoss //水量单耗
-      })
-    }
-
-    const getChartDetail = () => {
-      api.getLoopRegulationDetail({
-        QueryType: 'echart',
-        types: 'station',
-        code: route.query.code
-      }).then((res: any) => {
-        state.inTemperatureEchart = res.inTemperatureEchart.map((item: any) => item.value)
-        state.outTemperatureEchart = res.outTemperatureEchart.map((item: any) => item.value)
-        state.xAxisData = res.inTemperatureEchart.map((item: any) => item.time)
-
-        nextTick(() => {
-          initLineChart();
-        });
-      })
-    }
-
-    const goDetail = () => {
-      router.push({
-        path: '/heating-monitor/loopSupervision/heatStationHistory',
-        query: {
-          code: route.query.code
-        }
-      })
-    }
-
-    // 折线图
-    const initLineChart = () => {
-      if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
-      global.homeCharThree = <any>echarts.init(homeLineRef.value, state.charts.theme);
-      const option = {
-        backgroundColor: state.charts.bgColor,
-        tooltip: { trigger: 'axis' },
-        legend: {},
-        grid: { top: 40, right: 40, bottom: 40, left: 40 },
-        xAxis: [
-          {
-            type: 'category',
-            data: state.xAxisData,
-            boundaryGap: true,
-            axisTick: { show: false },
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            axisLabel: {
-              formatter: '{value} °C'
-            }
-          }
-        ],
-        series: [
-          {
-            name: '供水温度',
-            type: 'line',
-            data: state.inTemperatureEchart
-          },
-          {
-            name: '回水温度',
-            type: 'line',
-            data: state.outTemperatureEchart
-          },
-          // {
-          // 	name: '室外温度',
-          // 	type: 'line',
-          // 	data: [3, 0, 4, 7, 5, 7, 5]
-          // }
-        ]
-      };
-      (<any>global.homeCharThree).setOption(option);
-      (<any>state.myCharts).push(global.homeCharThree);
-    };
-
-    // 批量设置 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);
-    };
-
-    // 监听 vuex 中是否开启深色主题
-    watch(
-      () => store.state.themeConfig.themeConfig.isIsDark,
-      (isIsDark) => {
-        nextTick(() => {
-          state.isIsDark = store.state.themeConfig.themeConfig.isIsDark
-          state.charts.theme = isIsDark ? 'transparent' : '';
-          state.charts.bgColor = isIsDark ? 'transparent' : '';
-          state.charts.color = isIsDark ? '#dadada' : '#303133';
-          setTimeout(() => {
-            initLineChart();
-          }, 1000);
-        });
-      },
-      {
-        deep: true,
-        immediate: true,
-      }
-    );
-
-    // 页面加载时
-    onMounted(() => {
-      getNumDetail()
-      getChartDetail()
-
-      initEchartsResize();
-      // 获取布局配置信息
-      state.isIsDark = store.state.themeConfig.themeConfig.isIsDark;
-    });
-
-
-    /** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
-      if (!formEl) return;
-      formEl.resetFields();
-      // typeList();
-    };
-
-    return {
-      unitMap,
-      addDicRef,
-      editDicRef,
-      queryRef,
-      homeLineRef,
-      ...toRefs(state),
-      resetQuery,
-      goDetail
-    };
-  },
+	name: 'deviceproduct',
+	setup() {
+		const addDicRef = ref();
+		const editDicRef = ref();
+		const queryRef = ref();
+		const homeLineRef = ref();
+		const router = useRouter();
+		const route = useRoute();
+		const store = useStore();
+		const unitMap = ref<any>({});
+
+		// 统计信息的单位的字典
+		apiDatahub.template.getDictData({ DictType: 'overview_unit' }).then((res: any) => {
+			res.values.forEach((v: any) => {
+				unitMap.value[v.value] = v.key;
+			});
+		});
+		const state = reactive({
+			dataOne: [
+				{
+					icon: map,
+					iconDark: map1,
+					title: '供热面积',
+					contentTitle1: '联网面积',
+					val1: '0',
+					contentTitle2: '实供面积',
+					val2: '0',
+					contentTitle3: '供热率',
+					val3: '',
+				},
+				{
+					icon: fire,
+					iconDark: fire1,
+					title: '热量',
+					contentTitle1: '总耗热',
+					val1: '0',
+					contentTitle2: '总单耗',
+					val2: '0',
+				},
+				{
+					icon: ele,
+					iconDark: ele1,
+					title: '负荷',
+					contentTitle1: '供热负荷',
+					val1: '0',
+					contentTitle2: '平均供热负荷',
+					val2: '-',
+				},
+				{
+					icon: water,
+					iconDark: water1,
+					title: '水量',
+					contentTitle1: '总耗水',
+					val1: '0',
+					contentTitle2: '总单耗',
+					val2: '0',
+				},
+			],
+			lineName: '换热站监测',
+			myCharts: [],
+			charts: {
+				theme: '',
+				bgColor: '',
+				color: '#303133',
+			},
+			searchParams: {
+				name: '',
+			},
+			xAxisData: [],
+			inTemperatureEchart: [], // 供水温度
+			outTemperatureEchart: [], // 回水温度
+			isIsDark: false,
+		});
+
+		const getNumDetail = () => {
+			api
+				.getLoopRegulationDetail({
+					QueryType: 'num',
+					types: 'station',
+					code: route.query.code,
+				})
+				.then((res: any) => {
+					const { flowLoss, flowLossTotal, forRealArea, heatingArea, unitConsumption, unitConsumptionTotal, heatRate, heatDemandAvg, heatDemand } =
+						res;
+
+					state.dataOne[0].val1 = forRealArea;
+					state.dataOne[0].val2 = heatingArea;
+					state.dataOne[0].val3 = heatRate;
+
+					state.dataOne[1].val1 = unitConsumptionTotal;
+					state.dataOne[1].val2 = unitConsumption;
+
+					state.dataOne[2].val1 = heatDemand;
+					state.dataOne[2].val2 = heatDemandAvg || '-';
+
+					state.dataOne[3].val1 = flowLossTotal;
+					state.dataOne[3].val2 = flowLoss;
+				});
+		};
+
+		const getChartDetail = () => {
+			api
+				.getLoopRegulationDetail({
+					QueryType: 'echart',
+					types: 'station',
+					code: route.query.code,
+				})
+				.then((res: any) => {
+					state.inTemperatureEchart = res.inTemperatureEchart.map((item: any) => item.value);
+					state.outTemperatureEchart = res.outTemperatureEchart.map((item: any) => item.value);
+					state.xAxisData = res.inTemperatureEchart.map((item: any) => item.time);
+
+					nextTick(() => {
+						initLineChart();
+					});
+				});
+		};
+
+		const goDetail = () => {
+			router.push({
+				path: '/heating-monitor/loopSupervision/heatStationHistory',
+				query: {
+					code: route.query.code,
+				},
+			});
+		};
+
+		// 折线图
+		const initLineChart = () => {
+			if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
+			global.homeCharThree = <any>echarts.init(homeLineRef.value, state.charts.theme);
+			const option = {
+				backgroundColor: state.charts.bgColor,
+				tooltip: { trigger: 'axis' },
+				legend: {},
+				grid: { top: 40, right: 40, bottom: 40, left: 40 },
+				xAxis: [
+					{
+						type: 'category',
+						data: state.xAxisData,
+						boundaryGap: true,
+						axisTick: { show: false },
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						axisLabel: {
+							formatter: '{value} °C',
+						},
+					},
+				],
+				series: [
+					{
+						name: '供水温度',
+						type: 'line',
+						data: state.inTemperatureEchart,
+					},
+					{
+						name: '回水温度',
+						type: 'line',
+						data: state.outTemperatureEchart,
+					},
+					// {
+					// 	name: '室外温度',
+					// 	type: 'line',
+					// 	data: [3, 0, 4, 7, 5, 7, 5]
+					// }
+				],
+			};
+			(<any>global.homeCharThree).setOption(option);
+			(<any>state.myCharts).push(global.homeCharThree);
+		};
+
+		// 批量设置 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);
+		};
+
+		// 监听 vuex 中是否开启深色主题
+		watch(
+			() => store.state.themeConfig.themeConfig.isIsDark,
+			(isIsDark) => {
+				nextTick(() => {
+					state.isIsDark = store.state.themeConfig.themeConfig.isIsDark;
+					state.charts.theme = isIsDark ? 'transparent' : '';
+					state.charts.bgColor = isIsDark ? 'transparent' : '';
+					state.charts.color = isIsDark ? '#dadada' : '#303133';
+					setTimeout(() => {
+						initLineChart();
+					}, 1000);
+				});
+			},
+			{
+				deep: true,
+				immediate: true,
+			}
+		);
+
+		// 页面加载时
+		onMounted(() => {
+			getNumDetail();
+			getChartDetail();
+
+			initEchartsResize();
+			// 获取布局配置信息
+			state.isIsDark = store.state.themeConfig.themeConfig.isIsDark;
+		});
+
+		/** 重置按钮操作 */
+		const resetQuery = (formEl: FormInstance | undefined) => {
+			if (!formEl) return;
+			formEl.resetFields();
+			// typeList();
+		};
+
+		return {
+			unitMap,
+			addDicRef,
+			editDicRef,
+			queryRef,
+			homeLineRef,
+			...toRefs(state),
+			resetQuery,
+			goDetail,
+		};
+	},
 });
 </script>
 
-
 <style lang="scss" scoped>
 $homeNavLengh: 8;
 
@@ -409,4 +417,4 @@ $homeNavLengh: 8;
 // :deep(.el-form-item--default) {
 // 	margin-bottom: 0;
 // }
-</style>
+</style>

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

@@ -18,11 +18,11 @@
 					</div>
 					<div class="item-content w100" :class="` home-one-animation${k}`">
 						<p>
-							<span>{{ v.contentTitle1 }}</span>
+							<span class="text-no-wrap">{{ v.contentTitle1 }}</span>
 							<span>{{ v.val1 }} {{ unitMap[v.contentTitle1] }}</span>
 						</p>
 						<p>
-							<span>{{ v.contentTitle2 }}</span>
+							<span class="text-no-wrap">{{ v.contentTitle2 }}</span>
 							<span
 								>{{ v.val2 }}
 								{{ unitMap[v.title + '：' + v.contentTitle2] ? unitMap[v.title + '：' + v.contentTitle2] : unitMap[v.contentTitle2] }}</span
@@ -30,7 +30,7 @@
 						</p>
 						<p style="height: 30px">
 							<template v-if="v.contentTitle3">
-								<span>{{ v.contentTitle3 || ' ' }}</span>
+								<span class="text-no-wrap">{{ v.contentTitle3 || ' ' }}</span>
 								<span
 									>{{ v.val3 || ' ' }}
 									{{ unitMap[v.title + '：' + v.contentTitle3] ? unitMap[v.title + '：' + v.contentTitle3] : unitMap[v.contentTitle3] }}</span
@@ -49,17 +49,17 @@
 				<div class="home-card-item p20" v-loading="loading">
 					<!-- <el-tabs>
 						<el-tab-pane label="环路监测"> -->
-							<div class="flex-row">
-								<el-tabs v-model="tabName" @tab-change="initLineChart">
-									<el-tab-pane label="温度" :name="0"></el-tab-pane>
-									<el-tab-pane label="压力" :name="1"></el-tab-pane>
-									<el-tab-pane label="流量" :name="2"></el-tab-pane>
-									<el-tab-pane label="失水量" :name="3"></el-tab-pane>
-								</el-tabs>
-								<el-button type="text" @click="goDetail()">更多 &gt;</el-button>
-							</div>
-							<div style="height: 300px" ref="homeLineRef"></div>
-						<!-- </el-tab-pane>
+					<div class="flex-row">
+						<el-tabs v-model="tabName" @tab-change="initLineChart">
+							<el-tab-pane label="温度" :name="0"></el-tab-pane>
+							<el-tab-pane label="压力" :name="1"></el-tab-pane>
+							<el-tab-pane label="流量" :name="2"></el-tab-pane>
+							<el-tab-pane label="失水量" :name="3"></el-tab-pane>
+						</el-tabs>
+						<el-button type="text" @click="goDetail()">更多 &gt;</el-button>
+					</div>
+					<div style="height: 300px" ref="homeLineRef"></div>
+					<!-- </el-tab-pane>
 						<el-tab-pane label="流程图" lazy>
 							<div class="iframe-wrapper">
 								<iframe :src="'/plugin/topo/?bgColor=000#/name/' + $route.query.code" height="400" width="100%" frameborder="0" class="mt15"></iframe>
@@ -127,13 +127,10 @@ export default defineComponent({
 					title: '供热面积',
 					contentTitle1: '联网面积',
 					val1: '0',
-					unit1: '㎡',
 					contentTitle2: '实供面积',
 					val2: '0',
-					unit2: '㎡',
 					contentTitle3: '供热率',
 					val3: '',
-					unit3: '',
 				},
 				{
 					icon: fire,
@@ -141,13 +138,8 @@ export default defineComponent({
 					title: '热量',
 					contentTitle1: '总耗热',
 					val1: '0',
-					unit1: 'GJ',
 					contentTitle2: '总单耗',
 					val2: '0',
-					unit2: 'GJ/㎡',
-					contentTitle3: '供热负荷',
-					val3: '-',
-					unit3: 'W',
 				},
 				{
 					icon: ele,
@@ -155,10 +147,8 @@ export default defineComponent({
 					title: '负荷',
 					contentTitle1: '供热负荷',
 					val1: '0',
-					unit1: 'KW.h',
 					contentTitle2: '平均供热负荷',
-					val2: '0',
-					unit2: 'KW.h/㎡',
+					val2: '-',
 				},
 				{
 					icon: water,
@@ -166,10 +156,8 @@ export default defineComponent({
 					title: '水量',
 					contentTitle1: '总耗水',
 					val1: '0',
-					unit1: 'T',
 					contentTitle2: '总单耗',
 					val2: '0',
-					unit2: 'T/㎡',
 				},
 			],
 			lineName: '环路监测',
@@ -206,17 +194,20 @@ export default defineComponent({
 					code: route.query.code,
 				})
 				.then((res: any) => {
-					let data = res;
-					state.dataOne[0].val1 = data.forRealArea;
-					state.dataOne[0].val2 = data.heatingArea;
-					state.dataOne[0].val3 = data.heatRate;
-					state.dataOne[1].val1 = data.unitConsumptionTotal; //总热耗
-					state.dataOne[1].val2 = data.unitConsumption; //热单耗
-					state.dataOne[1].val3 = data.heatDemand;
-					state.dataOne[2].val1 = data.elctricConsumptionTotal; //总电量
-					state.dataOne[2].val2 = data.elctricConsumption; //电单耗
-					state.dataOne[3].val1 = data.flowLossTotal; //总水量
-					state.dataOne[3].val2 = data.flowLoss; //水量单耗
+					const { flowLoss, flowLossTotal, forRealArea, heatingArea, unitConsumption, unitConsumptionTotal, heatRate, heatDemandAvg, heatDemand } =
+						res;
+					state.dataOne[0].val1 = forRealArea;
+					state.dataOne[0].val2 = heatingArea;
+					state.dataOne[0].val3 = heatRate;
+
+					state.dataOne[1].val1 = unitConsumptionTotal;
+					state.dataOne[1].val2 = unitConsumption;
+
+					state.dataOne[2].val1 = heatDemand;
+					state.dataOne[2].val2 = heatDemandAvg || '-';
+
+					state.dataOne[3].val1 = flowLossTotal;
+					state.dataOne[3].val2 = flowLoss;
 				});
 		};