smart-power-ui/src/views/iot/statistics/chain/template.vue

<template>
  <div class="compared-template">
    <div class="main-echarts">
      <e-echarts-bar
        ref="echartsLineTrend"
        :styles="echartsOption.styles"
        :colorList="echartsOption.colorList"
        :eId="echartsOption.eId"
        :option="resultOption"
      ></e-echarts-bar>
    </div>

    <div class="main-table">
      <el-table v-loading="loading" :data="tableList">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          :index="
            (val) => {
              return val + 1;
            }
          "
          width="80px"
        ></el-table-column>
        <el-table-column label="项目名称" align="left" prop="projectName" />
        <el-table-column label="日期" align="left" prop="date" />
        <el-table-column
          :label="`本期用量 (${unit})`"
          align="center"
          prop="currentPeriodValue"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea">{{
              Number(scope.row.currentPeriodValue).toFixed(2) || "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="`同期用量 (${unit})`"
          align="center"
          prop="homochronousValue"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea">{{
              Number(scope.row.homochronousValue).toFixed(2) || "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="`增长值`" align="center" prop="coal">
          <template slot-scope="scope">
            <span class="lay-table-textarea">{{
              Number(scope.row.increaseValue).toFixed(2) || "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="`增长率`" align="center" prop="coal">
          <template slot-scope="scope">
            <span class="lay-table-textarea"
              >{{ Number(scope.row.increaseRate).toFixed(2) || "--" }} %</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { monthOnCircleEnergy, exportOnCircle } from "@/api/iot/staistics";
import EEchartsBar from "@/components/Echarts/EEchartsBar";
export default {
  name: "ChainTemplate",
  props: {
    energyType: String,
    params: Object,
    unit: String,
  },
  components: {
    EEchartsBar,
  },
  data() {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      tableList: [],
      resultOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "2%",
          bottom: "2%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "Kwh",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#1890FF",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "同期",
            type: "bar",
            barWidth: "30%",
            data: [],
          },
          {
            name: "本期",
            type: "bar",
            barWidth: "30%",
            data: [],
          },
        ],
      },
      echartsOption: {
        styles: "width: 100%; height: 100%;",
        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
        eId: "statisticsComparedEchartsBar",
      },
    };
  },
  created() {
    this.getChartList();
  },
  methods: {
    updateEcharts() {
      if (this.$refs.echartsLineTrend) {
        this.$refs.echartsLineTrend.updateEchart();
      }
    },
    getList() {
      this.getChartList();
    },
    handleCeanData(list) {
      var xAxis = [];
      var seriesFast = [];
      var seriesLast = [];
      if (list && list.length > 0) {
        list.forEach((v) => {
          xAxis.push(v["date"]);
          seriesFast.push(v["homochronousValue"]);
          seriesLast.push(v["currentPeriodValue"]);
        });
      } else {
        for (let i = 0; i < 12; i++) {
          xAxis.push(this.parseTime(new Date(), "{y}-{m}"));
          seriesFast.push(0);
          seriesLast.push(0);
        }
      }
      return {
        xAxis: xAxis,
        seriesFast: seriesFast,
        seriesLast: seriesLast,
      };
    },
    getChartList() {
      this.loading = true;
      if (this.energyType && this.params.year) {
        monthOnCircleEnergy(
          Object.assign(
            {
              energyType: this.energyType,
            },
            this.params
          )
        ).then((res) => {
          this.tableList = res.rows;
          this.resultOption.yAxis[0].name = this.unit || "";
          var result = this.handleCeanData(res.rows);
          this.resultOption.xAxis[0].data = result["xAxis"];
          this.resultOption.series[0].data = result["seriesFast"];
          this.resultOption.series[1].data = result["seriesLast"];
          this.updateEcharts();
          this.loading = false;
        });
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.energyType && this.params.year) {
        const queryParams = Object.assign(
          {
            energyType: this.energyType,
          },
          this.params
        );
        this.$confirm("是否确认导出数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return exportOnCircle(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
          });
      }
    },
  },
};
</script>
<style lang="scss">
.compared-template {
  .main-echarts {
    height: 350px;
    width: 100%;
    margin: 10px 0;
  }
  .main-table {
    width: 100%;
    margin-top: 20px;
  }
}
</style>