yyl update

src/api/index.js

@@ -99,3 +99,45 @@ export const oldPersonIncome = (params, requestMethod) => ajax(`${BASE_URL}/char
  * 老年人信息统计  ---->    老年人生活经济状况统计
  */
 export const oldPersonLivingCondition = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/livingCondition`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->    老年人关爱服务统计
+ */
+export const oldPersonDemand = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/oldDemand`, params, requestMethod);
+
+
+/**
+ * -----------------------------------------------------------------------------------------------------------------------------------------------------------------------
+ */
+
+/**
+ *  采集员认证统计
+ */
+export const selectUserByAuth = (params, requestMethod) => ajax(`${BASE_URL}/chart/user/selectUserByAuth`, params, requestMethod);
+
+/**
+ * 老人数量
+ */
+export const oldnum = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/oldnum`, params, requestMethod);
+
+/**
+ * 巡防数量
+ */
+export const visitnum = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/visitnum`, params, requestMethod);
+
+/**
+ * 运营分析
+ */
+export const fourquan = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/fourquan`, params, requestMethod);
+
+/**
+ * 采集巡访数据统计
+ */
+export const infomonth = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/infomonth`, params, requestMethod);
+
+/**
+ * 采集巡访数据统计
+ */
+export const selectSexAndLook = (params, requestMethod) => ajax(`${BASE_URL}/chart/user/selectSexAndLook`, params, requestMethod);
+
+

src/components/index/2.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+    import { oldPersonSelectAuthAndLook, selectSexAndLook } from '../../api'
+
     export default {
         name: "Mz_tx_charts2",
         data() {
@@ -14,153 +16,320 @@
             colorArr: [
               { color1: '#FFA625', color2: '#FFD09C' },
               { color1: '#00FF0C', color2: '#B7FFE2' }
-            ]
+            ],
+            myChart: null
           }
         },
-        mounted() {
-          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;
-              }
-            }
-          }
+        methods: {
+            async draw1() {
+                const result = await oldPersonSelectAuthAndLook({}, 'POST');
+                this.dataArr = result;
 
-          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: '15%',
-              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]
+                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;
+                        }
                     }
-                  },
-                  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' };
-
-            seriesArr.push({
-              type: 'pictorialBar',
-              symbol: `image://${require('../../assets/index/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('myChartindex2'));
-          myChart.setOption({
-            color: [this.colorArr[0].color1, this.colorArr[0].color1, this.colorArr[1].color1],
-            legend: {
-              data: ["党员", "群众"],
-              left: 'right',
-              textStyle: {
-                color: "#fff"
-              }
-            },
-            grid: {
-              left: '30%',
-              right: '15%',
-              bottom: '5%',
-              height: '90%',
-              containLabel: true
+
+                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: '15%',
+                        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' };
+
+                    seriesArr.push({
+                        type: 'pictorialBar',
+                        symbol: `image://${require('../../assets/index/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
+                    });
+                }
+
+                if(this.myChart != null) {
+                    this.myChart.clear();
+                }
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartindex2'));
+                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: '30%',
+                        right: '15%',
+                        bottom: '5%',
+                        height: '90%',
+                        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
+                });
             },
-            xAxis: [
-              {
-                type: 'value',
-                max: maxValue,
-                axisTick: {
-                  show: false
-                },
-                axisLabel: {
-                  show: false
-                },
-                axisLine: {
-                  show: false
-                },
-                splitLine: {
-                  show: false
+            async draw2() {
+                const result = await selectSexAndLook({}, '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;
+                        }
+                    }
                 }
-              }
-            ],
-            yAxis: [
-              {
-                type: 'category',
-                nameTextStyle: {
-                  show: false
-                },
-                axisLine: {
-                  show: false
-                },
-                axisLabel: {
-                  show: false
-                },
-                splitLine: {
-                  show: false
+
+                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: '15%',
+                        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' };
+
+                    seriesArr.push({
+                        type: 'pictorialBar',
+                        symbol: `image://${require('../../assets/index/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
-          });
+
+                if(this.myChart != null) {
+                    this.myChart.clear();
+                }
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartindex2'));
+                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: '30%',
+                        right: '15%',
+                        bottom: '5%',
+                        height: '90%',
+                        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
+                });
+            }
+        },
+        mounted() {
+            this.draw1();
         }
     }
 </script>

