2024-09-09 修改了大部分下拉组件为模糊筛选，减轻前端渲染压力

src/views/SalesManagement/StatisticalAnalysis/ProductPricing.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <el-card>
+      <el-cascader ref="cascader" :options="product" :show-all-levels="false" placeholder="产品名称" clearable size="small" @clear="clearData" @change="getData"/>
+      <el-date-picker
+        v-model="dateRange"
+        size="small"
+        type="daterange"
+        align="center"
+        style="width: 260px;"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        range-separator="～"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        @change="getProductItemValue1()"/>
+      <span style="margin-left: 200px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
+      <div id="myChart1" style="width: 1500px;height: 820px;text-align: center"/>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import * as echarts from 'echarts'
+export default {
+  data() {
+    return {
+      dateRange: '',
+      TitlesDrawings: '',
+      product: [],
+      productValue: '',
+      yName: '',
+      selectionProductValue: '',
+      selectionProduct: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar',
+      'name',
+      'id'
+    ])
+  },
+  created() {
+    this.getTreeData()
+    this.changeTitlesDrawings()
+  },
+  methods: {
+    getTreeData() {
+      var param = []
+      param[0] = ['子节点', 0]
+      var Data = this.CreateData('11', '产品关系_查询节点', param)
+      this.ExecDatabase(Data).then(response => {
+        const data = response.data
+        this.product = this.tree(data, 0)
+      })
+    },
+    tree(data, pid) {
+      const result = []
+      let temp
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].父节点 === pid) {
+          const obj = { label: data[i].节点名称, value: data[i].子节点 }
+          temp = this.tree(data, data[i].子节点)
+          if (temp.length > 0) {
+            obj.children = temp
+          }
+          result.push(obj)
+        }
+      }
+      return result
+    },
+    getData(val) {
+      this.productValue = val[val.length - 1]
+      this.getProductItemValue1()
+    },
+    changeTitlesDrawings() {
+      this.TitlesDrawings = '产品定价分析图'
+      this.yName = '销\n售\n额'
+    },
+    getProduct() {
+      var param = []
+      var Data = this.CreateData('11', '数据分析_产品信息_基础表_查询数据', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.selectionProduct.push({
+            label: response.data[i].产品名称,
+            value: response.data[i].产品流水号
+          })
+        }
+      })
+    },
+    getProductItemValue1() {
+      if (this.productValue) {
+        let dateRange_check
+        console.log(this.dateRange, 123)
+        this.dateRange ? dateRange_check = 1 : (dateRange_check = 0, this.dateRange = '')
+        console.log(dateRange_check, 234)
+        var param = []
+        param[0] = ['选择产品', this.productValue]
+        param[1] = ['时间_check', dateRange_check]
+        param[2] = ['开始时间', this.dateRange[0]]
+        param[3] = ['结束时间', this.dateRange[1]]
+        var Data = this.CreateData('11', 'jy_产品定价分析_查询', param)
+        this.ExecDatabase(Data).then(response => {
+          this.xdata = []
+          this.y1data = []
+          if (response.data.length > 0) {
+            for (let i = 0; i < response.data.length; i++) {
+              this.xdata.push(response.data[i].单价)
+              if (!this.downdate) { this.downdate = 0 }
+              this.y1data.push(response.data[i].销售额)
+            }
+          }
+        }).then(response => {
+          this.drawLine1()
+        })
+      } else {
+        this.$message.warning('请先选择产品')
+      }
+    },
+    drawLine1() {
+      this.myChart1 = echarts.init(document.getElementById('myChart1'))
+      // 绘制图表
+      this.myChart1.clear()
+      const _this = this
+      this.myChart1.setOption({
+        xAxis: [{
+          axisLabel: {
+            interval: 0,
+            rotate: 0,
+            formatter: function(value) {
+              return value.split(' ').join('\n')
+            }
+          },
+          name: '单价',
+          type: 'category',
+          data: this.xdata,
+          nameLocation: 'middle',
+          nameTextStyle: {
+            padding: [20, 0, 0, 0]
+          }
+        }],
+        yAxis: [{
+          name: this.yName,
+          type: 'value',
+          nameTextStyle: {
+            padding: [10, 135, -180, 20]
+          },
+          max: function(value) {
+            return _this.update > value.max ? (1.2 * _this.update).toFixed(2) : (1.2 * value.max).toFixed(2)
+            // 这里写的是y轴的最大值为提取数据中最大值的1.2倍
+          }
+        }],
+        series: [{
+          markLine: {
+            // markline表示是柱形图之外的折线图 它的数据和柱形图是一样的都来子this.ydata
+            lineStyle: {
+              normal: {
+                type: 'dashed'
+              }
+            }
+          },
+          label: {
+            show: true
+          },
+          data: this.y1data,
+          type: 'line'
+        }],
+        grid: {
+          left: '3%',
+          right: '5%',
+          bottom: '8%',
+          containLabel: true
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>