src/api/ajax.js

@@ -8,6 +8,7 @@ export default function ajax (url, data={}, type='GET') {
         const deptArray = storageUtil.read('dept-array');
         if(deptArray) {
             data[ 'dept' + (deptArray.length) ] = deptArray[deptArray.length - 1];
+            data[ 'deptId'] = deptArray[deptArray.length - 1];
         }
 
         let promise;

src/api/index.js

@@ -56,3 +56,46 @@ export const oldPersonSelectByJob = (params, requestMethod) => ajax(`${BASE_URL}
  */
 export const oldPersonSelectDeptValue = (params, requestMethod) => ajax(`${BASE_URL}/chart/value/selectDeptValue`, params, requestMethod);
 
+/**
+ * --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+ */
+
+/**
+ * 老年人信息统计  --->   老年人年龄分布统计
+ */
+export const oldPersonFournums = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/fournums`, params, requestMethod);
+
+/**
+ * 老年人信息统计  --->   老年人性别分布统计
+ */
+export const oldPersonSex = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/sex`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->   老年人能力评估统计
+ */
+export const oldPersonAbility = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/ability`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->   老年人健康状况统计
+ */
+export const oldPersonOldHealth = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/oldHealth`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->    老年人类别分布统计
+ */
+export const oldPersonOldType = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/oldType`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ----->   老年人收入来源统计
+ */
+export const oldPersonOldIncome = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/oldIncome`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->    老年人可支配收入统计
+ */
+export const oldPersonIncome = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/income`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->    老年人生活经济状况统计
+ */
+export const oldPersonLivingCondition = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/livingCondition`, params, requestMethod);

src/components/PatrolmanStatistics/1.vue

@@ -16,6 +16,9 @@
         },
         methods: {
             async draw() {
+                if(this.myChart != null) {
+                    this.myChart.clear();
+                }
                 const result = await oldPersonSelectUserBySex({}, 'POST');
                 this.dataArr = result;
 
@@ -66,7 +69,7 @@
                             fontSize: 20,
                             fontWeight: 'bold',
                             formatter: () => {
-                                return `${d.value}人`;
+                                return `${this.dataArr[this.dataArr.length - 1 - i].value}人`;
                             }
                         },
                         z: 1

src/components/PatrolmanStatistics/2.vue

@@ -25,7 +25,6 @@
         async draw() {
             const result = await oldPersonSelectAuthAndLook({}, 'POST');
             this.dataArr = result;
-
             const seriesArr = [];
 
             let maxValue = 0;

src/components/PatrolmanStatistics/5.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-    // import { oldPersonHealth } from '../../api'
+    import { oldPersonHealth } from '../../api'
 
     export default {
         name: "OldPersonHealthCount",

src/components/index/1.vue

@@ -1,116 +1,121 @@
-<template>
+<template>
     <div id="myChartindex1" style="width: 100%; height: 100%; "></div>
 </template>
 
 <script>
+    import { oldPersonOldType } from '../../api'
+
     //圆角柱状图
     import echarts from 'echarts'
 
     export default {
         data() {
             return {
-                dataArr: [
-                    {label: '独居', value: '1000'},
-                    {label: '空巢', value: '3600'},
-                    {label: '留守', value: '2800'},
-                    {label: '特困', value: '2000'},
-                    {label: '高龄', value: '3600'},
-                    {label: '失能', value: '3000'},
-                    {label: '重残', value: '4500'},
-                    {label: '失独', value: '4200'},
-                    {label: '普通', value: '3700'}
-                ],
+                dataArr: [],
                 colorArr: [
                     {color1: '#9db9ff', color2: '#00f'},
                     {color1: '#ffe49e', color2: '#ffb300'}
-                ]
+                ],
+                myChart: null
             }
         },
-        mounted() {
-            let myChart = this.$echarts.init(document.getElementById('myChartindex1'));
-            myChart.setOption({
-                grid: {
-                  left:'12%',
-                    right:'7%',
-                    top:'15%',
-                    bottom:'15%'
-                },
-                xAxis: {
-                    type: 'category',
-                    data: this.dataArr.map((item) => item.label),
-                    axisTick: {
-                        show: false
+        methods: {
+            async draw() {
+                if(this.myChart != '' && this.myChart != null) {
+                    this.myChart.clear();
+                }
+
+                const result = await oldPersonOldType({}, 'POST');
+                this.dataArr = result;
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartindex1'));
+                this.myChart.setOption({
+                    grid: {
+                        left:'12%',
+                        right:'7%',
+                        top:'15%',
+                        bottom:'15%'
                     },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: 'white',
-                            fontSize : 14
+                    xAxis: {
+                        type: 'category',
+                        data: this.dataArr.map((item) => item.label),
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                color: 'white',
+                                fontSize : 14
+                            },
                         },
-                    },
 
-                },
-                yAxis: {
-                    type: 'value',
-                    axisLabel: {
-                        show: false
-                    },
-                    splitLine: {
-                        show: true,
-                        lineStyle:{
-                            color: ['#315070'],
-                            width: 1,
-                            type: 'solid'
-                        }
-                    },
-                    axisLine: {
-                        show: false
                     },
-                    axisTick: {
-                        show: false
-                    },
-
-                },
-                series: [
-                    {
-                        data: this.dataArr.map((item) => item.value),
-                        type: 'bar',
-                        barWidth: 14,
-                        itemStyle: {
-                            emphasis: {
-                                barBorderRadius: 7
-                            },
-                            normal: {
-                                barBorderRadius: 7,
-                                color: (params) => {
-                                    return new echarts.graphic.LinearGradient(
-                                        0, 0, 0, 1,
-                                        [
-                                            {offset: 0, color: this.colorArr[params.dataIndex % 2 == 0 ? 0 : 1].color1},
-                                            {offset: 1, color: this.colorArr[params.dataIndex % 2 == 0 ? 0 : 1].color2}
-                                        ]
-                                    )
-                                }
+                    yAxis: {
+                        type: 'value',
+                        axisLabel: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle:{
+                                color: ['#315070'],
+                                width: 1,
+                                type: 'solid'
                             }
                         },
-                        z: 1
-                    },
-                    {
-                        type: 'line',
-                        data: this.dataArr.map((item) => item.value),
-                        symbol: (params, item) => {
-                            return item.dataIndex % 2 == 0 ? `image://${require("../../assets/index/q1.png")}` : `image://${require("../../assets/index/q2.png")}`;
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
                         },
-                        symbolSize: [19, 19],
-                        lineStyle: {
-                            color: 'rgba(255, 165, 0, 1)',
-                            width: 1,
-                            type: 'dashed'
+
+                    },
+                    series: [
+                        {
+                            data: this.dataArr.map((item) => item.value),
+                            type: 'bar',
+                            barWidth: 14,
+                            itemStyle: {
+                                emphasis: {
+                                    barBorderRadius: 7
+                                },
+                                normal: {
+                                    barBorderRadius: 7,
+                                    color: (params) => {
+                                        return new echarts.graphic.LinearGradient(
+                                            0, 0, 0, 1,
+                                            [
+                                                {offset: 0, color: this.colorArr[params.dataIndex % 2 == 0 ? 0 : 1].color1},
+                                                {offset: 1, color: this.colorArr[params.dataIndex % 2 == 0 ? 0 : 1].color2}
+                                            ]
+                                        )
+                                    }
+                                }
+                            },
+                            z: 1
                         },
-                        z: 2
-                    }
-                ]
-            });
+                        {
+                            type: 'line',
+                            data: this.dataArr.map((item) => item.value),
+                            symbol: (params, item) => {
+                                return item.dataIndex % 2 == 0 ? `image://${require("../../assets/index/q1.png")}` : `image://${require("../../assets/index/q2.png")}`;
+                            },
+                            symbolSize: [19, 19],
+                            lineStyle: {
+                                color: 'rgba(255, 165, 0, 1)',
+                                width: 1,
+                                type: 'dashed'
+                            },
+                            z: 2
+                        }
+                    ]
+                });
+            }
+        },
+        mounted() {
+            this.draw();
         }
     }
 </script>

src/components/oldStatistics/1.vue

@@ -3,119 +3,128 @@
 </template>
 
 <script>