src/components/index/3.vue

@@ -3,193 +3,197 @@
 </template>
 
 <script>
+    import { infomonth } from '../../api'
+
     export default {
         name: "CollectPatrolDataCount",
         data() {
           return {
-            dataArr: [
-              {
-                label: '采集数据',
-                data: [{ label: '01月', value: 369 }, { label: '02月', value: 518 }, { label: '03月', value: 169 }, { label: '04月', value: 258 }, { label: '05月', value: 365 }, { label: '06月', value: 242 }]
-              },
-              {
-                label: '巡访数据',
-                data: [{ label: '01月', value: 500 }, { label: '02月', value: 362 }, { label: '03月', value: 368 }, { label: '04月', value: 198 }, { label: '05月', value: 569 }, { label: '06月', value: 159 }]
-              }
-            ],
-            colorArr: [
-              {
-                lineColor: '#2796ff', areaColor: '#d7e6ff'
-              },
-              {
-                lineColor: '#ff8700', areaColor: '#fff3c6'
-              }
-            ]
+            dataArr: [],
+            // dataArr: [
+            //   {
+            //     label: '采集数据',
+            //     data: [{ label: '01月', value: 369 }, { label: '02月', value: 518 }, { label: '03月', value: 169 }, { label: '04月', value: 258 }, { label: '05月', value: 365 }, { label: '06月', value: 242 }]
+            //   },
+            //   {
+            //     label: '巡访数据',
+            //     data: [{ label: '01月', value: 500 }, { label: '02月', value: 362 }, { label: '03月', value: 368 }, { label: '04月', value: 198 }, { label: '05月', value: 569 }, { label: '06月', value: 159 }]
+            //   }
+            // ],
+            colorArr: [ { lineColor: '#2796ff', areaColor: '#d7e6ff' }, { lineColor: '#ff8700', areaColor: '#fff3c6' } ]
           }
         },
-        mounted() {
-          const valueArr1 = this.dataArr[0].data.map((item) => {
-            return item.value;
-          });
+        methods: {
+          async draw() {
+              const result = await infomonth({}, 'POST');
+              this.dataArr = result;
 
-          const valueArr2 = this.dataArr[1].data.map((item) => {
-            return item.value;
-          });
+              const valueArr1 = this.dataArr[0].data.map((item) => {
+                  return item.value;
+              });
 
-          let maxValue = valueArr2[0];
-          let maxValueIndex = 0;
-          for(let i = 0; i < valueArr2.length; i++) {
-            if(maxValue < valueArr2[i]) {
-              maxValue = valueArr2[i];
-              maxValueIndex = i;
-            }
-          }
-
-          const yMaxValue = maxValue + Math.floor(maxValue / 5);
-          const barArr = new Array(valueArr2.length).fill(0);
-          barArr[maxValueIndex] = yMaxValue;
+              const valueArr2 = this.dataArr[1].data.map((item) => {
+                  return item.value;
+              });
 
-          let myChart = this.$echarts.init(document.getElementById('myChartindex3'));
-          myChart.setOption({
-            grid:{
-              left:"12%",
-              right:"6%",
-            },
-            legend: {
-              left: 'right',
-              data: ['采集数据', '巡访数据'],
-              textStyle:{//图例文字的样式
-                color:'#ccc',
-                fontSize:16
-              }
-            },
-            xAxis: {
-              type: 'category',
-              boundaryGap: false,
-              data: this.dataArr[0].data.map((item) => {
-                return item.label;
-              }),
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: true
-              },
-              axisLabel: {
-                show: true,
-                color: '#fff'
-              },
-              axisTick: {
-                show: false
-              }
-            },
-            yAxis: {
-              type: 'value',
-              max: yMaxValue,
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              }
-            },
-            series: [
-              {
-                type: 'line',
-                smooth: true,
-                name: this.dataArr[0].label,
-                areaStyle: {
-                  color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                      offset: 0, color: this.colorArr[0].areaColor // 0% 处的颜色
-                    }, {
-                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
-                    }],
-                    global: false // 缺省为 false
+              let maxValue = valueArr2[0];
+              let maxValueIndex = 0;
+              for(let i = 0; i < valueArr2.length; i++) {
+                  if(maxValue < valueArr2[i]) {
+                      maxValue = valueArr2[i];
+                      maxValueIndex = i;
                   }
-                },
-                symbol: `image://${require('../../assets/index/line-point-blue.png')}`,
-                symbolSize: [17, 17],
-                data: valueArr1,
-                itemStyle: {
-                  color: this.colorArr[0].lineColor,
-                },
-                lineStyle: {
-                  width: 2
-                }
-              },
-              {
-                type: 'line',
-                smooth: true,
-                name: this.dataArr[1].label,
-                areaStyle: {
-                  color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                      offset: 0, color: this.colorArr[1].areaColor // 0% 处的颜色
-                    }, {
-                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
-                    }],
-                    global: false // 缺省为 false
-                  }
-                },
-                symbol: `image://${require('../../assets/index/line-point-yellow.png')}`,
-                symbolSize: [17, 17],
-                data: valueArr2,
-                markPoint: {
-                  data: [
-                    {type: 'max', name: '最大值'}
-                  ],
-                  symbol: `image://${require('../../assets/index/line-tips.png')}`,
-                  symbolSize: [99, 40],
-                  symbolOffset: [50, -35],
-                  label: {
-                    color: '#fff',
-                    position: [16, 6],
-                    formatter: ['采集：{a|5623}', '巡访：{b|5623}'].join('\n'),
-                    rich:{
-                      a: {
-                        fontSize: 14,
-                        color: this.colorArr[0].lineColor
+              }
+
+              const yMaxValue = maxValue + Math.floor(maxValue / 5);
+              const barArr = new Array(valueArr2.length).fill(0);
+              barArr[maxValueIndex] = yMaxValue;
+
+              let myChart = this.$echarts.init(document.getElementById('myChartindex3'));
+              myChart.setOption({
+                  grid:{
+                      left:"12%",
+                      right:"6%",
+                  },
+                  legend: {
+                      left: 'right',
+                      data: ['采集数据', '巡访数据'],
+                      textStyle:{//图例文字的样式
+                          color:'#ccc',
+                          fontSize:16
+                      }
+                  },
+                  xAxis: {
+                      type: 'category',
+                      boundaryGap: false,
+                      data: this.dataArr[0].data.map((item) => {
+                          return item.label + '月';
+                      }),
+                      splitLine: {
+                          show: false
                       },
-                      b: {
-                        fontSize: 14,
-                        color: this.colorArr[1].lineColor,
-                        padding: [3, 0]
+                      axisLine: {
+                          show: true
+                      },
+                      axisLabel: {
+                          show: true,
+                          color: '#fff'
+                      },
+                      axisTick: {
+                          show: false
                       }
-                    }
-                  }
-                },
-                itemStyle: {
-                  color:this.colorArr[1].lineColor,
-                },
-                lineStyle: {
-                  width: 2
-                }
-              },
-              {
-                data: barArr,
-                type: 'bar',
-                barWidth: 2,
-                color: '#c0e7ff'
-              }
-            ]
-          });
+                  },
+                  yAxis: {
+                      type: 'value',
+                      max: yMaxValue,
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisTick: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: false
+                      }
+                  },
+                  series: [
+                      {
+                          type: 'line',
+                          smooth: true,
+                          name: this.dataArr[0].label,
+                          areaStyle: {
+                              color: {
+                                  type: 'linear',
+                                  x: 0,
+                                  y: 0,
+                                  x2: 0,
+                                  y2: 1,
+                                  colorStops: [{
+                                      offset: 0, color: this.colorArr[0].areaColor // 0% 处的颜色
+                                  }, {
+                                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
+                                  }],
+                                  global: false // 缺省为 false
+                              }
+                          },
+                          symbol: `image://${require('../../assets/index/line-point-blue.png')}`,
+                          symbolSize: [17, 17],
+                          data: valueArr1,
+                          itemStyle: {
+                              color: this.colorArr[0].lineColor,
+                          },
+                          lineStyle: {
+                              width: 2
+                          }
+                      },
+                      {
+                          type: 'line',
+                          smooth: true,
+                          name: this.dataArr[1].label,
+                          areaStyle: {
+                              color: {
+                                  type: 'linear',
+                                  x: 0,
+                                  y: 0,
+                                  x2: 0,
+                                  y2: 1,
+                                  colorStops: [{
+                                      offset: 0, color: this.colorArr[1].areaColor // 0% 处的颜色
+                                  }, {
+                                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
+                                  }],
+                                  global: false // 缺省为 false
+                              }
+                          },
+                          symbol: `image://${require('../../assets/index/line-point-yellow.png')}`,
+                          symbolSize: [17, 17],
+                          data: valueArr2,
+                          markPoint: {
+                              data: [
+                                  {type: 'max', name: '最大值'}
+                              ],
+                              symbol: `image://${require('../../assets/index/line-tips.png')}`,
+                              symbolSize: [99, 40],
+                              symbolOffset: [50, -35],
+                              label: {
+                                  color: '#fff',
+                                  position: [16, 6],
+                                  formatter: ['采集：{a|' + valueArr1[maxValueIndex] + '}', '巡访：{b|' + maxValue + '}'].join('\n'),
+                                  rich:{
+                                      a: {
+                                          fontSize: 14,
+                                          color: this.colorArr[0].lineColor
+                                      },
+                                      b: {
+                                          fontSize: 14,
+                                          color: this.colorArr[1].lineColor,
+                                          padding: [3, 0]
+                                      }
+                                  }
+                              }
+                          },
+                          itemStyle: {
+                              color:this.colorArr[1].lineColor,
+                          },
+                          lineStyle: {
+                              width: 2
+                          }
+                      },
+                      {
+                          data: barArr,
+                          type: 'bar',
+                          barWidth: 2,
+                          color: '#c0e7ff'
+                      }
+                  ]
+              });
+          }
+        },
+        mounted() {
+          this.draw();
         }
     }
 </script>

