fix

src/views/invest/components/chart.vue

@@ -50,7 +50,7 @@ export default {
             type: 'category',
             axisTick: { show: false },
             splitLine: { show: false },
-            data: ['2', '3'],
+            data: [],
             axisPointer: {
               type: 'shadow'
             },
@@ -66,7 +66,7 @@ export default {
         yAxis: [
           {
             type: 'value',
-            axisTick: { show: true },
+            axisTick: { show: false },
             splitLine: { show: false },
             axisLine: {
               show: true,
@@ -79,13 +79,15 @@ export default {
           {
             type: 'value',
             name: '',
-            axisTick: { show: false },
-            splitLine: { show: false },
-            min: 0,
-            max: 25,
+            axisTick: { show: true },
+            splitLine: { show: true },
             interval: 5,
             axisLabel: {
-              formatter: ''
+              formatter: '',
+              lineStyle: {
+                color: 'red',
+                width: '2'
+              }
             }
           }
         ],
@@ -114,6 +116,31 @@ export default {
             },
             lineStyle: { color: '#528BEC', type: 'solid', borderColor: 'red' },
             data: []
+          },
+          {
+            name: '平均值',
+            type: 'line',
+            barWidth: '45',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml'
+              }
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  color: 'red',
+                  fontSize: 12
+                }
+              }
+            },
+            label: {
+              show: true,
+              position: 'top'
+            },
+            lineStyle: { color: 'red', type: 'solid', borderColor: 'red' },
+            data: []
           }
         ]
       },
@@ -129,8 +156,9 @@ export default {
         quarter: this.quarter.value === undefined ? '' : this.quarter.value
       }).then(res => {
         if (res.code === 200) {
-          this.option.xAxis[0].data = res.data.list.map(res => res.month)
-          this.option.series[0].data = res.data.list.map(res => res.sum_complete_amount)
+          this.option.xAxis[0].data = res.data.map(res => res.month)
+          this.option.series[0].data = res.data.map(res => res.sum_complete_amount)
+          this.option.series[1].data = res.data.map(res => res.average)
         }
       })
     }

src/views/invest/components/complete.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class='flex flex-justify-start flex-col'>
+    <span class='font-16 bold full-width text-left'>项目投资完成情况总览</span>
+    <div class='full-width flex-justify-end  flex'>
+      <el-select v-model="month" class="m-2" placeholder="请选择" ref='month' clearable @change='changeMonth'>
+        <el-option
+            v-for="item in selectOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+        />
+      </el-select>
+    </div>
+    <avue-crud
+        :option="option"
+        :data="data"
+        ref="crud"
+        v-model="form">
+    </avue-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'complete',
+  props: {
+    type: {
+      type: Number,
+      default: 0
+    },
+    deptId: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    type: {
+      handler (val) {
+        this.initOption(val)
+      },
+      immediate: true
+    },
+    deptId: {
+      handler (val) {
+        this.onLoad()
+      },
+      immediate: true
+    }
+  },
+  data () {
+    return {
+      month: '',
+      quarter: '',
+      form: {},
+      data: [],
+      option: {
+        height: '800',
+        align: 'center',
+        menuAlign: 'center',
+        menu: false,
+        size: 'mini',
+        addBtn: false,
+        refreshBtn: false,
+        columnBtn: false,
+        border: true,
+        index: true,
+        column: [
+          {
+            label: '项目名称',
+            prop: 'deptName'
+          },
+          {
+            label: '计划完成投资(万元)',
+            prop: 'planCompleteAmount'
+          },
+          {
+            label: '完成投资（万元）',
+            prop: 'totalCompleteAmount'
+          },
+          {
+            label: '完成率',
+            prop: 'completionRate'
+          }
+        ]
+      },
+      selectOption: []
+    }
+  },
+  methods: {
+    onLoad () {
+      this.$api.invest.list({
+        deptId: this.deptId === null ? '' : this.deptId,
+        month: this.month,
+        quarter: this.quarter
+      }).then(res => {
+        if (res.code === 200) {
+          this.data = res.data
+        }
+      })
+    },
+    initOption (res) {
+      this.month = ''
+      this.selectOption.length = 0
+      switch (res.value) {
+        case 1:
+          for (let i = 1; i <= 3; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+          }
+          this.quarter = 1
+          break
+        case 2:
+          for (let i = 4; i <= 6; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+          }
+          this.quarter = 2
+          break
+        case 3:
+          for (let i = 7; i <= 9; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+          }
+          this.quarter = 3
+          break
+        case 4:
+          for (let i = 10; i <= 12; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+          }
+          this.quarter = 4
+          break
+        default:
+          for (let i = 1; i <= 12; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+            this.month = 1
+            this.quarter = ''
+          }
+          break
+      }
+      this.onLoad()
+    },
+    changeMonth (res) {
+      this.month = res
+      this.onLoad()
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.m-2 {
+}
+</style>

src/views/invest/index.vue

@@ -25,7 +25,8 @@
             </div>
             <div class='white-bg padding'></div>
             <div class='flex-child-average'>
-              <amount :type='yearType' :deptId='dept'/>
+              <amount v-if='dept===null' :type='yearType' :deptId='dept'/>
+              <complete v-else :type='yearType' :deptId='dept'/>
             </div>
           </div>
         </basic-container>
@@ -41,10 +42,11 @@ import years from '@/views/invest/components/years.vue'
 import amount from '@/views/invest/components/amount.vue'
 import chart from '@/views/invest/components/chart.vue'
 import chart2 from '@/views/invest/components/chart2.vue'
+import complete from '@/views/invest/components/complete.vue'
 
 export default {
   name: 'index',
-  components: { BasicContainer, left, years, amount, chart, chart2 },
+  components: { BasicContainer, left, years, amount, chart, chart2, complete },
   data () {
     return {
       yearType: {
@@ -56,7 +58,7 @@ export default {
   methods: {
     changeDept (res) {
       if (res === null) {
-        this.dept = ''
+        this.dept = null
         return
       }
       this.dept = res.id