Merge branch '230911_zh' into release_uat

# Conflicts:
#	src/module/databoard/index.vue
#	src/module/index/router/index_router.js

src/module/databoard/components/card/winners-list.vue

@@ -2,9 +2,9 @@
   <div class="winner_list">
     <table>
       <tbody>
-      <tr v-for="(row, idx) in rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
+      <tr v-for="(row, idx) in $props.rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
         <td><div class="col_number">{{ idx + 1 }}</div></td>
-        <td class="winner_span" @click="goWinnerList">{{ row.title }}</td>
+        <td class="winner_span">{{ row.title }}</td>
         <td v-for="(col, idz) in row.column" :key="idz">
           <p class="key_span">{{ col.key }}</p>
           <p class="value_span">{{ col.value }}</p>
@@ -15,43 +15,23 @@
   </div>
 </template>
 <script>
-import DisplayBoard from "../container/display-board.vue";
 
 export default {
   name: "WinnersList",
-  components: {DisplayBoard},
-  props: {},
-  data() {
-    return {
-      rows: [
-        {
-          title: "XX有限公司",
-          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
-        },
-        {
-          title: "XXXX有限公司",
-          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
-        },
-        {
-          title: "XXXXX有限公司",
-          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
-        },
-        {
-          title: "XXX有限公司",
-          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
-        },
-        {
-          title: "XXXXXX有限公司",
-          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
-        }
+  props: {
+    rows: {
+      type: Array,
+      default: [
+        {title: '标题列', column: [{key: '字段', value: '0'}]},
+        {title: '标题列', column: [{key: '字段', value: '0'}]},
+        {title: '标题列', column: [{key: '字段', value: '0'}]}
       ]
-    };
-  },
-  methods: {
-    goWinnerList() {
-      this.$router.push({path: '/winner_list'})
     }
-  }
+  },
+  data() {
+    return {};
+  },
+  methods: {}
 };
 </script>
 <style scoped>

src/module/databoard/components/chart/ar-company-bar.vue

@@ -9,6 +9,7 @@ export default {
   name: "ArCompanyBar",
   data() {
     return {
+      arCompanyBar: null,
       barChart: {
         title: {
           show: true,
@@ -26,18 +27,23 @@ export default {
           bottom: '10%'
         },
         xAxis: {
-          data: ['XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司'],
+          data: [
+            'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司',
+            'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司',
+            'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司',
+            'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司',
+          ],
           axisLabel: {
             color: "#FFFFFF",
             fontSize: "12",
             interval: 0,
-            rotate: 0
+            rotate: 20
           },
           axisTick: {
             show: false
-          }
+          },
         },
-        yAxis: [{
+        yAxis: {
           type: "value",
           splitLine: {
             lineStyle: {
@@ -49,63 +55,84 @@ export default {
             color: "#FFFFFFAA",
             fontSize: "16"
           }
-        }],
-        series: [
-          {
-            type: 'bar',
-            data: [25002, 57873, 11987, 71168, 41098, 25002, 57873, 11987, 71168, 41098],
-            barWidth: "40%",
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(255, 255, 255, 0.1)'
-            },
-            itemStyle: {
-              barBorderRadius: 10,
-            },
-            color: {
-              type: 'linear',
-              x: 0, y: 0, x2: 0, y2: 1,
-              colorStops: [
-                {offset: 0, color: '#00CCD2'},
-                {offset: 1, color: '#00A2FF'}
-              ]
-            },
-            label: {
-              show: true,
-              position: 'top',
-              color: "#FFFFFF",
-            },
+        },
+        series: {
+          type: 'bar',
+          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+          barWidth: "40%",
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(255, 255, 255, 0.1)'
+          },
+          itemStyle: {
+            borderRadius: 10,
+          },
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              {offset: 0, color: '#00CCD2'},
+              {offset: 1, color: '#00A2FF'}
+            ]
+          },
+          label: {
+            show: true,
+            position: 'top',
+            color: "#FFFFFF",
+          },
+          emphasis: {
+            focus: 'self',
+            blurScope: 'coordinateSystem'
           }
-        ]
+        }
       },
-      myChart: null
     }
   },
   methods: {
+    // 绘制图表
+    drawArCompanyBar() {
+      if (!this.arCompanyBar) {
+        this.arCompanyBar = echarts.init(document.getElementById('ar_company_bar'))
+        // 监听柱条点击事件，跳转子页面
+        let that = this
+        this.arCompanyBar.on('click', function (params) {
+          that.$router.push({path: '/ar_bar/company/monthly', query: {company: params.name}})
+        });
+        // 监听窗口大小变化，重绘图表
+        window.addEventListener('resize', this.resizeChart);
+      }
+      this.arCompanyBar.setOption(this.barChart);
+    },
+    // 重绘图表
     resizeChart() {
-      if (this.myChart) {
-        this.myChart.resize();
+      if (this.arCompanyBar) {
+        this.arCompanyBar.resize();
       }
     },
   },
   mounted() {
-    // 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
-    setTimeout(() => {
-      let arCompanyBar = document.getElementById('ar_company_bar')
-      this.myChart = echarts.init(arCompanyBar)
-      this.myChart.setOption(this.barChart)
-      let that = this
-      this.myChart.on('click', function(params) {
-        that.$router.push({path: '/ar_bar/company', query: {name: params.name}})
-      });
-      // 监听窗口大小变化，重绘图表
-      window.addEventListener('resize', this.resizeChart);
-    }, 500)
+    // 获取图表数据
+    window.axios.post("/api/query/dash_board/action/get_ar_company_bar", {
+      headers: {'content-type': 'application/json'}
+    }).then(res => {
+      let data = res.data.data
+      console.log("arCompanyBar", data)
+      let xAxisData = []
+      let seriesData = []
+      for (let item of data) {
+        xAxisData.push(item.settle_company)
+        seriesData.push(item.unregister_amount)
+      }
+      this.barChart.xAxis.data = xAxisData
+      this.barChart.series.data = seriesData
+      this.drawArCompanyBar()
+    }).catch(err => {
+        console.log(err);
+      }
+    );
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);
   }
-
 }
-
 </script>

src/module/databoard/components/chart/ar-company-monthly-bar.vue

+<template>
+  <div id="ar_company_monthly_bar"/>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "ArCompanyMonthlyBar",
+  data() {
+    return {
+      arCompanyMonthlyBar: null,
+      barChart: {
+        title: {
+          show: true,
+          text: "XXXXXX股份有限公司 已开票未收款（开票月份）",
+          left: "center",
+          textStyle: {color: "white"}
+        },
+        textStyle: {
+          color: "#FFFFFF",
+          fontSize: "12"
+        },
+        grid: {
+          containLabel: true,
+          top: "10%",
+          bottom: '10%'
+        },
+        xAxis: {
+          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08',],
+          axisLabel: {
+            color: "#FFFFFF",
+            fontSize: "12",
+            interval: 0,
+            rotate: 0
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [{
+          type: "value",
+          splitLine: {
+            lineStyle: {
+              color: "#1E2C58"
+            }
+          },
+          axisLabel: {
+            show: false,
+            color: "#FFFFFFAA",
+            fontSize: "16"
+          }
+        }, {
+          type: "value",
+          position: "left",
+          show: false,
+          max: 1
+        }],
+        series: [
+          {
+            type: 'bar',
+            data: [0, 0, 0, 0, 0, 0, 0, 0],
+            barWidth: "40%",
+            yAxisIndex: 0,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            },
+            itemStyle: {
+              borderRadius: 10,
+            },
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                {offset: 0, color: '#00CCD2'},
+                {offset: 1, color: '#00A2FF'}
+              ]
+            },
+            label: {
+              show: true,
+              position: 'top',
+              color: "#FFFFFF",
+            },
+          },
+          {
+            type: "line",
+            barWidth: "40%",
+            yAxisIndex: 1,
+            data: [0, 0, 0, 0, 0, 0, 0, 0]
+          }
+        ]
+      },
+    }
+  },
+  methods: {
+    // 绘制图表
+    drawArCompanyMonthlyBar() {
+      if (!this.arCompanyMonthlyBar) {
+        this.arCompanyMonthlyBar = echarts.init(document.getElementById('ar_company_monthly_bar'))
+
+        // 监听窗口大小变化，重绘图表
+        window.addEventListener('resize', this.resizeChart);
+      }
+      this.arCompanyMonthlyBar.setOption(this.barChart);
+    },
+    resizeChart() {
+      if (this.arCompanyMonthlyBar) {
+        this.arCompanyMonthlyBar.resize();
+      }
+    },
+  },
+  mounted() {
+    // 调整图表标题
+    let company = this.$route.query.company
+    if (!company) {
+      this.$router.push("/ar_bar/company")
+    }
+    this.barChart.title.text = company + " 已开票未收款（开票月份）"
+    // 获取图表数据
+    window.axios.post("/api/query/dash_board/action/get_ar_company_monthly_bar", {
+      headers: {'content-type': 'application/json'},
+      aux: {company: company},
+    }).then(res => {
+      let data = res.data.data
+      console.log("arCompanyMonthlyBar", data)
+      let xAxisData = []
+      let seriesData0 = []
+      let seriesData1 = []
+      for (let item of data) {
+        xAxisData.push(item.settle_month)
+        seriesData0.push(item.unregister_amount)
+        seriesData1.push(item.percentage)
+      }
+      this.barChart.xAxis.data = xAxisData
+      this.barChart.series[0].data = seriesData0
+      this.barChart.series[1].data = seriesData1
+      this.drawArCompanyMonthlyBar()
+    }).catch(err => {
+      console.log(err);
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeChart);
+  }
+}
+</script>

