首页接口

src/api/dashboard.js

@@ -24,3 +24,32 @@ export function getChartsHome(params) {
   })
 }
 
+
+export function yibashouOverview(params){
+  return request({
+    method:'get',
+    url:'/api/admin/dashboard/yibashou-overview',
+    params
+  })
+}
+export function yibashouMonthlyCount(params){
+  return request({
+    method:'get',
+    url:'/api/admin/dashboard/yibashou-monthly-count',
+    params
+  })
+}
+export function yijiaqiMonthlyCount(params){
+  return request({
+    method:'get',
+    url:'/api/admin/dashboard/yijiaqi-monthly-count',
+    params
+  })
+}
+export function yijiaqiCategoryTypeCount(params){
+  return request({
+    method:'get',
+    url:'/api/admin/dashboard/yijiaqi-category-type-count',
+    params
+  })
+}

src/api/home/index.js

@@ -7,3 +7,4 @@ export function home(params){
     params
   })
 }
+

src/views/dashboard/index.vue

@@ -34,7 +34,7 @@
                 </div>
               </div>
             </div>
-            <myecharts :width="'100%'" :height="'100%'" :data="month_record_data"></myecharts>
+            <myecharts :width="'100%'" :height="'100%'" :data="yibashou_month_record_data"></myecharts>
           </div>
           <div>
             <div class="mainHeight-chart-title">
@@ -44,14 +44,14 @@
               </div>
               <div>
                 <div>
-                  <span></span>正常填报数
+                  <span></span>正常填报率
                 </div>
                 <div>
-                  <span style="background-color: #de454c;"></span>逾期填报数
+                  <span style="background-color: #de454c;"></span>逾期填报率
                 </div>
               </div>
             </div>
-            <myecharts :width="'100%'" :height="'100%'" :data="month_record_data"></myecharts>
+            <myecharts :width="'100%'" :height="'100%'" :data="yibashou_month_radio_data"></myecharts>
           </div>
         </div>
       </div>
@@ -74,12 +74,12 @@
                 <div>
                   <span></span>正常填报数
                 </div>
-                <div>
+                <!-- <div>
                   <span style="background-color: #de454c;"></span>逾期填报数
-                </div>
+                </div> -->
               </div>
             </div>
-            <myecharts :width="'100%'" :height="'calc(100% - 40px)'" :data="month_record_data"></myecharts>
+            <myecharts :width="'100%'" :height="'calc(100% - 40px)'" :data="yijiaqi_month_record_data"></myecharts>
           </div>
           <div>
             <div class="mainHeight-chart-title">
@@ -93,7 +93,7 @@
                 </div>
               </div>
             </div>
-            <myecharts :width="'100%'" :height="'calc(100% - 40px)'" :data="type_record_data"></myecharts>
+            <myecharts :width="'100%'" :height="'calc(100% - 40px)'" :data="yijiaqi_type_record_data"></myecharts>
           </div>
         </div>
       </div>
@@ -104,8 +104,14 @@
 <script>
   import myecharts from '@/components/myecharts';
   import {
-    getChartsHome
+    yibashouOverview,
+    yibashouMonthlyCount,
+    yijiaqiMonthlyCount,
+    yijiaqiCategoryTypeCount
   } from "@/api/dashboard"
