资金支出大额预警排名

src/components/charts/bar-sign/index.js

@@ -68,20 +68,15 @@ export default {
       const option = {
         color: ["#3398DB"],
         tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "line",
-            lineStyle: {
-              opacity: 0,
-            },
-          }
+          show: true,
+          trigger: "item",
         },
         legend: {
           data: ["直接访问", "背景"],
           show: false,
         },
         grid: {
-          left: "0%",
+          left: "10%",
           right: "0%",
           bottom: "5%",
           top: "15%",
@@ -179,6 +174,23 @@ export default {
               shadowBlur: 10,
               color: 'rgba(18, 40, 83, 1)'
             },
+            renderItem: function (params, api) {
+              //获取对应类目的axisTick中心点坐标
+              var start = api.coord([api.value(0)]);
+              //通过坐标系的宽度和类目数，计算单个类目的背景
+              var width = (params.coordSys.width / 7) * 0.6;
+              return {
+                type: 'rect',
+                shape: {
+                  // 相对左上角坐标
+                  x: start[0] - width / 2,
+                  y: params.coordSys.y,
+                  width: width,
+                  height: params.coordSys.height,
+                },
+                style: api.style()
+              };
+            },
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -213,31 +225,7 @@ export default {
             },
             data: data,
             zlevel: 11,
-          },
-          {
-            type: 'custom',
-            itemStyle: {
-              color: 'rgba(18, 40, 83, 0.4)'
-            },
-            renderItem: function (params, api) {
-              //获取对应类目的axisTick中心点坐标
-              var start = api.coord([api.value(0)]);
-              //通过坐标系的宽度和类目数，计算单个类目的背景
-              var width = (params.coordSys.width / 7) * 0.6;
-              return {
-                type: 'rect',
-                shape: {
-                  // 相对左上角坐标
-                  x: start[0] - width / 2,
-                  y: params.coordSys.y,
-                  width: width,
-                  height: params.coordSys.height,
-                },
-                style: api.style()
-              };
-            },
-            data: [100, 100, 100, 100, 100, 100, 100]
-          },
+          }
 
         ],
       };;

src/views/capital/api/index.js

@@ -130,3 +130,30 @@ export function analysisOfLargeFundExpenditureWarning (deptId, year) {
   })
 }
 
+// 资金一张图-预警分析-左下-资金往来不规范预警分析
+export function warninganalysisofnonstandardfund (deptId, year) {
+  let query = {
+    deptId,
+    year,
+    voucherAmountMin: 10000
+  }
+  return request({
+    url: 'api/home/xixia/financeWarning/zjwlbgfyjfx',
+    method: 'get',
+    params: query
+  })
+}
+
+// 资金一张图-预警分析-右上-资金支出大额预警排名
+export function rankingOfLargeFundExpenditureWarning (deptId, year) {
+  let query = {
+    deptId,
+    year,
+    voucherAmountMin: 10000
+  }
+  return request({
+    url: 'api/home/xixia/financeWarning/zjzcdeyjpm',
+    method: 'get',
+    params: query
+  })
+}

src/views/capital/comps/left/bottom/2/index.html

@@ -1,11 +1,16 @@
 
-<Pannel title="资金往来不规范预警分析" height="305">
+<Pannel title="资金往来不规范预警分析" height="305"
+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" :data="pannelTabsData"></PannelTabs>
     </div>
     <div class="buttom">
-      <BarSign id="bar3"></BarSign>
+      <BarSign v-if="isLoad" id="bar3" :data="data"></BarSign>
     </div>
   </div>
 </Pannel>

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

@@ -1,12 +1,31 @@
 import Pannel from '@/components/pannel/index.vue';
 import BarSign from '@/components/charts/bar-sign/index.vue';
 import PannelTabs from '@/components/pannel-tabs/index.vue';
+import { mapGetters } from 'vuex';
+import { warninganalysisofnonstandardfund } from '../../../../api/index.js';
 export default {
   components: {
     BarSign,
     PannelTabs,
     Pannel
   },
+  computed: {
+    ...mapGetters(['year', 'deptId'])
+  },
+  watch: {
+    year: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    },
+    deptId: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    }
+  },
   data () {
     return {
       pannelTabsData: [
@@ -18,16 +37,41 @@ export default {
           id: '2',
           name: '收入'
         }
-      ]
+      ],
+      data: [],
+      isLoad: false,
+      tabIndex: '1'
     };
   },
-  created () {
-  },
-  mounted () {
-  },
   methods: {
-    tabChange () {
-
+    getData () {
+      if (this.year, this.deptId) {
+        this.isLoad = false;
+        warninganalysisofnonstandardfund(this.deptId, this.year).then(res => {
+          if (this.tabIndex == 1) {
+            let arr = res.data.zc.map(item => {
+              return {
+                name: item.name,
+                name: item.value
+              }
+            })
+            this.data = arr
+          } else if (this.tabIndex == 2) {
+            let arr = res.data.sr.map(item => {
+              return {
+                name: item.name,
+                name: item.value
+              }
+            })
+            this.data = arr
+          }
+          this.isLoad = true;
+        })
+      }
+    },
+    tabChange (info) {
+      this.tabIndex = info.id
+      this.getData()
     }
   }
 };

src/views/capital/comps/right/top/2/index.html

@@ -1,4 +1,9 @@
 
-<Pannel title="资金支出大额预警排名" height="305">
-  <ScrollTable :headers="headers"></ScrollTable>
+<Pannel title="资金支出大额预警排名" height="305"
+v-loading="!isLoad"
+element-loading-text="拼命加载中"
+element-loading-spinner="el-icon-loading"
+element-loading-background="rgba(0, 0, 0, 0.1)"
+>
+  <ScrollTable v-if="isLoad" :data="data" :headers="headers"></ScrollTable>
 </Pannel>

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

@@ -1,12 +1,32 @@
 import Pannel from '@/components/pannel/index.vue';
 import ScrollTable from '@/components/scroll-table/index.vue';
+import { rankingOfLargeFundExpenditureWarning } from '../../../../api/index.js';
+import { mapGetters } from 'vuex';
 export default {
   components: {
     ScrollTable,
     Pannel
   },
+  computed: {
+    ...mapGetters(['year', 'deptId'])
+  },
+  watch: {
+    year: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    },
+    deptId: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    }
+  },
   data () {
     return {
+      isLoad: false,
       headers: ['部门名称', '支出金额', '排名']
     };
   },
@@ -15,5 +35,18 @@ export default {
   mounted () {
   },
   methods: {
+    getData () {
+      if (this.year, this.deptId) {
+        this.isLoad = false;
+        rankingOfLargeFundExpenditureWarning(this.deptId, this.year).then(res => {
+          console.log(1111, res);
+          let data = res.rows.map(item => {
+            return [item.name, item.value, item.index]
+          })
+          this.data = data;
+          this.isLoad = true;
+        })
+      }
+    }
   }
 };