+  import { oldPersonFournums } from '../../api'
+
   export default {
     //老年人年龄分布统计
     name: "OldPersonAgeCount",
     data() {
       return {
-        dataArr: [
-          { label: '60-70岁', value: 23563, percent: '25%' },
-          { label: '70-80岁', value: 23563, percent: '25%' },
-          { label: '80-85岁', value: 23563, percent: '25%' },
-          { label: '85岁以上', value: 23563, percent: '25%' }
-        ],
-        colorArr: ['rgba(1, 220, 254, 1)', 'rgba(238, 250, 42, 1)', 'rgba(51, 252, 108, 1)', 'rgba(255, 196, 0, 1)']
+        dataArr: [],
+        colorArr: ['rgba(1, 220, 254, 1)', 'rgba(238, 250, 42, 1)', 'rgba(51, 252, 108, 1)', 'rgba(255, 196, 0, 1)'],
+        myChart: null
       }
     },
-    mounted() {
-      const seriesArr = [];
-      for(let i = 0; i < this.dataArr.length; i++) {
-        const d = this.dataArr[i];
+    methods: {
+      async draw() {
+          if(this.myChart != null) {
+              this.myChart.clear();
+          }
+          const result = await oldPersonFournums({}, 'POST');
+          this.dataArr = result;
 
-        const arr = new Array(this.dataArr.length).fill({});
-        arr[i] = { value: d.value };
+          const seriesArr = [];
+          for(let i = 0; i < this.dataArr.length; i++) {
+              const d = this.dataArr[i];
 
-        seriesArr.push({
-          type: 'pictorialBar',
-          symbol: `image://${require('../../assets/oldStatistics/age-' + i + '.png')}`,
-          symbolSize: [147, 147],
-          symbolOffset: [0, -50],
-          label: {
-            show: true,
-            position: 'top',
-            textStyle: {
-              fontSize: 15
-            },
-            color: this.colorArr[i],
-            fontWeight: 'bold',
-            offset: [0, 100],
-            formatter: d.percent
-          },
-          data: arr
-        });
+              const arr = new Array(this.dataArr.length).fill({});
+              arr[i] = { value: d.value };
 
-        const topArr = new Array(this.dataArr.length).fill({});
-        topArr[i] = { value: d.value };
+              seriesArr.push({
+                  type: 'pictorialBar',
+                  symbol: `image://${require('../../assets/oldStatistics/age-' + i + '.png')}`,
+                  symbolSize: [147, 147],
+                  symbolOffset: [0, -50],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      textStyle: {
+                          fontSize: 15
+                      },
+                      color: this.colorArr[i],
+                      fontWeight: 'bold',
+                      offset: [0, 100],
+                      formatter: d.percent
+                  },
+                  data: arr
+              });
 
-        seriesArr.push({
-          type: 'pictorialBar',
-          symbol: `image://${require('../../assets/oldStatistics/age-' + i + '-1.png')}`,
-          symbolSize: [121, 6],
-          symbolOffset: [0, -220],
-          label: {
-            show: true,
-            position: 'top',
-            textStyle: {
-              fontSize: 15
-            },
-            color: this.colorArr[i],
-            fontWeight: 'bold',
-            offset: [0, 70],
-            formatter: `${d.value}人`
-          },
-          data: topArr
-        });
-      }
+              const topArr = new Array(this.dataArr.length).fill({});
+              topArr[i] = { value: d.value };
 
-      let myChart = this.$echarts.init(document.getElementById('myChartold1'));
-      myChart.setOption(
-              {
-                grid:{
-                  right:"14%",
-                },
-                xAxis: {
-                  type: 'category',
-                  splitLine: {
-                    show: false
-                  },
-                  axisLine: {
-                    show: false
-                  },
-                  axisLabel: {
-                    show: true,
-                    color: '#fff',
-                    fontWeight: 'bold',
-                    fontSize: 15,
-                    margin: -230
+              seriesArr.push({
+                  type: 'pictorialBar',
+                  symbol: `image://${require('../../assets/oldStatistics/age-' + i + '-1.png')}`,
+                  symbolSize: [121, 6],
+                  symbolOffset: [0, -220],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      textStyle: {
+                          fontSize: 15
+                      },
+                      color: this.colorArr[i],
+                      fontWeight: 'bold',
+                      offset: [0, 70],
+                      formatter: `${d.value}人`
                   },
-                  axisTick: {
-                    show: false
-                  },
-                  data: this.dataArr.map((item) => {
-                    return item.label;
-                  })
-                },
-                yAxis: {
-                  type: 'value',
-                  axisLabel: {
-                    formatter: '{value}%'
-                  },
-                  splitLine: {
-                    show: false
+                  data: topArr
+              });
+          }
+
+          this.myChart = this.$echarts.init(document.getElementById('myChartold1'));
+          this.myChart.setOption(
+              {
+                  grid:{
+                      right:"14%",
                   },
-                  axisLine: {
-                    show: false
+                  xAxis: {
+                      type: 'category',
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: true,
+                          color: '#fff',
+                          fontWeight: 'bold',
+                          fontSize: 15,
+                          margin: -230
+                      },
+                      axisTick: {
+                          show: false
+                      },
+                      data: this.dataArr.map((item) => {
+                          return item.label;
+                      })
                   },
-                  axisTick: {
-                    show: false
+                  yAxis: {
+                      type: 'value',
+                      axisLabel: {
+                          formatter: '{value}%'
+                      },
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisTick: {
+                          show: false
+                      },
+                      // axisLabel: {
+                      //   show: false
+                      // }
                   },
-                  // axisLabel: {
-                  //   show: false
-                  // }
-                },
-                series: seriesArr
+                  series: seriesArr
               }
-      );
+          );
+      }
+    },
+    mounted() {
+      this.draw();
     }
   }
 </script>

src/components/oldStatistics/10.vue

@@ -3,130 +3,136 @@
 </template>
 
 <script>
+    import { oldPersonLivingCondition } from '../../api'
+
     export default {
         //老年人生活经济状况统计
         name: "OldPersonLivingConditionsCount",
         data() {
           return {
-            dataArr: [
-              { label: '建档立卡贫困户', value: 1800 },
-              { label: '一般农户', value: 8023 },
-              { label: '低保', value: 2856 }
-            ]
+            dataArr: []
           }
         },
-        mounted() {
-          let myChart = this.$echarts.init(document.getElementById('myChartold10'));
-          myChart.setOption({
-            grid:{
-              left:"16%",
-              right:"5%",
-            },
-            xAxis: {
-              type: 'category',
-              boundaryGap: true,
-              data: this.dataArr.map((item) => {
-                return item.label;
-              }),
-              splitLine: {
-                show: true,
-                lineStyle:{
-                  color: ['#315070'],
-                  width: 1,
-                  type: 'solid'
-                }
-              },
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: '#5c6ab6'
-                }
-              },
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  color: 'white',
-                },
-                fontSize: 16
-              },
-              axisTick: {
-                show: false
-              }
-            },
-            yAxis: {
-              type: 'value',
-              axisLabel: {
-                formatter: '{value}',
-                show: true,
-                fontSize: 16,
-                textStyle: {
-                  color: 'white',
-                },
-              },
-              splitLine: {
-                show: true,
-                lineStyle:{
-                  color: ['#315070'],
-                  width: 1,
-                  type: 'solid'
-                }
-              },
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: '#5c6ab6'
-                }
-              },
-              axisTick: {
-                show: false
-              },
+        methods: {
+          async draw() {
+              const result = await oldPersonLivingCondition({}, 'POST');
+              this.dataArr = result;
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartold10'));
+              this.myChart.setOption({
+                  grid:{
+                      left:"16%",
+                      right:"5%",
+                  },
+                  xAxis: {
+                      type: 'category',
+                      boundaryGap: true,
+                      data: this.dataArr.map((item) => {
+                          return item.lable;
+                      }),
+                      splitLine: {
+                          show: true,
+                          lineStyle:{
+                              color: ['#315070'],
+                              width: 1,
+                              type: 'solid'
+                          }
+                      },
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#5c6ab6'
+                          }
+                      },
+                      axisLabel: {
+                          show: true,
+                          textStyle: {
+                              color: 'white',
+                          },
+                          fontSize: 16
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'value',
+                      axisLabel: {
+                          formatter: '{value}',
+                          show: true,
+                          fontSize: 16,
+                          textStyle: {
+                              color: 'white',
+                          },
+                      },
+                      splitLine: {
+                          show: true,
+                          lineStyle:{
+                              color: ['#315070'],
+                              width: 1,
+                              type: 'solid'
+                          }
+                      },
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#5c6ab6'
+                          }
+                      },
+                      axisTick: {
+                          show: false
+                      },
 
-            },
-            series: [
-              {
-                type: 'line',
-                smooth: true,
-                areaStyle: {
-                  color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 1,
-                    y2: 0,
-                    colorStops: [{
-                      offset: 0, color: 'rgba(0, 144, 255, 0.2)' // 0% 处的颜色
-                    }, {
-                      offset: 1, color: 'rgba(215, 0, 255, 0.2)' // 100% 处的颜色
-                    }],
-                    global: false // 缺省为 false
-                  }
-                },
-                symbol: `image://${require('../../assets/oldStatistics/y.png')}`,
-                symbolSize: [10, 10],
-                data: this.dataArr.map((item) => {
-                  return item.value;
-                }),
-                label: {
-                  show: true,
-                  formatter: '{c}',
-                  color: '#fff',
-                  fontSize: 16
-                },
-                itemStyle: {
-                  color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-                    offset: 0,
-                    color: '#d700ff'
-                  }, {
-                    offset: 1,
-                    color: '#0090ff'
-                  }]),
-                },
-                lineStyle: {
-                  width: 2
-                }
-              }
-            ]
-          });
+                  },
+                  series: [
+                      {
+                          type: 'line',
+                          smooth: true,
+                          areaStyle: {
+                              color: {
+                                  type: 'linear',
+                                  x: 0,
+                                  y: 0,
+                                  x2: 1,
+                                  y2: 0,
+                                  colorStops: [{
+                                      offset: 0, color: 'rgba(0, 144, 255, 0.2)' // 0% 处的颜色
+                                  }, {
+                                      offset: 1, color: 'rgba(215, 0, 255, 0.2)' // 100% 处的颜色
+                                  }],
+                                  global: false // 缺省为 false
+                              }
+                          },
+                          symbol: `image://${require('../../assets/oldStatistics/y.png')}`,
+                          symbolSize: [10, 10],
+                          data: this.dataArr.map((item) => {
+                              return item.value;
+                          }),
+                          label: {
+                              show: true,
+                              formatter: '{c}',
+                              color: '#fff',
+                              fontSize: 16
+                          },
+                          itemStyle: {
+                              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                                  offset: 0,
+                                  color: '#d700ff'
+                              }, {
+                                  offset: 1,
+                                  color: '#0090ff'
+                              }]),
+                          },
+                          lineStyle: {
+                              width: 2
+                          }
+                      }
+                  ]
+              });
+          }
+        },
+        mounted() {
+          this.draw();
         }
     }
 </script>