+  import {
+    deepCopy
+  } from '@/utils'
 
   export default {
     components: {
@@ -116,34 +122,40 @@
         mainHeight: 0,
         panelList: [{
           name: '“一把手”及领导干部',
-          count: 345,
+          key: 'count_person',
+          count: 0,
           icon: require('@/assets/home-icon1.png')
         }, {
           name: '相关单位',
-          count: 45,
+          key: 'count_department',
+          count: 0,
           icon: require('@/assets/home-icon2.png')
         }, {
           name: '清单项',
-          count: 245,
+          key: 'count_category',
+          count: 0,
           icon: require('@/assets/home-icon3.png')
         }, {
           name: '清单类型',
-          count: 10,
+          key: 'count_category_type',
+          count: 0,
           icon: require('@/assets/home-icon4.png')
         }, {
           name: '填报数量',
-          count: 10423,
+          key: 'count_record',
+          count: 0,
           icon: require('@/assets/home-icon5.png')
         }],
+        monthArr: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
 
-        month_record_data: {
+        normal_options: {
           xShow: true,
           yShow: true,
           rotate: 30,
-          x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+          x: [],
           list: [{
             name: "正常填报数",
-            data: [10, 3, 15, 23, 10, 12, 1, 45, 11, 9, 3, 34],
+            data: [],
             type: 'bar',
             unit: "",
             barGap: '0',
@@ -152,7 +164,7 @@
             Linear: [0, 1, 0, 0]
           }, {
             name: "预期填报数",
-            data: [1, 13, 5, 3, 1, 2, 12, 5, 1, 19, 13, 3],
+            data: [],
             type: 'bar',
             unit: "",
             barGap: '0',
@@ -161,17 +173,40 @@
             Linear: [0, 1, 0, 0]
           }]
         },
-        type_record_data: {
+        //一把手月度填报数
+        yibashou_month_record_data: {},
+        // 一把手月度填报率
+        yibashou_month_radio_data: {},
+        //一加七 月度填报数
+        yijiaqi_month_record_data: {
+          xShow: true,
+          yShow: true,
+          rotate: 30,
+          x: [],
+          list: [{
+            name: "正常填报数",
+            data: [],
+            type: 'bar',
+            unit: "",
+            barGap: '0',
+            color1: '#fbd5be',
+            color2: '#ecc392',
+            Linear: [0, 1, 0, 0]
+          }]
+        },
+        // 一加七 类型
+        yijiaqi_type_record_data: {
           xShow: true,
           yShow: true,
           yType: 'category',
           xType: 'value',
           gBottom: '15',
           xPosition: 'bottom',
-          yData: ['类型一', '类型二', '类型三', '类型四', '类型五', '类型六'],
+          yData: [],
           list: [{
-            name: "正常填报数",
+            name: "正常填报数",
-            data: [10, 3, 15, 23, 10, 12],
+            barWidth: '30%',
+            data: [],
             type: 'bar',
             unit: "",
             barGap: '0',
@@ -185,28 +220,89 @@
     watch: {
 
     },
+    created() {
+      this.initHeight()
+      //this.loadData();
+    },
+    mounted() {},
     methods: {
       initHeight() {
         let clientHeight = document.documentElement.clientHeight;
         let topHeight = 50; //页面 头部
         this.mainHeight = clientHeight - topHeight - 40;
+        this.getChartData()
       },
-    },
+      getChartData() {
-    created() {
+        this.getYibashouOverview()
-      this.initHeight()
+        this.getYibashouMonthlyCount()
-      //this.loadData();
+        this.getYijiaqiMonthlyCount()
-    },
+        this.getYijiaqiCategoryTypeCount()
-    mounted() {
+      },
-
+      getYibashouOverview() {
-
+        yibashouOverview().then(res => {
-      //this.init()
+          this.panelList.map(item => {
+            item.count = res[item.key]
+          })
+        })
+      },
+      getYibashouMonthlyCount() {
+        this.yibashou_month_record_data = deepCopy(this.normal_options)
+        this.yibashou_month_radio_data = deepCopy(this.normal_options)
+        yibashouMonthlyCount().then(res => {
+          let xArr = []
+          let data1 = []
+          let data2 = []
+          let data3 = []
+          let data4 = []
+          for (var k in res) {
+            let index = parseInt(k.split('-')[1]) - 1
+            console.log(index)
+            xArr.push(this.monthArr[index])
+            data1.push(res[k]['count_normal'])
+            data2.push(res[k]['count_delayed'])
+            data3.push(res[k]['count_normal_radio'])
+            data4.push(res[k]['count_delayed_radio'])
+          }
+          this.yibashou_month_record_data.x = xArr
+          this.yibashou_month_record_data.list[0]['data'] = data1
+          this.yibashou_month_record_data.list[1]['data'] = data2
+
+          this.yibashou_month_radio_data.x = xArr
+          this.yibashou_month_radio_data.list[0]['name'] = '正常填报率'
+          this.yibashou_month_radio_data.list[1]['name'] = '逾期填报率'
+          this.yibashou_month_radio_data.list[0]['data'] = data3
+          this.yibashou_month_radio_data.list[1]['data'] = data4
+        })
+      },
+      getYijiaqiMonthlyCount() {
+        yijiaqiMonthlyCount().then(res => {
+          let xArr = []
+          let data1 = []
+          for (var k in res) {
+            let index = parseInt(k.split('-')[1]) - 1
+            xArr.push(this.monthArr[index])
+            data1.push(res[k]['count'])
+          }
+          this.yijiaqi_month_record_data.x = xArr
+          this.yijiaqi_month_record_data.list[0]['data'] = data1
+        })
+      },
+      getYijiaqiCategoryTypeCount() {
+        yijiaqiCategoryTypeCount().then(res => {
+          let yData = []
+          let xData = []
+          res.map(item => {
 
-      // window.onresize = () => {
+            yData.push(item.title)
-      //   this.col.resize()
+            xData.push(item.count)
-      //   this.line.resize()
+          })
-      // }
+          this.yijiaqi_type_record_data.yData = yData
+          this.yijiaqi_type_record_data.list[0].data = xData
+        })
+      },
 
     },
+
     destroyed() {
       window.onresize = null
     }