fix

src/api/invest/index.js

@@ -12,19 +12,35 @@ export default {
     }, 'post')
   },
   /**
-   * 首页投资数据统计
-   * @param params
-   * @returns {Promise | Promise<unknown>}
-   */
+     * 首页投资数据统计
+     * @param params
+     * @returns {Promise | Promise<unknown>}
+     */
   count (params) {
     return fetch('/blade-project-manage-v2/project/v2/homeMonthCount', params, 'post')
   },
   /**
-   * 项目入库统计
-   * @param params
-   * @returns {Promise | Promise<unknown>}
-   */
+     * 项目入库统计
+     * @param params
+     * @returns {Promise | Promise<unknown>}
+     */
   stroageCount (params) {
     return fetch('/blade-project-manage-v2/project/v2/homeStorageCount', params, 'post')
+  },
+  /**
+     * 首页年度投资比例
+     * @param params
+     * @returns {Promise | Promise<unknown>}
+     */
+  homeInvest (params) {
+    return fetch('/blade-project-manage-v2/project/v2/homeCountInvestment', params, 'post')
+  },
+  /**
+     * 保存责任目标
+     * @returns {Promise | Promise<unknown>}
+     */
+  savePlan (params) {
+    return fetch('/blade-project-manage-v2/depttarget/updateTarget', params, 'post', 'json')
   }
+
 }