src/module/databoard/components/chart/ar-monthly-bar.vue

@@ -37,7 +37,7 @@ export default {
             show: false
           }
         },
-        yAxis: [{
+        yAxis: {
           type: "value",
           splitLine: {
             lineStyle: {
@@ -49,58 +49,81 @@ export default {
             color: "#FFFFFFAA",
             fontSize: "16"
           }
-        }],
-        series: [
-          {
-            type: 'bar',
-            data: [25002, 57873, 71168, 41098, 25002, 57873, 71168, 41098],
-            barWidth: "40%",
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(255, 255, 255, 0.1)'
-            },
-            itemStyle: {
-              barBorderRadius: 10,
-            },
-            color: {
-              type: 'linear',
-              x: 0, y: 0, x2: 0, y2: 1,
-              colorStops: [
-                {offset: 0, color: '#00CCD2'},
-                {offset: 1, color: '#00A2FF'}
-              ]
-            },
-            label: {
-              show: true,
-              position: 'top',
-              color: "#FFFFFF",
-            },
+        },
+        series: {
+          type: 'bar',
+          data: [25002, 57873, 71168, 41098, 25002, 57873, 71168, 41098],
+          barWidth: "40%",
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(255, 255, 255, 0.1)'
+          },
+          itemStyle: {
+            borderRadius: 10,
+          },
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              {offset: 0, color: '#00CCD2'},
+              {offset: 1, color: '#00A2FF'}
+            ]
+          },
+          label: {
+            show: true,
+            position: 'top',
+            color: "#FFFFFF",
+          },
+          emphasis: {
+            focus: 'self',
+            blurScope: 'coordinateSystem'
           }
-        ]
+        }
       },
