货币资金分析

src/components/gis-map/index.js

@@ -22,6 +22,16 @@ const ALL_CHANGED = ~(1 << 31);
 export default {
   components: {
   },
+  watch: {
+    'queryParams.deptId': {
+      handler: function () {
+        console.log(this.queryParams.deptId);
+        this.commitDept(this.queryParams.deptId);
+      },
+      immediate: true, // 立即执行
+
+    }
+  },
   data () {
     return {
       financeSummary: {
@@ -79,6 +89,8 @@ export default {
   created () {
   },
   mounted () {
+    // console.log('当前年份', this.centerYear);
+    this.commitYear(this.centerYear);
     // 获取geoserver的地址
     this.getGeoServerUrl();
     getInfo().then(res => {
@@ -91,11 +103,22 @@ export default {
     });
   },
   methods: {
+    /**
+     * 提交dept
+     * @param {*} deptId 
+     */
+    commitDept (deptId) {
+      this.$store.commit('SET_DEPTID', deptId);
+    },
+    commitYear (year) {
+      this.$store.commit('SET_YEAR', year);
+    },
     //切换年份
     yearDropdown (item) {
       this.queryParams.year = item;
       this.centerYear = item;
       this.getData(YEAR_CHANGED);
+      this.commitYear(item);
     },
     // 绘制地图
     drawMap (node, isLocated) {    // isLocated 控制地图是否跳转
@@ -250,7 +273,6 @@ export default {
         }
       });
     },
-
     getData (mask) {
       if (!mask)
         mask = ALL_CHANGED;
@@ -307,14 +329,12 @@ export default {
         });
       }
     },
-
     selectAddress (value, isLocated = true) {  // isLocated 控制地图是否跳转
       this.queryParams.deptId = value[value.length - 1];
       this.getData(DEPT_CHANGED);
       let node = this.$refs["cascader2"].panel.getNodeByValue(value);
       this.drawMap(node, isLocated);
     },
-
     // 查找指定deptId的所有父节点id
     findParentNodeIds (tree, deptId, result) {
       for (let node of tree) {

src/store/getters.js

@@ -1,5 +1,7 @@
 const getters = {
   sidebar: state => state.app.sidebar,
+  year: state => state.user.year,
+  deptId: state => state.user.deptId,
   size: state => state.app.size,
   device: state => state.app.device,
   visitedViews: state => state.tagsView.visitedViews,
@@ -9,7 +11,7 @@ const getters = {
   name: state => state.user.name,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
-  userRoles:state => state.user.userRoles,
+  userRoles: state => state.user.userRoles,
   permissions: state => state.user.permissions,
   setUpModuleId: state => state.user.setUpModuleId,
   permission_routes: state => state.permission.routes,
@@ -35,5 +37,5 @@ const getters = {
   bigscreenUrl: state => state.user.bigscreenUrl, //大数据指挥舱
   globalLogo: state => state.user.globalLogo,  //全局logo
   screenLogo: state => state.user.screenLogo,  //大屏logo
- }
+}
 export default getters

src/store/modules/user.js

@@ -4,6 +4,8 @@ import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
   state: {
+    deptId: '',
+    year: '',
     token: getToken(),
     name: '',
     avatar: '',
@@ -29,6 +31,9 @@ const user = {
   },
 
   mutations: {
+    SET_YEAR: (state, payload) => {
+      state.year = payload
+    },
     SET_TOKEN: (state, token) => {
       state.token = token
     },

src/views/capital/api/index.js

@@ -0,0 +1,14 @@
+import request from '@/utils/request'
+
+// 资金一张图-左上-货币资金分析
+export function lefttopMonetaryFundAnalysis (deptId, year) {
+  let query = {
+    deptId,
+    year
+  }
+  return request({
+    url: 'api/home/xixia/finance/hbzjfx',
+    method: 'get',
+    params: query
+  })
+}

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

@@ -1,4 +1,9 @@
-<Pannel title="货币资金分析" height="232">
+<Pannel title="货币资金分析" height="232"
+v-loading="!isLoad"
+element-loading-text="拼命加载中"
+element-loading-spinner="el-icon-loading"
+element-loading-background="rgba(0, 0, 0, 0.1)"
+>
   <table>
     <tr v-for="line in data">
       <td v-for="item in line">

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

@@ -1,13 +1,49 @@
 import Pannel from '@/components/pannel/index.vue';
 import Block from '@/components/block/index.vue';
 import data from './data.js';
+import { mapGetters } from 'vuex';
+import { lefttopMonetaryFundAnalysis } from '../../../../api/index.js';
 export default {
   components: {
     Block,
     Pannel
   },
+  computed: {
+    ...mapGetters(['year', 'deptId'])
+  },
+  watch: {
+    year: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    },
+    deptId: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    }
+  },
+  methods: {
+    getData () {
+      if (this.year, this.deptId) {
+        this.isLoad = false;
+        lefttopMonetaryFundAnalysis(this.deptId, this.year).then(res => {
+
+          this.data[0][0].value = res.data.cke // 存款额
+          this.data[0][1].value = res.data.ckzzs // 组织数
+
+          this.data[1][0].value = res.data.xje // 现金额（万元）
+          this.data[1][1].value = res.data.xjzzs
+          this.isLoad = true;
+        })
+      }
+    }
+  },
   data () {
     return {
+      isLoad: false, // 是否加载完成
       data
     };
   }