Merge branch 'master' of http://git.cc-lotus.info/roose/MZbigScreen

src/api/ajax.js

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

src/api/index.js

@@ -1,5 +1,5 @@
 import ajax from './ajax'
-const BASE_URL = 'http://10.16.4.12'
+const BASE_URL = 'http://10.16.4.8'
 
 /**
  * 获取地区
@@ -10,3 +10,49 @@ export const findDept = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/
  * 巡防员信息统计  --->   老年人健康状况
  */
 export const oldPersonHealth = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/health`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   老年人精神状态
+ */
+export const oldPersonMind = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/mind`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   老年人安全情况
+ */
+export const oldPersonSecurity = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/security`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   老年人卫生环境
+ */
+export const oldPersonHygiene = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/hygiene`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   老年人居住环境
+ */
+export const oldPersonLive = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/live`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   巡访员性别分布统计
+ */
+export const oldPersonSelectUserBySex = (params, requestMethod) => ajax(`${BASE_URL}/chart/user/selectUserBySex`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   巡访员认证数据统计
+ */
+export const oldPersonSelectAuthAndLook = (params, requestMethod) => ajax(`${BASE_URL}/chart/user/selectAuthAndLook`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   巡访员积分排行TOP10
+ */
+export const oldPersonSelectUserValue = (params, requestMethod) => ajax(`${BASE_URL}/chart/value/selectUserValue`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   巡访员职务分布统计
+ */
+export const oldPersonSelectByJob = (params, requestMethod) => ajax(`${BASE_URL}/chart/user/selectByJob`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   地区总积分
+ */
+export const oldPersonSelectDeptValue = (params, requestMethod) => ajax(`${BASE_URL}/chart/value/selectDeptValue`, params, requestMethod);
+

src/components/PatrolmanStatistics/1.vue

@@ -3,144 +3,152 @@
 </template>
 
 <script>
+    import { oldPersonSelectUserBySex } from '../../api'
     export default {
         //巡防员性别分布统计
         name: "PatrolmanSexCount",
         data() {
             return {
-                dataArr: [
-                    {label: '男性巡防员', value: 9562, percent: '60%'},
-                    {label: '女性巡防员', value: 6386, percent: '40%'}
-                ],
-                colorArr: ['rgba(0, 227,255, 1)', 'rgba(253, 200, 1, 1)']
+                dataArr: [],
+                colorArr: ['rgba(0, 227,255, 1)', 'rgba(253, 200, 1, 1)'],
+                myChart: null
             }
         },
         methods: {
-            usedInPar(str){
-                console.log(str);
-            }
-        },
-        mounted() {
-            const seriesArr = [];
-            const titleArr = [];
+            async draw() {
+                const result = await oldPersonSelectUserBySex({}, 'POST');
+                this.dataArr = result;
 
-            for (let i = 0; i < this.dataArr.length; i++) {
-                const d = this.dataArr[i];
-
-                titleArr.push({
-                    text: d.label,
-                    left: "12%",
-                    top: `${i == 0 ? 13 : 55}%`,
-                    textAlign: "center",
-                    textStyle: {
-                        fontSize: "16",
-                        fontWeight: 'normal',
-                        color: "#fff"
-                    }
-                });
-
-                titleArr.push({
-                    text: d.percent,
-                    left: "68%",
-                    top: `${i == 0 ? 13 : 55}%`,
-                    textAlign: "center",
-                    textStyle: {
-                        fontSize: "20",
-                        fontWeight: 'normal',
-                        color: this.colorArr[i]
-                    }
-                });
+                const seriesArr = [];
+                const titleArr = [];
 
-                const borderArr = new Array(this.dataArr.length).fill({});
-                borderArr[i] = {value: 317, symbolPosition: 'start'};
+                for (let i = 0; i < this.dataArr.length; i++) {
+                    const d = this.dataArr[i];
 
-                seriesArr.push({
-                    type: 'pictorialBar',
-                    symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
-                    symbolSize: [317, 47],
-                    symbolOffset: [0, 0],
-                    data: borderArr,
-                    label: {
-                        show: true,
-                        position: 'right',
-                        offset: [-120, 0],
-                        color: this.colorArr[this.colorArr.length - 1 - i],
-                        fontSize: 20,
-                        fontWeight: 'bold',
-                        formatter: () => {
-                            return `${d.value}人`;
+                    titleArr.push({
+                        text: d.label,
+                        left: "12%",
+                        top: `${i == 0 ? 13 : 55}%`,
+                        textAlign: "center",
+                        textStyle: {
+                            fontSize: "16",
+                            fontWeight: 'normal',
+                            color: "#fff"
                         }
-                    },
-                    z: 1
-                });
-
-                const step = (Math.floor(parseInt(d.percent) / 10) < 1 ? 1 : Math.floor(parseInt(d.percent) / 10));
-                for (let j = 0; j < 10; j++) {
-                    const blockArr = new Array(this.dataArr.length).fill({});
-                    blockArr[this.dataArr.length - 1 - i] = {value: 317, symbolPosition: 'start'};
+                    });
 
-                    let symbolImage = `image://${require('../../assets/PatrolmanStatistics/sex-default.png')}`;
-                    if (j < step) {
-                        if (i == 0) {
-                            symbolImage = `image://${require('../../assets/PatrolmanStatistics/sex-male.png')}`;
-                        } else {
-                            symbolImage = `image://${require('../../assets/PatrolmanStatistics/sex-female.png')}`;
+                    titleArr.push({
+                        text: `${d.percent}%`,
+                        left: "68%",
+                        top: `${i == 0 ? 13 : 55}%`,
+                        textAlign: "center",
+                        textStyle: {
+                            fontSize: "20",
+                            fontWeight: 'normal',
+                            color: this.colorArr[i]
                         }
-                    }
+                    });
+
+                    const borderArr = new Array(this.dataArr.length).fill({});
+                    borderArr[i] = {value: 317, symbolPosition: 'start'};
 
                     seriesArr.push({
                         type: 'pictorialBar',
-                        symbol: symbolImage,
-                        symbolSize: [19, 37],
-                        symbolOffset: [10 + j * 31, 0],
-                        data: blockArr,
-                        z: 2
+                        symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
+                        symbolSize: [317, 47],
+                        symbolOffset: [0, 0],
+                        data: borderArr,
+                        label: {
+                            show: true,
+                            position: 'right',
+                            offset: [-120, 0],
+                            color: this.colorArr[this.colorArr.length - 1 - i],
+                            fontSize: 20,
+                            fontWeight: 'bold',
+                            formatter: () => {
+                                return `${d.value}人`;
+                            }
+                        },
+                        z: 1
                     });
-                }
 