src/components/oldStatistics/2.vue

@@ -3,150 +3,162 @@
 </template>
 
 <script>
+    import { oldPersonSex } from '../../api'
+
     export default {
         name: "OldPersonSexCount",
         data() {
           return {
-            dataArr: [
-              { label: '老年人男性人数', value: 5896322, percent: '60%' },
-              { label: '老年人女性人数', value: 4896322, percent: '40%' }
-            ],
+            dataArr: [],
             colorArr: [
               { color1: '#009cff', color2: '#5BB4FF' },
               { color1: '#ff5b00', color2: '#FF9648' }
-            ]
+            ],
+            myChart: null
           }
         },
-        mounted() {
-          const seriesArr = [];
+        methods: {
+            async draw() {
+                if (this.myChart)
+                {
+                    this.myChart.clear();
+                }
+                const result = await oldPersonSex({}, 'POST');
+                this.dataArr = result;
 
-          for(let i = 0; i < this.dataArr.length; i++) {
-            const d = this.dataArr[i];
+                const seriesArr = [];
 
-            seriesArr.push({
-              type: 'pie',
-              radius: [38, 70],
-              center: [`${ i == 0 ? 30 : 70 }%`, '56%'],
-              startAngle: 90,
-              clockwise: false,
-              labelLine: {
-                show: false
-              },
-              data: [{
-                value: parseInt(d.percent),
-                itemStyle: {
-                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                    offset: 0,
-                    color: this.colorArr[i].color1
-                  }, {
-                    offset: 1,
-                    color: this.colorArr[i].color2
-                  }])
-                }
-              },
-              {
-                value: 100 - parseInt(d.percent),
-                itemStyle: {
-                  color: "transparent"
-                }
-              }],
-              z: 1
-            });
+                for(let i = 0; i < this.dataArr.length; i++) {
+                    const d = this.dataArr[i];
 
-            seriesArr.push({
-              type: 'pictorialBar',
+                    seriesArr.push({
+                        type: 'pie',
+                        radius: [38, 70],
+                        center: [`${ i == 0 ? 30 : 70 }%`, '56%'],
+                        startAngle: 90,
+                        clockwise: false,
+                        labelLine: {
+                            show: false
+                        },
+                        data: [{
+                            value: parseInt(d.percent),
+                            itemStyle: {
+                                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                    offset: 0,
+                                    color: this.colorArr[i].color1
+                                }, {
+                                    offset: 1,
+                                    color: this.colorArr[i].color2
+                                }])
+                            }
+                        },
+                            {
+                                value: 100 - parseInt(d.percent),
+                                itemStyle: {
+                                    color: "transparent"
+                                }
+                            }],
+                        z: 1
+                    });
 
-              symbol:  i == 0 ? `image://${require("../../assets/oldStatistics/old-person-sex-male.png")}` : `image://${require("../../assets/oldStatistics/old-person-sex-female.png")}`,
-              symbolSize: [144, 143],
-              data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -120 : 120}`, 0] } ],
-              label: {
-                normal: {
-                  show: true,
-                  position: "top",
-                  offset: [i == 0 ? -120 : 120, 0],
-                  textStyle: {
-                    fontSize: 18,
-                    color: '#fff'
-                  },
-                  formatter: ['{a|' + d.value + '}', '{b|' + d.label + '}'].join('\n'),
-                  rich:{
-                    a: {
-                      fontSize: 26,
-                      color: this.colorArr[i].color1
-                    },
-                    b: {
-                      fontSize: 18,
-                      color: '#fff',
-                      padding: [5, 0]
-                    }
-                  }
-                }
-              },
-              z: 2
-            });
+                    seriesArr.push({
+                        type: 'pictorialBar',
+
+                        symbol:  i == 0 ? `image://${require("../../assets/oldStatistics/old-person-sex-male.png")}` : `image://${require("../../assets/oldStatistics/old-person-sex-female.png")}`,
+                        symbolSize: [144, 143],
+                        data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -120 : 120}`, 0] } ],
+                        label: {
+                            normal: {
+                                show: true,
+                                position: "top",
+                                offset: [i == 0 ? -120 : 120, 0],
+                                textStyle: {
+                                    fontSize: 18,
+                                    color: '#fff'
+                                },
+                                formatter: ['{a|' + d.value + '}', '{b|' + d.label + '}'].join('\n'),
+                                rich:{
+                                    a: {
+                                        fontSize: 26,
+                                        color: this.colorArr[i].color1
+                                    },
+                                    b: {
+                                        fontSize: 18,
+                                        color: '#fff',
+                                        padding: [5, 0]
+                                    }
+                                }
+                            }
+                        },
+                        z: 2
+                    });
 
-            seriesArr.push({
-              type: 'pictorialBar',
+                    seriesArr.push({
+                        type: 'pictorialBar',
 
-              symbol: i == 0 ?  `image://${require("../../assets/oldStatistics/old-person-male-icon.png")}` :  `image://${require("../../assets/oldStatistics/old-person-female-icon.png")}`,
-              symbolSize: [53, 52],
-              data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -230 : 10}`, -50] } ],
-              label: {
-                normal: {
-                  show: true,
-                  position: "top",
-                  offset: [i == 0 ? -120 : 120, 50],
-                  textStyle: {
-                    fontSize: 24,
-                    color: this.colorArr[i].color1
-                  },
-                  formatter: () => {
-                    return `${d.percent}`;
-                  }
+                        symbol: i == 0 ?  `image://${require("../../assets/oldStatistics/old-person-male-icon.png")}` :  `image://${require("../../assets/oldStatistics/old-person-female-icon.png")}`,
+                        symbolSize: [53, 52],
+                        data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -230 : 10}`, -50] } ],
+                        label: {
+                            normal: {
+                                show: true,
+                                position: "top",
+                                offset: [i == 0 ? -120 : 120, 50],
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: this.colorArr[i].color1
+                                },
+                                formatter: () => {
+                                    return `${d.percent}`;
+                                }
+                            }
+                        },
+                        z: 1
+                    });
                 }
-              },
-              z: 1
-            });
-          }
 
 
-          let myChart = this.$echarts.init(document.getElementById('myChartold2'));
-          myChart.setOption(
-            {
-              xAxis: {
-                type: 'category',
-                splitLine: {
-                  show: false
-                },
-                axisLine: {
-                  show: false
-                },
-                axisLabel: {
-                  show: false
-                },
-                axisTick: {
-                  show: false
-                }
-              },
-              yAxis: {
-                type: 'value',
-                max: 200,
-                splitLine: {
-                  show: false
-                },
-                axisLine: {
-                  show: false
-                },
-                axisTick: {
-                  show: false
-                },
-                axisLabel: {
-                  show: false
-                }
-              },
-              series: seriesArr
+                this.myChart = this.$echarts.init(document.getElementById('myChartold2'));
+                this.myChart.setOption(
+                    {
+                        xAxis: {
+                            type: 'category',
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            max: 200,
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            }
+                        },
+                        series: seriesArr
+                    }
+                );
             }
-          );
+        },
+        mounted() {
+            this.draw();
         }
     }
 </script>

src/components/oldStatistics/4.vue

@@ -3,198 +3,210 @@
 </template>
 
 <script>
+    import { oldPersonAbility } from '../../api'
+
     export default {
         //老年人能力评估统计
         name: "OldPersonAbilityCount",
         data() {
           return {
-            dataArr: [
-              { label: '完全自理', value: 25 },
-              { label: '半失能', value: 38 },
-              { label: '失能', value: 37 }
-            ],
+            dataArr: [],
             colorArr: [
               { color1: '#ff0900', color2: '#ff7367' },
               { color1: '#4625FF', color2: '#6DC0FF' },
               { color1: '#f6a314', color2: '#f4ff81' }
-            ]
+            ],
+            myChart: null
           }
         },
-        mounted() {
-          const seriesArr = [{
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/oldStatistics/r.png')}`,
-            symbolSize: [53, 68],
-            data: [{ value:  200, symbolPosition: 'center', symbolOffset: [0, 0]}],
-            z: 2
-          }];
+        methods: {
+            async draw() {
+                if(this.myChart != null) {
+                    this.myChart.clear();
+                }
+                const result = await oldPersonAbility({}, 'POST');
+                this.dataArr = result;
 
-          seriesArr.push({
-            type: 'pie',
-            radius: [70,85],  //内部经 外半径
-            center: ['30%', '50%'],
-            clockwise: false,
-            labelLine: {
-              show: false
-            },
-            data: [{
-              name: '失能',
-              value: this.dataArr[2].value,
-              label: {
-                show: false
-              },
-              itemStyle: {
-                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: this.colorArr[2].color1
-                }, {
-                  offset: 1,
-                  color: this.colorArr[2].color2
-                }])
-              }
-            },
-            {
-              name: '半失能',
-              value: this.dataArr[1].value,
-              label: {
-                show: false
-              },
-              itemStyle: {
-                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: this.colorArr[1].color1
-                }, {
-                  offset: 1,
-                  color: this.colorArr[1].color2
-                }])
-              }
-            },
-            {
-              value: 100 - this.dataArr[1].value - this.dataArr[2].value,
-              itemStyle: {
-                color: "transparent"
-              }
-            }],
-            z: 2
-          });
+                console.log(JSON.stringify(result))
 