src/views/invest/components/wave.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="page">
+    <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
+      <defs>
+        <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
+      </defs>
+      <use class="wave" xlink:href="#wave" :fill="color1" x="50" y="10">
+        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0"
+                          dur="3.2s" repeatCount="indefinite"/>
+      </use>
+    </svg>
+
+    <svg class="waves" viewBox="0 24 180 24" preserveAspectRatio="none">
+      <defs>
+        <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
+      </defs>
+      <use class="wave" xlink:href="#wave" :fill="color2" x="50" y="0">
+        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0"
+                          dur="6.2s" repeatCount="indefinite"/>
+      </use>
+    </svg>
+
+    <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
+      <defs>
+        <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
+      </defs>
+      <use class="wave" xlink:href="#wave" :fill="color3" x="150" y="10">
+        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0"
+                          dur="12.2s" repeatCount="indefinite"/>
+      </use>
+    </svg>
+
+    <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
+      <defs>
+        <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wave',
+  props: {
+    color: {
+      type: String,
+      default: '#32B5F3'
+    }
+  },
+  watch: {
+    color: {
+      handler () {
+        this.init()
+      },
+      immediate: true
+    }
+  },
+  data () {
+    return {
+      color1: '',
+      color2: '',
+      color3: ''
+    }
+  },
+  methods: {
+    init () {
+      this.color1 = this.hexToRGB(this.color, 0.1)
+      this.color2 = this.hexToRGB(this.color, 0.3)
+      this.color3 = this.hexToRGB(this.color, 0.5)
+    },
+    hexToRGB (hex, alpha) {
+      const r = parseInt(hex.slice(1, 3), 16)
+      const g = parseInt(hex.slice(3, 5), 16)
+      const b = parseInt(hex.slice(5, 7), 16)
+
+      if (alpha) {
+        return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')'
+      } else {
+        return 'rgb(' + r + ', ' + g + ', ' + b + ')'
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.page {
+  width: 100%;
+  height: 50px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  .waves {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+</style>

src/views/invest/components/years.vue

@@ -11,52 +11,22 @@
               <img :src='i.icon'/>
               <span class="grey-6 ml-5">{{ i.name }}</span>
             </div>
-            <div v-if="i.index !== 2" class='flex flex-justify-start mt-5'>
+            <div v-if="i.index !== 2" class='flex flex-align-end flex-justify-start mt-20'>
               <span class="grey" style="margin-left: 3px">￥</span>
-              <span class="ml-5" :style='`color:` + i.color'>{{ i.value }}</span>
+              <span class="ml-5 font-24 " :style='`color:` + i.color'>{{ info[i.prop] }}</span>
+              <el-icon :size="15" v-if='i.index === 0 && user.info.viewStage === 1' class='ml-10 pointer' @click='edit'>
+                <Edit/>
+              </el-icon>
             </div>
-            <div v-else class='flex flex-justify-start flex-center mt-5'>
+            <div v-else class='flex flex-justify-start flex-align-end flex-center mt-10'>
               <div class="progress-bar">
-                <div class="bar full-height" style="width: 50%;"></div>
+                <div class="bar full-height" :style="`width: `+ info[i.prop]"></div>
               </div>
-              <span class="ml-10" :style='`color:` + i.color'>{{ i.value }}</span>
+              <span class="ml-10 font-24 mt-10" :style='`color:` + i.color'>{{ info[i.prop] }}</span>
             </div>
           </div>
-          <div class='' style='height: 50px'>
-            <div class="page">
-              <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
-                <defs>
-                  <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
-                </defs>
-                <use class="wave" xlink:href="#wave" fill="#76CAF8" x="50" y="10">
-                  <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0" dur="2.2s" repeatCount="indefinite" />
-                </use>
-              </svg>
-
-              <svg class="waves" viewBox="0 24 180 24" preserveAspectRatio="none">
-                <defs>
-                  <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
-                </defs>
-                <use class="wave" xlink:href="#wave" fill="#AFC6FA" x="50" y="0">
-                  <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0" dur="5.2s" repeatCount="indefinite" />
-                </use>
-              </svg>
-
-              <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
-                <defs>
-                  <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
-                </defs>
-                <use class="wave" xlink:href="#wave" fill="#5691E2" x="150" y="10">
-                  <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0" dur="8.2s" repeatCount="indefinite" />
-                </use>
-              </svg>
-
-              <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
-                <defs>
-                  <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
-                </defs>
-              </svg>
-            </div>
+          <div style='margin-top: -20px'>
+            <wave :color='i.color'/>
           </div>
         </div>
       </div>
@@ -66,19 +36,35 @@
 
 <script>
 import basicTab from '@/components/basic-tab/index.vue'
+import wave from '@/views/invest/components/wave.vue'
+import { useStore } from '@/store/user.js'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 export default {
   name: 'years',
-  components: { basicTab },
+  components: { basicTab, wave },
+  setup () {
+    const user = useStore()
+    return { user }
+  },
   props: {
-    type: {
-      type: Number,
-      default: 0
+    deptId: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    deptId: {
+      handler (val) {
+        this.load()
+      },
+      immediate: true
     }
   },
   data () {
     return {
       times: [],
+      info: {},
       tabs: [
         { name: '总览', value: 0 },
         { name: '一季度', value: 1 },
@@ -86,12 +72,13 @@ export default {
         { name: '三季度', value: 3 },
         { name: '四季度', value: 4 }
       ],
+      quarter: '',
       dash: [
         {
           icon: new URL('../../../assets/svg/invest/1.svg', import.meta.url).href,
           name: '责任目标',
           value: 30303,
-          prop: '',
+          prop: 'plan_complete_amount',
           box: '0 1px 10px 0 rgba(105, 204, 243, 0.3)',
           color: '#32B5F3',
           index: 0,
@@ -101,7 +88,7 @@ export default {
           icon: new URL('../../../assets/svg/invest/2.svg', import.meta.url).href,
           name: '累计完成投资',
           value: 30303,
-          prop: '',
+          prop: 'total_complete_amount',
           box: '0 1px 10px 0 rgba(200, 150, 230, 0.3)',
           color: '#AD46CB',
           index: 1
@@ -110,7 +97,7 @@ export default {
           icon: new URL('../../../assets/svg/invest/3.svg', import.meta.url).href,
           name: '投资完成比例',
           value: 30303,
-          prop: '',
+          prop: 'rate',
           box: '0 1px 10px 0 rgba(236, 171, 83, 0.3)',
           color: '#EC9040',
           index: 2
@@ -119,7 +106,7 @@ export default {
           icon: new URL('../../../assets/svg/invest/4.svg', import.meta.url).href,
           name: '计划纳统投资',
           value: 30303,
-          prop: '',
+          prop: 'total_investment_amount',
           box: '0 1px 10px 0 rgba(119, 94, 241, 0.3)',
           color: '#4F5EE7',
           index: 3
@@ -131,12 +118,65 @@ export default {
     this.init()
   },
   methods: {
+    load () {
+      this.$api.invest.homeInvest({
+        deptId: this.deptId === null ? '' : this.deptId,
+        quarter: this.quarter
+      }).then(res => {
+        if (res.code === 200) {
+          this.info = res.data
+        }
+      })
+    },
     init () {
       const year = new Date().getFullYear()
       this.tabs[0].name = year + '年总览'
     },
     change (index) {
+      this.quarter = index.value === 0 ? '' : index.value
       this.$emit('change', index)
+      this.load()
+    },
+    edit () {
+      ElMessageBox.prompt('请输入年度责任目标(数字，包括小数点)', '提示', {
+        confirmButtonText: '保存',
+        cancelButtonText: '取消',
+        inputPattern:
+            /^([1-9]\d*|0)(\.\d+)?$/,
+        inputErrorMessage: '信息错误'
+      })
+        .then(({ value }) => {
+          console.log(value, this.quarter)
+          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) {
+              console.log(res)
+              this.$message.success(res.msg)
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        })
     }
   }
 }
@@ -149,21 +189,6 @@ export default {
   background-repeat: no-repeat;
 }
 
-.page {
-  width: 100%;
-  height: 50px;
-  position: relative;
-  overflow: hidden;
-
-  .waves {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-  }
-}
-
 .box {
   border-radius: 8px;
   min-height: 115px;

src/views/invest/index.vue

@@ -7,7 +7,7 @@
       <div class='full-width ml-5' style='flex:4;'>
         <basic-container class='full-width'>
           <div>
-            <years @change='change'/>
+            <years :dept-id='dept' @change='change'/>
           </div>
         </basic-container>
         <basic-container>