-            }
+                    const step = (Math.floor(parseInt(d.percent) / 10) < 1 ? 1 : Math.floor(parseInt(d.percent) / 10));
+                    for (let j = 0; j < 10; j++) {
+                        const blockArr = new Array(this.dataArr.length).fill({});
+                        blockArr[this.dataArr.length - 1 - i] = {value: 317, symbolPosition: 'start'};
 
-            let myChart = this.$echarts.init(document.getElementById('myChart'));
-            myChart.setOption({
-                title: titleArr,
-                grid: {
-                    left: "2%",
-                    right: "2%",
-                    top: "16%",
-                    bottom: "2%",
-                },
-                xAxis: {
-                    max: 300,
-                    splitLine: {
-                        show: false
-                    },
-                    axisLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        show: false
-                    },
-                    axisTick: {
-                        show: false
+                        let symbolImage = `image://${require('../../assets/PatrolmanStatistics/sex-default.png')}`;
+                        if (j < step) {
+                            if (i == 0) {
+                                symbolImage = `image://${require('../../assets/PatrolmanStatistics/sex-male.png')}`;
+                            } else {
+                                symbolImage = `image://${require('../../assets/PatrolmanStatistics/sex-female.png')}`;
+                            }
+                        }
+
+                        seriesArr.push({
+                            type: 'pictorialBar',
+                            symbol: symbolImage,
+                            symbolSize: [19, 37],
+                            symbolOffset: [10 + j * 31, 0],
+                            data: blockArr,
+                            z: 2
+                        });
                     }
-                },
-                yAxis: {
-                    type: 'category',
-                    splitLine: {
-                        show: false
+
+                }
+
+                this.myChart = this.$echarts.init(document.getElementById('myChart'));
+                this.myChart.setOption({
+                    title: titleArr,
+                    grid: {
+                        left: "2%",
+                        right: "2%",
+                        top: "16%",
+                        bottom: "2%",
                     },
-                    axisLine: {
-                        show: false
+                    xAxis: {
+                        max: 300,
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        }
                     },
-                    axisLabel: {
-                        show: false
+                    yAxis: {
+                        type: 'category',
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        }
                     },
-                    axisTick: {
-                        show: false
-                    }
-                },
-                series: seriesArr
-            });
+                    series: seriesArr
+                });
+            }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
         }
     }
 </script>

src/components/PatrolmanStatistics/2.vue

@@ -3,164 +3,182 @@
 </template>
 
 <script>
+    import { oldPersonSelectAuthAndLook } from '../../api'
+
     export default {
-        name: "PatrolmanAuthenticationCount",
+      name: "PatrolmanAuthenticationCount",
       data() {
         return {
-          dataArr: [
-            { label: '党员', arr: [ { label: '认证', value: 1234 }, { label: '未认证', value: 4321 } ] },
-            { label: '群众', arr: [ { label: '认证', value: 4567 }, { label: '未认证', value: 7654 } ] }
-          ],
+          // dataArr: [
+          //   { label: '党员', arr: [ { label: '认证', value: 1234 }, { label: '未认证', value: 4321 } ] },
+          //   { label: '群众', arr: [ { label: '认证', value: 4567 }, { label: '未认证', value: 7654 } ] }
+          // ],
+          dataArr: [],
           colorArr: [
             { color1: '#FFA625', color2: '#FFD09C' },
             { color1: '#00FF0C', color2: '#B7FFE2' }
-          ]
+          ],
+          myChart: null
         }
       },
-      mounted() {
-        const seriesArr = [];
+      methods: {
+        async draw() {
+            const result = await oldPersonSelectAuthAndLook({}, 'POST');
+            this.dataArr = result;
+
+            const seriesArr = [];
 
-        let maxValue = 0;
-        for(let i = 0; i < this.dataArr.length; i++) {
-          const d = this.dataArr[i];
-          const arr = d.arr;
-          for(let j = 0; j < arr.length; j++) {
-            if(maxValue < arr[j].value) {
-              maxValue = arr[j].value;
+            let maxValue = 0;
+            for(let i = 0; i < this.dataArr.length; i++) {
+                const d = this.dataArr[i];
+                const arr = d.arr;
+                for(let j = 0; j < arr.length; j++) {
+                    if(maxValue < arr[j].value) {
+                        maxValue = arr[j].value;
+                    }
+                }
             }
-          }
-        }
 
-        const labelArr = this.dataArr[0].arr.map((item) => item.label).reverse();
+            const labelArr = this.dataArr[0].arr.map((item) => item.label).reverse();
 
-        for(let i = 0; i < this.dataArr.length; i++) {
-          const d = this.dataArr[i];
-          console.log(d.label)
-          seriesArr.push({
-            name: d.label,
-            type: 'bar',
-            barWidth: '20%',
-            data: [
-              {
-                value: d.arr[1].value,
-                itemStyle: {
-                  normal: {
-                    color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                      offset: 0,
-                      color: this.colorArr[i].color1
-                    }, {
-                      offset: 1,
-                      color: this.colorArr[i].color2
-                    }]),
-                    barBorderRadius: [0, 50, 50, 0]
-                  }
-                },
-                label: {
-                  show: true,
-                  position: 'right',
-                  color: this.colorArr[i].color1,
-                  fontSize: 20
-                },
-              },
-              {
-                value: d.arr[0].value,
-                itemStyle: {
-                  normal: {
-                    color:  new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                      offset: 0,
-                      color: this.colorArr[i].color1
-                    }, {
-                      offset: 1,
-                      color: this.colorArr[i].color2
-                    }]),
-                    barBorderRadius: [0, 50, 50, 0]
-                  }
-                },
-                label: {
-                  show: true,
-                  position: 'right',
-                  color: this.colorArr[i].color1,
-                  fontSize: 20
-                },
-              }
-            ]
-          });
+            for(let i = 0; i < this.dataArr.length; i++) {
+                const d = this.dataArr[i];
+                console.log(d.label)
+                seriesArr.push({
+                    name: d.label,
+                    type: 'bar',
+                    barWidth: '20%',
+                    data: [
+                        {
+                            value: d.arr[1].value,
+                            itemStyle: {
+                                normal: {
+                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                        offset: 0,
+                                        color: this.colorArr[i].color1
+                                    }, {
+                                        offset: 1,
+                                        color: this.colorArr[i].color2
+                                    }]),
+                                    barBorderRadius: [0, 50, 50, 0]
+                                }
+                            },
+                            label: {
+                                show: true,
+                                position: 'right',
+                                color: this.colorArr[i].color1,
+                                fontSize: 20
+                            },
+                        },
+                        {
+                            value: d.arr[0].value,
+                            itemStyle: {
+                                normal: {
+                                    color:  new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                        offset: 0,
+                                        color: this.colorArr[i].color1
+                                    }, {
+                                        offset: 1,
+                                        color: this.colorArr[i].color2
+                                    }]),
+                                    barBorderRadius: [0, 50, 50, 0]
+                                }
+                            },
+                            label: {
+                                show: true,
+                                position: 'right',
+                                color: this.colorArr[i].color1,
+                                fontSize: 20
+                            },
+                        }
+                    ]
+                });
 
