2023-10-17 08:53:54 +08:00
15 changed files with 302 additions and 53 deletions
--- a/src/assets/icons/svg/downArrow.svg
+++ b/src/assets/icons/svg/downArrow.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>收起箭头小备份 3</title>
+    <g id="能源管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="能源监控-同比分析" transform="translate(-848.000000, -392.000000)" fill-rule="nonzero">
+            <g id="收起箭头小备份-3" transform="translate(855.000000, 399.000000) scale(1, -1) translate(-855.000000, -399.000000) translate(848.000000, 392.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="14" height="14"></rect>
+                <path d="M6.60391666,1.57197282 L7.01633334,1.15897282 L12.70325,6.8441395 C12.9278333,7.06872283 12.93075,7.4408895 12.70325,7.6683895 C12.5941655,7.77825546 12.4457769,7.84009206 12.2909546,7.84020155 C12.1361323,7.84031104 11.9876564,7.77868438 11.8784167,7.66897282 L7.0175,2.8103895 L2.16066666,7.66955616 C2.05160439,7.77930978 1.90326864,7.84102718 1.74854166,7.84102718 C1.59381468,7.84102718 1.44547894,7.77930978 1.33641666,7.66955616 C1.10964988,7.4415567 1.1091291,7.07336285 1.33525,6.84472282 L6.58116666,1.59647282 L6.6045,1.57255616 L6.60391666,1.57197282 Z" id="路径" fill="#FFBD02"></path>
+                <path d="M6.60391666,6.57197282 L7.01633334,6.15897282 L12.70325,11.8441395 C12.9278333,12.0687228 12.93075,12.4408895 12.70325,12.6683895 C12.5941655,12.7782555 12.4457769,12.8400921 12.2909546,12.8402015 C12.1361323,12.840311 11.9876564,12.7786844 11.8784167,12.6689728 L7.0175,7.8103895 L2.16066666,12.6695562 C2.05160439,12.7793098 1.90326864,12.8410272 1.74854166,12.8410272 C1.59381468,12.8410272 1.44547894,12.7793098 1.33641666,12.6695562 C1.10964988,12.4415567 1.1091291,12.0733628 1.33525,11.8447228 L6.58116666,6.59647282 L6.6045,6.57255616 L6.60391666,6.57197282 Z" id="路径备份-2" fill="#FFBD02"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/assets/icons/svg/upArrow.svg
+++ b/src/assets/icons/svg/upArrow.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>收起箭头小备份 11</title>
+    <g id="能源管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="能源监控-同比分析" transform="translate(-848.000000, -269.000000)" fill-rule="nonzero">
+            <g id="收起箭头小备份-11" transform="translate(848.000000, 269.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="14" height="14"></rect>
+                <path d="M6.60391666,1.57197282 L7.01633334,1.15897282 L12.70325,6.8441395 C12.9278333,7.06872283 12.93075,7.4408895 12.70325,7.6683895 C12.5941655,7.77825546 12.4457769,7.84009206 12.2909546,7.84020155 C12.1361323,7.84031104 11.9876564,7.77868438 11.8784167,7.66897282 L7.0175,2.8103895 L2.16066666,7.66955616 C2.05160439,7.77930978 1.90326864,7.84102718 1.74854166,7.84102718 C1.59381468,7.84102718 1.44547894,7.77930978 1.33641666,7.66955616 C1.10964988,7.4415567 1.1091291,7.07336285 1.33525,6.84472282 L6.58116666,1.59647282 L6.6045,1.57255616 L6.60391666,1.57197282 Z" id="路径" fill="#37D97F"></path>
+                <path d="M6.60391666,6.57197282 L7.01633334,6.15897282 L12.70325,11.8441395 C12.9278333,12.0687228 12.93075,12.4408895 12.70325,12.6683895 C12.5941655,12.7782555 12.4457769,12.8400921 12.2909546,12.8402015 C12.1361323,12.840311 11.9876564,12.7786844 11.8784167,12.6689728 L7.0175,7.8103895 L2.16066666,12.6695562 C2.05160439,12.7793098 1.90326864,12.8410272 1.74854166,12.8410272 C1.59381468,12.8410272 1.44547894,12.7793098 1.33641666,12.6695562 C1.10964988,12.4415567 1.1091291,12.0733628 1.33525,11.8447228 L6.58116666,6.59647282 L6.6045,6.57255616 L6.60391666,6.57197282 Z" id="路径备份-2" fill="#37D97F"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/views/energy/analysis/contrastAnalysis/components/barChart.vue
+++ b/src/views/energy/analysis/contrastAnalysis/components/barChart.vue
@@ -25,6 +25,10 @@ export default {
      default: () => {
        return []
      }
+    },
+    timeDim: {
+      type: String,
+      default: ''
    }
  },
  watch: {
@@ -58,32 +62,58 @@ export default {
        tempArr = this.chartData[0].trendRespVOList
      }
      for (let k = 0; k < tempArr.length; k++) {
-        xData.push(tempArr[k].time)
+        let time = ''
+        if (this.timeDim === '3') {
+          let year = tempArr[k].time.slice(0,4)
+          let weak = tempArr[k].time.slice(4,6)
+          time = year+' 第 '+weak+' 周'
+        } else {
+          time = tempArr[k].time
+        }
+        xData.push(time)
      }
      for (let i = 0; i < this.chartData.length; i++) {
        let obj = {
          name: this.chartData[i].objName + this.chartData[i].objCode,
          type: 'bar',
+          barMaxWidth: 20,
+          label: {
+            show: true,
+            position: 'top'
+          },
          data: []
        }
        legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
        let temp = this.chartData[i].trendRespVOList
        for (let j = 0; j < temp.length; j++) {
-          let num = temp[j].useNum ? temp[j].useNum : 0
+          let num = temp[j].useNum ? temp[j].useNum : ''
          obj.data.push(num)
        }
        yData.push(obj)
      }
      var option = {
+        color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
        tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '4%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
-          data: xData
+          data: xData,
+          axisLabel: {
+            rotate: "45"
+          }
        },
        yAxis: {
          type: 'value'
--- a/src/views/energy/analysis/contrastAnalysis/components/lineChart.vue
+++ b/src/views/energy/analysis/contrastAnalysis/components/lineChart.vue
@@ -25,6 +25,10 @@ export default {
      default: () => {
        return []
      }
+    },
+    timeDim: {
+      type: String,
+      default: ''
    }
  },
  watch: {
@@ -58,7 +62,15 @@ export default {
        tempArr = this.chartData[0].trendRespVOList
      }
      for (let k = 0; k < tempArr.length; k++) {
-        xData.push(tempArr[k].time)
+        let time = ''
+        if (this.timeDim === '3') {
+          let year = tempArr[k].time.slice(0,4)
+          let weak = tempArr[k].time.slice(4,6)
+          time = year+' 第 '+weak+' 周'
+        } else {
+          time = tempArr[k].time
+        }
+        xData.push(time)
      }
      for (let i = 0; i < this.chartData.length; i++) {
        let obj = {
@@ -70,22 +82,35 @@ export default {
        legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
        let temp = this.chartData[i].trendRespVOList
        for (let j = 0; j < temp.length; j++) {
-          let num = temp[j].useNum ? temp[j].useNum : 0
+          let num = temp[j].useNum ? temp[j].useNum : ''
          obj.data.push(num)
        }
        yData.push(obj)
      }

      var option = {
+        color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
        tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        grid: {
+          left: '4%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
-          data: xData
+          data: xData,
+          axisLabel: {
+            rotate: "45"
+          }
        },
        yAxis: {
          type: 'value'
--- a/src/views/energy/analysis/contrastAnalysis/components/searchArea.vue
+++ b/src/views/energy/analysis/contrastAnalysis/components/searchArea.vue
@@ -135,7 +135,7 @@
        </el-select>
      </el-form-item>
      <el-form-item label="对象选择">
-        <el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;" size="small">
+        <el-select v-model="queryParams.objIds" placeholder="请选择" multiple :multiple-limit='5' collapse-tags style="width: 200px;" size="small">
          <el-option
            v-for="item in objectList"
            :key="item.id"
--- a/src/views/energy/analysis/contrastAnalysis/index.vue
+++ b/src/views/energy/analysis/contrastAnalysis/index.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="app-container" id="contrastAnalysisBox">
+  <div class="app-container contrastAnalysisBox" id="contrastAnalysisBox">
    <!-- 搜索工作栏 -->
    <search-area  :isFold="isFold" @submit="getList"/>
-    <el-tabs v-model="activeName" @tab-click="switchChart">
+    <el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
      <el-tab-pane label="柱状图" name="bar">
-        <bar-chart ref="analysisBarChart" :chartData="chartData" />
+        <bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim" />
      </el-tab-pane>
      <el-tab-pane label="折线图" name="line">
-        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+        <line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
      </el-tab-pane>
    </el-tabs>
+    <!-- 没有数据 -->
+    <div class="no-data-bg" v-show='!chartData.length'></div>
  </div>
 </template>
 <script>
@@ -25,7 +27,8 @@ export default {
    return {
      isFold: false,
      activeName: 'bar',
-      chartData: []
+      chartData: [],
+      timeDim: ''
    }
  },
  mounted() {
@@ -38,6 +41,7 @@ export default {
  },
  methods: {
    getList(params) {
+      this.timeDim = params.timeDim
      getCompare({ ...params }).then((res) => {
        console.log(res)
        if (res.code === 0) {
@@ -60,4 +64,33 @@ export default {
    }
  }
 }
-</script>
+</script>
+<style lang='scss'>
+.contrastAnalysisBox {
+  .el-tabs__nav::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #e4e7ed;
+    /* z-index: 1; */
+  }
+  .el-tabs__nav-wrap::after {
+    width: 0;
+  }
+  .el-tabs__item {
+    padding: 0 10px;
+  }
+  .el-tabs__item:hover {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item.is-active {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item {
+    color: rgba(0, 0, 0, 0.45);
+  }
+}
+</style>
--- a/src/views/energy/analysis/qoqAnalysis/components/lineChart.vue
+++ b/src/views/energy/analysis/qoqAnalysis/components/lineChart.vue
@@ -57,12 +57,22 @@ export default {
        {
          name: '本期',
          type: 'bar',
-          data: []
+          data: [],
+          barWidth: 20,
+          label: {
+            show: true,
+            position: 'top'
+          }
        },
        {
          name: '上期',
          type: 'bar',
-          data: []
+          data: [],
+          barWidth: 20,
+          label: {
+            show: true,
+            position: 'top'
+          }
        }
      ]
      for (let j = 0; j < arr.length; j++) {
@@ -79,6 +89,7 @@ export default {
        // title: {
        //   text: 'World Population'
        // },
+        color:['#288AFF','#8EF0AB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
@@ -87,8 +98,8 @@ export default {
        },
        legend: {},
        grid: {
-          left: '3%',
-          right: '4%',
+          left: '1%',
+          right: '1%',
          bottom: '3%',
          containLabel: true
        },
--- a/src/views/energy/analysis/qoqAnalysis/index.vue
+++ b/src/views/energy/analysis/qoqAnalysis/index.vue
@@ -3,14 +3,18 @@
    <!-- 搜索工作栏 -->
    <search-area @submit="getList" @exportD="exportData"/>
    <!-- 表格 -->
-    <base-table
-      :table-props="tableProps"
-      :table-data="list"
-      class="qoq-out-table"
-    />
-    <div style='width: 100%;height: 300px;padding-top: 30px;'>
-      <line-chart ref="analysisLineChart" :chartData="chartData"/>
+    <div v-show="chartData.length">
+      <base-table
+        :table-props="tableProps"
+        :table-data="list"
+        class="qoq-out-table"
+      />
+      <div style='width: 100%;height: 300px;padding-top: 30px;'>
+        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+      </div>
    </div>
+    <!-- 没有数据 -->
+    <div class="no-data-bg" v-show='!chartData.length'></div>
  </div>
 </template>
 <script>
--- a/src/views/energy/analysis/trendAnalysis/components/barChart.vue
+++ b/src/views/energy/analysis/trendAnalysis/components/barChart.vue
@@ -25,6 +25,10 @@ export default {
      default: () => {
        return []
      }
+    },
+    timeDim: {
+      type: String,
+      default: ''
    }
  },
  watch: {
@@ -51,13 +55,37 @@ export default {
      let xData = []
      let yData = []
      for (let i = 0; i < this.chartData.length; i++) {
-        xData.push(this.chartData[i].time)
+        let time = ""
+        if (this.timeDim === '3') {
+          let year = this.chartData[i].time.slice(0,4)
+          let weak = this.chartData[i].time.slice(4,6)
+          time = year+' 第 '+weak+' 周'
+        } else {
+          time = this.chartData[i].time
+        }
+        xData.push(time)
        yData.push(this.chartData[i].useNum)
      }
      var option = {
+        color:['#288AFF'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '4%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
+        },
        xAxis: {
          type: 'category',
-          data: xData
+          data: xData,
+          axisLabel: {
+            rotate: "45"
+          }
        },
        yAxis: {
          type: 'value'
@@ -65,7 +93,12 @@ export default {
        series: [
          {
            data: yData,
-            type: 'bar'
+            type: 'bar',
+            barMaxWidth: 20,
+            label: {
+              show: true,
+              position: 'top'
+            }
          }
        ]
      };
--- a/src/views/energy/analysis/trendAnalysis/components/lineChart.vue
+++ b/src/views/energy/analysis/trendAnalysis/components/lineChart.vue
@@ -8,6 +8,7 @@
 <script>
 import * as echarts from 'echarts'
 import resize from '@/utils/chartMixins/resize'
+import moment from 'moment'
 export default {
  name: "LineChart",
  mixins: [resize],
@@ -25,6 +26,10 @@ export default {
      default: () => {
        return []
      }
+    },
+    timeDim: {
+      type: String,
+      default: ''
    }
  },
  watch: {
@@ -51,14 +56,35 @@ export default {
      let xData = []
      let yData = []
      for (let i = 0; i < this.chartData.length; i++) {
-        xData.push(this.chartData[i].time)
+        let time = ""
+        if (this.timeDim === '3') {
+          let year = this.chartData[i].time.slice(0,4)
+          let weak = this.chartData[i].time.slice(4,6)
+          time = year+' 第 '+weak+' 周'
+        } else {
+          time = this.chartData[i].time
+        }
+        xData.push(time)
        yData.push(this.chartData[i].useNum)
      }

      var option = {
+        color:['#288AFF'],
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '4%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
+        },
        xAxis: {
          type: 'category',
-          data: xData
+          data: xData,
+          axisLabel: {
+            rotate: "45"
+          }
        },
        yAxis: {
          type: 'value'
--- a/src/views/energy/analysis/trendAnalysis/index.vue
+++ b/src/views/energy/analysis/trendAnalysis/index.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="app-container" id="trendAnalysisBox">
+  <div class="app-container trendAnalysisBox" id="trendAnalysisBox">
    <!-- 搜索工作栏 -->
    <search-area :isFold="isFold" @submit="getList"/>
-    <el-tabs v-model="activeName" @tab-click="switchChart">
+    <el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
      <el-tab-pane label="柱状图" name="bar">
-        <bar-chart ref="analysisBarChart" :chartData="chartData" />
+        <bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim"/>
      </el-tab-pane>
      <el-tab-pane label="折线图" name="line">
-        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+        <line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
      </el-tab-pane>
    </el-tabs>
+    <!-- 没有数据 -->
+    <div class="no-data-bg" v-show='!chartData.length'></div>
  </div>
 </template>
 <script>
@@ -25,7 +27,8 @@ export default {
    return {
      isFold: false,
      activeName: 'bar',
-      chartData: []
+      chartData: [],
+      timeDim: ''
    }
  },
  mounted() {
@@ -37,6 +40,7 @@ export default {
  },
  methods: {
    getList(params) {
+      this.timeDim = params.timeDim
      getEnergyTrend({ ...params }).then((res) => {
        if (res.code === 0) {
          this.chartData = res.data
@@ -58,4 +62,33 @@ export default {
    }
  }
 }
-</script>
+</script>
+<style lang='scss'>
+.trendAnalysisBox {
+  .el-tabs__nav::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #e4e7ed;
+    /* z-index: 1; */
+  }
+  .el-tabs__nav-wrap::after {
+    width: 0;
+  }
+  .el-tabs__item {
+    padding: 0 10px;
+  }
+  .el-tabs__item:hover {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item.is-active {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item {
+    color: rgba(0, 0, 0, 0.45);
+  }
+}
+</style>
--- a/src/views/energy/analysis/yoyAnalysis/components/lineChart.vue
+++ b/src/views/energy/analysis/yoyAnalysis/components/lineChart.vue
@@ -75,6 +75,7 @@ export default {
        }
      }
      var option = {
+        color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF','#FF6860','#FF9747','#B0EB42','#D680FF','#0043D2'],
        legend: {
          data: keys
        },
@@ -82,8 +83,8 @@ export default {
          trigger: 'axis'
        },
        grid: {
-          left: '3%',
-          right: '4%',
+          left: '1%',
+          right: '1%',
          bottom: '3%',
          containLabel: true
        },
--- a/src/views/energy/analysis/yoyAnalysis/components/subRate.vue
+++ b/src/views/energy/analysis/yoyAnalysis/components/subRate.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <svg-icon icon-class="upArrow" v-show='injectData[injectData.prop] > 0'/>
+    <svg-icon icon-class="downArrow"  v-show='injectData[injectData.prop] < 0'/>
+    <span style="margin-left: 5px;">{{ injectData[injectData.prop] }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'subRate',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
--- a/src/views/energy/analysis/yoyAnalysis/index.vue
+++ b/src/views/energy/analysis/yoyAnalysis/index.vue
@@ -2,20 +2,25 @@
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <search-area @submit="getList" @exportD="exportData"/>
-    <div style='width: 100%;height: 300px;'>
-      <line-chart ref="analysisLineChart" :chartData="chartData"/>
+    <div v-show='chartData.length'>
+      <div style='width: 100%;height: 400px;'>
+        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+      </div>
+      <!-- 表格 -->
+      <base-table
+        :table-props="tableProps"
+        :table-data="list"
+        :max-height="tableH"
+        class="yoy-out-table"
+      />
    </div>
-    <!-- 表格 -->
-    <base-table
-      :table-props="tableProps"
-      :table-data="list"
-      :max-height="tableH"
-      class="yoy-out-table"
-    />
+    <!-- 没有数据 -->
+    <div class="no-data-bg" v-show='!chartData.length'></div>
  </div>
 </template>
 <script>
 import { getYoy } from "@/api/analysis/energyAnalysis"
+import subRate from "./components/subRate.vue"
 import SearchArea from "./components/searchArea"
 import LineChart from "./components/lineChart"
 import FileSaver from "file-saver"
@@ -28,12 +33,12 @@ export default {
      chartData: [],
      tableProps: [],
      list: [],
-      tableH: this.tableHeight(500)
+      tableH: this.tableHeight(600)
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
-      this.tableH = this.tableHeight(500)
+      this.tableH = this.tableHeight(600)
    })
  },
  methods: {
@@ -65,11 +70,15 @@ export default {
            let obj = {}
            obj.prop = tempX[j].prop + '_' + nameData[i].name
            obj.label = nameData[i].name
+            if (obj.label.indexOf('同比')!= -1) {
+              obj.subcomponent = subRate
+            }
            tempX[j].children.push(obj)
          }
        }
      }
      this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
+      console.log(this.tableProps)
      // 数据
      this.list = []
      for (let k = 0; k < data.length; k++) {
--- a/src/views/energy/monitoring/energyReportSearch/index.vue
+++ b/src/views/energy/monitoring/energyReportSearch/index.vue
@@ -38,15 +38,15 @@ const tableProps = [
    label: '能源类型'
  },
  {
-    prop: 'startNum',
+    prop: 'startValue',
    label: '抄表数(起始)'
  },
  {
-    prop: 'endNum',
+    prop: 'endValue',
    label: '抄表数(结束)'
  },
  {
-    prop: 'useNum',
+    prop: 'diffValue',
    label: '消耗量'
  }
 ]