up

src/views/invest/components/chart.vue

@@ -8,7 +8,7 @@
 import charts from '../../../components/echarts/index.vue'
 
 export default {
-  components: { charts },
+  components: {charts},
   props: {
     deptId: {
       type: String,
@@ -17,23 +17,33 @@ export default {
     quarter: {
       type: Object,
       default: null
+    },
+    year: {
+      type: String,
+      default: null
     }
   },
   watch: {
     deptId: {
-      handler (val) {
+      handler(val) {
         this.init()
       },
       immediate: true
     },
     quarter: {
-      handler (val) {
+      handler(val) {
+        this.init()
+      },
+      immediate: true
+    },
+    year: {
+      handler(val) {
         this.init()
       },
       immediate: true
     }
   },
-  data () {
+  data() {
     return {
       option: {
         title: {
@@ -48,8 +58,8 @@ export default {
         xAxis: [
           {
             type: 'category',
-            axisTick: { show: false },
-            splitLine: { show: false },
+            axisTick: {show: false},
+            splitLine: {show: false},
             data: [],
             axisPointer: {
               type: 'shadow'
@@ -66,8 +76,8 @@ export default {
         yAxis: [
           {
             type: 'value',
-            axisTick: { show: false },
-            splitLine: { show: false },
+            axisTick: {show: false},
+            splitLine: {show: false},
             axisLine: {
               show: true,
               lineStyle: {
@@ -79,8 +89,8 @@ export default {
           {
             type: 'value',
             name: '',
-            axisTick: { show: true },
-            splitLine: { show: true },
+            axisTick: {show: true},
+            splitLine: {show: true},
             interval: 5,
             axisLabel: {
               formatter: '',
@@ -114,7 +124,7 @@ export default {
               show: true,
               position: 'top'
             },
-            lineStyle: { color: '#528BEC', type: 'solid', borderColor: 'red' },
+            lineStyle: {color: '#528BEC', type: 'solid', borderColor: 'red'},
             data: []
           },
           {
@@ -139,7 +149,7 @@ export default {
               show: true,
               position: 'top'
             },
-            lineStyle: { color: 'red', type: 'solid', borderColor: 'red' },
+            lineStyle: {color: 'red', type: 'solid', borderColor: 'red'},
             data: []
           }
         ]
@@ -147,12 +157,13 @@ export default {
       type: 1
     }
   },
-  created () {
+  created() {
   },
   methods: {
-    init () {
+    init() {
       this.$api.invest.count({
         deptId: this.deptId === null ? '' : this.deptId,
+        year: this.year === null ? '' : this.year,
         quarter: this.quarter.value === undefined ? '' : this.quarter.value
       }).then(res => {
         if (res.code === 200) {

src/views/invest/components/chart2.vue

@@ -8,7 +8,7 @@
 import charts from '../../../components/echarts/index.vue'
 
 export default {
-  components: { charts },
+  components: {charts},
   props: {
     deptId: {
       type: String,
@@ -17,23 +17,33 @@ export default {
     quarter: {
       type: Object,
       default: null
+    },
+    year: {
+      type: String,
+      default: null
     }
   },
   watch: {
     deptId: {
-      handler (val) {
+      handler(val) {
         this.init()
       },
       immediate: true
     },
     quarter: {
-      handler (val) {
+      handler(val) {
+        this.init()
+      },
+      immediate: true
+    },
+    year: {
+      handler(val) {
         this.init()
       },
       immediate: true
     }
   },
-  data () {
+  data() {
     return {
       option: {
         title: {
@@ -48,8 +58,8 @@ export default {
         color: ['#ED7B30', '#64D4F4'],
         xAxis: {
           type: 'category',
-          axisTick: { show: false },
-          splitLine: { show: false },
+          axisTick: {show: false},
+          splitLine: {show: false},
           boundaryGap: true,
           axisLine: {
             show: true,
@@ -62,8 +72,8 @@ export default {
         },
         yAxis: {
           type: 'value',
-          axisTick: { show: true },
-          splitLine: { show: true },
+          axisTick: {show: true},
+          splitLine: {show: true},
           axisLine: {
             show: true,
             lineStyle: {
@@ -96,12 +106,13 @@ export default {
       type: 1
     }
   },
-  created () {
+  created() {
   },
   methods: {
-    init () {
+    init() {
       this.$api.invest.stroageCount({
         deptId: this.deptId === null ? '' : this.deptId,
+        year: this.year === null ? '' : this.year,
         quarter: this.quarter.value === undefined ? '' : this.quarter.value
       }).then(res => {
         if (res.code === 200) {

src/views/invest/components/complete.vue

@@ -14,6 +14,7 @@
     <avue-crud
         :option="option"
         :data="data"
+        :before-open="beforeOpen"
         ref="crud"
         v-model="form">
     </avue-crud>
@@ -31,23 +32,33 @@ export default {
     deptId: {
       type: String,
       default: ''
+    },
+    year: {
+      type: String,
+      default: ''
     }
   },
   watch: {
     type: {
-      handler (val) {
+      handler(val) {
         this.initOption(val)
       },
       immediate: false
     },
     deptId: {
-      handler (val) {
+      handler(val) {
+        this.onLoad()
+      },
+      immediate: true
+    },
+    year: {
+      handler(val) {
         this.onLoad()
       },
       immediate: true
     }
   },
-  data () {
+  data() {
     return {
       month: '',
       quarter: '',
@@ -57,9 +68,13 @@ export default {
         height: '800',
         align: 'center',
         menuAlign: 'center',
-        menu: false,
+        viewBtn: true,
+        viewBtnText: '详情',
+        menu: true,
         size: 'mini',
+        editBtn: false,
         addBtn: false,
+        delBtn: false,
         refreshBtn: false,
         columnBtn: false,
         border: true,
@@ -87,9 +102,10 @@ export default {
     }
   },
   methods: {
-    onLoad () {
+    onLoad() {
       const data = {
         deptId: this.deptId === null ? '' : this.deptId,
+        year: this.year === null ? '' : this.year,
         month: this.month,
         quarter: this.quarter
       }
@@ -99,42 +115,42 @@ export default {
         }
       })
     },
-    initOption (res) {
+    initOption(res) {
       console.log('initOption')
       this.month = ''
       this.selectOption.length = 0
       switch (res.value) {
         case 1:
           for (let i = 1; i <= 3; i++) {
-            const item = { label: i + '月', value: 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 }
+            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 }
+            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 }
+            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 }
+            const item = {label: i + '月', value: i}
             this.selectOption.push(item)
             this.month = ''
             this.quarter = ''
@@ -143,11 +159,19 @@ export default {
       }
       this.onLoad()
     },
-    changeMonth (res) {
+    changeMonth(res) {
       console.log('changeMonth')
       this.month = res
       this.onLoad()
-    }
+    },
+    beforeOpen(done, type) {
+      if (type === 'view') {
+        this.$router.push({
+          path: '/home/pro_detail',
+          query: {id: this.form.id, projectStage: this.form.project_stage}
+        })
+      }
+    },
   }
 }
 </script>

src/views/invest/components/years.vue

@@ -12,7 +12,7 @@
               <span class="grey-6 ml-5">{{ i.name }}</span>
               <span v-if='i.index !== 2' class='font-12 grey-6 ml-10'>万元</span>
             </div>
-            <div v-if="i.index !== 2" class='flex flex-align-end flex-justify-start mt-20'>
+            <div v-if="i.index !== 2" class='flex flex-align-end flex-justify-start mt-10'>
               <span class="grey" style="margin-left: 3px">￥</span>
               <span class="ml-5 font-24 "
                     :style='`color:` + i.color'>{{ info[i.prop] ? info[i.prop].toLocaleString() : '0' }}</span>
@@ -21,8 +21,8 @@
                 <Edit/>
               </el-icon>
             </div>
-            <div v-else class='flex flex-justify-start flex-align-end flex-center mt-10'>
-              <div class="progress-bar">
+            <div v-else class='flex flex-justify-start flex-center mt-10'>
+              <div class="progress-bar mt-10">
                 <div class="bar full-height" :style="`width: `+ info[i.prop]"></div>
               </div>
               <span class="ml-10 font-24 mt-10" :style='`color:` + i.color'>{{ info[i.prop] }}</span>
@@ -40,46 +40,56 @@
 <script>
 import basicTab from '@/components/basic-tab/index.vue'
 import wave from '@/views/invest/components/wave.vue'
-import { useStore } from '@/store/user.js'
-import { ElMessageBox } from 'element-plus'
+import {useStore} from '@/store/user.js'
+import {ElMessageBox} from 'element-plus'
 import index from '@/views/task/Index.vue'
 
 export default {
   name: 'years',
   computed: {
-    index () {
+    index() {
       return index
     }
   },
-  components: { basicTab, wave },
-  setup () {
+  components: {basicTab, wave},
+  setup() {
     const user = useStore()
-    return { user }
+    return {user}
   },
   props: {
     deptId: {
       type: String,
       default: ''
+    },
+    year: {
+      type: String,
+      default: ''
     }
   },
   watch: {
     deptId: {
-      handler (val) {
+      handler(val) {
+        this.load()
+      },
+      immediate: true
+    },
+    year: {
+      handler(val) {
         this.load()
       },
       immediate: true
     }
   },
-  data () {
+  data() {
     return {
       times: [],
       info: {},
       tabs: [
-        { name: '总览', value: 0 },
-        { name: '一季度', value: 1 },
-        { name: '二季度', value: 2 },
-        { name: '三季度', value: 3 },
-        { name: '四季度', value: 4 }
+        {name: '总览', value: 0},
+        {name: '一季度', value: 1},
+        {name: '二季度', value: 2},
+        {name: '三季度', value: 3},
+        {name: '四季度', value: 4}
       ],
       quarter: '',
       dash: [
@@ -123,13 +133,15 @@ export default {
       ]
     }
   },
-  created () {
+  created() {
     this.init()
   },
   methods: {
-    load () {
+    load() {
+      this.tabs[0].name = this.year + '年总览'
       this.$api.invest.homeInvest({
         deptId: this.deptId === null ? '' : this.deptId,
+        year: this.year === null ? '' : this.year,
         quarter: this.quarter
       }).then(res => {
         if (res.code === 200) {
@@ -137,16 +149,16 @@ export default {
         }
       })
     },
-    init () {
+    init() {
       const year = new Date().getFullYear()
       this.tabs[0].name = year + '年总览'
     },
-    change (index) {
+    change(index) {
       this.quarter = index.value === 0 ? '' : index.value
       this.$emit('change', index)
       this.load()
     },
-    edit (item) {
+    edit(item) {
       ElMessageBox.prompt('当前责任目标为' + this.info[item.prop].toLocaleString() + '万元，请输入新的责任目标(数字，小数点)', '提示', {
         confirmButtonText: '保存',
         cancelButtonText: '取消',
@@ -154,37 +166,37 @@ export default {
             /^([1-9]\d*|0)(\.\d+)?$/,
         inputErrorMessage: '信息错误'
       })
-        .then(({ value }) => {
-          let data = {}
-          switch (this.quarter) {
-            case 0: // 年度
-              data = { number: value }
-              break
-            case 1: // 1季度
-              data = { number: value, type: 1 }
-              break
-            case 2: // 2季度
-              data = { number: value, type: 2 }
-              break
-            case 3: // 3季度
-              data = { number: value, type: 3 }
-              break
-            case 4: // 4季度
-              data = { number: value, type: 4 }
-              break
-            default:
-              data = { number: value }
-              break
-          }
-          this.$api.invest.savePlan(Object.assign({ deptId: this.deptId === null ? '' : this.deptId }, data)).then(res => {
-            if (res.code === 200) {
-              this.$message.success(res.msg)
-              this.info[item.prop] = value
-            } else {
-              this.$message.error(res.msg)
+          .then(({value}) => {
+            let data = {}
+            switch (this.quarter) {
+              case 0: // 年度
+                data = {number: value}
+                break
+              case 1: // 1季度
+                data = {number: value, type: 1}
+                break
+              case 2: // 2季度
+                data = {number: value, type: 2}
+                break
+              case 3: // 3季度
+                data = {number: value, type: 3}
+                break
+              case 4: // 4季度
+                data = {number: value, type: 4}
+                break
+              default:
+                data = {number: value}
+                break
             }
+            this.$api.invest.savePlan(Object.assign({deptId: this.deptId === null ? '' : this.deptId}, data)).then(res => {
+              if (res.code === 200) {
+                this.$message.success(res.msg)
+                this.info[item.prop] = value
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
           })
-        })
     }
   }
 }

src/views/invest/index.vue

@@ -1,13 +1,27 @@
 <template>
   <div class='flex flex-center full-width'>
     <div class='ml-10 mr-10 mt-10 flex flex-align-start full-width'>
-      <basic-container style='flex: 1;padding: 0' v-if='user.info.viewStage === 1' >
+      <basic-container style='flex: 1;padding: 0' v-if='user.info.viewStage === 1'>
         <left @change='changeDept'/>
       </basic-container>
       <div class='full-width ml-5' style='flex:4;'>
         <basic-container class='full-width'>
+          <div class="flex flex-align-start mb-15">
+            <el-select v-model="year" clearable
+                       placeholder="2023"
+                       style="width: 15%"
+                       @change="yearSelect"
+            >
+              <el-option
+                  v-for="item in years"
+                  :key="item.value"
+                  :label="item.value"
+                  :value="item.value"
+              />
+            </el-select>
+          </div>
           <div>
-            <years :dept-id='dept' @change='change'/>
+            <years :dept-id='dept' :year="year" @change='change'/>
           </div>
         </basic-container>
         <basic-container>
@@ -15,18 +29,19 @@
             <div class='flex-child-average full-width flex flex-col flex-justify-start'>
               <span class='font-16 bold full-width text-left '>投资数据统计 单位（万元）</span>
               <div class='full-width mt-10' style='background-color: #F7FAFD'>
-                <chart :dept-id='dept' :quarter='yearType.value === 0 ? "":yearType '/>
+                <chart :dept-id='dept' :quarter='yearType.value === 0 ? "":yearType ' :year="year"/>
               </div>
 
               <span class='font-16 bold full-width text-left mt-20'>项目入库统计  单位（个）</span>
               <div class='full-width mt-10' style='background-color: #F7FAFD'>
-                <chart2 :dept-id='dept' :quarter='yearType.value === 0 || yearType === "0" ? "":yearType '/>
+                <chart2 :dept-id='dept' :quarter='yearType.value === 0 || yearType === "0" ? "":yearType '
+                        :year="year"/>
               </div>
             </div>
             <div class='white-bg padding'></div>
             <div class='flex-child-average'>
               <amount v-if='dept===null && user.info.viewStage === 1' :type='yearType' :deptId='dept'/>
-              <complete v-else :type='yearType' :deptId='dept'/>
+              <complete v-else :type='yearType' :deptId='dept' :year="year"/>
             </div>
           </div>
         </basic-container>
@@ -50,33 +65,57 @@ 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'
-import { useStore } from '@/store/user.js'
+import {useStore} from '@/store/user.js'
 
 export default {
   name: 'index',
-  components: { BasicContainer, left, years, amount, chart, chart2, complete },
-  setup () {
+  components: {BasicContainer, left, years, amount, chart, chart2, complete},
+  setup() {
     const user = useStore()
-    return { user }
+    return {user}
   },
-  data () {
+  data() {
     return {
       yearType: {
         value: 0
       },
-      dept: null
+      dept: null,
+      year: '',
+      years: [
+        {
+          value: 2023,
+        },
+        {
+          value: 2022,
+        },
+        {
+          value: 2021,
+        },
+        {
+          value: 2020,
+        },
+        {
+          value: 2019,
+        },
+        {
+          value: 2018,
+        },
+      ]
     }
   },
   methods: {
-    changeDept (res) {
+    changeDept(res) {
       if (res === null) {
         this.dept = null
         return
       }
       this.dept = res.id
     },
-    change (index) {
+    change(index) {
       this.yearType = index
+    },
+    yearSelect(res) {
+      this.year = res
     }
   }
 }