-          const kkArr = new Array(this.dataArr.length).fill({});
-          kkArr[i] = { value: 100, symbolPosition: 'start' };
+                const kkArr = new Array(this.dataArr.length).fill({});
+                kkArr[i] = { value: 100, symbolPosition: 'start' };
 
-          seriesArr.push({
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/PatrolmanStatistics/label.png')}`,
-            symbolSize: [16, 50],
-            symbolOffset: [-20, 0],
-            data: kkArr,
-            label: {
-              show: true,
-              position: 'left',
-              offset: [-30, 0],
-              distance: 0,
-              color: '#fff',
-              fontSize: 16,
-              formatter: `${ labelArr[i] }`
-            },
-            z: 10
-          });
-        }
-        let myChart = this.$echarts.init(document.getElementById('ww'));
-        myChart.setOption({
-          color: [this.colorArr[0].color1, this.colorArr[0].color1, this.colorArr[1].color1],
-          // legend: {
-          //   data: ["党员", "群众"],
-          //   left: 'right',
-          //   textStyle: {
-          //     color: "#fff"
-          //   }
-          // },
-          grid: {
-            left: '20%',
-            right: '15%',
-            bottom: '5%',
-            height: '80%',
-            containLabel: true
-          },
-          xAxis: [
-            {
-              type: 'value',
-              max: maxValue,
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              splitLine: {
-                show: false
-              }
-            }
-          ],
-          yAxis: [
-            {
-              type: 'category',
-              nameTextStyle: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              splitLine: {
-                show: false
-              }
+                seriesArr.push({
+                    type: 'pictorialBar',
+                    symbol: `image://${require('../../assets/PatrolmanStatistics/label.png')}`,
+                    symbolSize: [16, 50],
+                    symbolOffset: [-20, 0],
+                    data: kkArr,
+                    label: {
+                        show: true,
+                        position: 'left',
+                        offset: [-30, 0],
+                        distance: 0,
+                        color: '#fff',
+                        fontSize: 16,
+                        formatter: `${ labelArr[i] }`
+                    },
+                    z: 10
+                });
             }
-          ],
-          series: seriesArr
-        });
+            this.myChart = this.$echarts.init(document.getElementById('ww'));
+            this.myChart.setOption({
+                color: [this.colorArr[0].color1, this.colorArr[0].color1, this.colorArr[1].color1],
+                // legend: {
+                //   data: ["党员", "群众"],
+                //   left: 'right',
+                //   textStyle: {
+                //     color: "#fff"
+                //   }
+                // },
+                grid: {
+                    left: '20%',
+                    right: '15%',
+                    bottom: '5%',
+                    height: '80%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'value',
+                        max: maxValue,
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: false
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'category',
+                        nameTextStyle: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: false
+                        }
+                    }
+                ],
+                series: seriesArr
+            });
+        }
+      },
+      watch: {
+          data() {
+              this.myChart.destroy();
+              this.draw();
+          }
+      },
+      mounted() {
+          this.draw();
       }
     }
 </script>

src/components/PatrolmanStatistics/3.vue

@@ -3,18 +3,14 @@
 </template>
 
 <script>
