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

src/views/SalesManagement/StatisticalAnalysis/WorkingHoursStatistics.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <el-card>
+      <el-date-picker
+        v-model="selectionTimeValue"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM"
+        type="monthrange"
+        align="right"
+        size="small"
+        style="width: 260px"
+        unlink-panels
+        range-separator="~"
+        start-placeholder="开始月份"
+        end-placeholder="结束月份"
+        @change="getProductItemValue1"/>
+      <span style="margin-left: 340px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
+      <div id="myChart7" style="width: 1500px; height: 800px; margin-bottom: 20px; margin-top: 20px"/>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  data() {
+    return {
+      pickerOptions: {
+        shortcuts: [{
+          text: '本月',
+          onClick(picker) {
+            picker.$emit('pick', [new Date(), new Date()])
+          }
+        }, {
+          text: '今年至今',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date(new Date().getFullYear(), 0)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近六个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setMonth(start.getMonth() - 6)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一年',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setMonth(start.getMonth() - 12)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近两年',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setMonth(start.getMonth() - 24)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三年',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setMonth(start.getMonth() - 36)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      TitlesDrawings: '精工车间月度工时统计趋势图',
+      selectionTimeValue: ''
+    }
+  },
+  methods: {
+    getProductItemValue1() {
+      if (this.selectionTimeValue) {
+        var param = []
+        param[0] = ['开始时间', this.selectionTimeValue[0]]
+        param[1] = ['结束时间', this.selectionTimeValue[1]]
+        var Data = this.CreateData('11', 'jy_车间月度工时统计_查询', param)
+        this.ExecDatabase(Data).then(response => {
+          this.xdata = []
+          this.y1data = []
+          this.y2data = []
+          this.y3data = []
+          if (response.data.length > 0) {
+            for (let i = 0; i < response.data.length; i++) {
+              this.xdata.push(response.data[i].日期)
+              this.y1data.push(response.data[i].精工车间)
+              this.y2data.push(response.data[i].通用装配)
+              this.y3data.push(response.data[i].专机装配)
+              if (!this.downdate) { this.downdate = 0 }
+            }
+          }
+        }).then(() => {
+          this.drawLine()
+        })
+      } else {
+        this.$message.warning('请先选择时间')
+      }
+    },
+    drawLine() {
+      var chartDom = document.getElementById('myChart7')
+      var myChart7 = echarts.init(chartDom)
+      var option
+
+      option = {
+        color: ['rgb(169, 202, 232)', '#f40', 'rgb(100, 20, 232)'],
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.xdata
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          symbol: 'none',
+          name: '精工车间',
+          type: 'line',
+          itemStyle: {
+            normal: {
+              label: {
+                show: true
+              },
+              lineStyle: {
+                width: 2,
+                color: 'rgb(169,202,232)'
+              }
+            }
+          },
+          data: this.y1data
+        }
+        ],
+        legend: {
+          symbol: 'none',
+          data: ['精工车间'],
+          x: 'center',
+          y: 'bottom'
+        }
+      }
+      option && myChart7.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>