src/components/index/5.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+    import { fourquan } from '../../api'
+
     import 'echarts-liquidfill'
     export default {
         name: "OperationAnalysisCount",
@@ -17,7 +19,8 @@
               { color1: '#5fff06', color2: '#B4FF9F' },
               { color1: '#60b8db', color2: '#afd3ff' },
               { color1: '#ff00e8', color2: '#f48fff' }
-            ]
+            ],
+            myChart: null
           }
         },
         methods: {
@@ -68,189 +71,202 @@
           },
           createCircleImage(){
 
-          }
-        },
-        mounted() {
-          const seriesArr = [];
+          },
+          async draw() {
+              const result = await fourquan({}, 'POST');
+              this.data1 = result.data1;
+              this.data2 = result.data2;
+              this.data3 = result.data3;
+              this.data4 = result.data4;
 
-          const liquidFill1 = this.createLiquidfill({ index: 0, center_x: 14, center_y: 25, text: this.data1.value, value: this.handlerData(this.data1.value) });
-          seriesArr.push(liquidFill1);
+              const seriesArr = [];
 
-          const liquidFill2 = this.createLiquidfill({ index: 1, center_x: 58, center_y: 25, text: this.data2.value, value: this.handlerData(this.data2.value) });
-          seriesArr.push(liquidFill2);
+              const liquidFill1 = this.createLiquidfill({ index: 0, center_x: 14, center_y: 25, text: this.data1.value, value: this.handlerData(this.data1.value) });
+              seriesArr.push(liquidFill1);
 
-          const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 14, center_y: 75, text: this.data3.value, value: this.handlerData(this.data3.value) });
-          seriesArr.push(liquidFill3);
+              const liquidFill2 = this.createLiquidfill({ index: 1, center_x: 58, center_y: 25, text: this.data2.value + '%', value: this.handlerData(this.data2.value + '%') });
+              seriesArr.push(liquidFill2);
 
