cbjsxt-front-master/src/views/costAudit/baseInfo/statistics/historyAnalysis.vue

<template>
  <div class="history-analysis-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input
            v-model="searchForm.projectName"
            placeholder="请输入"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="被监审单位">
          <el-input
            v-model="searchForm.auditedUnit"
            placeholder="请输入"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="监审期间">
          <el-date-picker
            v-model="searchForm.startYear"
            type="year"
            placeholder="选择开始年份"
            format="yyyy年"
            value-format="yyyy"
            style="width: 120px; margin-right: 10px"
          ></el-date-picker>
          <span>-</span>
          <el-date-picker
            v-model="searchForm.endYear"
            type="year"
            placeholder="选择结束年份"
            format="yyyy年"
            value-format="yyyy"
            style="width: 120px; margin-left: 10px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">
            查询
          </el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧指标选择列表 -->
      <div class="indicator-list">
        <div class="list-title">请选择数据项后查看分析：</div>
        <el-tree
          v-model="selectedIndicators"
          class="indicator-tree"
          :data="indicatorData"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          @check-change="handleCheckChange"
        ></el-tree>
      </div>

      <!-- 右侧图表展示区域 -->
      <div class="chart-area">
        <div class="chart-title">成本分析</div>

        <div class="charts-wrapper">
          <!-- 成本变化趋势分析图表 -->
          <div class="chart-item">
            <div class="sub-title">成本变化趋势分析</div>
            <div id="trendChart" style="height: 300px"></div>
          </div>

          <!-- 成本构成分析图表 -->
          <div class="chart-item">
            <div class="sub-title">成本构成分析</div>
            <div id="compositionChart" style="height: 300px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: 'HistoryAnalysis',
    data() {
      return {
        // 搜索表单
        searchForm: {
          projectName: '',
          auditedUnit: '',
          startYear: '2022',
          endYear: '2024',
        },
        // 指标树数据
        indicatorData: [
          {
            id: '1',
            label: '一、污水处治理成本',
            children: [
              { id: '1-1', label: '1.1 污水处理成本' },
              { id: '1-2', label: '1.2 污泥处理成本' },
              { id: '1-3', label: '1.3 税金及附加费用' },
            ],
          },
          {
            id: '2',
            label: '二、垃圾处理成本',
            children: [
              { id: '2-1', label: '2.1 垃圾处理总成本' },
              { id: '2-2', label: '2.2 单位垃圾处理成本' },
            ],
          },
          {
            id: '3',
            label: '三、分析类指标',
            children: [
              { id: '3-1', label: '3.1 实际处理水量' },
              { id: '3-2', label: '3.2 实际垃圾处理量' },
              { id: '3-3', label: '3.3 政府购买服务价格' },
            ],
          },
        ],
        // 选中的指标
        selectedIndicators: ['1-3'], // 默认选中"税金及附加费用"
        // 图表实例
        trendChart: null,
        compositionChart: null,
      }
    },
    mounted() {
      // 初始化图表
      this.initCharts()
      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
      // 销毁图表实例，防止内存泄漏
      if (this.trendChart) {
        this.trendChart.dispose()
      }
      if (this.compositionChart) {
        this.compositionChart.dispose()
      }
      // 移除窗口大小变化监听
      window.removeEventListener('resize', this.handleResize)
    },
    methods: {
      // 初始化图表
      initCharts() {
        // 成本变化趋势分析图表
        const trendChartDom = document.getElementById('trendChart')
        this.trendChart = echarts.init(trendChartDom)
        this.trendChart.setOption(this.getTrendChartOption())

        // 成本构成分析图表
        const compositionChartDom = document.getElementById('compositionChart')
        this.compositionChart = echarts.init(compositionChartDom)
        this.compositionChart.setOption(this.getCompositionChartOption())
      },

      // 获取趋势图表配置
      getTrendChartOption() {
        return {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
            },
          },
          legend: {
            data: ['指标1', '指标2'],
            bottom: 0,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2022年', '2023年', '2024年'],
          },
          yAxis: {
            type: 'value',
            min: 3,
            max: 10,
          },
          series: [
            {
              name: '指标1',
              type: 'line',
              data: [7.5, 7.2, 9.5],
              symbolSize: 10,
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#0066FF',
              },
              itemStyle: {
                color: '#0066FF',
              },
            },
            {
              name: '指标2',
              type: 'line',
              data: [4.2, 4.5, 6.2],
              symbolSize: 10,
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#52C41A',
              },
              itemStyle: {
                color: '#52C41A',
              },
            },
          ],
        }
      },

      // 获取构成图表配置
      getCompositionChartOption() {
        return {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: [
              '职工薪酬',
              '材料费',
              '动力费',
              '固定资产折旧',
              '无形资产摊销',
              '修理费',
              '其他费用',
            ],
            formatter: function (name) {
              return name.split('-').join('\n')
            },
          },
          series: [
            {
              name: '成本构成',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 0,
                borderColor: '#fff',
                borderWidth: 0,
              },
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 35,
                  name: '职工薪酬',
                  itemStyle: { color: '#FF6B6B' },
                },
                {
                  value: 20,
                  name: '材料费',
                  itemStyle: { color: '#4ECDC4' },
                },
                {
                  value: 15,
                  name: '动力费',
                  itemStyle: { color: '#FFD166' },
                },
                {
                  value: 10,
                  name: '固定资产折旧',
                  itemStyle: { color: '#6A0572' },
                },
                {
                  value: 8,
                  name: '无形资产摊销',
                  itemStyle: { color: '#AB83A1' },
                },
                {
                  value: 7,
                  name: '修理费',
                  itemStyle: { color: '#FC5185' },
                },
                {
                  value: 5,
                  name: '其他费用',
                  itemStyle: { color: '#36A2EB' },
                },
              ],
            },
          ],
        }
      },

      // 处理查询
      handleQuery() {
        console.log('查询条件：', this.searchForm)
        this.updateChartData()
      },

      // 处理重置
      handleReset() {
        this.searchForm = {
          projectName: '',
          auditedUnit: '',
          startYear: '2022',
          endYear: '2024',
        }
        this.selectedIndicators = ['1-3']
        this.updateChartData()
      },

      // 处理指标选择变化
      handleCheckChange(data, checked, indeterminate) {
        console.log('选择的指标：', this.selectedIndicators)
        this.updateChartData()
      },

      // 更新图表数据
      updateChartData() {
        // 这里可以根据实际业务需求，基于搜索条件和选中的指标重新获取数据并更新图表
        // 目前使用的是模拟数据
        if (this.trendChart) {
          this.trendChart.setOption(this.getTrendChartOption())
        }
        if (this.compositionChart) {
          this.compositionChart.setOption(this.getCompositionChartOption())
        }
      },

      // 处理窗口大小变化
      handleResize() {
        if (this.trendChart) {
          this.trendChart.resize()
        }
        if (this.compositionChart) {
          this.compositionChart.resize()
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .history-analysis-container {
    padding: 20px;
  }

  .main-content {
    display: flex;
    gap: 20px;
    height: 100%;
  }

  .indicator-list {
    width: 300px;
    height: 100%;
    overflow-y: auto;
  }
  .indicator-tree {
    border: 1px solid #e8e8e8;
    height: 100%;
  }

  .list-title {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
  }

  .chart-area {
    flex: 1;
  }
  .charts-wrapper {
    border: 1px solid #e8e8e8;
    padding: 20px;
  }
  .chart-title {
    width: 80px;
    text-align: center;
    color: #fff;
    padding: 6px 10px;
    background-color: #8400ff;
  }

  .charts-wrapper {
    display: flex;
    gap: 20px;
  }

  .chart-item {
    flex: 1;
  }

  .sub-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #666;
  }

  // 适配不同屏幕尺寸
  @media (max-width: 1200px) {
    .main-content {
      flex-direction: column;
    }

    .indicator-list {
      width: 100%;
    }

    .charts-wrapper {
      flex-direction: column;
    }
  }
</style>