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

<template>
  <div class="industry-analysis-container">
    <!-- 主体内容区域 - 双栏对比布局 -->
    <div class="comparison-container">
      <!-- 左侧面板 -->
      <div class="comparison-panel left-panel">
        <!-- 左侧搜索区域 -->
        <div class="search-section">
          <el-form :inline="true" :model="leftSearchForm" class="search-form">
            <el-form-item label="项目名称:">
              <el-select
                v-model="leftSearchForm.projectName"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option label="请选择" value=""></el-option>
                <!-- 这里可以根据实际数据动态加载选项 -->
              </el-select>
            </el-form-item>

            <el-form-item label="监审对象:">
              <el-select
                v-model="leftSearchForm.auditObject"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option label="请选择" value=""></el-option>
                <!-- 这里可以根据实际数据动态加载选项 -->
              </el-select>
            </el-form-item>

            <el-form-item label="计划年度:">
              <el-date-picker
                v-model="leftSearchForm.startYear"
                type="year"
                placeholder="开始年份"
                format="yyyy年"
                value-format="yyyy"
                style="width: 120px; margin-right: 10px"
              ></el-date-picker>
              <span style="margin: 0 5px">~</span>
              <el-date-picker
                v-model="leftSearchForm.endYear"
                type="year"
                placeholder="结束年份"
                format="yyyy年"
                value-format="yyyy"
                style="width: 120px"
              ></el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="handleLeftQuery"
              >
                查询
              </el-button>
              <el-button
                icon="el-icon-refresh"
                style="margin-left: 10px"
                @click="handleLeftReset"
              >
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 左侧数据项选择和图表 -->
        <div class="panel-content">
          <!-- 左侧数据项选择 -->
          <div class="data-selector">
            <div class="panel-title">请选择数据项后查看分析：</div>
            <el-tree
              ref="leftDataTree"
              :data="dataItems"
              show-checkbox
              node-key="id"
              :props="treeProps"
              :default-checked-keys="['1-6']"
              :default-expanded-keys="['1', '2']"
              @check="handleLeftDataItemCheck"
            ></el-tree>
          </div>

          <!-- 左侧图表展示 -->
          <div class="chart-section">
            <!-- 指标趋势分析 -->
            <div class="chart-container">
              <h3 class="chart-title">指标趋势分析</h3>
              <div id="leftTrendChart" class="chart"></div>
            </div>

            <!-- 指标占比分析 -->
            <div class="chart-container">
              <h3 class="chart-title">指标占比分析</h3>
              <div id="leftProportionChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- VS对比图标 -->
      <div class="vs-container">
        <div class="vs-icon">VS</div>
      </div>

      <!-- 右侧面板 -->
      <div class="comparison-panel right-panel">
        <!-- 右侧搜索区域 -->
        <div class="search-section">
          <el-form :inline="true" :model="rightSearchForm" class="search-form">
            <el-form-item label="项目名称:">
              <el-select
                v-model="rightSearchForm.projectName"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option label="请选择" value=""></el-option>
                <!-- 这里可以根据实际数据动态加载选项 -->
              </el-select>
            </el-form-item>

            <el-form-item label="监审对象:">
              <el-select
                v-model="rightSearchForm.auditObject"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option label="请选择" value=""></el-option>
                <!-- 这里可以根据实际数据动态加载选项 -->
              </el-select>
            </el-form-item>

            <el-form-item label="计划年度:">
              <el-date-picker
                v-model="rightSearchForm.startYear"
                type="year"
                placeholder="开始年份"
                format="yyyy年"
                value-format="yyyy"
                style="width: 120px; margin-right: 10px"
              ></el-date-picker>
              <span style="margin: 0 5px">~</span>
              <el-date-picker
                v-model="rightSearchForm.endYear"
                type="year"
                placeholder="结束年份"
                format="yyyy年"
                value-format="yyyy"
                style="width: 120px"
              ></el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleRightQuery">
                查询
              </el-button>
              <el-button style="margin-left: 10px" @click="handleRightReset">
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 右侧数据项选择和图表 -->
        <div class="panel-content">
          <!-- 右侧数据项选择 -->
          <div class="data-selector">
            <div class="panel-title">请选择数据项后查看分析：</div>
            <el-tree
              ref="rightDataTree"
              :data="dataItems"
              show-checkbox
              node-key="id"
              :props="treeProps"
              :default-checked-keys="['1-6']"
              :default-expanded-keys="['1', '2']"
              @check="handleRightDataItemCheck"
            ></el-tree>
          </div>

          <!-- 右侧图表展示 -->
          <div class="chart-section">
            <!-- 指标趋势分析 -->
            <div class="chart-container">
              <h3 class="chart-title">指标趋势分析</h3>
              <div id="rightTrendChart" class="chart"></div>
            </div>

            <!-- 指标占比分析 -->
            <div class="chart-container">
              <h3 class="chart-title">指标占比分析</h3>
              <div id="rightProportionChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: 'IndustryAnalysis',
    data() {
      return {
        // 左侧搜索表单数据
        leftSearchForm: {
          projectName: '',
          auditObject: '',
          startYear: '2024',
          endYear: '2025',
        },
        // 右侧搜索表单数据
        rightSearchForm: {
          projectName: '',
          auditObject: '',
          startYear: '2024',
          endYear: '2025',
        },
        // 数据项树形结构
        dataItems: [
          {
            id: '1',
            label: '人员费用支出小计',
            children: [
              { id: '1-1', label: '基本工资' },
              { id: '1-2', label: '津贴' },
              { id: '1-3', label: '奖金' },
              { id: '1-4', label: '福利费' },
              { id: '1-5', label: '社会保障费' },
              { id: '1-6', label: '其他人员支出' },
            ],
          },
          {
            id: '2',
            label: '商品和服务支出小计',
            children: [
              { id: '2-1', label: '办公费' },
              { id: '2-2', label: '水电费' },
              { id: '2-3', label: '会议及培训费' },
              { id: '2-4', label: '交通和差旅费' },
              { id: '2-5', label: '招待费' },
              { id: '2-6', label: '印刷费' },
              { id: '2-7', label: '维修费' },
              { id: '2-8', label: '物业管理费' },
              { id: '2-9', label: '专用材料费' },
              { id: '2-10', label: '财务费' },
              { id: '2-11', label: '劳务费' },
              { id: '2-12', label: '租赁费' },
              { id: '2-13', label: '工会经费' },
              { id: '2-14', label: '其他支出' },
            ],
          },
        ],
        // 树形结构配置
        treeProps: {
          children: 'children',
          label: 'label',
        },
        // 左侧选中的数据项
        leftSelectedItems: [{ id: '1-6', label: '其他人员支出' }],
        // 右侧选中的数据项
        rightSelectedItems: [{ id: '1-6', label: '其他人员支出' }],
        // 左侧图表实例
        leftTrendChart: null,
        leftProportionChart: null,
        // 右侧图表实例
        rightTrendChart: null,
        rightProportionChart: null,
        // 左侧图表数据
        leftTrendData: {
          '1-6': [7, 7, 9.5], // 其他人员支出 2022-2024年数据
        },
        leftProportionData: {
          '1-1': 12.43, // 基本工资占比
          '1-2': 12.26, // 津贴占比
          '1-3': 16.87, // 奖金占比
          '1-4': 25.75, // 福利费占比
          '1-6': 32.68, // 其他人员支出占比
        },
        // 右侧图表数据
        rightTrendData: {
          '1-6': [7, 7, 9.5], // 其他人员支出 2022-2024年数据
        },
        rightProportionData: {
          '1-1': 12.43, // 基本工资占比
          '1-2': 12.26, // 津贴占比
          '1-3': 16.87, // 奖金占比
          '1-4': 25.75, // 福利费占比
          '1-6': 32.68, // 其他人员支出占比
        },
      }
    },
    mounted() {
      // 初始化图表
      this.initCharts()
      // 设置默认选中状态
      setTimeout(() => {
        if (this.$refs.leftDataTree) {
          this.$refs.leftDataTree.setCheckedKeys(['1-6'])
        }
        if (this.$refs.rightDataTree) {
          this.$refs.rightDataTree.setCheckedKeys(['1-6'])
        }
      }, 100)
      // 监听窗口大小变化，调整图表大小
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
      // 清理图表实例
      if (this.leftTrendChart) {
        this.leftTrendChart.dispose()
      }
      if (this.leftProportionChart) {
        this.leftProportionChart.dispose()
      }
      if (this.rightTrendChart) {
        this.rightTrendChart.dispose()
      }
      if (this.rightProportionChart) {
        this.rightProportionChart.dispose()
      }
      // 移除事件监听
      window.removeEventListener('resize', this.handleResize)
    },
    methods: {
      // 初始化图表
      initCharts() {
        // 初始化左侧图表
        this.leftTrendChart = echarts.init(
          document.getElementById('leftTrendChart')
        )
        this.leftProportionChart = echarts.init(
          document.getElementById('leftProportionChart')
        )

        // 初始化右侧图表
        this.rightTrendChart = echarts.init(
          document.getElementById('rightTrendChart')
        )
        this.rightProportionChart = echarts.init(
          document.getElementById('rightProportionChart')
        )

        // 设置默认图表数据
        this.updateLeftTrendChart()
        this.updateLeftProportionChart()
        this.updateRightTrendChart()
        this.updateRightProportionChart()
      },

      // 更新左侧趋势图
      updateLeftTrendChart() {
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>{a}: {c}',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2022年', '2023年', '2024年'],
            axisLine: {
              lineStyle: {
                color: '#333',
              },
            },
          },
          yAxis: {
            type: 'value',
            min: 6.5,
            max: 10,
            interval: 0.5,
            axisLine: {
              lineStyle: {
                color: '#333',
              },
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              name: '其他人员支出',
              type: 'line',
              data: [7, 7, 9.5],
              lineStyle: {
                width: 2,
                color: '#37A2DA',
              },
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#37A2DA',
              },
              emphasis: {
                focus: 'series',
              },
            },
          ],
        }
        this.leftTrendChart.setOption(option)
      },

      // 更新右侧趋势图
      updateRightTrendChart() {
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>{a}: {c}',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2022年', '2023年', '2024年'],
            axisLine: {
              lineStyle: {
                color: '#333',
              },
            },
          },
          yAxis: {
            type: 'value',
            min: 6.5,
            max: 10,
            interval: 0.5,
            axisLine: {
              lineStyle: {
                color: '#333',
              },
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              name: '其他人员支出',
              type: 'line',
              data: [7, 7, 9.5],
              lineStyle: {
                width: 2,
                color: '#37A2DA',
              },
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#37A2DA',
              },
              emphasis: {
                focus: 'series',
              },
            },
          ],
        }
        this.rightTrendChart.setOption(option)
      },

      // 更新左侧占比图
      updateLeftProportionChart() {
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}%',
          },
          legend: {
            orient: 'horizontal',
            bottom: 10,
            left: 'center',
            data: ['基本工资', '津贴', '奖金', '福利费', '其他人员支出'],
            formatter: function (name) {
              const percentMap = {
                基本工资: '12.43%',
                津贴: '12.26%',
                奖金: '16.87%',
                福利费: '25.75%',
                其他人员支出: '32.68%',
              }
              return `${name}: ${percentMap[name] || ''}`
            },
          },
          series: [
            {
              name: '指标占比',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              },
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 12.43,
                  name: '基本工资',
                  itemStyle: { color: '#37A2DA' },
                },
                { value: 12.26, name: '津贴', itemStyle: { color: '#5470C6' } },
                { value: 16.87, name: '奖金', itemStyle: { color: '#91CC75' } },
                {
                  value: 25.75,
                  name: '福利费',
                  itemStyle: { color: '#FAC858' },
                },
                {
                  value: 32.68,
                  name: '其他人员支出',
                  itemStyle: { color: '#EE6666' },
                },
              ],
            },
          ],
        }
        this.leftProportionChart.setOption(option)
      },

      // 更新右侧占比图
      updateRightProportionChart() {
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}%',
          },
          legend: {
            orient: 'horizontal',
            bottom: 10,
            left: 'center',
            data: ['基本工资', '津贴', '奖金', '福利费', '其他人员支出'],
            formatter: function (name) {
              const percentMap = {
                基本工资: '12.43%',
                津贴: '12.26%',
                奖金: '16.87%',
                福利费: '25.75%',
                其他人员支出: '32.68%',
              }
              return `${name}: ${percentMap[name] || ''}`
            },
          },
          series: [
            {
              name: '指标占比',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              },
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 12.43,
                  name: '基本工资',
                  itemStyle: { color: '#37A2DA' },
                },
                { value: 12.26, name: '津贴', itemStyle: { color: '#5470C6' } },
                { value: 16.87, name: '奖金', itemStyle: { color: '#91CC75' } },
                {
                  value: 25.75,
                  name: '福利费',
                  itemStyle: { color: '#FAC858' },
                },
                {
                  value: 32.68,
                  name: '其他人员支出',
                  itemStyle: { color: '#EE6666' },
                },
              ],
            },
          ],
        }
        this.rightProportionChart.setOption(option)
      },

      // 处理左侧数据项选择
      handleLeftDataItemCheck() {
        // 获取选中的节点
        this.leftSelectedItems = this.$refs.leftDataTree.getCheckedNodes()
        // 更新左侧图表
        this.updateLeftChartsBySelection()
      },

      // 处理右侧数据项选择
      handleRightDataItemCheck() {
        // 获取选中的节点
        this.rightSelectedItems = this.$refs.rightDataTree.getCheckedNodes()
        // 更新右侧图表
        this.updateRightChartsBySelection()
      },

      // 根据选中的数据项更新左侧图表
      updateLeftChartsBySelection() {
        // 这里可以根据选中的数据项动态更新图表数据
        // 示例中使用了固定数据，实际应用中可以根据选中的项目从后端获取数据
        this.updateLeftTrendChart()
        this.updateLeftProportionChart()
      },

      // 根据选中的数据项更新右侧图表
      updateRightChartsBySelection() {
        // 这里可以根据选中的数据项动态更新图表数据
        // 示例中使用了固定数据，实际应用中可以根据选中的项目从后端获取数据
        this.updateRightTrendChart()
        this.updateRightProportionChart()
      },

      // 处理窗口大小变化
      handleResize() {
        // 调整左侧图表大小
        if (this.leftTrendChart) {
          this.leftTrendChart.resize()
        }
        if (this.leftProportionChart) {
          this.leftProportionChart.resize()
        }
        // 调整右侧图表大小
        if (this.rightTrendChart) {
          this.rightTrendChart.resize()
        }
        if (this.rightProportionChart) {
          this.rightProportionChart.resize()
        }
      },

      // 左侧查询按钮点击事件
      handleLeftQuery() {
        // 这里可以根据搜索条件从后端获取数据
        // 示例中使用了固定数据
        this.updateLeftChartsBySelection()
      },

      // 右侧查询按钮点击事件
      handleRightQuery() {
        // 这里可以根据搜索条件从后端获取数据
        // 示例中使用了固定数据
        this.updateRightChartsBySelection()
      },

      // 左侧重置按钮点击事件
      handleLeftReset() {
        // 重置左侧搜索表单
        this.leftSearchForm = {
          projectName: '',
          auditObject: '',
          startYear: '2024',
          endYear: '2025',
        }
        // 重置左侧树形选择
        if (this.$refs.leftDataTree) {
          this.$refs.leftDataTree.clearChecked()
        }
        // 重置左侧选中项
        this.leftSelectedItems = []
        // 重置左侧图表
        this.updateLeftTrendChart()
        this.updateLeftProportionChart()
      },

      // 右侧重置按钮点击事件
      handleRightReset() {
        // 重置右侧搜索表单
        this.rightSearchForm = {
          projectName: '',
          auditObject: '',
          startYear: '2024',
          endYear: '2025',
        }
        // 重置右侧树形选择
        if (this.$refs.rightDataTree) {
          this.$refs.rightDataTree.clearChecked()
        }
        // 重置右侧选中项
        this.rightSelectedItems = []
        // 重置右侧图表
        this.updateRightTrendChart()
        this.updateRightProportionChart()
      },
    },
  }
</script>

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

  .search-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .comparison-container {
    display: flex;
    gap: 0;
    position: relative;
  }

  .comparison-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .left-panel {
    border-right: 1px solid #e0e0e0;
  }

  .right-panel {
    border-left: none;
  }

  .panel-content {
    display: flex;
    gap: 20px;
    flex: 1;
    padding: 20px 0;
  }

  .data-selector {
    width: 250px;
    padding: 20px;
  }

  .chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .panel-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }

  .chart-container {
    padding: 20px;
  }

  .chart-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
  }

  .chart {
    width: 100%;
    height: 400px;
  }

  .search-section {
    padding: 20px;
  }

  .vs-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .vs-icon {
    background-color: #ffa940;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 1400px) {
    .panel-content {
      flex-direction: column;
    }

    .data-selector {
      width: 100%;
    }

    .chart {
      height: 350px;
    }
  }

  @media (max-width: 1024px) {
    .comparison-container {
      flex-direction: column;
    }

    .left-panel {
      border-right: none;
      border-bottom: 1px solid #e0e0e0;
      margin-bottom: 20px;
    }

    .right-panel {
      border-left: none;
    }

    .vs-container {
      display: none;
    }

    .chart {
      height: 300px;
    }
  }
</style>