+    import { oldPersonSelectByJob } from '../../api'
     import 'echarts-liquidfill'
 
     export default {
         name: "PatrolmanJobDistributionCount",
         data() {
           return {
-            dataArr: [
-              { label: '社区工作人员', value: '5%' },
-              { label: '村工作人员', value: '25%' },
-              { label: '民政工作人员', value: '35%' },
-              { label: '其他工作人员', value: '35%' }
-            ],
+            dataArr: [],
             colorArr: [
               { color1: '#ff8d00', color2: '#FFF43F' },
               { color1: '#5fff06', color2: '#B4FF9F' },
@@ -23,97 +19,113 @@
             ]
           }
         },
-        mounted() {
-          const seriesArr = [];
-          const titleArr = [];
+        methods: {
+          async draw() {
+              const result = await oldPersonSelectByJob({}, 'POST');
+              this.dataArr = result;
 
-          for(let i = 0; i < this.dataArr.length; i++) {
-            const d = this.dataArr[i];
+              console.log(JSON.stringify(result))
 
-            seriesArr.push({
-              type: 'liquidFill',
-              data: [`${(parseInt(d.value) / 100).toFixed(2)}`],
-              radius: '30%',
-              center: [`${ 12.5 + i * 25 }%`, `50%`],
-              backgroundStyle: {
-                borderColor: this.colorArr[i].color1
-              },
-              outline: {
-                show: false
-              },
-              waveAnimation: false, // 禁止左右波动
-              label: {
-                normal: {
-                  position: ['50%', '35%'],
-                  textStyle: {
-                    fontSize: 20,
-                    color: this.colorArr[i].color1
-                  },
-                  formatter: `${ d.value }`
-                }
-              },
-              itemStyle: {
-                normal: {
-                  color: new this.$echarts.graphic.LinearGradient(
-                    0, 0, 0, 1,
-                    [
-                      {offset: 0, color: this.colorArr[i].color1},
-                      {offset: 1, color: this.colorArr[i].color2}
-                    ]
-                  )
-                }
-              }
-            });
+              const seriesArr = [];
+              const titleArr = [];
 
-            titleArr.push({
-              text: d.label,
-              left: `${ 12.5 + i * 25 }%`,
-              top: `70%`,
-              textAlign: "center",
-              textStyle: {
-                fontSize: "16",
-                fontWeight: 'normal',
-                color: '#fff'
-              }
-            });
-          }
+              for(let i = 0; i < this.dataArr.length; i++) {
+                  const d = this.dataArr[i];
 
-          let myChart = this.$echarts.init(document.getElementById('qwe'));
-          myChart.setOption({
-            title: titleArr,
-            xAxis: {
-              type: 'value',
-              max: 100,
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              }
-            },
-            yAxis: {
-              type: 'category',
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              axisTick: {
-                show: false
+                  seriesArr.push({
+                      type: 'liquidFill',
+                      data: [`${(parseInt(d.value) / 100).toFixed(2)}`],
+                      radius: '40%',
+                      center: [`${ 12.5 + i * 25 }%`, `40%`],
+                      backgroundStyle: {
+                          borderColor: this.colorArr[i].color1
+                      },
+                      outline: {
+                          show: false
+                      },
+                      waveAnimation: false, // 禁止左右波动
+                      label: {
+                          normal: {
+                              position: ['50%', '35%'],
+                              textStyle: {
+                                  fontSize: 20,
+                                  color: this.colorArr[i].color1
+                              },
+                              formatter: `${ d.value }`
+                          }
+                      },
+                      itemStyle: {
+                          normal: {
+                              color: new this.$echarts.graphic.LinearGradient(
+                                  0, 0, 0, 1,
+                                  [
+                                      {offset: 0, color: this.colorArr[i].color1},
+                                      {offset: 1, color: this.colorArr[i].color2}
+                                  ]
+                              )
+                          }
+                      }
+                  });
+
+                  titleArr.push({
+                      text: d.label,
+                      left: `${ 12.5 + i * 25 }%`,
+                      top: `70%`,
+                      textAlign: "center",
+                      textStyle: {
+                          fontSize: "16",
+                          fontWeight: 'normal',
+                          color: '#fff'
+                      }
+                  });
               }
-            },
-            series: seriesArr
-          });
+
+              let myChart = this.$echarts.init(document.getElementById('qwe'));
+              myChart.setOption({
+                  title: titleArr,
+                  xAxis: {
+                      type: 'value',
+                      max: 100,
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: false
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'category',
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: false
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  series: seriesArr
+              });
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
         }
     }
 </script>

src/components/PatrolmanStatistics/5.vue

@@ -14,80 +14,87 @@
               { color1: '#0f0', color2: '#C4FFBC' },
               { color1: '#ff0', color2: '#FFFC83' },
               { color1: '#00f', color2: '#6362FF' }
-            ]
+            ],
+            myChart: null
           }
         },
         methods: {
-          async loadData() {
-              const result = await this.oldPersonHealth({}, 'POST');
+          async draw() {
+              const result = await oldPersonHealth({}, 'POST');
               this.dataArr = result;
-          }
-        },
-        mounted() {
-          this.loadData();
 
-          const legendArr = [];
-          const chartDataArr = [];
+              const legendArr = [];
+              const chartDataArr = [];
 
-          this.dataArr.forEach((item) => {
-            legendArr.push({ name: item.label, textStyle: { color: '#fff' } });
-            chartDataArr.push({ value: parseInt(item.value) / 2, name: item.label });
-          });
+              this.dataArr.forEach((item) => {
+                  legendArr.push({ name: item.label, textStyle: { color: '#fff' } });
+                  chartDataArr.push({ value: parseInt(item.value) / 2, name: item.label });
+              });
 
-          let myChart = this.$echarts.init(document.getElementById('myChart333'));
-          myChart.setOption({
-            legend: {
-              show: true,
-              top:'10%',
-              data: legendArr,
-              itemGap: 70,
-              itemWidth: 13,
-              itemHeight: 13
-            },
-            series: [{
-              type: 'pie',
-              startAngle: 180,
-              clockwise: false,
-              radius: [40, 120],
-              center: ['55%', '30%'],
-              color: this.colorArr.map((item) => item.color1),
-              data: [
-                ...chartDataArr,
-                {
-                  value: 50,
-                  itemStyle: {
-                    color: "transparent"
+              this.myChart = this.$echarts.init(document.getElementById('myChart333'));
+              this.myChart.setOption({
+                  legend: {
+                      show: true,
+                      top:'10%',
+                      data: legendArr,
+                      itemGap: 70,
+                      itemWidth: 13,
+                      itemHeight: 13
                   },
-                  labelLine: {
-                    normal: {
-                      lineStyle: {
-                        color: 'transparent'
-                      }
-                    }
-                  }
-                }
-              ],
-              roseType: 'radius',
-              label: {
-                normal: {
-                  formatter: (params) => {
-                    if(params.dataIndex < this.dataArr.length) {
-                      return `${ this.dataArr[params.dataIndex].value }`;
-                    }
+                  series: [{
+                      type: 'pie',
+                      startAngle: 180,
+                      clockwise: false,
+                      radius: [40, 120],
+                      center: ['55%', '30%'],
+                      color: this.colorArr.map((item) => item.color1),
+                      data: [
+                          ...chartDataArr,
+                          {
+                              value: 50,
+                              itemStyle: {
+                                  color: "transparent"
+                              },
+                              labelLine: {
+                                  normal: {
+                                      lineStyle: {
+                                          color: 'transparent'
+                                      }
+                                  }
+                              }
+                          }
+                      ],
+                      roseType: 'radius',
+                      label: {
+                          normal: {
+                              formatter: (params) => {
+                                  if(params.dataIndex < this.dataArr.length) {
+                                      return `${ this.dataArr[params.dataIndex].value }`;
+                                  }
 
-                  },
-                  fontSize: 22
-                }
-              },
-              labelLine: {
-                normal: {
-                  smooth: 0.2,
-                  length: 0,
-                  length2: 0
-                }
-              }
-            }]
-          });
+                              },
+                              fontSize: 22
+                          }
+                      },
+                      labelLine: {
+                          normal: {
+                              smooth: 0.2,
+                              length: 0,
+                              length2: 0
+                          }
+                      }
+                  }]
+              });
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+          this.draw();
         }
     }
 </script>

src/components/PatrolmanStatistics/6.vue

@@ -3,91 +3,104 @@
 </template>
 
 <script>
+    import { oldPersonMind } from '../../api'
+
     export default {
         //老年人精神状态
         name: "OldPersonMentality",
         data() {
           return {
-            dataArr: [
-              { label: '良好', value: 25 },
-              { label: '一般', value: 50 },
-              { label: '较差', value: 25 }
-            ],
-            colorArr: ['#238aff','#ff0','#0f0']
+            dataArr: [],
+            colorArr: ['#238aff','#ff0','#0f0'],
+            myChart: null
           }
         },
-        mounted() {
-          const seriesArr = [];
+        methods: {
+          async draw() {
+              const result = await oldPersonMind({}, 'POST');
+              this.dataArr = result;
 
-          for(let i = 0; i < this.dataArr.length; i++) {
-            const d = this.dataArr[i];
+              const seriesArr = [];
 
-            const imgArr = new Array(this.dataArr.length).fill({});
-            imgArr[i] = { value: d.value };
+              for(let i = 0; i < this.dataArr.length; i++) {
+                  const d = this.dataArr[i];
 
-            seriesArr.push({
-              type: 'pictorialBar',
-              barWidth: 40,
-              symbol: `image://${require('../../assets/PatrolmanStatistics/sjx-' + i + '.png')}`,
-              itemStyle: {
-                normal: {
-                  color: (params) => {
-                    return this.colorArr[params.dataIndex];
-                  }
-                }
-              },
-              label: {
-                show: true,
-                position: 'top',
-                textStyle: {
-                  fontSize: 18
-                },
-                fontWeight: 'bold',
-                offset: [0, 0],
-                formatter: '{c}%'
-              },
-              data: imgArr
-            });
-          }
+                  const imgArr = new Array(this.dataArr.length).fill({});
+                  imgArr[i] = { value: parseInt(d.value) };
 
-          let myChart = this.$echarts.init(document.getElementById('myChart66'));
-          myChart.setOption({
-            xAxis: {
-              type: 'category',
-              data: this.dataArr.map((item) => item.label ),
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                show: true,
-                color: '#fff',
-                fontWeight: 'bold',
-                fontSize: 15
-              },
-              axisTick: {
-                show: false
+                  seriesArr.push({
+                      type: 'pictorialBar',
+                      barWidth: 40,
+                      symbol: `image://${require('../../assets/PatrolmanStatistics/sjx-' + i + '.png')}`,
+                      itemStyle: {
+                          normal: {
+                              color: (params) => {
+                                  return this.colorArr[params.dataIndex];
+                              }
+                          }
+                      },
+                      label: {
+                          show: true,
+                          position: 'top',
+                          textStyle: {
+                              fontSize: 18
+                          },
+                          fontWeight: 'bold',
+                          offset: [0, 0],
+                          formatter: '{c}%'
+                      },
+                      data: imgArr
+                  });
               }
-            },
-            yAxis: {
-              type: 'value',
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              }
-            },
-            series: seriesArr
-          });
+
+              this.myChart = this.$echarts.init(document.getElementById('myChart66'));
+              this.myChart.setOption({
+                  xAxis: {
+                      type: 'category',
+                      data: this.dataArr.map((item) => item.label ),
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: true,
+                          color: '#fff',
+                          fontWeight: 'bold',
+                          fontSize: 15
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'value',
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: false
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  series: seriesArr
+              });
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
         }
     }
 </script>

src/components/PatrolmanStatistics/7.vue

@@ -3,124 +3,135 @@
 </template>
 
 <script>
+    import { oldPersonSecurity } from '../../api'
+
     export default {
         //老年人安全情况
         name: "OldPersonSafetySituationCount",
         data() {
           return {
-            dataArr:[
-              { label: '安全', value: 25 },
-              { label: '一般', value: 50 },
-              { label: '较差', value: 25 }
-            ],
+            dataArr:[],
             colorArr: [
               { color1: '#a3ffb5', color2: '#00ff1c' },
               { color1: '#72b3ff', color2:  '#008dff'},
               { color1: '#ca66ff', color2:  '#e900ff'}
-
-            ]
+            ],
+            myChart: null
           }
         },
-        mounted() {
-          const tipArr = [];
+        methods: {
+          async draw() {
+            const result = await oldPersonSecurity({}, 'POST');
+            this.dataArr = result;
+            const tipArr = [];
 
-          for(let i = 0; i < this.dataArr.length; i++) {
-            const d = this.dataArr[i];
+            for(let i = 0; i < this.dataArr.length; i++) {
+                const d = this.dataArr[i];
 
-            const bgArr = new Array(this.dataArr.length).fill({});
-            bgArr[i] = { value: d.value };
+                const bgArr = new Array(this.dataArr.length).fill({});
+                bgArr[i] = { value: parseInt(d.value) };
 
-            tipArr.push({
-              type: 'pictorialBar',
-              symbol: `image://${require('../../assets/PatrolmanStatistics/tip-' + i + '.png')}`,
-              symbolSize: [51, 56],
-              symbolPosition: 'end',
-              symbolOffset: [0, -50],
-              label: {
-                show: true,
-                position: 'top',
-                distance: -37,
-                textStyle: {
-                  fontSize: 15
-                },
-                color: this.colorArr[i].color2,
-                fontWeight: 'bold',
-                offset: [0, 0],
-                formatter: `${ d.value }%`
-              },
-              data: bgArr
-            });
-          }
+                tipArr.push({
+                    type: 'pictorialBar',
+                    symbol: `image://${require('../../assets/PatrolmanStatistics/tip-' + i + '.png')}`,
+                    symbolSize: [51, 56],
+                    symbolPosition: 'end',
+                    symbolOffset: [0, -50],
+                    label: {
+                        show: true,
+                        position: 'top',
+                        distance: -37,
+                        textStyle: {
+                            fontSize: 12
+                        },
+                        color: this.colorArr[i].color2,
+                        fontWeight: 'bold',
+                        offset: [0, 0],
+                        formatter: `${ d.value }`
+                    },
+                    data: bgArr
+                });
+            }
 
-          let myChart = this.$echarts.init(document.getElementById('myChart77'));
-          myChart.setOption({
-            grid: {
-              left: "20%",
-            },
-            xAxis: {
-              type: 'category',
-              data: this.dataArr.map((item) => item.label),
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: true,
-                color: '#fff',
-                fontWeight: 'bold',
-                fontSize: 15
-              },
-            },
-            yAxis: {
-              type: 'value',
-              max: 100,
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: true,
-                formatter: '{value}%',
-                color: '#fff',
-                fontWeight: 'bold',
-                fontSize: 15
-              }
-            },
-            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]
+            this.myChart = this.$echarts.init(document.getElementById('myChart77'));
+            this.myChart.setOption({
+                grid: {
+                    left: "20%",
+                },
+                xAxis: {
+                    type: 'category',
+                    data: this.dataArr.map((item) => item.label),
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: true,
+                        color: '#fff',
+                        fontWeight: 'bold',
+                        fontSize: 15
+                    },
                 },
-                barWidth: 14,
-                itemStyle: {
-                  emphasis: {
-                    barBorderRadius: 7
-                  },
-                  normal: {
-                    barBorderRadius: 7,
-                    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}
-                        ]
-                      )
+                yAxis: {
+                    type: 'value',
+                    max: 100,
+                    splitLine: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: true,
+                        formatter: '{value}%',
+                        color: '#fff',
+                        fontWeight: 'bold',
+                        fontSize: 15
                     }
-                  }
                 },
-                z: 1
-              }, ...tipArr
-            ]
-          });
+                series: [
+                    {
+                        data: this.dataArr.map((item) => parseInt(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 this.$echarts.graphic.LinearGradient(
+                                        0, 0, 0, 1,
+                                        [
+                                            {offset: 0, color: this.colorArr[ params.dataIndex ].color1},
+                                            {offset: 1, color: this.colorArr[ params.dataIndex ].color2}
+                                        ]
+                                    )
+                                }
+                            }
+                        },
+                        z: 1
+                    }, ...tipArr
+                ]
+            });
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
         }
     }
 </script>