-          seriesArr.push({
-            name: '完全自理',
-            type: 'pie',
-            radius: [70, 85],  //内部经 外半径
-            center: ['30%', '49%'],
-            clockwise: true,
-            labelLine: {
-              show: false
-            },
-            data: [{
-              value: this.dataArr[0].value,
-              itemStyle: {
-                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: this.colorArr[0].color1
-                }, {
-                  offset: 1,
-                  color: this.colorArr[0].color2
-                }])
-              }
-            },
-            {
-              value: 100 - this.dataArr[0].value,
-              itemStyle: {
-                color: "transparent"
-              }
-            }],
-            z: 2
-          });
+                const seriesArr = [{
+                    type: 'pictorialBar',
+                    symbol: `image://${require('../../assets/oldStatistics/new.png')}`,
+                    symbolSize: [94, 59],
+                    data: [{ value:  200, symbolPosition: 'center', symbolOffset: [0, 0]}],
+                    z: 2
+                }];
 
-          seriesArr.push({
-            type: 'pie',
-            radius: [97, 100],  //内部经 外半径
-            center: ['30%', '49%'],
-            clockwise: true,
-            labelLine: {
-              show: false
-            },
-            data: [{
-              name: '完全自理',
-              value: this.dataArr[0].value,
-              label: {
-                show: false
-              },
-              itemStyle: {
-                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: this.colorArr[0].color1
-                }, {
-                  offset: 1,
-                  color: this.colorArr[0].color2
-                }])
-              }
-            },
-            {
-              value: 100 - this.dataArr[0].value,
-              itemStyle: {
-                color: "transparent"
-              }
-            }],
-            z: 2
-          });
+                seriesArr.push({
+                    type: 'pie',
+                    radius: [70,85],  //内部经 外半径
+                    center: ['30%', '50%'],
+                    clockwise: false,
+                    labelLine: {
+                        show: false
+                    },
+                    data: [{
+                        name: '失能',
+                        value: parseInt(this.dataArr[2].value),
+                        label: {
+                            show: false
+                        },
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                offset: 0,
+                                color: this.colorArr[2].color1
+                            }, {
+                                offset: 1,
+                                color: this.colorArr[2].color2
+                            }])
+                        }
+                    },
+                    {
+                        name: '半失能',
+                        value: parseInt(this.dataArr[1].value),
+                        label: {
+                            show: false
+                        },
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                offset: 0,
+                                color: this.colorArr[1].color1
+                            }, {
+                                offset: 1,
+                                color: this.colorArr[1].color2
+                            }])
+                        }
+                    },
+                    {
+                        value: 100 - parseInt(this.dataArr[1].value) - parseInt(this.dataArr[2].value),
+                        itemStyle: {
+                            color: "transparent"
+                        }
+                    }],
+                    z: 2
+                });
 
-          let myChart = this.$echarts.init(document.getElementById('myChartold4'));
-          myChart.setOption(
-            {
-              grid:{
-                right:"50%",
-              },
-              color: [this.colorArr[0].color1, this.colorArr[1].color1, this.colorArr[2].color1],
-              legend: {
-                show: true,
-                orient: 'vertical',
-                top: 'middle',
-                right: '220',
-                itemGap: 70,
-                itemWidth: 13,
-                itemHeight: 13,
-                data: ['完全自理', '半失能', '失能'],
-                  textStyle: {
-                    color: 'white',
-                  },
-              },
-              xAxis: {
-                type: 'category',
-                splitLine: {
-                  show: false
-                },
-                axisLine: {
-                  show: false
-                },
-                axisLabel: {
-                  show: false
-                },
-                axisTick: {
-                  show: false
-                }
-              },
-              yAxis: {
-                type: 'value',
-                max: 200,
-                splitLine: {
-                  show: false
-                },
-                axisLine: {
-                  show: false
-                },
-                axisTick: {
-                  show: false
-                },
-                axisLabel: {
-                  show: false
-                }
-              },
-              series: seriesArr
+                seriesArr.push({
+                    name: '完全自理',
+                    type: 'pie',
+                    radius: [70, 85],  //内部经 外半径
+                    center: ['30%', '49%'],
+                    clockwise: true,
+                    labelLine: {
+                        show: false
+                    },
+                    data: [{
+                        value: parseInt(this.dataArr[0].value),
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                offset: 0,
+                                color: this.colorArr[0].color1
+                            }, {
+                                offset: 1,
+                                color: this.colorArr[0].color2
+                            }])
+                        }
+                    },
+                    {
+                        value: 100 - parseInt(this.dataArr[0].value),
+                        itemStyle: {
+                            color: "transparent"
+                        }
+                    }],
+                    z: 2
+                });
+
+                seriesArr.push({
+                    type: 'pie',
+                    radius: [97, 100],  //内部经 外半径
+                    center: ['30%', '49%'],
+                    clockwise: true,
+                    labelLine: {
+                        show: false
+                    },
+                    data: [{
+                        name: '完全自理',
+                        value: parseInt(this.dataArr[0].value),
+                        label: {
+                            show: false
+                        },
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                offset: 0,
+                                color: this.colorArr[0].color1
+                            }, {
+                                offset: 1,
+                                color: this.colorArr[0].color2
+                            }])
+                        }
+                    },
+                    {
+                        value: 100 - parseInt(this.dataArr[0].value),
+                        itemStyle: {
+                            color: "transparent"
+                        }
+                    }],
+                    z: 2
+                });
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartold4'));
+                this.myChart.setOption(
+                    {
+                        grid:{
+                            right:"50%",
+                        },
+                        color: [this.colorArr[0].color1, this.colorArr[1].color1, this.colorArr[2].color1],
+                        legend: {
+                            show: true,
+                            orient: 'vertical',
+                            top: 'middle',
+                            right: '220',
+                            itemGap: 70,
+                            itemWidth: 13,
+                            itemHeight: 13,
+                            data: ['完全自理', '半失能', '失能'],
+                            textStyle: {
+                                color: 'white',
+                            },
+                        },
+                        xAxis: {
+                            type: 'category',
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            max: 200,
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            }
+                        },
+                        series: seriesArr
+                    }
+                );
             }
-          );
+        },
+        mounted() {
+            this.draw();
         }
     }
 </script>

src/components/oldStatistics/5.vue

@@ -3,89 +3,95 @@
 </template>
 
 <script>
