zhny_ui/ems-ui/src/views/mgr/charging.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container">
          <el-tree ref="tree" :data="areaOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
            node-key="id" :default-expanded-keys="this.defalutArr" highlight-current @node-click="handleNodeClick" />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-tabs v-model="activeTab" @tab-click="handleTabChange">
          <el-tab-pane label="总览" name="first">
            <div class="custom-form">
              <el-select v-model="queryParams.meterCls" size="mini" @change="meterClsChange">
                <el-option v-for="item in emsClsOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </div>
            <div class="panel">
              <div class="panel-title">当月数据</div>
              <div class="panel-body">
                <BaseChart width="100%" height="300px" :option="pieOptions" />
              </div>
            </div>
            <div class="panel">
              <div class="panel-title">历史数据</div>
              <div class="panel-body">
                <div class="custom-form">
                  <el-date-picker v-model="queryParams.historyRange" size="mini" type="monthrange" align="right" :clearable="false"
                    range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyyMM"
                    :picker-options="pickerOptions" @change="getList">
                  </el-date-picker>
                </div>
                <el-table :data="historyData" style="width: 100%;margin-bottom:20px" max-height="300px">
                  <el-table-column prop="meteredTime" align="center" label="账单月份(年-月)">
                  </el-table-column>
                  <el-table-column
                    prop="meteredValue"
                    align="center"
                    :label="`商户用量(${queryParams.meterCls === 45 ? 'kW·h' : '吨'})`">
                    <template slot-scope="scope">
                      {{ scope.row.meteredValue }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="meteredPrice" align="center" label="商户金额(￥)">
                  </el-table-column>
                  <el-table-column
                    prop="sharedValue"
                    align="center"
                    :label="`公摊用量(${queryParams.meterCls === 45 ? 'kW·h' : '吨'})`">
                    <template slot-scope="scope">
                      {{ scope.row.meteredValue }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="sharedPrice" align="center" label="公摊费用(￥)">
                  </el-table-column>
                  <el-table-column
                    prop="totalValue"
                    align="center"
                    :label="`总用量(${queryParams.meterCls === 45 ? 'kW·h' : '吨'})`">
                    <template slot-scope="scope">
                      {{ scope.row.meteredValue }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="totalPrice" align="center" label="总金额(￥)">
                  </el-table-column>
                </el-table>
                <BaseChart width="100%" height="300px" :option="overviewOptions" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="个户" name="second">
            <div class="custom-form">
              <el-select v-model="queryParams.meterCls" size="mini" @change="meterClsChange">
                <el-option v-for="item in emsClsOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </div>
            <div class="panel">
              <div class="panel-title">当月数据</div>
              <div class="panel-body">
                <el-table :data="currentData" style="width: 100%">
                  <el-table-column prop="meteredTime" align="center" label="账单月份(年-月)">
                  </el-table-column>
                  <el-table-column
                    prop="meteredValue"
                    align="center"
                    :label="`用量(${queryParams.meterCls === 45 ? 'kW·h' : '吨'})`">
                    <template slot-scope="scope">
                      {{ scope.row.meteredValue }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="meteredPrice" align="center" label="金额(￥)">
                  </el-table-column>
                  <el-table-column prop="sharedPrice" align="center" label="公摊费用(￥)">
                  </el-table-column>
                  <el-table-column prop="sharedComputeType" align="center" label="公摊类型">
                    <template slot-scope="scope">
                      {{formatDict(scope.row.sharedComputeType,'computeTypeOptions')}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="totalPrice" align="center" label="总金额(￥)">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="panel">
              <div class="panel-title">历史数据</div>
              <div class="panel-body">
                <div class="custom-form">
                  <el-date-picker v-model="queryParams.historyRange" size="mini" type="monthrange" align="right" :clearable="false"
                    range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyyMM"
                    :picker-options="pickerOptions" @change="getList">
                  </el-date-picker>
                </div>
                <el-table :data="historyData" style="width: 100%;margin-bottom:20px" max-height="300px">
                  <el-table-column prop="meteredTime" align="center" label="账单月份(年-月)">
                  </el-table-column>
                  <el-table-column
                    prop="meteredValue"
                    align="center"
                    :label="`用量(${queryParams.meterCls === 45 ? 'kW·h' : '吨'})`">
                    <template slot-scope="scope">
                      {{ scope.row.meteredValue }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="meteredPrice" align="center" label="金额(￥)">
                  </el-table-column>
                  <!-- <el-table-column prop="sharedPrice" align="center" label="公摊价格">
                  </el-table-column>
                  <el-table-column prop="sharedComputeType" align="center" label="公摊类型">
                    <template slot-scope="scope">
                      {{formatDict(scope.row.sharedComputeType,'computeTypeOptions')}}
                    </template>
                  </el-table-column> -->
                  <el-table-column prop="totalPrice" align="center" label="总价(￥)">
                  </el-table-column>
                </el-table>
                <BaseChart width="100%" height="300px" :option="elecOptions" />
              </div>
            </div>
          </el-tab-pane>

        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { areaTreeSelectByTag } from '@/api/basecfg/area'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { chargingList, overviewInfo } from '@/api/mgr/charging.js'
import { dateFormat } from '@/utils/index.js'
import BaseChart from '@/components/BaseChart'
export default {
  name: 'Device',
  components: { Treeselect, BaseChart },
  data() {
    const nowDay = new Date()
    const lastMonth = new Date(nowDay.getFullYear(), nowDay.getMonth() - 1)
    return {
      activeTab: 'first',
      // 总条数
      areaName: undefined,
      areaOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      emsClsOptions: [
        { code: 45, name: '电表' },
        { code: 70, name: '水表' }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        areaCode: null,
        meterCls: 45,
        historyRange: []
      },
      lastMonth: dateFormat(lastMonth, 'yyyyMM'),
      currentData: [],
      historyData: [],
      defalutArr: [],
      computeTypeOptions: [
        { name: '不计入', code: 0 },
        { name: '个户平摊', code: 1 },
        { name: '面积公摊）', code: 2 }
      ],
      pickerOptions: {
        disabledDate(time) {
          const t = new Date().getDate()
          return time.getTime() > Date.now() - 8.64e7 * t
        }
      }
    }
  },
  created() {
    this.setDefaultMonthRange()
    this.handleTabChange()

  },
  computed: {
    pieOptions() {
      let options = {}
      if (this.activeTab == 'first') {
        const { meterCls } = this.queryParams
        let pieData = []
        let total = ''
        if (this.currentData.length) {
          const { meteredValue, sharedValue, totalValue, meteredPrice, sharedPrice, totalPrice } = this.currentData[0]
          total = totalValue
          pieData = [
            {
              value: meteredValue,
              price: meteredPrice,
              name:  '商户用量',
              totalValue,
              totalPrice,
              itemStyle: {
                color: '#8d7fec'
              }
            },
            {
              value: sharedValue,
              price: sharedPrice,
              name: '公摊用量',
              totalValue,
              totalPrice,
              itemStyle: {
                color: '#6BD9BC'
              }
            }
          ]
        }
        options = {
          title: [
            {
              text: '总用量',
              subtext: total + `${meterCls === 45 ? '度' : '吨'}`,
              textStyle: {
                fontSize: 15,
                color: 'black'
              },
              subtextStyle: {
                fontSize: 20,
                color: 'black'
              },
              textAlign: 'center',
              x: '34.5%',
              y: '40%'
            }
          ],
          tooltip: {
            trigger: 'item',
            formatter: function(parms) {
              var str =
                parms.data.name +
                '</br>' +
                '用量：' +
                parms.data.value +
                `${meterCls === 45 ? '度' : '吨'}` +
                '</br>' +
                '金额：' +
                parms.data.price +
                '元'
              return str
            }
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            left: '65%',
            align: 'left',
            top: 'middle',
            textStyle: {
              color: '#8C8C8C'
            }
          },
          series: [
            {
              type: 'pie',
              center: ['35%', '50%'],
              radius: ['40%', '65%'],
              clockwise: false, // 饼图的扇区是否是顺时针排布
              avoidLabelOverlap: false,
              itemStyle: {
                // 图形样式
                normal: {
                  borderColor: '#ffffff',
                  borderWidth: 1
                }
              },
              label: {
                formatter: function(val) {
                  const unit = meterCls === 45 ? '度' : '吨'
                  return '{a|' + val.name + '}{b|\n' + val.value + unit + '}{b|\n' + val.data.price + '元}'
                },
                textStyle: {
                  rich: {
                    a: {
                      color: '#333333',
                      fontSize: '12'
                    },
                    b: {
                      color: '#0086FF',
                      fontSize: '12',
                      padding: [4, 0, 0, 0]
                    }
                  }
                }
              },
              labelLine: {
                length: 10,
                length2: 50
              },
              labelLayout: {
                verticalAlign: 'bottom',
              },
              data: pieData
            }
          ]
        }
      }

      return options
    },
    overviewOptions() {
      let option = {}
      if (this.activeTab === 'first') {
        const xData = this.historyData.map(item => item.meteredTime)
        const quantity = this.historyData.map(item => item.meteredValue)
        const shareQuantity = this.historyData.map(item => item.sharedValue)
        const cost = this.historyData.map(item => item.meteredPrice)
        const shareCost = this.historyData.map(item => item.sharedPrice)
        const { meterCls } = this.queryParams
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            left: '5%'
          },
          legend: {
            data:['商户用量', '商户金额', '公摊用量', '公摊金额']
          },
          xAxis: {
            type: 'category',
            data: xData,
            axisPointer: {
              type: 'shadow'
            }
          },
          yAxis: [
            {
              name: meterCls === 45 ? 'kW·h（千瓦时）' : '吨',
              type: 'value'
            },
            {
              name: '￥（元）',
              type: 'value'
            }
          ],
          series: [
            {
              name: '商户用量',
              type: 'bar',
              data: quantity,
              barWidth: 30,
              itemStyle: {
                normal: {
                  color: '#6395FA'
                }
              }
            },
            {
              name: '公摊用量',
              type: 'bar',
              data: shareQuantity,
              barWidth: 30,
              itemStyle: {
                normal: {
                  color: '#8CDF6C'
                }
              }
            },
            {
              name: '商户金额',
              type: 'line',
              yAxisIndex: 1,
              data: cost,
              showSymbol: true,
              itemStyle: {
                normal: {
                  color: '#5BD9A5'
                }
              }
            },
            {
              name: '公摊金额',
              type: 'line',
              yAxisIndex: 1,
              data: shareCost,
              showSymbol: true,
            }
          ]
        }
      }

      return option
    },
    elecOptions() {
      const xData = this.historyData.map(item => item.meteredTime)
      const quantity = this.historyData.map(item => item.meteredValue)
      const cost = this.historyData.map(item => item.meteredPrice)
      const { meterCls } = this.queryParams
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '5%'
        },
        legend: {
          data: ['用量', '金额']
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: [
          {
            name: meterCls === 45 ? 'kW·h（千瓦时）' : '吨',
            type: 'value'
          },
          {
            name: '￥（元）',
            type: 'value'
          }
        ],
        series: [
          {
            name: '用量',
            type: 'bar',
            data: quantity,
            barWidth: 30,
            itemStyle: {
              normal: {
                color: '#6395FA'
              }
            }
          },
          {
            name: '金额',
            type: 'line',
            yAxisIndex: 1,
            data: cost,
            showSymbol: true,
            itemStyle: {
              normal: {
                color: '#5BD9A5'
              }
            }
          }
        ]
      }
      return option
    }
  },
  methods: {
    meterClsChange(value) {
      this.queryParams.meterCls = value;
      this.getList('current')
      this.getList()
    },
    setDefaultMonthRange() {
      const nowDay = new Date()
      const lastMonth = new Date(nowDay.getFullYear(), nowDay.getMonth() - 1)
      const months = this.getPreviousFiveMonthsYearMonth(lastMonth)
      const {year, month} = months[months.length - 1]
      const lastFiveMonth = month < 10 ? `0${month}` : month
      this.queryParams.historyRange = [`${year}${lastFiveMonth}`, this.lastMonth]
    },
    getPreviousFiveMonthsYearMonth(date) {
      const months = [...Array(5).keys()].map(i => {
        const year = date.getFullYear()
        const month = date.getMonth() - i
        if (month < 0) {
          return {
            year: year - 1,
            month: 12 + month
          }
        }
        return {year, month: month + 1}
      })
      return months
    },
    formatDict(val, options, key = 'code', text = 'name') {
      let name = null
      this[options].forEach(item => {
        if (item[key] === val) {
          name = item[text]
        }
      })
      return name
    },
    async getList(type) {
      let startTime = null;
      let endTime = null;
      const { areaCode, meterCls, historyRange } = this.queryParams;

      if (type === 'current') {
        startTime = this.lastMonth;
        endTime = this.lastMonth;
      } else {
        startTime = historyRange[0];
        endTime = historyRange[1];
      }

      try {
        // 个户
        if (this.activeTab === 'second') {
          const response = await chargingList({
            areaPath: areaCode,
            tier: 'Zoning',
            meterCls,
            startTime,
            endTime
          });
          if (response && response.data) {
            if (type === 'current') {
              this.currentData = response.data;
              console.log("现在数据", this.currentData);
            } else {
              this.historyData = response.data;
            }
          } else {
            console.error('请求数据失败，无数据返回');
          }
        } else {
          const response = await overviewInfo({
            areaPath: areaCode,
            tier: 'Area',
            meterCls,
            startTime,
            endTime
          });
          if (response && response.data) {
            if (type === 'current') {
              this.currentData = response.data;
            } else {
              this.historyData = response.data;
            }
          } else {
            console.error('请求数据失败，无数据返回');
          }
        }
      } catch (error) {
        console.error('请求数据失败123:', error);
      }
    },

    async handleTabChange() {
      if (this.activeTab === 'first') {
        await this.getAreaTreeByTag('Area', 'Area_01');
        if (this.areaOptions.length > 0) {
          // 设置默认展开的节点
          this.defalutArr = [];
          this.recursion(this.areaOptions[0], this.defalutArr);
          this.queryParams.areaCode = this.defalutArr.join('/');
          this.$refs['tree'].setCurrentKey(this.defalutArr[this.defalutArr.length - 1]);
          this.$refs['tree'].setCheckedKeys([this.queryParams.areaCode]);
        }
      } else if (this.activeTab === 'second') {
        await this.getAreaTreeByTag('Zoning', 'Area_01');
        this.defalutArr = [];
        this.recursion(this.areaOptions[0], this.defalutArr);
        this.queryParams.areaCode = this.defalutArr.join('/');
        this.$refs['tree'].setCurrentKey(this.defalutArr[this.defalutArr.length - 1]);
        this.$refs['tree'].setCheckedKeys([this.queryParams.areaCode]);

      }
      this.meterClsChange(45);
    },

    recursion(data, defalutArr) {
      defalutArr.push(data.id)
      if (data.children && data.children.length) {
        this.recursion(data.children[0], defalutArr)
      }
    },
    /** 查询区域树结构 */
    async getAreaTreeByTag(tier, tagCode) {
      await areaTreeSelectByTag(tier, tagCode).then(response => {
        this.areaOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data, node) {
      // 商户树形结构只能点击最后一级
      if (this.activeTab === 'second' && node.level < 3) {
        return this.$refs['tree'].setCurrentKey(null);
      }
      const nodeArr = [];
      const selectNode = this.$refs.tree.getNode(data);
      this.platform(selectNode, nodeArr);
      this.queryParams.areaCode = nodeArr.map(item => item.id).join('/');
      this.$refs['tree'].setCurrentKey(this.queryParams.areaCode);
      this.getList('current'); // 获取当月数据
      this.getList('history'); // 获取历史数据
    },
    // 递归函数
    platform(node, array) {
      if (!node.parent) {
        return;
      }
      array.unshift(node.data);
      this.platform(node.parent, array);
    },
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  ::v-deep .el-tabs__content {
    overflow: initial;
  }
}
.custom-form {
  padding-bottom: 10px;
}
.panel {
  display: flex;
  flex-direction: column;
  .panel-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    &::before {
      content: '';
      display: inline-block;
      height: 14px;
      width: 3px;
      border-radius: 6px;
      background: #409eff;
      margin-right: 5px;
    }
  }
  .panel-body {
    flex: 1;
    background: #fff;
    padding: 10px 0;
  }
}
</style>