src/components/PatrolmanStatistics/8.vue

@@ -3,146 +3,159 @@
 </template>
 
 <script>
+    import { oldPersonHygiene } from '../../api'
+
     export default {
         //老年人卫生环境
         name: "OldPersonSanitaryEnvironmentCount",
         data() {
           return {
-            dataArr: [
-              { label: '卫生良好', value: '60%' },
-              { label: '卫生一般', value: '25%' },
-              { label: '卫生较差', value: '25%' }
-            ],
+            dataArr: [],
             colorArr: [
               { color1: '#71ff57', color2: '#C1FF8D' },
               { color1: '#2c8aff', color2: '#6CB1FF' },
               { color1: '#ff8a07', color2: '#FFB058' }
-            ]
+            ],
+            myChart: null
           }
         },
-        mounted() {
-          const seriesArr = [];
-          const titleArr = [];
+        methods: {
+          async draw(){
+              const result = await oldPersonHygiene({}, 'POST');
+              this.dataArr = result;
 
-          for(let i = 0; i < this.dataArr.length; i++) {
-            const d = this.dataArr[i];
+              const seriesArr = [];
+              const titleArr = [];
 
-            titleArr.push({
-              text: d.label,
-              left: `${ i == 0 ? 49 : ( i == 1 ? 24 : 71 ) }%`,
-              top: `${ i == 0 ? 24 : 60 }%`,
-              textAlign: "center",
-              textStyle: {
-                fontSize: "15",
-                fontWeight: 'normal',
-                color: "#fff"
-              }
-            });
+              for(let i = 0; i < this.dataArr.length; i++) {
+                  const d = this.dataArr[i];
 
-            titleArr.push({
-              text: d.value,
-              left: `${ i == 0 ? 50 : ( i == 1 ? 23 : 70 ) }%`,
-              top: `${ i == 0 ? 35 : 70 }%`,
-              textAlign: "center",
-              textStyle: {
-                fontSize: "15",
-                fontWeight: 'normal',
-                color: this.colorArr[i].color1
-              }
-            });
+                  titleArr.push({
+                      text: d.label,
+                      left: `${ i == 0 ? 49 : ( i == 1 ? 24 : 71 ) }%`,
+                      top: `${ i == 0 ? 24 : 60 }%`,
+                      textAlign: "center",
+                      textStyle: {
+                          fontSize: "15",
+                          fontWeight: 'normal',
+                          color: "#fff"
+                      }
+                  });
 
-            seriesArr.push({
-              type: "pie",
-              radius: [50, 65],
-              center: [`${ i == 0 ? 50 : ( i == 1 ? 25 : 72 ) }%`, `${ i == 0 ? 40 : 75 }%`],
-              silent: true,
-              clockwise: true,
-              startAngle: 180,
-              z: 0,
-              label: {
-                normal: {
-                  position: "center"
-                }
-              },
-              data: [
-                {
-                  value: parseInt(d.value) / 2,
-                  name: "",
-                  itemStyle: {
-                    normal: {
-                      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: 50 - parseInt(d.value) / 2,
-                  itemStyle: {
-                    normal: {
-                      color: "rgba(57, 83, 167, 0.7)"
-                    }
-                  }
-                },
-                {
-                  value: 50,
-                  itemStyle: {
-                    color: "transparent"
-                  }
-                }
-              ]
-            });
+                  titleArr.push({
+                      text: d.value,
+                      left: `${ i == 0 ? 50 : ( i == 1 ? 23 : 70 ) }%`,
+                      top: `${ i == 0 ? 35 : 70 }%`,
+                      textAlign: "center",
+                      textStyle: {
+                          fontSize: "15",
+                          fontWeight: 'normal',
+                          color: this.colorArr[i].color1
+                      }
+                  });
 
-            seriesArr.push({
-              type: "gauge",
-              radius: 67,
-              center: [`${ i == 0 ? 50 : ( i == 1 ? 25 : 72 ) }%`, `${ i == 0 ? 40 : 75 }%`],
-              startAngle: 0,
-              endAngle: 180,
-              splitNumber: 6,
-              hoverAnimation: true,
-              axisTick: {
-                show: false
-              },
-              splitLine: {
-                length: "27%",
-                lineStyle: {
-                  width: 10,
-                  color: "#08299A"
-                }
-              },
-              axisLabel: {
-                show: false
-              },
-              pointer: {
-                show: false
-              },
-              axisLine: {
-                lineStyle: {
-                  opacity: 0
-                }
-              },
-              detail: {
-                show: false
-              },
-              data: [
-                {
-                  value: 0,
-                  name: ""
-                }
-              ]
-            });
-          }
+                  seriesArr.push({
+                      type: "pie",
+                      radius: [50, 65],
+                      center: [`${ i == 0 ? 50 : ( i == 1 ? 25 : 72 ) }%`, `${ i == 0 ? 40 : 75 }%`],
+                      silent: true,
+                      clockwise: true,
+                      startAngle: 180,
+                      z: 0,
+                      label: {
+                          normal: {
+                              position: "center"
+                          }
+                      },
+                      data: [
+                          {
+                              value: parseInt(d.value) / 2,
+                              name: "",
+                              itemStyle: {
+                                  normal: {
+                                      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: 50 - parseInt(d.value) / 2,
+                              itemStyle: {
+                                  normal: {
+                                      color: "rgba(57, 83, 167, 0.7)"
+                                  }
+                              }
+                          },
+                          {
+                              value: 50,
+                              itemStyle: {
+                                  color: "transparent"
+                              }
+                          }
+                      ]
+                  });
 
-          let myChart = this.$echarts.init(document.getElementById('myChart8'));
-          myChart.setOption({
-            title: titleArr,
-            series: seriesArr
-          });
+                  seriesArr.push({
+                      type: "gauge",
+                      radius: 67,
+                      center: [`${ i == 0 ? 50 : ( i == 1 ? 25 : 72 ) }%`, `${ i == 0 ? 40 : 75 }%`],
+                      startAngle: 0,
+                      endAngle: 180,
+                      splitNumber: 6,
+                      hoverAnimation: true,
+                      axisTick: {
+                          show: false
+                      },
+                      splitLine: {
+                          length: "27%",
+                          lineStyle: {
+                              width: 10,
+                              color: "#08299A"
+                          }
+                      },
+                      axisLabel: {
+                          show: false
+                      },
+                      pointer: {
+                          show: false
+                      },
+                      axisLine: {
+                          lineStyle: {
+                              opacity: 0
+                          }
+                      },
+                      detail: {
+                          show: false
+                      },
+                      data: [
+                          {
+                              value: 0,
+                              name: ""
+                          }
+                      ]
+                  });
+              }
+
+              this.myChart = this.$echarts.init(document.getElementById('myChart8'));
+              this.myChart.setOption({
+                  title: titleArr,
+                  series: seriesArr
+              });
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
         }
     }
 </script>

src/components/PatrolmanStatistics/9.vue

@@ -3,115 +3,128 @@
 </template>
 
 <script>
+    import { oldPersonLive } from '../../api'
+
     export default {
         //老年人居住环境
         name: "OldPersonLiveCount",
         data() {
           return {
-            dataArr: [
-              { label: '良好', value: 15 },
-              { label: '一般', value: 50 },
-              { label: '较差', value: 35 }
-            ]
+            dataArr: [],
+            myChart: null
           }
         },
+        methods: {
+          async draw() {
+              const result = await oldPersonLive({}, 'POST');
+              this.dataArr = result;
+
+              this.myChart = this.$echarts.init(document.getElementById('myChart9'));
+              this.myChart.setOption({
+                  grid:{
+                      top:"15%",
+                      left:"18%",
+                      right:"5%",
+                  },
+                  xAxis: {
+                      type: 'category',
+                      boundaryGap: true,
+                      data: this.dataArr.map((item) => {
+                          return item.label;
+                      }),
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false,
+                          lineStyle: {
+                              color: '#fff'
+                          }
+                      },
+                      axisLabel: {
+                          show: true,
+                          fontSize: 16
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'value',
+                      max: 100,
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false,
+                          lineStyle: {
+                              color: '#fff'
+                          }
+                      },
+                      axisTick: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: true,
+                          formatter: '{value}%',
+                          fontSize: 16
+                      }
+                  },
+                  series: [
+                      {
+                          type: 'line',
+                          smooth: true,
+                          areaStyle: {
+                              color: {
+                                  type: 'linear',
+                                  x: 0,
+                                  y: 0,
+                                  x2: 0,
+                                  y2: 1,
+                                  colorStops: [{
+                                      offset: 0, color: 'rgba(0, 144, 255, 0.2)' // 0% 处的颜色
+                                  }, {
+                                      offset: 1, color: 'rgba(215, 255, 255, 0.2)' // 100% 处的颜色
+                                  }],
+                                  global: false // 缺省为 false
+                              }
+                          },
+                          symbol: `image://${require('../../assets/PatrolmanStatistics/y.png')}`,
+                          symbolSize: [10, 10],
+                          data: this.dataArr.map((item) => {
+                              return parseInt(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: '#96c2ff'
+                              }, {
+                                  offset: 1,
+                                  color: '#0090ff'
+                              }]),
+                          },
+                          lineStyle: {
+                              width: 2
+                          }
+                      }
+                  ]
+              });
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
         mounted() {
-          let myChart = this.$echarts.init(document.getElementById('myChart9'));
-          myChart.setOption({
-            grid:{
-              top:"15%",
-              left:"18%",
-              right:"5%",
-            },
-            xAxis: {
-              type: 'category',
-              boundaryGap: true,
-              data: this.dataArr.map((item) => {
-                return item.label;
-              }),
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false,
-                lineStyle: {
-                  color: '#fff'
-                }
-              },
-              axisLabel: {
-                show: true,
-                fontSize: 16
-              },
-              axisTick: {
-                show: false
-              }
-            },
-            yAxis: {
-              type: 'value',
-              max: 100,
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false,
-                lineStyle: {
-                  color: '#fff'
-                }
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: true,
-                formatter: '{value}%',
-                fontSize: 16
-              }
-            },
-            series: [
-              {
-                type: 'line',
-                smooth: true,
-                areaStyle: {
-                  color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                      offset: 0, color: 'rgba(0, 144, 255, 0.2)' // 0% 处的颜色
-                    }, {
-                      offset: 1, color: 'rgba(215, 255, 255, 0.2)' // 100% 处的颜色
-                    }],
-                    global: false // 缺省为 false
-                  }
-                },
-                symbol: `image://${require('../../assets/PatrolmanStatistics/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: '#96c2ff'
-                  }, {
-                    offset: 1,
-                    color: '#0090ff'
-                  }]),
-                },
-                lineStyle: {
-                  width: 2
-                }
-              }
-            ]
-          });
+            this.draw();
         }
     }
 </script>

src/pages/PatrolmanStatistics.vue

@@ -62,11 +62,11 @@
             <!--  图1     -->
             <div class="tu-one">
                 <!--        <com1 :dataArr="dataArr1"></com1>-->
-                <div class="number">175623</div>
+                <div class="number">{{score1}}</div>
                 <div class="small-title">采集积分（分）</div>
             </div>
             <div class="tu-two">
-                <div class="number">123659</div>
+                <div class="number">{{score2}}</div>
                 <div class="small-title">累计积分（分）</div>
             </div>
             <div class="tu-three">
@@ -96,15 +96,15 @@
             </div>
             <div class="tu-four">
                 <p class="title1">巡访员性别分布统计</p>
-                <com1 ref='c1'></com1>
+                <com1 ref="c1"></com1>
             </div>
             <div class="tu-five">
                 <p class="title1">巡访员认证数据统计</p>
-                <com2></com2>
+                <com2 ref="c2"></com2>
             </div>
             <div class="tu-six">
                 <p class="title1">巡访员职务分布统计</p>
-                <com3></com3>
+                <com3 ref="c3"></com3>
             </div>
             <div class="tu-seven">
                 <p class="title1">巡访员巡访方式统计</p>
@@ -117,23 +117,23 @@
         <div class="foot">
             <div class="tu-eight">
                 <p class="title1">老年人健康状况</p>
-                <com5></com5>
+                <com5 ref='c5'></com5>
             </div>
             <div class="tu-nine">
                 <p class="title1">老年人精神状态</p>
-                <com6></com6>
+                <com6 ref="c6"></com6>
             </div>
             <div class="tu-ten">
                 <p class="title1">老年人安全情况</p>
-                <com7></com7>
+                <com7 ref="c7"></com7>
             </div>
             <div class="tu-eleven">
                 <p class="title1">老年人卫生环境</p>
-                <com8></com8>
+                <com8 ref="c8"></com8>
             </div>
             <div class="tu-twelve">
                 <p class="title1">老年人居住环境</p>
-                <com9></com9>
+                <com9 ref="c9"></com9>
             </div>
         </div>
 
@@ -151,7 +151,7 @@
     import com9 from "../components/PatrolmanStatistics/9.vue";
 
     import storageUtil from '../util/storageUtil'
-    import { findDept } from '../api'
+    import { findDept, oldPersonSelectUserValue, oldPersonSelectDeptValue } from '../api'
 
     export default {
         name: "Home",
@@ -166,66 +166,20 @@
                 dept1: '',
                 dept2: '',
                 dept3: '',
-                dept4: '',
+                dept4: '',   
                 dept5: '',
                 isZhankai: false,  //是够展开和收起
-                listData: [
-                    {
-                        userName: '张三',
-                        address: '桃源街道办事处',
-                        score: 28000,
-                    },
-                    {
-                        userName: '李四',
-                        address: '长春街道办事处',
-                        score: 20000,
-                    },
-                    {
-                        userName: '王五',
-                        address: '长春街道办事处撒旦撒旦多',
-                        score: 15000,
-                    },
-                    {
-                        userName: '王五',
-                        address: '长春街道办事处撒旦撒旦多',
-                        score: 15000,
-                    },
-                    {
-                        userName: '王五',
-                        address: '长春街道办事处撒旦撒旦多',
-                        score: 15000,
-                    },
-                    {
-                        userName: '王五',
-                        address: '长春街道办事处撒旦撒旦多',
-                        score: 15000,
-                    },
-                    {
-                        userName: '王五',
-                        address: '长春街道办事处撒旦撒旦多',
-                        score: 15000,
-                    },
-                    {
-                        userName: '王五',
-                        address: '长春街道办事处撒旦撒旦多',
-                        score: 15000,
-                    },
-                    {
-                        userName: '王五',
-                        address: '长春街道办事处撒旦撒旦多',
-                        score: 15000,
-                    },
-                    {
-                        userName: '王五',
-                        address: '长春街道办事处撒旦撒旦多',
-                        score: 15000,
-                    },
-                ],
+                listData: [],
+                score1: 0,
+                score2: 0
             };
         },
         async mounted() {
-            this.$refs.c1.usedInPar('调用子组件中的方法');
             this.provinces = await this.findDept({'level': '1'});
+            this.listData = await oldPersonSelectUserValue({}, 'POST');
+            const result = await oldPersonSelectDeptValue({}, 'POST');
+            this.score1 = result.infoValue;
+            this.score2 = result.totalValue;
         },
         methods: {
             //获取地区
@@ -286,6 +240,15 @@
                     arr.push(this.dept1);
                 }
                 storageUtil.save('dept-array', arr);
+
+                this.$refs.c1.draw();
+                this.$refs.c2.draw();
+                this.$refs.c3.draw();
+                this.$refs.c5.draw();
+                this.$refs.c6.draw();
+                this.$refs.c7.draw();
+                this.$refs.c8.draw();
+                this.$refs.c9.draw();
             },
             // 滚动颜色
             scrollTextisColor: function (i) {