+    import { oldPersonOldHealth } from '../../api'
+
     export default {
         name: "MzColumnCharts",
         data() {
           return {
-            dataArr: [
-              { label: '健康', value: 10000 },
-              { label: '残疾', value: 3965 },
-              { label: '患重特大疾病', value: 5023 },
-              { label: '老年人慢性病', value: 7632 }
-            ],
+            dataArr: [],
             colorArr: [
               { color1: '#ff2311', color2: 'rgba(255, 128, 125, 0.1)' },
               { color1: '#2222ff', color2: 'rgba(161, 154, 255, 0.1)' },
               { color1: '#00c8ff', color2: 'rgba(154, 235, 255, 0.1)' },
               { color1: '#ff00fd', color2: 'rgba(255, 159, 242, 0.1)' }
-            ]
+            ],
+            myChart: null
           }
         },
-        mounted() {
-          let myChart = this.$echarts.init(document.getElementById('myChartold5'));
-          myChart.setOption({
+        methods: {
+          async draw() {
+              const result = await oldPersonOldHealth({}, 'POST');
+              this.dataArr = result;
 
-            xAxis: {
-              type: 'category',
-              data: this.dataArr.map((item) => item.label),
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: '#3075e2'
-                }
-              },
-              splitLine:{
-                show:false
-              },
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  color: 'white'
-                }
-              }
+              this.myChart = this.$echarts.init(document.getElementById('myChartold5'));
+              this.myChart.setOption({
 
-            },
-            yAxis: {
-              type: 'value',
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: '#3075e2'
-                }
-              },
-              splitLine:{
-                show:false
-              },
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  color: 'white'
-                }
-              }
-            },
-            series: [{
-              type: 'bar',
-              barWidth:'40',
-              data: this.dataArr.map((item) => item.value),
-              itemStyle: {
-                color: (params) => {
-                  return new this.$echarts.graphic.LinearGradient(
-                    0, 0, 0, 1,
-                    [
-                      {offset: 0, color: this.colorArr[ params.dataIndex ].color1},
-                      {offset: 1, color: this.colorArr[ params.dataIndex ].color2}
-                    ]
-                  )
-                }
-              },
-              label: {
-                show: true,
-                position: 'top',
-                color: '#fff',
-                fontSize: 16
-              }
-            }]
-          });
+                  xAxis: {
+                      type: 'category',
+                      data: this.dataArr.map((item) => item.label),
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#3075e2'
+                          }
+                      },
+                      splitLine:{
+                          show:false
+                      },
+                      axisLabel: {
+                          show: true,
+                          textStyle: {
+                              color: 'white'
+                          }
+                      }
+
+                  },
+                  yAxis: {
+                      type: 'value',
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#3075e2'
+                          }
+                      },
+                      splitLine:{
+                          show:false
+                      },
+                      axisLabel: {
+                          show: true,
+                          textStyle: {
+                              color: 'white'
+                          }
+                      }
+                  },
+                  series: [{
+                      type: 'bar',
+                      barWidth:'40',
+                      data: this.dataArr.map((item) => item.value),
+                      itemStyle: {
+                          color: (params) => {
+                              return new this.$echarts.graphic.LinearGradient(
+                                  0, 0, 0, 1,
+                                  [
+                                      {offset: 0, color: this.colorArr[ params.dataIndex ].color1},
+                                      {offset: 1, color: this.colorArr[ params.dataIndex ].color2}
+                                  ]
+                              )
+                          }
+                      },
+                      label: {
+                          show: true,
+                          position: 'top',
+                          color: '#fff',
+                          fontSize: 16
+                      }
+                  }]
+              });
+          }
+        },
+        mounted() {
+          this.draw();
         }
     }
 </script>

src/components/oldStatistics/6.vue

@@ -4,111 +4,112 @@
 
 <script>
   //圆角柱状图
+  import { oldPersonOldType } from '../../api'
+
   import echarts from 'echarts'
   export default {
     name: "MzFilletColumnChart2",
     data() {
       return {
-        dataArr:[
-          { label: '独居', value: '1000' },
-          { label: '空巢', value: '3600' },
-          { label: '留守', value: '2800' },
-          { label: '特困', value: '2000' },
-          { label: '高龄', value: '3600' },
-          { label: '失能', value: '3000' },
-          { label: '重残', value: '4500' },
-          { label: '失独', value: '4200' },
-          { label: '普通', value: '3700' }
-        ],
+        dataArr:[],
         colorArr: [
           { color1: '#9db9ff', color2: '#00f' },
           { color1: '#ffe49e', color2:  '#ffb300'}
-        ]
+        ],
+        myChart: null
       }
     },
-    mounted() {
-      let myChart = this.$echarts.init(document.getElementById('myChartold6'));
-      myChart.setOption({
-        xAxis: {
-          type: 'category',
-          data: this.dataArr.map((item) => item.label),
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: 'white',
+    methods: {
+      async draw() {
+          const result = await oldPersonOldType({}, 'POST');
+          this.dataArr = result;
+
+          this.myChart = this.$echarts.init(document.getElementById('myChartold6'));
+          this.myChart.setOption({
+              xAxis: {
+                  type: 'category',
+                  data: this.dataArr.map((item) => item.label),
+                  axisTick: {
+                      show: false
+                  },
+                  axisLabel: {
+                      show: true,
+                      textStyle: {
+                          color: 'white',
 
-            },
-          },
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: {
-            show: false
-          },
-          splitLine: {
-            show: true,
-            lineStyle:{
-              color: ['#315070'],
-              width: 1,
-              type: 'solid'
-            }
-          },
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-        },
-        series: [
-          {
-            data: this.dataArr.map((item) => item.value),
-            type: 'bar',
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(11, 43, 84, 0.2)',
-              barBorderRadius: [50, 50, 50, 50]
-            },
-            barWidth: 14,
-            itemStyle: {
-              emphasis: {
-                barBorderRadius: 7
+                      },
+                  },
               },
-              normal: {
-                barBorderRadius: 7,
-                color: (params) => {
-                  return new echarts.graphic.LinearGradient(
-                    0, 0, 0, 1,
-                    [
-                      {offset: 0, color: this.colorArr[ params.dataIndex % 2 == 0 ? 0 : 1 ].color1},
-                      {offset: 1, color: this.colorArr[ params.dataIndex % 2 == 0 ? 0 : 1 ].color2}
-                    ]
-                  )
-                }
-              }
-            },
-            z: 1
-          },
-          {
-            type: 'line',
-            data: this.dataArr.map((item) => item.value),
+              yAxis: {
+                  type: 'value',
+                  axisLabel: {
+                      show: false
+                  },
+                  splitLine: {
+                      show: true,
+                      lineStyle:{
+                          color: ['#315070'],
+                          width: 1,
+                          type: 'solid'
+                      }
+                  },
+                  axisLine: {
+                      show: false
+                  },
+                  axisTick: {
+                      show: false
+                  },
+              },
+              series: [
+                  {
+                      data: this.dataArr.map((item) => item.value),
+                      type: 'bar',
+                      showBackground: true,
+                      backgroundStyle: {
+                          color: 'rgba(11, 43, 84, 0.2)',
+                          barBorderRadius: [50, 50, 50, 50]
+                      },
+                      barWidth: 14,
+                      itemStyle: {
+                          emphasis: {
+                              barBorderRadius: 7
+                          },
+                          normal: {
+                              barBorderRadius: 7,
+                              color: (params) => {
+                                  return new echarts.graphic.LinearGradient(
+                                      0, 0, 0, 1,
+                                      [
+                                          {offset: 0, color: this.colorArr[ params.dataIndex % 2 == 0 ? 0 : 1 ].color1},
+                                          {offset: 1, color: this.colorArr[ params.dataIndex % 2 == 0 ? 0 : 1 ].color2}
+                                      ]
+                                  )
+                              }
+                          }
+                      },
+                      z: 1
+                  },
+                  {
+                      type: 'line',
+                      data: this.dataArr.map((item) => item.value),
 
-            symbol: (params, item) => {
-              return item.dataIndex % 2 == 0 ? `image://${require("../../assets/oldStatistics/q1.png")}`  : `image://${require("../../assets/oldStatistics/q2.png")}` ;
-            },
-            symbolSize: [19, 19],
-            lineStyle: {
-              color: 'rgba(255, 165, 0, 1)',
-              width: 1,
-              type: 'dashed'
-            },
-            z: 2
-          }
-        ]
-      });
+                      symbol: (params, item) => {
+                          return item.dataIndex % 2 == 0 ? `image://${require("../../assets/oldStatistics/q1.png")}`  : `image://${require("../../assets/oldStatistics/q2.png")}` ;
+                      },
+                      symbolSize: [19, 19],
+                      lineStyle: {
+                          color: 'rgba(255, 165, 0, 1)',
+                          width: 1,
+                          type: 'dashed'
+                      },
+                      z: 2
+                  }
+              ]
+          });
+      }
+    },
+    mounted() {
+      this.draw();
     }
   }
 </script>

src/components/oldStatistics/8.vue

@@ -3,131 +3,142 @@
 </template>
 
 <script>
