资金收入分析

src/components/charts/pie/index.js

@@ -52,9 +52,7 @@ export default {
     };
   },
   mounted () {
-    setTimeout(()=>{
-      this.initChart();
-    },2000)
+    this.initChart();
   },
   computed: {
   },
@@ -145,20 +143,21 @@ export default {
             type: "pie",
             radius: ["48%", "70%"],
 
-            color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)","#ffc72b"],
+            color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)", "#ffc72b"],
             label: {
               normal: {
                 formatter: function (params, ticket, callback) {
                   var total = 0; //考生总数量
                   var percent = 0; //考生占比
                   echartData.forEach(function (value, index, array) {
-                    total += value.value;
+                    total += value;
                   });
                   percent = ((params.value / total) * 100).toFixed(1);
                   return (
-                    "{white|" + percent + "%" + "}\n" +
+                    "{white|" + params.percent
+                    + "%" + "}\n" +
                     "{blue|" + params.name + "}\n" +
-                    (that.showTit ? "{hr|}\n{yellow|" + params.value + params.data.unit + '}':'')
+                    (that.showTit ? "{hr|}\n{yellow|" + params.value + params.data.unit + '}' : '')
                   );
                 },
                 rich: rich,

src/views/capital/api/index.js

@@ -11,4 +11,29 @@ export function lefttopMonetaryFundAnalysis (deptId, year) {
     method: 'get',
     params: query
   })
+}
+
+// 资金一张图-左中-资金收入分析(类型)
+export function leftbottomcapitalgainstype (deptId, year) {
+  let query = {
+    deptId,
+    year
+  }
+  return request({
+    url: 'api/home/xixia/finance/zjsrlxfx',
+    method: 'get',
+    params: query
+  })
+}
+// 资金一张图-左中-资金收入分析(趋势)
+export function leftbottomcapitalgainstrend (deptId, year) {
+  let query = {
+    deptId,
+    year
+  }
+  return request({
+    url: 'api/home/xixia/finance/zjsrqsfx',
+    method: 'get',
+    params: query
+  })
 }

src/views/capital/comps/left/middle/1/index.html

@@ -1,11 +1,16 @@
-<Pannel title="资金收入分析" height="340">
+<Pannel title="资金收入分析" height="340"
+v-loading="!isLoad"
+element-loading-text="拼命加载中"
+element-loading-spinner="el-icon-loading"
+element-loading-background="rgba(0, 0, 0, 0.1)"
+>
   <div class="full">
     <div class="top">
       <PannelTabs @change="tabChange"></PannelTabs>
     </div>
     <div class="buttom">
-      <LineCharts v-if="tabIndex === '1'"></LineCharts>
-      <PieCharts v-if="tabIndex === '2'"></PieCharts>
+      <LineCharts v-if="tabIndex === '1' && isLoad" :data="data"></LineCharts>
+      <PieCharts v-if="tabIndex === '2'  && isLoad" :data="data"></PieCharts>
     </div>
   </div>
 </Pannel>

src/views/capital/comps/left/middle/1/index.js

@@ -2,7 +2,15 @@ import Pannel from '@/components/pannel/index.vue';
 import PannelTabs from '@/components/pannel-tabs/index.vue';
 import LineCharts from '@/components/charts/line/index.vue';
 import PieCharts from '@/components/charts/pie/index.vue';
+import { mapGetters } from 'vuex';
+import { leftbottomcapitalgainstrend, leftbottomcapitalgainstype } from '../../../../api/index.js';
 
+const map = {
+  '经营收入': '万元',
+  '补助收入': '万吨',
+  '投资收益': '万元',
+  '其他收入': '万吨'
+}
 export default {
   components: {
     LineCharts,
@@ -12,16 +20,73 @@ export default {
   },
   data () {
     return {
+      data: [], // 数据
+      isLoad: false, // 是否加载完成
       tabIndex: '1'
     };
   },
+  computed: {
+    ...mapGetters(['year', 'deptId'])
+  },
+  watch: {
+    year: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    },
+    deptId: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    }
+  },
   created () {
   },
   mounted () {
   },
   methods: {
+    // 获取数据
+    getData () {
+      if (this.year || this.deptId) {
+
+        this.isLoad = false;
+        // 如果是趋势
+        if (this.tabIndex == 1) {
+          leftbottomcapitalgainstrend(this.year, this.deptId).then(res => {
+            let data = res.data.map(item => {
+              return {
+                name: item.name + '月',
+                value: item.value
+              }
+            })
+            this.data = data;
+            this.isLoad = true;
+          })
+        } else if (this.tabIndex == 2) {
+          // 获取类型
+          leftbottomcapitalgainstype(this.year, this.deptId).then(res => {
+            let data = res.data.list.map(item => {
+              return {
+                name: item.name,
+                value: item.value,
+                unit: this.unitMaker(item.name)
+              }
+            })
+            this.data = data
+            this.isLoad = true;
+          })
+        }
+
+      }
+    },
+    unitMaker (val) {
+      return map[val];
+    },
     tabChange (info) {
       this.tabIndex = info.id
+      this.getData()
     }
   }
 };

src/views/capital/comps/left/top/2/index.js

@@ -6,6 +6,7 @@ export default {
     Bar,
     Pannel
   },
+
   data () {
     return {
     };