-          const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 58, center_y: 75, text: this.data4.value, value: this.handlerData(this.data4.value) });
-          seriesArr.push(liquidFill4);
+              const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 14, center_y: 75, text: this.data3.value, value: this.handlerData(this.data3.value) });
+              seriesArr.push(liquidFill3);
 
-          seriesArr.push({
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/index/liquidfill-1-circle.png')}`,
-            symbolSize: [102, 102],
-            data: [{ value: 100, symbolPosition: 'start', symbolOffset: [10, -100] }, {}],
-            label: {
-              show: true,
-              position: 'top',
-              offset: [-55, -80],
-              color: '#fff',
-              fontSize: 16,
-              formatter: '巡访平均周期'
-            },
-            z: 2
-          });
+              const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 58, center_y: 75, text: this.data4.value, value: this.handlerData(this.data4.value) });
+              seriesArr.push(liquidFill4);
 
-          seriesArr.push({
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/index/liquidfill-1-line.png')}`,
-            symbolSize: [62, 5],
-            data: [{ value: 100, symbolPosition: 'start', symbolOffset: [120, -60] }, {}],
-            label: {
-              show: true,
-              position: 'top',
-              offset: [-70, -50],
-              color: this.colorArr[0].color1,
-              fontSize: 16,
-              formatter: this.data1.value
-            },
-            z: 2
-          });
+              seriesArr.push({
+                  type: 'pictorialBar',
+                  symbol: `image://${require('../../assets/index/liquidfill-1-circle.png')}`,
+                  symbolSize: [102, 102],
+                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [10, -100] }, {}],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      offset: [-55, -80],
+                      color: '#fff',
+                      fontSize: 16,
+                      formatter: '巡访平均周期'
+                  },
+                  z: 2
+              });
 
