From 1104ee84c315062edd633ab260c857867983926c Mon Sep 17 00:00:00 2001
From: ZZM <1105966949@qq.com>
Date: Fri, 27 Jun 2025 16:54:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A8=8E=E5=8A=A1=E9=A2=84=E6=A3=80=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workbench/components/TaxPreCheckUsage.vue | 297 ++++++++++++++++++
 1 file changed, 297 insertions(+)
 create mode 100644 src/views/crm/workbench/components/TaxPreCheckUsage.vue

diff --git a/src/views/crm/workbench/components/TaxPreCheckUsage.vue b/src/views/crm/workbench/components/TaxPreCheckUsage.vue
new file mode 100644
index 00000000..f37e4f46
--- /dev/null
+++ b/src/views/crm/workbench/components/TaxPreCheckUsage.vue
@@ -0,0 +1,297 @@
+<template>
+  <div v-loading="loading" class="sale-statistics card">
+    <flexbox class="card-title">
+      <span class="icon wk wk-target" />
+      <div class="card-title-center text-one-ellipsis">税务预检使用情况</div>
+      <div class="card-title-right">
+        <!--<span class="box">{{ filterText }}</span>
+        <span class="box">{{ timeLine }}</span>-->
+        <el-dropdown trigger="click" @command="handleCommand">
+          <span class="box">
+            {{ optionName }}<i class="el-icon-arrow-down el-icon--right" />
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-for="(item, index) in options" :key="index" :command="index">
+              {{ item.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </flexbox>
+    <div id="tax-statistics" />
+  </div>
+</template>
+
+<script>
+import { crmTaxPreCheckUsageAPI } from '@/api/crm/workbench'
+
+import echarts from 'echarts'
+import ChartMixin from './ChartMixin'
+import { mapGetters } from 'vuex'
+
+
+export default {
+  name: 'TaxPreCheckUsage',
+  mixins: [ChartMixin],
+  data() {
+    return {
+      options: [
+        { name: '显示全部', value: 0 },
+        { name: '使用人数', value: 1 },
+        { name: '活跃人数', value: 2 },
+        { name: '新增用户', value: 3 },
+        { name: '新增企业', value: 4 }
+      ],
+      optionName: '显示全部',
+      optionValue: 0,
+      chartOption: {
+        color: ['#5470c6', '#91cc75', '#fac858'], // 添加默认颜色
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: '46px',
+          left: '20px',
+          right: '20px',
+          bottom: '10px',
+          containLabel: true,
+          borderColor: '#fff'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [],
+            axisTick: {
+              alignWithLabel: true,
+              lineStyle: { width: 0 }
+            },
+            axisLabel: {
+              color: '#333'
+            },
+            /** 坐标轴轴线相关设置 */
+            axisLine: {
+              lineStyle: { color: '#BDBDBD' }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            minInterval: 1, // 确保刻度最小间隔为1
+            axisTick: {
+              alignWithLabel: true,
+              lineStyle: { width: 0 }
+            },
+            /** 坐标轴轴线相关设置 */
+            axisLine: {
+              lineStyle: { width: 0 }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#eee',
+                type: 'dotted'
+              }
+            }
+          }
+        ],
+        series: []
+      },
+      chartObj: null,
+      loading: false
+    }
+  },
+  computed: {
+    ...mapGetters(['manage']),
+    // 目标设置权限
+    hasSetAuth() {
+      return this.manage && this.manage.crm && this.manage.crm.achievement
+    }
+  },
+  mounted() {
+    this.initChart()
+    // 获取默认 optionValue 类型的数据
+    this.getData()
+  },
+  methods: {
+    initChart() {
+      this.chartObj = echarts.init(document.getElementById('tax-statistics'))
+      this.chartObj.setOption(this.chartOption, true)
+    },
+
+    /**
+     * 下拉菜单选项选择
+     * @param index 选项序号
+     */
+    handleCommand(index) {
+      if (this.optionValue === this.options[index].value) return
+      this.optionName = this.options[index].name
+      this.optionValue = this.options[index].value
+      this.getData()
+    },
+
+    getData() {
+      this.loading = true
+      crmTaxPreCheckUsageAPI({
+        label: this.optionValue,
+        ...this.getBaseParams()
+      }).then(res => {
+        // 处理API响应数据
+        this.processChartData(res.data)
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    // 处理图标数据并渲染
+    processChartData(data) {
+      // 当选择"显示全部"时 (optionValue = 0)
+      if (this.optionValue === 0) {
+        // 处理显示全部的数据 - 渲染折线图
+        this.renderAllData(data)
+      } else {
+        // 处理单个指标的数据 - 渲染柱状图
+        this.renderSingleData(data)
+      }
+    },
+    // 渲染单个属性的柱状图
+    renderSingleData(data) {
+      const list = data.list || []
+      const showNum = []
+      const xAxisData = []
+      list.forEach(element => {
+        showNum.push(element.value)
+        xAxisData.push(element.type)
+      })
+      // 正确更新图表配置
+      this.chartOption.xAxis[0].data = xAxisData
+      this.chartOption.series = [{
+        name: this.optionName,
+        type: 'bar',
+        barWidth: '60%',
+        data: showNum
+      }]
+      // 强制刷新图表
+      this.chartObj.setOption(this.chartOption, true)
+    },
+    // 渲染全部属性的折线图
+    renderAllData(data) {
+      // 定义要显示的四个指标
+      const metrics = [
+        { name: '使用人数', field: 'syyhs' },
+        { name: '活跃人数', field: 'hyyhs' },
+        { name: '新增用户', field: 'addUser' },
+        { name: '新增企业', field: 'addQys' }
+      ]
+      // 准备数据
+      const categories = []
+      const seriesData = []
+      // 首先提取所有日期类别
+      data.list.forEach(item => {
+        categories.push(item.type)
+      })
+      // 为每个指标创建数据系列
+      metrics.forEach(metric => {
+        const values = []
+
+        // 提取每个指标在所有日期的值
+        data.list.forEach(item => {
+          const value = item.value ? item.value[metric.field] : 0
+          values.push(value)
+        })
+        // 添加到系列数据
+        seriesData.push({
+          name: metric.name,
+          data: values
+        })
+      })
+      // 颜色数组 - 为每条折线分配不同颜色
+      const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666']
+
+      // 创建系列配置(指的是数据的展现形式)
+      const series = seriesData.map((item, index) => ({
+        name: item.name,
+        type: 'line', // 折线图
+        data: item.data,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: { width: 2 },
+        itemStyle: { color: colors[index] } // 为每条线分配颜色
+      }))
+
+      // 创建图表配置
+      const option = {
+        color: colors,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'line' } // 折线图使用线型指示器
+        },
+        grid: {
+          top: '70px', // 增加顶部空间给图例
+          left: '20px',
+          right: '20px',
+          bottom: '10px',
+          containLabel: true
+        },
+        legend: {
+          data: seriesData.map(item => item.name), // 图例数据
+          top: 10 // 图例位置在顶部
+        },
+        xAxis: [{
+          type: 'category',
+          data: categories,
+          axisTick: {
+            alignWithLabel: true,
+            lineStyle: { width: 0 }
+          },
+          axisLabel: {
+            color: '#333',
+            rotate: 45, // 旋转45度避免重叠
+            interval: 0 // 显示所有标签
+          },
+          axisLine: {
+            lineStyle: { color: '#BDBDBD' }
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          minInterval: 1, // 确保Y轴显示整数
+          axisLabel: {
+            formatter: value => Math.floor(value) === value ? value : Math.round(value)
+          },
+          axisTick: {
+            lineStyle: { width: 0 }
+          },
+          axisLine: {
+            lineStyle: { width: 0 }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#eee',
+              type: 'dotted'
+            }
+          }
+        }],
+        series
+      }
+      // 渲染图表
+      this.chartObj.setOption(option, true)
+    }
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+@import "style";
+#tax-statistics {
+  width: 100%;
+  height: 300px;
+}
+</style>