-      myChart: null
+      arMonthlyBar: null
     }
   },
   methods: {
+    // 绘制图表
+    drawArMonthlyBar() {
+      if (!this.arMonthlyBar) {
+        this.arMonthlyBar = echarts.init(document.getElementById('ar_monthly_bar'))
+        // 监听柱条点击事件，跳转子页面
+        let that = this
+        this.arMonthlyBar.on('click', function (params) {
+          that.$router.push({path: '/ar_bar/monthly/company', query: {month: params.name}})
+        });
+        // 监听窗口大小变化，重绘图表
+        window.addEventListener('resize', this.resizeChart);
+      }
+      this.arMonthlyBar.setOption(this.barChart);
+    },
+    // 重绘图表
     resizeChart() {
-      if (this.myChart) {
-        this.myChart.resize();
+      if (this.arMonthlyBar) {
+        this.arMonthlyBar.resize();
       }
     },
   },
   mounted() {
-    // 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
-    setTimeout(() => {
-      let arCompanyBar = document.getElementById('ar_monthly_bar')
-      this.myChart = echarts.init(arCompanyBar)
-      this.myChart.setOption(this.barChart)
-      let that = this
-      this.myChart.on('click', function(params) {
-        that.$router.push({path: '/ar_bar/monthly', query: {name: params.name}})
-      });
-      // 监听窗口大小变化，重绘图表
-      window.addEventListener('resize', this.resizeChart);
-    }, 500)
+    // 获取图表数据
+    window.axios.post("/api/query/dash_board/action/get_ar_monthly_bar", {
+      headers: {'content-type': 'application/json'}
+    }).then(res => {
+      let data = res.data.data
+      console.log("arMonthlyBar", data)
+      let xAxisData = []
+      let seriesData = []
+      for (let item of data) {
+        xAxisData.push(item.settle_month)
+        seriesData.push(item.unregister_amount)
+      }
+      this.barChart.xAxis.data = xAxisData
+      this.barChart.series.data = seriesData
+      this.drawArMonthlyBar()
+    }).catch(err => {
+      console.log(err);
+    });
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);

src/module/databoard/components/chart/ar-monthly-company-bar.vue

+<template>
+  <div id="ar_monthly_company_bar"/>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "ArMonthlyCompanyBar",
+  data() {
+    return {
+      arMonthlyCompanyBar: null,
+      barChart: {
+        title: {
+          show: true,
+          text: "XXXX-XX 已开票未收款（结算单位）",
+          left: "center",
+          textStyle: {color: "white"}
+        },
+        textStyle: {
+          color: "#FFFFFF",
+          fontSize: "12"
+        },
+        grid: {
+          containLabel: true,
+          top: "10%",
+          bottom: '10%'
+        },
+        xAxis: {
+          data: ['XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司'],
+          axisLabel: {
+            color: "#FFFFFF",
+            fontSize: "12",
+            interval: 0,
+            rotate: 20
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            lineStyle: {
+              color: "#1E2C58"
+            }
+          },
+          axisLabel: {
+            show: false,
+            color: "#FFFFFFAA",
+            fontSize: "16"
+          }
+        },
+        series: {
+          type: 'bar',
+          data: [25002, 57873, 11987, 71168, 41098, 25002, 57873, 11987, 71168, 41098],
+          barWidth: "60%",
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(255, 255, 255, 0.1)'
+          },
+          itemStyle: {
+            borderRadius: 10,
+          },
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              {offset: 0, color: '#00CCD2'},
+              {offset: 1, color: '#00A2FF'}
+            ]
+          },
+          label: {
+            show: true,
+            position: 'top',
+            color: "#FFFFFF",
+          },
+        }
+      },
+    }
+  },
+  methods: {
+    // 绘制图表
+    drawArMonthlyCompanyBar() {
+      if (!this.arMonthlyCompanyBar) {
+        this.arMonthlyCompanyBar = echarts.init(document.getElementById('ar_monthly_company_bar'))
+
+        // 监听窗口大小变化，重绘图表
+        window.addEventListener('resize', this.resizeChart);
+      }
+      this.arMonthlyCompanyBar.setOption(this.barChart);
+    },
+    resizeChart() {
+      if (this.arMonthlyCompanyBar) {
+        this.arMonthlyCompanyBar.resize();
+      }
+    },
+  },
+  mounted() {
+    // 调整图表标题
+    let month = this.$route.query.month
+    if (!month) {
+      this.$router.push("/ar_bar/monthly")
+    }
+    this.barChart.title.text = month + " 已开票未收款（结算单位）"
+    // 获取图表数据
+    window.axios.post("/api/query/dash_board/action/get_ar_monthly_company_bar", {
+      headers: {'content-type': 'application/json'},
+      aux: {month: month},
+    }).then(res => {
+      let data = res.data.data
+      console.log("arMonthlyCompanyBar", data)
+      let xAxisData = []
+      let seriesData = []
+      for (let item of data) {
+        xAxisData.push(item.settle_company)
+        seriesData.push(item.unregister_amount)
+      }
+      this.barChart.xAxis.data = xAxisData
+      this.barChart.series.data = seriesData
+      this.drawArMonthlyCompanyBar()
+    }).catch(err => {
+      console.log(err);
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeChart);
+  }
+}
+</script>