-          seriesArr.push({
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/index/liquidfill-2-circle.png')}`,
-            symbolSize: [102, 102],
-            data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, -100] }, {}],
-            label: {
-              show: true,
-              position: 'top',
-              offset: [160, -80],
-              color: '#fff',
-              fontSize: 16,
-              formatter: '子女绑定占比'
-            },
-            z: 2
-          });
+              seriesArr.push({
+                  type: 'pictorialBar',
+                  symbol: `image://${require('../../assets/index/liquidfill-1-line.png')}`,
+                  symbolSize: [62, 5],
+                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [120, -60] }, {}],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      offset: [-70, -50],
+                      color: this.colorArr[0].color1,
+                      fontSize: 16,
+                      formatter: this.data1.value
+                  },
+                  z: 2
+              });
 
-          seriesArr.push({
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/index/liquidfill-2-line.png')}`,
-            symbolSize: [62, 5],
-            data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, -60] }, {}],
-            label: {
-              show: true,
-              position: 'top',
-              offset: [150, -50],
-              color: this.colorArr[1].color1,
-              fontSize: 16,
-              formatter: this.data2.value
-            },
-            z: 2
-          });
+              seriesArr.push({
+                  type: 'pictorialBar',
+                  symbol: `image://${require('../../assets/index/liquidfill-2-circle.png')}`,
+                  symbolSize: [102, 102],
+                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, -100] }, {}],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      offset: [160, -80],
+                      color: '#fff',
+                      fontSize: 16,
+                      formatter: '子女绑定占比'
+                  },
+                  z: 2
+              });
 