+    import { oldPersonOldIncome } from '../../api'
+
     export default {
         //老年人收入来源统计
         name: "OldPersonSourcesOfIncomeCount",
         data() {
           return {
-            dataArr: [
-              { label: '家庭经营性', value: 4700 },
-              { label: '工资性', value: 8963 },
-              { label: '转移性', value: 3756 },
-              { label: '财产性', value: 2563 },
-              { label: '其它', value: 8999 }
-            ]
+            dataArr: [],
+            myChart: null
           }
         },
+        methods: {
+          async draw() {
+              const result = await oldPersonOldIncome({}, 'POST');
+              this.dataArr = result;
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartold8'));
+              this.myChart.setOption({
+                  grid:{
+                      left:"16%",
+                      right:"5%",
+                  },
+                  xAxis: {
+                      type: 'category',
+                      boundaryGap: true,
+                      data: this.dataArr.map((item) => {
+                          return item.label;
+                      }),
+                      splitLine: {
+                          show: true,
+                          lineStyle:{
+                              color: ['#315070'],
+                              width: 1,
+                              type: 'solid'
+                          }
+                      },
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#344db0'
+                          }
+                      },
+                      axisLabel: {
+                          show: true,
+                          textStyle: {
+                              color: 'white',
+                              formatter: '{value}',
+                          },
+                          fontSize: 16
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'value',
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#5c6ab6'
+                          }
+                      },
+                      splitLine: {
+                          show: true,
+                          lineStyle:{
+                              color: ['#315070'],
+                              width: 1,
+                              type: 'solid'
+                          }
+                      },
+                      axisLabel: {
+                          show: true,
+                          textStyle: {
+                              color: 'white',
+                              formatter: '{value}',
+                          }
+                      },
+                      axisTick: {
+                          show: false
+                      },
+                  },
+                  series: [
+                      {
+                          type: 'line',
+                          smooth: true,
+                          areaStyle: {
+                              color: {
+                                  type: 'linear',
+                                  x: 0,
+                                  y: 0,
+                                  x2: 0,
+                                  y2: 1,
+                                  colorStops: [{
+                                      offset: 0, color: '#A79A84' // 0% 处的颜色
+                                  }, {
+                                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
+                                  }],
+                                  global: false // 缺省为 false
+                              }
+                          },
+                          symbol: `image://${require('../../assets/oldStatistics/y.png')}`,
+                          symbolSize: [10, 10],
+                          data: this.dataArr.map((item) => {
+                              return item.value;
+                          }),
+                          label: {
+                              show: true,
+                              formatter: '{c}',
+                              color: '#fff',
+                              fontSize: 16
+                          },
+                          itemStyle: {
+                              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                  offset: 0,
+                                  color: '#FF6C13'
+                              }, {
+                                  offset: 1,
+                                  color: '#ffea22'
+                              }]),
+                          },
+                          lineStyle: {
+                              width: 2
+                          }
+                      }
+                  ]
+              });
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
         mounted() {
-          let myChart = this.$echarts.init(document.getElementById('myChartold8'));
-          myChart.setOption({
-            grid:{
-              left:"16%",
-              right:"5%",
-            },
-            xAxis: {
-              type: 'category',
-              boundaryGap: true,
-              data: this.dataArr.map((item) => {
-                return item.label;
-              }),
-              splitLine: {
-                show: true,
-                lineStyle:{
-                  color: ['#315070'],
-                  width: 1,
-                  type: 'solid'
-                }
-              },
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: '#344db0'
-                }
-              },
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  color: 'white',
-                  formatter: '{value}',
-                },
-                fontSize: 16
-              },
-              axisTick: {
-                show: false
-              }
-            },
-            yAxis: {
-              type: 'value',
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: '#5c6ab6'
-                }
-              },
-              splitLine: {
-                show: true,
-                lineStyle:{
-                  color: ['#315070'],
-                  width: 1,
-                  type: 'solid'
-                }
-              },
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  color: 'white',
-                  formatter: '{value}',
-                }
-              },
-              axisTick: {
-                show: false
-              },
-            },
-            series: [
-              {
-                type: 'line',
-                smooth: true,
-                areaStyle: {
-                  color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                      offset: 0, color: '#A79A84' // 0% 处的颜色
-                    }, {
-                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
-                    }],
-                    global: false // 缺省为 false
-                  }
-                },
-                symbol: `image://${require('../../assets/oldStatistics/y.png')}`,
-                symbolSize: [10, 10],
-                data: this.dataArr.map((item) => {
-                  return item.value;
-                }),
-                label: {
-                  show: true,
-                  formatter: '{c}',
-                  color: '#fff',
-                  fontSize: 16
-                },
-                itemStyle: {
-                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                    offset: 0,
-                    color: '#FF6C13'
-                  }, {
-                    offset: 1,
-                    color: '#ffea22'
-                  }]),
-                },
-                lineStyle: {
-                  width: 2
-                }
-              }
-            ]
-          });
+            this.draw();
         }
     }
 </script>

src/components/oldStatistics/9.vue

@@ -3,165 +3,140 @@
 </template>
 
 <script>
