更新

src/views/PurchasingCenter/PurchasingEfficiencyAnalysis/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <span style="margin-left: 10px">时间段:</span>
+      <el-date-picker
+        v-model="date1"
+        style="width:160px;margin:10px;"
+        size="small"
+        type="date"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        placeholder="选择日期"/>
+      <span>~</span>
+      <el-date-picker
+        v-model="date2"
+        style="width:160px;margin:10px;"
+        size="small"
+        type="date"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        placeholder="选择日期"/>
+      <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="searchData1()">查询</el-button>
+    </el-card>
+    <el-card>
+      <div id="myChart" style="width: 1000px; height: 570px; margin: auto"/>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getData, getData1 } from '@/api/PurchasingCenter/PurchasingEfficiencyAnalysis'
+export default {
+  data() {
+    return {
+      tableData: [],
+      data1: '',
+      data2: ''
+    }
+  },
+  mounted() {},
+  methods: {
+    getTableData() {
+      this.tableData = []
+      getData(this.date1, this.date2).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.tableData.push({
+            采购合同流水号: response.data[i].采购合同流水号,
+            采购合同编号: response.data[i].采购合同编号,
+            合同生成日期: response.data[i].操作日期,
+            平均分配日期: '',
+            平均采购时间: ''
+          })
+        }
+        this.getTableData1(this.tableData)
+      }).then(() => {
+        this.drawLine()
+      })
+    },
+    getTableData1(row) {
+      for (let i = 0; i < row.length; i++) {
+        getData1(row[i].采购合同流水号).then(response => {
+          this.tableData[i].平均分配日期 = response.data[0].平均分配日期
+          this.tableData[i].平均采购时间 = response.data[0].平均采购时间
+        })
+      }
+    },
+    //  绘制图形
+    drawLine() {
+      const myChart = this.$echarts.init(document.getElementById('myChart'))
+      const xData = []
+      const lineData = []
+      for (let i = 0; i < this.tableData.length; i++) {
+        xData.push(this.tableData[i].采购合同编号.split(' ')[0])
+        lineData.push(this.tableData[i].平均采购时间.toFixed(2))
+      }
+      myChart.clear()
+      myChart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        legend: {
+          data: ['采购用时']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            name: '合同编号',
+            data: xData,
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '采购用时'
+          }
+        ],
+        series: [
+          {
+            name: '采购用时',
+            type: 'line',
+            label: {
+              normal: {
+                show: true,
+                position: 'top'
+              }
+            },
+            data: lineData
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>