-          seriesArr.push({
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/index/liquidfill-3-circle.png')}`,
-            symbolSize: [102, 102],
-            data: [{ value: 100, symbolPosition: 'start', symbolOffset: [10, 30] }, {}],
-            label: {
-              show: true,
-              position: 'top',
-              offset: [-70, 55],
-              color: '#fff',
-              fontSize: 16,
-              formatter: '积分存量'
-            },
-            z: 2
-          });
+              seriesArr.push({
+                  type: 'pictorialBar',
+                  symbol: `image://${require('../../assets/index/liquidfill-2-line.png')}`,
+                  symbolSize: [62, 5],
+                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, -60] }, {}],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      offset: [150, -50],
+                      color: this.colorArr[1].color1,
+                      fontSize: 16,
+                      formatter: `${this.data2.value}%`
+                  },
+                  z: 2
+              });
 
-          seriesArr.push({
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/index/liquidfill-3-line.png')}`,
-            symbolSize: [62, 5],
-            data: [{ value: 100, symbolPosition: 'start', symbolOffset: [120, 70] }, {}],
-            label: {
-              show: true,
-              position: 'top',
-              offset: [-70, 90],
-              color: this.colorArr[2].color1,
-              fontSize: 16,
-              formatter: `${this.data3.value}`
-            },
-            z: 2
-          });
+              seriesArr.push({
+                  type: 'pictorialBar',
+                  symbol: `image://${require('../../assets/index/liquidfill-3-circle.png')}`,
+                  symbolSize: [102, 102],
+                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [10, 30] }, {}],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      offset: [-70, 55],
+                      color: '#fff',
+                      fontSize: 16,
+                      formatter: '积分存量'
+                  },
+                  z: 2
+              });
 
-          seriesArr.push({
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/index/liquidfill-4-circle.png')}`,
-            symbolSize: [102, 102],
-            data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, 30] }, {}],
-            label: {
-              show: true,
-              position: 'top',
-              offset: [150, 55],
-              color: '#fff',
-              fontSize: 16,
-              formatter: '兑换比例'
-            },
-            z: 2
-          });
+              seriesArr.push({
+                  type: 'pictorialBar',
+                  symbol: `image://${require('../../assets/index/liquidfill-3-line.png')}`,
+                  symbolSize: [62, 5],
+                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [120, 70] }, {}],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      offset: [-70, 90],
+                      color: this.colorArr[2].color1,
+                      fontSize: 16,
+                      formatter: `${this.data3.value}`
+                  },
+                  z: 2
+              });
 
-          seriesArr.push({
-            type: 'pictorialBar',
-            symbol: `image://${require('../../assets/index/liquidfill-4-line.png')}`,
-            symbolSize: [62, 5],
-            data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, 70] }, {}],
-            label: {
-              show: true,
-              position: 'top',
-              offset: [150, 90],
-              color: this.colorArr[3].color1,
-              fontSize: 16,
-              formatter: `${this.data4.value}`
-            },
-            z: 2
-          });
+              seriesArr.push({
+                  type: 'pictorialBar',
+                  symbol: `image://${require('../../assets/index/liquidfill-4-circle.png')}`,
+                  symbolSize: [102, 102],
+                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, 30] }, {}],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      offset: [150, 55],
+                      color: '#fff',
+                      fontSize: 16,
+                      formatter: '兑换比例'
+                  },
+                  z: 2
+              });
 