+    import { oldPersonIncome } from '../../api'
+
     export default {
         //老年人可支配收入统计
         name: "OldPersonIncomeControlCount",
         data() {
-          return {
-            dataArr: [
-              { label: '5000元以下', value: 25 },
-              { label: '5000~10000元', value: 50 },
-              { label: '10000元以上', value: 25 }
-            ],
-            colorArr: [
-              { color1: '#4625FF', color2: '#6DC0FF' },
-              { color1: '#f6a314', color2: '#f4ff81' },
-              { color1: '#45ff00', color2: '#8bffbb' }
-            ]
-          }
+            return {
+                dataArr: [],
+                colorArr: [
+                    { color1: '#4625FF', color2: '#6DC0FF' },
+                    { color1: '#f6a314', color2: '#f4ff81' },
+                    { color1: '#45ff00', color2: '#8bffbb' }
+                ],
+                myChart: null
+            }
         },
-        mounted() {
-          const seriesArr = [];
-          const offset = 30;
+        methods: {
+            async draw() {
+                const result = await oldPersonIncome({}, 'POST');
+                this.dataArr = result;
 
-          for(let i = 0; i < this.dataArr.length; i++) {
-            const d = this.dataArr[i];
+                const seriesArr = [];
+                const offset = 30;
 
-            // seriesArr.push({
-            //   type: 'pie',
-            //   radius: [0, 50],
-            //   center: [`${50 - offset + i * offset}%`, '50%'],
-            //   labelLine: {
-            //     show: false
-            //   },
-            //   data: [{
-            //     value: d.value,
-            //     // label: {
-            //     //   show: true,
-            //     //   position: 'center',
-            //     //   formatter:() => {
-            //     //     return `${d.value}%`
-            //     //   },
-            //     //   fontSize: '32',
-            //     //   fontWeight: 'bold',
-            //     //   color: '#fff'
-            //     // },
-            //     itemStyle: {
-            //       color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-            //         offset: 0,
-            //         color: this.colorArr[i].color1
-            //       }, {
-            //         offset: 1,
-            //         color: this.colorArr[i].color2
-            //       }])
-            //     }
-            //   }],
-            //   z: 2
-            // });
+                for(let i = 0; i < this.dataArr.length; i++) {
+                    const d = this.dataArr[i];
 
-            seriesArr.push({
-              type: 'pictorialBar',
-              symbol: i == 0 ? `image://${require("../../assets/oldStatistics/37.png")}` : ( i == 1 ? `image://${require("../../assets/oldStatistics/38.png")}` : `image://${require("../../assets/oldStatistics/39.png")}` ),
-              symbolSize: [72, 72],
-              data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -137 : ( i == 1 ? 0 : 137 )}`, -70] } ],
-              label: {
-                normal: {
-                  show: true,
-                  position: "top",
-                  offset: [i == 0 ? -135 : ( i == 1 ? 0 : 135 ), i == 0 ? 130 : ( i == 1 ? -30 : 130 )],
-                  textStyle: {
-                    fontSize: 20,
-                    color: '#fff'
-                  },
-                  formatter: `${d.label}`
-                }
-              },
-              z: 2
-            });
+                    seriesArr.push({
+                        type: 'pictorialBar',
+                        symbol: i == 0 ? `image://${require("../../assets/oldStatistics/37.png")}` : ( i == 1 ? `image://${require("../../assets/oldStatistics/38.png")}` : `image://${require("../../assets/oldStatistics/39.png")}` ),
+                        symbolSize: [72, 72],
+                        data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -137 : ( i == 1 ? 0 : 137 )}`, -70] } ],
+                        label: {
+                            normal: {
+                                show: true,
+                                position: "top",
+                                offset: [i == 0 ? -135 : ( i == 1 ? 0 : 135 ), i == 0 ? 130 : ( i == 1 ? -30 : 130 )],
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: '#fff'
+                                },
+                                formatter: `${d.lable}`
+                            }
+                        },
+                        z: 2
+                    });
 
 
-            seriesArr.push({
-              type: 'pie',
-              radius: [58, 78],
-              startAngle: '180',
-              clockwise: !(i % 2),
-              center: [`${50 - 29.5 + i * offset}%`, '46%'],
-              labelLine: {
-                show: false
-              },
-              data: [{
-                value: d.value / 2,
-                label: {
-                  show: true,
-                  position: 'center',
-                  formatter:() => {
-                    return `${d.value}%`
-                  },
-                  fontSize: '26',
-                  fontWeight: 'bold',
-                  color: '#fff'
-                },
-                itemStyle: {
-                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                    offset: 0,
-                    color: this.colorArr[i].color1
-                  }, {
-                    offset: 1,
-                    color: this.colorArr[i].color2
-                  }])
-                }
-              },
-              {
-                value: 50 - (d.value * 50 / 100).toFixed(1),
-                itemStyle: {
-                  color: 'rgba(184, 255, 205, 0.1)'
+                    seriesArr.push({
+                        type: 'pie',
+                        radius: [58, 78],
+                        startAngle: '180',
+                        clockwise: !(i % 2),
+                        center: [`${50 - 29.5 + i * offset}%`, '46%'],
+                        labelLine: {
+                            show: false
+                        },
+                        data: [{
+                            value: parseInt(d.value) / 2,
+                            label: {
+                                show: true,
+                                position: 'center',
+                                formatter:() => {
+                                    return `${d.value}`
+                                },
+                                fontSize: '16',
+                                fontWeight: 'bold',
+                                color: '#fff'
+                            },
+                            itemStyle: {
+                                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                    offset: 0,
+                                    color: this.colorArr[i].color1
+                                }, {
+                                    offset: 1,
+                                    color: this.colorArr[i].color2
+                                }])
+                            }
+                        },
+                        {
+                            value: 50 - (parseInt(d.value) * 50 / 100).toFixed(1),
+                            itemStyle: {
+                                color: 'rgba(184, 255, 205, 0.1)'
+                            }
+                        },
+                        {
+                            value: 50,
+                            itemStyle: {
+                                color: "transparent"
+                            }
+                        }],
+                        z: 2
+                    });
                 }
-              },
-              {
-                value: 50,
-                itemStyle: {
-                  color: "transparent"
-                }
-              }],
-              z: 2
-            });
-          }
 
-          let myChart = this.$echarts.init(document.getElementById('myChartold9'));
-          myChart.setOption({
-            xAxis: {
-              type: 'category',
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              }
-            },
-            yAxis: {
-              type: 'value',
-              max: 200,
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              }
-            },
-            series: seriesArr
-          });
+                this.myChart = this.$echarts.init(document.getElementById('myChartold9'));
+                this.myChart.setOption({
+                    xAxis: {
+                        type: 'category',
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        max: 200,
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        }
+                    },
+                    series: seriesArr
+                });
+            }
+        },
+        mounted() {
+            this.draw();
         }
     }
 </script>

src/pages/Home.vue

@@ -11,7 +11,7 @@
                     </router-link>
                 </div>
                 <div class="p1chart bj">
-                    <com1 ></com1>
+                    <com1 ref="c1"></com1>
                 </div>
             </div>
             <!-- 左二 -->
@@ -173,8 +173,8 @@
     import com5 from "../components/index/5.vue";
     import vueSeamlessScroll from "vue-seamless-scroll";
     import {
-        fiveNum,
-        mapsec,
+        // fiveNum,
+        // mapsec,
     } from "../api";
 
     export default {
@@ -342,7 +342,7 @@
             this.timer = setInterval(() => {
                 this.ssdj();
             }, 60000);
-            this.fiveNum();
+            // this.fiveNum();
         },
         methods: {
             //  右边第一个  地区探访数据 按钮
@@ -373,28 +373,28 @@
                 this.isleftbtnTure = false;
             },
 
-            // 地图上5个统计
-            async fiveNum() {
-                const response = await fiveNum();
-                this.maptopResult = response;
-                this.circledata0 = Number(((this.maptopResult.ljfknum / this.maptopResult.sqjenum) * 100).toFixed(0));
-            },
-            async mapsec() {
-                const response = await mapsec();
-                // console.log(response);
-                let data = [];
-                for (let arr in response) {
-                    response[arr].forEach((item, index) => {
-                        data.push({
-                            ...item,
-                            value: this.mapDide[arr][index].concat(parseInt(item.intllmoney)),
-                            name: item.company_name
-                        });
-                    });
-                }
-                this.mapDataArr = data;
-                // }
-            },
+            // // 地图上5个统计
+            // async fiveNum() {
+            //     const response = await fiveNum();
+            //     this.maptopResult = response;
+            //     this.circledata0 = Number(((this.maptopResult.ljfknum / this.maptopResult.sqjenum) * 100).toFixed(0));
+            // },
+            // async mapsec() {
+            //     const response = await mapsec();
+            //     // console.log(response);
+            //     let data = [];
+            //     for (let arr in response) {
+            //         response[arr].forEach((item, index) => {
+            //             data.push({
+            //                 ...item,
+            //                 value: this.mapDide[arr][index].concat(parseInt(item.intllmoney)),
+            //                 name: item.company_name
+            //             });
+            //         });
+            //     }
+            //     this.mapDataArr = data;
+            //     // }
+            // },
 
             scrollTextisColor: function (i) {
                 let inde = i % 3;

src/pages/PatrolmanStatistics.vue

@@ -166,7 +166,7 @@
                 dept1: '',
                 dept2: '',
                 dept3: '',
-                dept4: '',   
+                dept4: '',
                 dept5: '',
                 isZhankai: false,  //是够展开和收起
                 listData: [],
@@ -180,6 +180,29 @@
             const result = await oldPersonSelectDeptValue({}, 'POST');
             this.score1 = result.infoValue;
             this.score2 = result.totalValue;
+
+            const deptArray = storageUtil.read('dept-array');
+            if(deptArray != null && deptArray != '' && deptArray.length > 0) {
+                for(let i = 0; i < deptArray.length; i++) {
+                    this['dept' + (i + 1)] = deptArray[i];
+                }
+            }
+
+            if(this.dept1 != '') {
+                this.citys = await this.findDept({ fid: this.dept1 });
+            }
+
+            if(this.dept2 != '') {
+                this.areas = await this.findDept({ fid: this.dept2 });
+            }
+
+            if(this.dept3 != '') {
+                this.countys = await this.findDept({ fid: this.dept3 });
+            }
+
+            if(this.dept4 != '') {
+                this.villages = await this.findDept({ fid: this.dept4 });
+            }
         },
         methods: {
             //获取地区
@@ -215,29 +238,27 @@
                 this.$router.push({ path: '/' });
             },
             zhankai() {
-                console.log("111")
                 this.isZhankai = !this.isZhankai
             },
             guanbi() {
-                console.log("222")
                 this.isZhankai = !this.isZhankai
             },
-            queren() {
+            async queren() {
                 let arr = new Array();
                 if(this.dept1 != '') {
                     arr.push(this.dept1);
                 }
                 if(this.dept2 != '') {
-                    arr.push(this.dept1);
+                    arr.push(this.dept2);
                 }
                 if(this.dept3 != '') {
-                    arr.push(this.dept1);
+                    arr.push(this.dept3);
                 }
                 if(this.dept4 != '') {
-                    arr.push(this.dept1);
+                    arr.push(this.dept4);
                 }
                 if(this.dept5 != '') {
-                    arr.push(this.dept1);
+                    arr.push(this.dept5);
                 }
                 storageUtil.save('dept-array', arr);
 
@@ -249,6 +270,11 @@
                 this.$refs.c7.draw();
                 this.$refs.c8.draw();
                 this.$refs.c9.draw();
+
+                this.listData = await oldPersonSelectUserValue({}, 'POST');
+                const result = await oldPersonSelectDeptValue({}, 'POST');
+                this.score1 = result.infoValue;
+                this.score2 = result.totalValue;
             },
             // 滚动颜色
             scrollTextisColor: function (i) {

src/pages/oldStatistics.vue

@@ -5,7 +5,7 @@
         <div class="return-btn" @click="goHome">返回首页</div>
         <div class="select-div">
             <span class="address-title">省：</span>
-            <el-select class="input" v-model="dept1" clearable :popper-append-to-body="false" placeholder="请选择">
+            <el-select class="input" v-model="dept1" clearable :popper-append-to-body="false" placeholder="请选择" @change="provinceChange">
                 <el-option
                         v-for="item in provinces"
                         :key="item.value"
@@ -15,7 +15,7 @@
                 </el-option>
             </el-select>
             <span class="address-title">地市：</span>
-            <el-select class="input" v-model="dept2" clearable :popper-append-to-body="false" placeholder="请选择">
+            <el-select class="input" v-model="dept2" clearable :popper-append-to-body="false" placeholder="请选择" @change="cityChange">
                 <el-option
                         v-for="item in citys"
                         :key="item.value"
@@ -25,7 +25,7 @@
                 </el-option>
             </el-select>
             <span class="address-title">县(市区)：</span>
-            <el-select class="input1" v-model="dept3" clearable :popper-append-to-body="false" placeholder="请选择">
+            <el-select class="input1" v-model="dept3" clearable :popper-append-to-body="false" placeholder="请选择" @change="areaChange">
                 <el-option
                         v-for="item in areas"
                         :key="item.value"
@@ -38,8 +38,7 @@
             <span v-else class="bj-shouqi" @click="guanbi"></span>
             <span class="bj-qeuren" @click="queren"></span>
             <span v-if="isZhankai" class="address-title">乡镇(街道)：</span>
-            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept4"
-                       placeholder="请选择">
+            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept4" placeholder="请选择" @change="countyChange">
                 <el-option
                         v-for="item in countys"
                         :key="item.value"
@@ -49,8 +48,7 @@
                 </el-option>
             </el-select>
             <span v-if="isZhankai" class="address-title">村(居)民委员会：</span>
-            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept5"
-                       placeholder="请选择">
+            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept5" placeholder="请选择">
                 <el-option
                         v-for="item in villages"
                         :key="item.value"
@@ -64,26 +62,26 @@
             <!--  图1     -->
             <div class="tu-one">
                 <p class="title1" style="padding-top: 9%">老年人年龄分布统计</p>
-                <com1></com1>
+                <com1 ref="c1"></com1>
             </div>
             <div class="tu-two">
                 <p class="title1">老年人性别分布统计</p>
-                <com2></com2>
+                <com2 ref="c2"></com2>
             </div>
             <div class="tu-three">
                 <p class="title1">老年人关爱服务统计</p>
             </div>
             <div class="tu-four">
                 <p class="title1">老年人能力评估统计</p>
-                <com4></com4>
+                <com4 ref="c4"></com4>
             </div>
             <div class="tu-five">
                 <p class="title1">老年人健康状况统计</p>
-                <com5></com5>
+                <com5 ref="c5"></com5>
             </div>
             <div class="tu-six">
                 <p class="title1">老年人类别分布统计</p>
-                <com6></com6>
+                <com6 ref="c6"></com6>
             </div>
         </div>
         <div class="foot">
@@ -93,25 +91,23 @@
             </div>
             <div class="tu-eight">
                 <p class="title1">老年人收入来源统计</p>
-                <com8></com8>
+                <com8 ref="c8"></com8>
             </div>
             <div class="tu-nine">
                 <p class="title1">老年人可支配收入统计</p>
-                <com9></com9>
+                <com9 ref="c9"></com9>
             </div>
             <div class="tu-ten">
                 <p class="title1">老年人生活经济状况统计</p>
-                <com10></com10>
+                <com10 ref="c10"></com10>
             </div>
         </div>
 
     </div>
 </template>
 <script>
-    // import jlMap from "../components/index/jlMap.vue";
     import com1 from "../components/oldStatistics/1.vue";
     import com2 from "../components/oldStatistics/2.vue";
-    // import com3 from "../components/index/3.vue";
     import com4 from "../components/oldStatistics/4.vue";
     import com5 from "../components/oldStatistics/5.vue";
     import com6 from "../components/oldStatistics/6.vue";
@@ -119,70 +115,20 @@
     import com8 from "../components/oldStatistics/8.vue";
     import com9 from "../components/oldStatistics/9.vue";
     import com10 from "../components/oldStatistics/10.vue";
-    // import com6 from "../components/oldStatistics/6.vue";
-    // import vueSeamlessScroll from "vue-seamless-scroll";
-    // import moment from "moment";
 
-    import {} from "../api";
+    import storageUtil from '../util/storageUtil'
+    import { findDept } from '../api'
 
     export default {
         name: "Home",
         components: {com1,com2,com4,com5,com6,com7,com8,com9,com10},
         data() {
             return {
-                provinces: [
-                    {
-                        value: '1',
-                        label: '吉林省',
-                    }, {
-                        value: '2',
-                        label: '辽宁省'
-                    }
-                ],   // 省份
-                citys: [
-                    {
-                        value: '3',
-                        label: '长春市',
-                    }, {
-                        value: '4',
-                        label: '四平市'
-                    }, {
-                        value: '5',
-                        label: '辽源市'
-                    }, {
-                        value: '6',
-                        label: '白城市'
-                    }], // 市
-                areas: [
-                    {
-                        value: '7',
-                        label: '宽城区'
-                    },
-                    {
-                        value: '8',
-                        label: '朝阳区'
-                    },
-                ],   // 县
-                countys: [
-                    {
-                        value: '9',
-                        label: '南广街道办事处'
-                    },
-                    {
-                        value: '10',
-                        label: '西广街道办事处'
-                    },
-                ],  // 乡
-                villages: [
-                    {
-                        value: '11',
-                        label: '东三条社区'
-                    },
-                    {
-                        value: '12',
-                        label: '西三条社区'
-                    },
-                ],  // 村
+                provinces: [],   // 省份
+                citys: [], // 市
+                areas: [],   // 县
+                countys: [],  // 乡
+                villages: [],  // 村
                 dept1: '',
                 dept2: '',
                 dept3: '',
@@ -195,14 +141,65 @@
                 dataArr2: [],
             };
         },
-        mounted() {
+        async mounted() {
+            this.provinces = await this.findDept({'level': '1'});
+
+            const deptArray = storageUtil.read('dept-array');
+            if(deptArray != null && deptArray != '' && deptArray.length > 0) {
+                for(let i = 0; i < deptArray.length; i++) {
+                    this['dept' + (i + 1)] = deptArray[i];
+                }
+            }
+
+            if(this.dept1 != '') {
+                this.citys = await this.findDept({ fid: this.dept1 });
+            }
+
+            if(this.dept2 != '') {
+                this.areas = await this.findDept({ fid: this.dept2 });
+            }
+
+            if(this.dept3 != '') {
+                this.countys = await this.findDept({ fid: this.dept3 });
+            }
+
+            if(this.dept4 != '') {
+                this.villages = await this.findDept({ fid: this.dept4 });
+            }
         },
         methods: {
+            //获取地区
+            async findDept(data) {
+                const result = await findDept(data, 'POST');
+                return result;
+            },
+            async provinceChange(val) {
+                this.citys = await this.findDept({ fid: val });
+                this.dept2 = '';
+                this.dept3 = '';
+                this.dept4 = '';
+                this.dept5 = '';
+            },
+            async cityChange(val) {
+                this.areas = await this.findDept({ fid: val });
+                this.dept3 = '';
+                this.dept4 = '';
+                this.dept5 = '';
+            },
+            async areaChange(val) {
+                this.countys = await this.findDept({ fid: val });
+                this.dept4 = '';
+                this.dept5 = '';
+            },
+            async countyChange(val) {
+                this.villages = await this.findDept({ fid: val });
+                this.dept5 = '';
+            },
+
             //糊掉首页
             goHome() {
-                this.$router.push({
-                    path: '/'
-                });
+                storageUtil.save('dept-array', '');
+                this.$router.push({ path: '/' });
             },
             // 省市选择框 展开
             zhankai() {
@@ -214,15 +211,34 @@
                 this.isZhankai = !this.isZhankai
             },
             // 省市选择框 确认
-            queren() {
-                console.log(this.dept1)
-                console.log(this.dept2)
-                console.log(this.dept3)
-                console.log(this.dept4)
-                console.log(this.dept5)
-                console.log("确定了")
-            },
-
+            async queren() {
+                let arr = new Array();
+                if(this.dept1 != '') {
+                    arr.push(this.dept1);
+                }
+                if(this.dept2 != '') {
+                    arr.push(this.dept2);
+                }
+                if(this.dept3 != '') {
+                    arr.push(this.dept3);
+                }
+                if(this.dept4 != '') {
+                    arr.push(this.dept4);
+                }
+                if(this.dept5 != '') {
+                    arr.push(this.dept5);
+                }
+                storageUtil.save('dept-array', arr);
+
+                this.$refs.c1.draw();
+                this.$refs.c2.draw();
+                this.$refs.c4.draw();
+                this.$refs.c5.draw();
+                this.$refs.c6.draw();
+                this.$refs.c8.draw();
+                this.$refs.c9.draw();
+                this.$refs.c10.draw();
+            }
         },
         computed: {}
     };
@@ -269,7 +285,6 @@
 
     }
 
-
     .home {
         height: 100%;
         position: fixed;
@@ -395,9 +410,6 @@
 
         font-weight: 500;
         color: rgba(255, 255, 255, 1);
-        /*position: absolute;*/
-        /*top: 8%;*/
-        /*left: 36%;*/
     }