src/module/databoard/components/chart/ar-summary-bar.vue

 <template>
-  <div id="ar_summary_bar" @click="goArBar"/>
+  <div id="ar_summary_bar"/>
 </template>
 
 <script>
@@ -9,6 +9,7 @@ export default {
   name: "ArSummaryBar",
   data() {
     return {
+      arSummaryBar: null,
       barChart: {
         textStyle: {
           color: "#FFFFFF",
@@ -29,7 +30,7 @@ export default {
             show: false
           }
         },
-        yAxis: [{
+        yAxis: {
           type: "value",
           splitLine: {
             lineStyle: {
@@ -41,64 +42,51 @@ export default {
             color: "#FFFFFFAA",
             fontSize: "16"
           }
-        }],
-        series: [
-          {
-            type: 'bar',
-            data: [50002, 57873, 11987, 71168, 41098],
-            barWidth: "40%",
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(255, 255, 255, 0.1)'
-            },
-            itemStyle: {
-              barBorderRadius: 10,
-            },
-            color: {
-              type: 'linear',
-              x: 0, y: 0, x2: 0, y2: 1,
-              colorStops: [
-                {offset: 0, color: '#00CCD2'},
-                {offset: 1, color: '#00A2FF'}
-              ]
-            },
-            label: {
-              show: true,
-              position: 'top',
-              color: "#FFFFFF",
-            },
-          }
-        ]
+        },
+        series: {
+          type: 'bar',
+          data: [0, 0, 0, 0, 0],
+          barWidth: "40%",
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(255, 255, 255, 0.1)'
+          },
+          itemStyle: {
+            borderRadius: 10,
+          },
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              {offset: 0, color: '#00CCD2'},
+              {offset: 1, color: '#00A2FF'}
+            ]
+          },
+          label: {
+            show: true,
+            position: 'top',
+            color: "#FFFFFF",
+          },
+        }
       },
-      myChart: null
     }
   },
   methods: {
-    goArBar() {
-      this.$router.push({path: "/ar_bar"})
+    drawArSummaryBar(seriesData) {
+      if (!this.arSummaryBar) {
+        this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar'))
+      }
+      this.barChart.series.data = seriesData
+      this.arSummaryBar.setOption(this.barChart);
     },
     resizeChart() {
-      if (this.myChart) {
-        this.myChart.resize();
+      if (this.arSummaryBar) {
+        this.arSummaryBar.resize();
       }
     }
   },
   mounted() {
-    // 获取图表数据
-    window.axios.post("/api/query/dash_board/action/get_ar_summary_bar", {
-      headers: {'content-type': 'application/json'}
-    }).then(res => {
-      this.barChart.series[0].data = res.data.data;
-    }).catch(err => {
-      console.log("获取应收账款数据失败", err);
-    });
-    // 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
-    setTimeout(() => {
-      this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar'))
-      this.arSummaryBar.setOption(this.barChart);
-      // 监听窗口大小变化，重绘图表
-      window.addEventListener('resize', this.resizeChart);
-    }, 500)
+    window.addEventListener('resize', this.resizeChart);
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);

src/module/databoard/index.vue

@@ -20,7 +20,7 @@
             <title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'" isCenter isBold/>
           </simple-card>
         </div>
-        <ar-summary-bar style="width: 100%; height: 64%;"></ar-summary-bar>
+        <ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
       </display-board>
       <display-board class="trade_right" title="账款情况">
         <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
@@ -37,7 +37,7 @@
     </div>
     <div class="middle">
       <display-board class="trade_left" title="已开票未收款">
-        <winners-list style="height: 96%"/>
+        <winners-list style="height: 96%" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
       </display-board>
       <div class="trade_middle" style="border: none;box-shadow: none;">
         <div style="display: flex; justify-content: space-between; height: 50%;">
@@ -120,6 +120,13 @@ export default {
   },
   data() {
     return {
+      arCompanyList: [
+        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
+        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
+        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
+        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
+        {title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
+      ],
       mockData: {
         yyqk: {
           yye: {
@@ -371,15 +378,57 @@ export default {
     routerTo(path){
       console.log(path)
       this.$router.push({path: path});
+    },
+    // 跳转已开票未收款页面
+    goArBar() {
+      this.$router.push('/ar_bar')
+    },
+    // 获取应收账款数据
+    getArSummaryBar() {
+      window.axios.post("/api/query/dash_board/action/get_ar_summary_bar", {
+        headers: {'content-type': 'application/json'}
+      }).then(res => {
+        let data = res.data.data
+        let seriesData = []
+        seriesData.push(data.unsettled_amount)
+        seriesData.push(data.settled_amount)
+        seriesData.push(data.unregister_amount)
+        seriesData.push(data.receivable_amount)
+        seriesData.push(data.cancelled_amount)
+        this.$refs.arSummaryBar.drawArSummaryBar(seriesData)
+      }).catch(err => {
+        console.log(err);
+      });
+    },
+    // 获取已开票未收款排行
+    getArCompanyList() {
+      window.axios.post("/api/query/dash_board/action/get_ar_company_list", {
+        headers: {'content-type': 'application/json'},
+      }).then(res => {
+        if (res.data.data.length) {
+          this.arCompanyList = res.data.data
+        }
+      }).catch(err => {
+        console.log(err);
+      });
     }
   },
   mounted() {
     setTimeout(() => {
       window.addEventListener('resize', this.resizeChart);
     }, 500)
+    this.getArSummaryBar();
+    this.getArCompanyList();
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);
   }
 };
 </script>
+
+<style scoped>
+#ar_company_list:hover {
+  background-color: #19EBFF10;
+  transform: scale(101%);
+}
+</style>

src/module/index/index.vue

@@ -7,10 +7,10 @@
         <span>星期三</span>
       </div>
       <div class="text_right">
-        <span>刷新时间：10s</span>
+        <span>刷新时间：{{ countDown }}s</span>
       </div>
     </div>
-    <router-view style="height: 90%"></router-view>
+    <router-view style="height: 90%" v-if="isRouterAlive"></router-view>
   </div>
 </template>
 
@@ -21,9 +21,38 @@ window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jqu
 require('materialize-css')
 export default {
   name: 'app',
+  data() {
+    return {
+      countDown: 10,
+      isRouterAlive: true,
+      countDownTimer: null,
+    }
+  },
   methods: {
     goIndex() {
       this.$router.push({path: '/'})
+    },
+    reload() {
+      this.isRouterAlive = false
+      this.$nextTick(function () {
+        this.isRouterAlive = true
+      })
+    }
+  },
+  mounted() {
+    // 倒计时器
+    this.countDownTimer = setInterval(() => {
+      this.countDown--
+      if (this.countDown <= 0) {
+        this.reload()
+        this.countDown = 10
+      }
+    }, 1000)
+  },
+  beforeDestroy() {
+    // 倒计时器
+    if (this.countDownTimer) {
+      clearInterval(this.countDownTimer)
     }
   }
 }

src/module/index/router/index_router.js

@@ -4,7 +4,8 @@ import Index from '../../databoard/index.vue'
 import ArBar from "../../databoard/components/chart/ar-bar.vue";
 import ArCompanyBar from "../../databoard/components/chart/ar-company-bar.vue";
 import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue";
-import WinnersList from "../../databoard/components/card/winners-list.vue";
+import ArCompanyMonthlyBar from "../../databoard/components/chart/ar-company-monthly-bar.vue";
+import ArMonthlyCompanyBar from "../../databoard/components/chart/ar-monthly-company-bar.vue";
 import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue";
 
 Vue.use(Router)
@@ -22,6 +23,7 @@ export default new Router({
     },
     {
       path: '/ar_bar',
+      name: 'arBar',
       component: ArBar,
       children: [
         {
@@ -33,28 +35,23 @@ export default new Router({
           name: 'arCompanyBar',
           component: ArCompanyBar
         },
+        {
+          path: '/ar_bar/company/monthly',
+          name: 'arCompanyMonthlyBar',
+          component: ArCompanyMonthlyBar
+        },
         {
           path: '/ar_bar/monthly',
           name: 'arMonthlyBar',
           component: ArMonthlyBar
+        },
+        {
+          path: '/ar_bar/monthly/company',
+          name: 'arMonthlyCompanyBar',
+          component: ArMonthlyCompanyBar
         }
       ]
     },
-    {
-      path: '/ar_company_bar',
-      name: 'arCompanyBar',
-      component: ArCompanyBar
-    },
-    {
-      path: '/ar_monthly_bar',
-      name: 'arMonthlyBar',
-      component: ArMonthlyBar
-    },
-    {
-      path: '/winner_list',
-      name: 'winnerList',
-      component: WinnersList
-    },
     {
       path: '/turnover-detail',
       name: 'turnoverDetail',