-          let myChart = this.$echarts.init(document.getElementById('myChartindex5'));
-          myChart.setOption({
-            grid:{
-              left:"2%"
-            },
-            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: 'pictorialBar',
+                  symbol: `image://${require('../../assets/index/liquidfill-4-line.png')}`,
+                  symbolSize: [62, 5],
+                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, 70] }, {}],
+                  label: {
+                      show: true,
+                      position: 'top',
+                      offset: [150, 90],
+                      color: this.colorArr[3].color1,
+                      fontSize: 16,
+                      formatter: `${this.data4.value}`
+                  },
+                  z: 2
+              });
+
+              if(this.myChart != null) {
+                  this.myChart.clear();
               }
-            },
-            series: seriesArr
-          });
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartindex5'));
+              this.myChart.setOption({
+                  grid:{
+                      left:"2%"
+                  },
+                  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
+              });
+          }
+        },
+        mounted() {
+          this.draw();
         }
     }
 </script>

src/components/oldStatistics/3.vue

@@ -3,40 +3,40 @@
 </template>
 
 <script>
+    import { oldPersonDemand } from '../../api'
+
     export default {
         //老年人关爱服务统计
         name: "RadarChart2",
         data() {
           return {
-            dataArr: [
-              { label: '生活照料', value: '10%' },
-              { label: '生产帮助', value: '50%' },
-              { label: '精神慰藉', value: '90%' },
-              { label: '医疗保健', value: '70%' },
-              { label: '权益维护', value: '30%' },
-              { label: '安全监护', value: '50%' },
-              { label: '文化娱乐', value: '60%' },
-              { label: '紧急救助', value: '90%' },
-              { label: '其他', value: '60%' }
-            ]
+            dataArr: [],
+            myChart: null
           }
         },
         methods: {
-          draw() {
+          async draw() {
+            const result = await oldPersonDemand({}, 'POST');
+            this.dataArr = result;
+
             const valueArr = this.dataArr.map((item) => {
               return parseInt(item.value);
             });
 
             const labelArr = this.dataArr.map((item) => {
               return {
-                name: item.label + '：' + item.value,
+                name: item.label + '：' + item.value + '%',
                 max: 100,
 
               };
             });
 
-            let myChart = this.$echarts.init(document.getElementById('myChartold3'));
-            myChart.setOption({
+            if(this.myChart != null) {
+                this.myChart.clear();
+            }
+
+            this.myChart = this.$echarts.init(document.getElementById('myChartold3'));
+            this.myChart.setOption({
               normal: {
                 top: 200,
                 left: 300,

src/components/oldStatistics/8.vue

@@ -51,7 +51,7 @@
                               color: 'white',
                               formatter: '{value}',
                           },
-                          fontSize: 16
+                          fontSize: 12
                       },
                       axisTick: {
                           show: false

src/pages/Home.vue

@@ -28,7 +28,6 @@
                         <router-link to="/home/PatrolmanStatistics">
                             <span>巡访员信息统计</span>
                         </router-link>
-                        <span :class="isleftbtnTure2 ? 'left-kaung2': 'left-selectkaung2' " @click="left3">职务</span>
                         <span :class="isleftbtnTure1 ? 'left-kaung3': 'left-selectkaung3' " style="margin-right: 10px"
                               @click="left2">性别</span>
                         <span :class="isleftbtnTure ? 'left-selectkaung': 'left-kaung' " style="margin-right: 10px"
@@ -42,7 +41,7 @@
 <!--                        <span class="span2">党员</span>-->
 <!--                        <img src="../assets/index/huang.png"/>-->
 <!--                    </div>-->
-                    <com2 ></com2>
+                    <com2 ref="c2"></com2>
                 </div>
             </div>
             <!-- 左三 -->
@@ -57,7 +56,7 @@
 <!--                        <span class="span2">采集数据</span>-->
 <!--                        <img src="../assets/index/lan.png"/>-->
 <!--                    </div>-->
-                    <com3 ></com3>
+                    <com3 ref="c3"></com3>
                 </div>
             </div>
         </div>
@@ -77,27 +76,27 @@
                 <el-row :span="24" type="flex" justify="center" align="middle" style="height:100%;">
                     <el-col :span="5">
             <span>
-              <span class="num">75,789</span>
+              <span class="num">{{count1}}</span> <!--老年人信息（人）-->
             </span>
                     </el-col>
                     <el-col :span="5">
             <span>
-              <span class="num">15,675</span>
+              <span class="num">{{count2}}</span> <!--认证巡访员（人）-->
             </span>
                     </el-col>
                     <el-col :span="4">
             <span>
-              <span class="num">85,741</span>
+              <span class="num">{{count3}}</span> <!--累计巡访量（次）-->
             </span>
                     </el-col>
                     <el-col :span="5">
             <span>
-              <span class="num">123,156</span>
+              <span class="num">{{count4}}</span> <!--累计积分（分）-->
             </span>
                     </el-col>
                     <el-col :span="5">
             <span>
-              <span class="num">562</span>
+              <span class="num">{{count5}}</span> <!--今日探访（次）-->
             </span>
                     </el-col>
                 </el-row>
@@ -129,7 +128,7 @@
                     <p>运营分析</p>
                 </div>
                 <div class="p5chart">
-                    <com5></com5>
+                    <com5 ref="c5"></com5>
                 </div>
             </div>
             <!-- 右三 -->
@@ -173,8 +172,10 @@
     import com5 from "../components/index/5.vue";
     import vueSeamlessScroll from "vue-seamless-scroll";
     import {
-        // fiveNum,
-        // mapsec,
+        selectUserByAuth,
+        oldPersonSelectDeptValue,
+        oldnum,
+        visitnum
     } from "../api";
 
     export default {
@@ -182,6 +183,12 @@
         components: {com1, com2, com3, com4, com5, jlMap, vueSeamlessScroll},
         data() {
             return {
+                count1: 0,   //老年人信息（人）
+                count2: 0,   //认证巡访员（人）
+                count3: 0,   //累计巡访量（次）
+                count4: 0,   //累计积分（分）
+                count5: 0,   //今日探访（次）
+
                 month: "",
                 isTure: true,
                 isleftbtnTure: true,
@@ -241,10 +248,7 @@
                         date:'06-09',
                         time:'08:17',
                         address:'长春市朝阳区老人张翠芳探访',
-                    },
-
-
-
+                    }
                 ],
                 step: 20, // 数值越大速度滚动越快
                 limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
@@ -343,8 +347,34 @@
                 this.ssdj();
             }, 60000);
             // this.fiveNum();
+
+            this.count1_method();
+            this.count2_method();
+            this.count3_method();
+            this.count4_method();
+            this.count5_method();
         },
         methods: {
+            async count1_method() {
+                const result = await oldnum({}, 'POST');
+                this.count1 = result.oldnum;
+            },
+            async count2_method() {
+                const result = await selectUserByAuth({}, 'POST');
+                this.count2 = result[0].count;
+            },
+            async count3_method() {
+                const result = await visitnum({}, 'POST');
+                this.count3 = result.visitnum;
+            },
+            async count4_method() {
+                const result = await oldPersonSelectDeptValue({}, 'POST');
+                this.count4 = result.totalValue;
+            },
+            async count5_method() {
+
+            },
+
             //  右边第一个  地区探访数据 按钮
             right1() {
                 this.isTure = false;
@@ -358,19 +388,16 @@
                 this.isleftbtnTure = true;
                 this.isleftbtnTure2 = true;
                 this.isleftbtnTure1 = true;
+
+                this.$refs.c2.draw1();
             },
             // 性别 按钮切换
             left2() {
-                console.log("111")
                 this.isleftbtnTure1 = false;
                 this.isleftbtnTure2 = true;
                 this.isleftbtnTure = false;
-            },
-            // 认证数据 按钮切换
-            left3() {
-                this.isleftbtnTure1 = true;
-                this.isleftbtnTure2 = false;
-                this.isleftbtnTure = false;
+
+                this.$refs.c2.draw2();
             },
 
             // // 地图上5个统计