版本更新

.gitignore

@@ -1,24 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-*.js
-*.vue

src/App.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="app">
+    <router-view />
+    
+  </div>
+</template>
+<style lang="less">
+@import '../font/font.css';
+body {
+  /*background-color: blue;*/
+  /*background: url("assets/index/bj.png");*/
+}
+html,
+body,
+ul,
+li,
+ol,
+dl,
+dd,
+dt,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+img {
+  margin: 0;
+  padding: 0;
+}
+img {
+  display: block;
+  border: none;
+}
+em,
+i {
+  font-style: normal;
+  font-weight: normal;
+}
+ul,
+ol,
+li {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: normal;
+}
+select,
+textarea,
+button {
+  background: none;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  font-family: '微软雅黑';
+  font-size: 14px;
+  color: #4c4c4c;
+}
+a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.el-picker-panel {
+  background-color: #010f5a !important;
+  color: #00d7ff !important;
+  font-weight: 900;
+  font-size: 16px;
+  border: 1px solid #00d7ff !important;
+  margin-top: 5px !important;
+}
+.el-month-table td .cell {
+  color: #00d7ff !important;
+}
+
+.el-date-picker__header-label {
+  color: #00d7ff !important;
+}
+
+.el-year-table td .cell {
+  color: #00d7ff !important;
+}
+</style>

src/api/ajax.js

@@ -0,0 +1,35 @@
+import axios from 'axios'
+import qs from 'qs'
+import storageUtil from '../util/storageUtil'
+
+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) ] = deptArray[deptArray.length - 1];
+            data[ 'deptId'] = deptArray[deptArray.length - 1];
+        }
+    
+        let promise;
+        if (type === 'GET') {
+            let dataStr = ''
+            Object.keys(data).forEach(key => {
+                dataStr += key + '=' + data[key] + '&'
+            })
+            if (dataStr !== '') {
+                dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
+                url = url + '?' + dataStr;
+            }
+
+            promise = axios.get(url)
+        } else {
+            promise = axios.post(url, qs.stringify(data));
+        }
+        promise.then(function (response) {
+            resolve(response.data);
+        }).catch(function (error) {
+            reject(error);
+        })
+    })
+}

src/api/index.js

@@ -0,0 +1,214 @@
+import ajax from './ajax'
+const BASE_URL = 'http://info.windd.cn/bigScreen'
+ //const BASE_URL = 'http://10.16.4.12:8001'
+//const BASE_URL = 'http://1y7g119752.51mypc.cn'  
+
+export const userLogin = (params, requestMethod) => ajax(`${BASE_URL}/chart/auth/login`, params, requestMethod);
+
+export const total = (params,) => ajax(`${BASE_URL}/chart/log/selectGroupByState`, params, 'POST');
+/**
+ * 获取地区
+ */
+export const findDept = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/findDept`, params, requestMethod);
+
+/**
+ * 巡防员信息统计  --->   老年人健康状况
+ */
+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);
+
+/**
+ * 巡防员信息统计  ---> 巡防员巡防方式统计
+ */
+export const oldPersonVisitWay = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/visitWay`, params, requestMethod);
+
+/**
+ * --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+ */
+
+/**
+ * 老年人信息统计  --->   老年人年龄分布统计
+ */
+export const oldPersonFournums = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/fournums`, params, requestMethod);
+
+/**
+ * 老年人信息统计  --->   老年人性别分布统计
+ */
+export const oldPersonSex = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/sex`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->   老年人能力评估统计
+ */
+export const oldPersonAbility = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/ability`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->   老年人健康状况统计
+ */
+export const oldPersonOldHealth = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/oldHealth`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->    老年人类别分布统计
+ */
+export const oldPersonOldType = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/oldType`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->    老年人探访频次统计
+ */
+export const oldPersonVisitFrequency = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/visitFrequency`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ----->   老年人收入来源统计
+ */
+export const oldPersonOldIncome = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/oldIncome`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->    老年人可支配收入统计
+ */
+export const oldPersonIncome = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/income`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->    老年人生活经济状况统计
+ */
+export const oldPersonLivingCondition = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/livingCondition`, params, requestMethod);
+
+/**
+ * 老年人信息统计  ---->    老年人关爱服务统计
+ */
+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);
+
+
+/**
+ * 当月探访数据排行榜  >  地区采集数据
+ */
+export const deptCollect = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/infodept`, params, requestMethod);
+
+/**
+ * 当月探访数据排行榜  >  个人采集数据
+ */
+export const PersonCollect = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/infoperson`, params, requestMethod);
+/**
+ * 当月探访数据排行榜  >  地区探访数据
+ */
+export const visitDept = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/visitdept`, params, requestMethod);
+
+/**
+ * 当月探访数据排行榜  >  个人探访数据
+ */
+export const visitPerson = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/visitperson`, params, requestMethod);
+
+/**
+ * 今日探访（次）
+ */
+export const visitNumDay = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/visitnumday`, params, requestMethod);
+
+/**
+ * 实时信息
+ */
+export const selectInfoMessage = (params, requestMethod) => ajax(`${BASE_URL}/chart/message/selectInfoMessage`, params, requestMethod);
+
+
+/**
+ * ----------------------------------------------------------------------------------------------------------------------------------------
+ */
+
+/**
+ * 地区探访数据排行
+ */
+export const visitDeptPage = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/visitdeptpage`, params, requestMethod);
+
+/**
+ * 地区探访数据排行
+ */
+export const visitPersonPage = (params, requestMethod) => ajax(`${BASE_URL}/chart/visit/visitpersonpage`, params, requestMethod);
+/**
+ * 地区采集数据列表排行
+ */
+export const infoDeptPage = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/infodeptpage`, params, requestMethod);
+
+/**
+ * 个人采集数据列表排行
+ */
+export const infoPersonPage = (params, requestMethod) => ajax(`${BASE_URL}/chart/info/infopersonpage`, params, requestMethod);
+
+
+
+export const selectDeptByName = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/selectDeptByName`, params, requestMethod);

src/components/PatrolmanStatistics/1.vue

@@ -0,0 +1,280 @@
+<template>
+    <div id="myChart" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import { oldPersonSelectUserBySex } from '../../api'
+    export default {
+        //巡防员性别分布统计
+        name: "PatrolmanSexCount",
+        data() {
+            return {
+                dataArr: [],
+                colorArr: ['rgba(0, 227,255, 1)', 'rgba(253, 200, 1, 1)'],
+                myChart: null
+            }
+        },
+        methods: {
+            async draw() {
+                if(this.myChart != null) {
+                    this.myChart.clear();
+                }
+                let img=[
+                    `image://${require('../../assets/PatrolmanStatistics/sex-default.png')}`,
+                    `image://${require('../../assets/PatrolmanStatistics/sex-male.png')}`,
+                    `image://${require('../../assets/PatrolmanStatistics/sex-female.png')}`,
+                ];
+                const result = await oldPersonSelectUserBySex({}, 'POST');
+                this.dataArr = result;
+
+                const seriesArr = [];
+                const titleArr = [];
+                seriesArr.push(
+                    {
+                        xAxisIndex:1,
+                        yAxisIndex:1,
+                        type: "pictorialBar",
+                        symbolRepeat: "fixed",
+                        symbolMargin: "35%",
+                        symbolClip: true,
+                        symbolSize: ["19", "48%"],
+                        symbolPosition: "start",
+                        symbolOffset: [0, 0],
+                        data: [
+                            {
+                                value: this.dataArr[1].percent,
+                                symbol: img[2],
+                            },
+                            {
+                                value: this.dataArr[0].percent,
+                                symbol: img[1],
+                                itemStyle: {
+                                    normal: {
+                                        color: "#fff"
+                                    }
+                                }
+                            },
+
+                        ],
+                        z: 10
+                    },
+                    {
+                        xAxisIndex:1,
+                        yAxisIndex:1,
+                        type: "pictorialBar",
+                        itemStyle: {
+                            normal: {
+                                // opacity: 0.3
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        animationDuration: 0,
+                        symbolRepeat: "fixed",
+                        symbolMargin: "35%",
+                        symbolSize: ["19", "48%"],
+                        symbolPosition: "start",
+                        symbolOffset: [0, 0],
+                        data: [
+                            {
+                                value: 100,
+                                symbol: img[0],
+                                label: {
+                                    show: true,
+                                    position: 'right',
+                                    offset: [20, 0],
+                                    color: this.colorArr[1],
+                                    fontSize: this.fontSize(0.17),
+                                    fontWeight: 'bold',
+                                    formatter: () => {
+                                        return `${this.dataArr[1].value}人`;
+                                    }
+                                },
+                            },
+                            {
+                                value: 100,
+                                symbol: img[0],
+                                label: {
+                                    show: true,
+                                    position: 'right',
+                                    offset: [20, 0],
+                                    color: this.colorArr[0],
+                                    fontSize: this.fontSize(0.17),
+                                    fontWeight: 'bold',
+                                    formatter: () => {
+                                        return `${this.dataArr[0].value}人`;
+                                    }
+                                },
+                            },
+
+                        ],
+                        z: 5
+                    }
+                );
+                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: this.fontSize(0.17),
+                            fontWeight: 'normal',
+                            color: "#fff"
+                        }
+                    });
+
+                    titleArr.push({
+                        text: `${d.percent}%`,
+                        left: "68%",
+                        top: `${i == 0 ? 13 : 55}%`,
+                        textAlign: "center",
+                        textStyle: {
+                            fontSize: this.fontSize(0.17),
+                            fontWeight: 'normal',
+                            color: this.colorArr[i]
+                        }
+                    });
+
+                    const borderArr = new Array(this.dataArr.length).fill({});
+                    borderArr[i] = {value: 110, symbolPosition: 'start'};
+
+                    seriesArr.push({
+                        xAxisIndex:0,
+                        yAxisIndex:0,
+                        type: 'pictorialBar',
+                        symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
+                        symbolSize: ['70%', '50%'],
+                        symbolOffset: [0, 0],
+                        data: borderArr,
+                        label: {
+                            show: false,
+                            position: 'right',
+                            offset: [-120, 0],
+                            color: this.colorArr[this.colorArr.length - 1 - i],
+                            fontSize: this.fontSize(0.17),
+                            fontWeight: 'bold',
+                            formatter: () => {
+                                return `${this.dataArr[this.dataArr.length - 1 - i].value}人`;
+                            }
+                        },
+                        z: 1
+                    });
+
+
+                }
+
+                this.myChart = this.$echarts.init(document.getElementById('myChart'));
+                this.myChart.setOption({
+                    title: titleArr,
+                    grid:[{
+                        left: "2%",
+                        right: "2%",
+                        top: "16%",
+                        bottom: "2%",
+                    },
+                        {
+                            left: "4%",
+                            right: "27%",
+                            top: "16%",
+                            bottom: "2%",
+                        }
+                    ],
+                    xAxis:[
+                        {
+                            max: 100,
+                            gridIndex: 0,
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        },
+                        {
+                            max: 100,
+                            gridIndex: 1,
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        },
+                    ],
+                    yAxis:[
+                        {
+                            gridIndex: 0,
+                            type: 'category',
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        },
+                        {
+                            gridIndex: 1,
+                            type: 'category',
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        }
+                    ],
+                    series: seriesArr
+                });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
+            }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/PatrolmanStatistics/2.vue

@@ -0,0 +1,198 @@
+<template>
+  <div id="ww" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import { oldPersonSelectAuthAndLook } from '../../api'
+
+    export default {
+      name: "PatrolmanAuthenticationCount",
+      data() {
+        return {
+          // 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
+        }
+      },
+      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;
+                    }
+                }
+            }
+
+            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];
+                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: this.fontSize(0.17),
+                                formatter: '{c}人'
+                            },
+                        },
+                        {
+                            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: this.fontSize(0.17),
+                                formatter: '{c}人'
+                            },
+                        }
+                    ]
+                });
+
+                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: this.fontSize(0.15),
+                        formatter: `${ labelArr[i] }`
+                    },
+                    z: 10
+                });
+            }
+            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: ["党员", "群众"],
+                  right: '4%',
+                  top: '10%',
+                  textStyle: {
+                    color: "#fff"
+                  },
+
+                },
+                grid: {
+                    left: '23%',
+                    right: '15%',
+                    bottom: '20%',
+                    height: '80%',
+                    top:'13%',
+                    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
+            });
+        },
+        fontSize(res) {
+          let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+          if (!clientWidth) return;
+          let fontSize = 100 * (clientWidth / 1920);
+          return res * fontSize;
+
+        }
+      },
+      watch: {
+          data() {
+              this.myChart.destroy();
+              this.draw();
+          }
+      },
+      mounted() {
+          this.draw();
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/PatrolmanStatistics/3.vue

@@ -0,0 +1,140 @@
+<template>
+  <div id="qwe" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import { oldPersonSelectByJob } from '../../api'
+    import 'echarts-liquidfill'
+
+    export default {
+        name: "PatrolmanJobDistributionCount",
+        data() {
+          return {
+            dataArr: [],
+            colorArr: [
+              { color1: '#00D7FF', color2: '#00D7FF' },
+              { color1: '#E9F82D', color2: '#E9F82D' },
+              { color1: '#32FC6B', color2: '#32FC6B' },
+              { color1: '#FEC400', color2: '#FEC400' }
+            ]
+          }
+        },
+        methods: {
+          async draw() {
+              const result = await oldPersonSelectByJob({}, 'POST');
+              this.dataArr = result;
+              const seriesArr = [];
+              const titleArr = [];
+
+              for(let i = 0; i < this.dataArr.length; i++) {
+                  const d = this.dataArr[i];
+
+                  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,
+                        color: "#011065"
+                      },
+                      outline: {
+                          show: false
+                      },
+                      waveAnimation: false, // 禁止左右波动
+                      label: {
+                          normal: {
+                              position: ['50%', '50%'],
+                              textStyle: {
+                                  fontSize: this.fontSize(0.2),
+                                  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: this.fontSize(0.18),
+                          fontWeight: 'normal',
+                          color: '#fff'
+                      }
+                  });
+              }
+
+              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
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/PatrolmanStatistics/5.vue

@@ -0,0 +1,111 @@
+<template>
+  <div id="myChart333" style="width: 100%; height: 90%;"></div>
+</template>
+
+<script>
+    import { oldPersonHealth } from '../../api'
+
+    export default {
+        name: "OldPersonHealthCount",
+        data() {
+          return {
+            dataArr: [],
+            colorArr: [
+              { color1: '#0f0', color2: '#C4FFBC' },
+              { color1: '#FF8008', color2: '#FFC837' },
+              { color1: '#00C0FA', color2: '#015EEA' }
+            ],
+            myChart: null
+          }
+        },
+        methods: {
+          async draw() {
+              const result = await oldPersonHealth({}, 'POST');
+              this.dataArr = result;
+
+              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.myChart = this.$echarts.init(document.getElementById('myChart333'));
+              this.myChart.setOption({
+                  legend: {
+                      show: true,
+                      top:'10%',
+                      data: legendArr,
+                      itemGap: 40,
+                      itemWidth: 13,
+                      itemHeight: 13
+                  },
+                  series: [{
+                      type: 'pie',
+                      startAngle: 180,
+                      clockwise: false,
+                      radius: ["30%", '70%'],
+                      center: ['46%', '40%'],
+                      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: this.fontSize(0.16)
+                          }
+                      },
+                      labelLine: {
+                          normal: {
+                              smooth: 0.2,
+                              length: 0,
+
+                          }
+                      }
+                  }]
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+          this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/PatrolmanStatistics/6.vue

@@ -0,0 +1,117 @@
+<template>
+  <div id="myChart66" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import { oldPersonMind } from '../../api'
+
+    export default {
+        //老年人精神状态
+        name: "OldPersonMentality",
+        data() {
+          return {
+            dataArr: [],
+            colorArr: ['#238aff','#ff0','#0f0'],
+            myChart: null
+          }
+        },
+        methods: {
+          async draw() {
+              const result = await oldPersonMind({}, 'POST');
+              this.dataArr = result;
+            console.log(result,"00000000000000000000")
+              const seriesArr = [];
+
+              for(let i = 0; i < this.dataArr.length; i++) {
+                  const d = this.dataArr[i];
+
+                  const imgArr = new Array(this.dataArr.length).fill({});
+                  imgArr[i] = { value: parseFloat(d.value) };
+
+                  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: this.fontSize(0.19)
+                          },
+                          fontWeight: 'bold',
+                          offset: [0, 0],
+                          formatter: '{c}%'
+                      },
+                      data: imgArr
+                  });
+              }
+
+              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: this.fontSize(0.16)
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'value',
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: false
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  series: seriesArr
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/PatrolmanStatistics/7.vue

@@ -0,0 +1,148 @@
+<template>
+  <div id="myChart77" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import { oldPersonSecurity } from '../../api'
+
+    export default {
+        //老年人安全情况
+        name: "OldPersonSafetySituationCount",
+        data() {
+          return {
+            dataArr:[],
+            colorArr: [
+              { color1: '#a3ffb5', color2: '#00ff1c' },
+              { color1: '#72b3ff', color2:  '#008dff'},
+              { color1: '#ca66ff', color2:  '#e900ff'}
+            ],
+            myChart: null
+          }
+        },
+        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];
+
+                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:this.fontSize(0.10)
+                        },
+                        color: this.colorArr[i].color2,
+                        fontWeight: 'bold',
+                        offset: [0, 0],
+                        formatter: `${ d.value }`
+                    },
+                    data: bgArr
+                });
+            }
+
+            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: this.fontSize(0.16)
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    max: 100,
+                    splitLine: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: true,
+                        formatter: '{value}%',
+                        color: '#fff',
+                        fontWeight: 'bold',
+                        fontSize: this.fontSize(0.16)
+                    }
+                },
+                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
+                ]
+            });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/PatrolmanStatistics/8.vue

@@ -0,0 +1,172 @@
+<template>
+  <div id="myChart8" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import { oldPersonHygiene } from '../../api'
+
+    export default {
+        //老年人卫生环境
+        name: "OldPersonSanitaryEnvironmentCount",
+        data() {
+          return {
+            dataArr: [],
+            colorArr: [
+              { color1: '#71ff57', color2: '#C1FF8D' },
+              { color1: '#2c8aff', color2: '#6CB1FF' },
+              { color1: '#ff8a07', color2: '#FFB058' }
+            ],
+            myChart: null
+          }
+        },
+        methods: {
+          async draw(){
+              const result = await oldPersonHygiene({}, 'POST');
+              this.dataArr = result;
+
+              const seriesArr = [];
+              const titleArr = [];
+
+              for(let i = 0; i < this.dataArr.length; i++) {
+                  const d = this.dataArr[i];
+
+                  titleArr.push({
+                      text: d.label,
+                      left: `${ i == 0 ? 49 : ( i == 1 ? 24 : 71 ) }%`,
+                      top: `${ i == 0 ? 24 : 60 }%`,
+                      textAlign: "center",
+                      textStyle: {
+                          fontSize: this.fontSize(0.18),
+                          fontWeight: 'normal',
+                          color: "#fff"
+                      }
+                  });
+
+                  titleArr.push({
+                      text: d.value,
+                      left: `${ i == 0 ? 50 : ( i == 1 ? 23 : 70 ) }%`,
+                      top: `${ i == 0 ? 35 : 70 }%`,
+                      textAlign: "center",
+                      textStyle: {
+                          fontSize: this.fontSize(0.18),
+                          fontWeight: 'normal',
+                          color: this.colorArr[i].color1
+                      }
+                  });
+
+                  seriesArr.push({
+                      type: "pie",
+                      radius: ["40%", '50%'],
+                      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"
+                              }
+                          }
+                      ]
+                  });
+
+                  seriesArr.push({
+                      type: "gauge",
+                      radius: "50%",
+                      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: "30%",
+                          lineStyle: {
+                              width: 10,
+                              color: "#072898"
+                          }
+                      },
+                      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
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/PatrolmanStatistics/9.vue

@@ -0,0 +1,141 @@
+<template>
+  <div id="myChart9" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import { oldPersonLive } from '../../api'
+
+    export default {
+        //老年人居住环境
+        name: "OldPersonLiveCount",
+        data() {
+          return {
+            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: this.fontSize(0.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: this.fontSize(0.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 parseFloat(item.value);
+                          }),
+                          label: {
+                              show: true,
+                              formatter: '{c}%',
+                              color: '#fff',
+                              fontSize: 12
+                          },
+                          itemStyle: {
+                              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                                  offset: 0,
+                                  color: '#96c2ff'
+                              }, {
+                                  offset: 1,
+                                  color: '#0090ff'
+                              }]),
+                          },
+                          lineStyle: {
+                              width: 2
+                          }
+                      }
+                  ]
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/index/1.vue

@@ -0,0 +1,152 @@
+<template>
+    <div id="myChartindex1" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import {oldPersonOldType} from '../../api'
+
+    //圆角柱状图
+    import echarts from 'echarts'
+
+    export default {
+        data() {
+            return {
+                dataArr: [],
+                colorArr: [
+                    {color1: '#9db9ff', color2: '#00f'},
+                    {color1: '#ffe49e', color2: '#ffb300'}
+                ],
+                myChart: null
+            }
+        },
+        methods: {
+            async draw() {
+                if (this.myChart != '' && this.myChart != null) {
+                    this.myChart.clear();
+                }
+              console.log("kokokokokokoko");
+                const result = await oldPersonOldType({}, 'POST');
+                this.dataArr = result;
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartindex1'));
+                this.myChart.setOption({
+                    grid: {
+                        left: '0%',
+                        right: '0%',
+                        top: '22%',
+                        bottom: '20%'
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: this.dataArr.map((item) => item.label),
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            interval:0,
+                            margin:16,
+                            show: true,
+                            textStyle: {
+                                color: 'white',
+                                fontSize: this.fontSize(0.14)
+                            },
+                        },
+
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: ['#315070'],
+                                width: 1,
+                                type: 'solid'
+                            }
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+
+                    },
+                    series: [
+                        {
+                            data: this.dataArr.map((item) => item.value),
+                            type: 'bar',
+                            barWidth: 14,
+                            itemStyle: {
+                                emphasis: {
+                                    barBorderRadius: 7
+                                },
+                                normal: {
+                                    barBorderRadius: 7,
+                                    color: (params) => {
+                                        return new echarts.graphic.LinearGradient(
+                                            0, 0, 0, 1,
+                                            [
+                                                {
+                                                    offset: 0,
+                                                    color: this.colorArr[params.dataIndex % 2 == 0 ? 0 : 1].color1
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: this.colorArr[params.dataIndex % 2 == 0 ? 0 : 1].color2
+                                                }
+                                            ]
+                                        )
+                                    }
+                                }
+                            },
+                            label: {
+                                show: true,
+                                position: 'top',
+                                formatter: '{c}人',
+                                offset: [0, -10],
+                                color: '#fff',
+                                textStyle: {
+                                    color: 'white',
+                                    fontSize: this.fontSize(0.13)
+                                },
+
+                            },
+                            z: 1
+                        },
+                        {
+                            type: 'line',
+                            data: this.dataArr.map((item) => item.value),
+                            symbol: (params, item) => {
+                                return item.dataIndex % 2 == 0 ? `image://${require("../../assets/index/q1.png")}` : `image://${require("../../assets/index/q2.png")}`;
+                            },
+                            symbolSize: [19, 19],
+                            lineStyle: {
+                                color: 'rgba(255, 165, 0, 1)',
+                                width: 1,
+                                type: 'dashed'
+                            },
+                            z: 2
+                        }
+                    ]
+                });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
+            }
+        },
+        mounted() {
+            // this.draw();
+        }
+    }
+</script>
+
+<style type="text/css">
+
+</style>

src/components/index/2.vue

@@ -0,0 +1,352 @@
+<template>
+    <div id="myChartindex2" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import {oldPersonSelectAuthAndLook, selectSexAndLook} from '../../api'
+
+    export default {
+        name: "Mz_tx_charts2",
+        data() {
+            return {
+                dataArr: [
+                    {label: '党员', arr: [{label: '认证', value: 60}, {label: '未认证', value: 80}]},
+                    {label: '群众', arr: [{label: '认证', value: 70}, {label: '未认证', value: 50}]}
+                ],
+                colorArr: [
+                    {color1: '#FFA625', color2: '#FFD09C'},
+                    {color1: '#00FF0C', color2: '#B7FFE2'}
+                ],
+                myChart: null
+            }
+        },
+        methods: {
+            async draw1() {
+                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;
+                        }
+                    }
+                }
+
+                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];
+                    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: this.fontSize(0.16),
+                                    formatter: '{c}人'
+                                },
+                            },
+                            {
+                                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: this.fontSize(0.16),
+                                    formatter: '{c}人'
+                                },
+                            }
+                        ]
+                    });
+
+                    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: [-35, 0],
+                            distance: 0,
+                            color: '#fff',
+                            fontSize: this.fontSize(0.15),
+                            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: ["党员", "群众"],
+                        right: '4%',
+                        top: '2%',
+                        textStyle: {
+                            color: "#fff"
+                        },
+                    },
+                    grid: {
+                        left: '28.5%',
+                        right: '15%',
+                        top:'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
+                });
+            },
+            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;
+                        }
+                    }
+                }
+
+                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];
+                    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: this.fontSize(0.16),
+                                    formatter: '{c}人'
+                                },
+                            },
+                            {
+                                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: this.fontSize(0.16),
+                                    formatter: '{c}人'
+                                },
+                            }
+                        ]
+                    });
+
+                    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: this.fontSize(0.17),
+                            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: ["党员", "群众"],
+                        right: '4%',
+                        top: '2%',
+                        textStyle: {
+                            color: "#fff"
+                        },
+                    },
+                    grid: {
+                        left: '25%',
+                        right: '15%',
+                        top:'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
+                });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
+            }
+        },
+        mounted() {
+            // this.draw1();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/index/3.vue

@@ -0,0 +1,264 @@
+<template>
+  <div id="myChartindex3" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+import { infomonth } from '../../api'
+
+export default {
+  name: "CollectPatrolDataCount",
+  data() {
+    return {
+      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' }],
+      myChart: null
+    }
+  },
+  methods: {
+    async draw() {
+      const result = await infomonth({}, 'POST');
+      this.dataArr = result;
+      const valueArr1 = this.dataArr[0].data.map((item) => {
+        return item.value;
+      });
+
+      const valueArr2 = this.dataArr[1].data.map((item) => {
+        return item.value;
+      });
+      var max = valueArr2.reduce(function (a, b) {
+        return b > a ? b : a;
+      });
+      var ret1 = valueArr2.findIndex((value) => {
+        return value == max
+      })
+      let symbolOffset = [];
+      let symbol = '';
+      if (ret1 + 1 >= valueArr2.length - 3) {
+        symbolOffset = [-40, -35];
+        symbol = `image://${require('../../assets/index/line-tips1.png')}`
+      } else {
+        symbolOffset = [50, -35];
+        symbol = `image://${require('../../assets/index/line-tips.png')}`
+      }
+      console.log(symbol);
+      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;
+
+      if (this.myChart != null) {
+        this.myChart.clear();
+      }
+
+      this.myChart = this.$echarts.init(document.getElementById('myChartindex3'));
+      this.myChart.setOption({
+        grid: {
+          left: "6%",
+          right: "6%",
+          bottom: '20%',
+          // containLabel:true,
+        },
+        legend: {
+          data: ['采集数据', '巡访数据'],
+          right: '4%',
+          top: '2%',
+          textStyle: {//图例文字的样式
+            color: '#ccc',
+            fontSize: this.fontSize(0.16)
+          },
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            "type": "shadow" // 默认为直线，可选为："line" | "shadow"
+          },
+          backgroundColor: '',
+          formatter: function (params)//数据格式
+          {
+            console.log(params);
+            var relVal = '<div class="bag1">' + '<div>' + params[0].seriesName.substring(0, 2) + '：' + "<span style='color: #2796ff;'>" + params[0].value + '人' + '</span>' + '</div>';
+            relVal += '<div>' + params[1].seriesName.substring(0, 2) + '：' + "<span style='color: #ff8700;'>" + params[1].value + '次' + '</span>' + '</div>' + '</div>';
+            return relVal;
+          },
+          position: function (point) {
+            // 固定在顶部
+            return [point[0], '10%'];
+          }
+        },
+
+        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',
+            interval: 0,
+          },
+          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
+              }
+            },
+            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: symbol,
+              symbolSize: [99, 40],
+              symbolOffset: symbolOffset,
+
+              label: {
+                color: '#fff',
+                position: [10, 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'
+          }
+        ]
+      });
+    },
+    fontSize(res) {
+      let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+      if (!clientWidth) return;
+      let fontSize = 100 * (clientWidth / 1920);
+      return res * fontSize;
+
+    }
+  },
+  mounted() {
+    // this.draw();
+  }
+}
+</script>
+
+<style scoped>
+#myChartindex3 >>> .bag1 {
+  background: url('../../assets/index/line-tips.png') no-repeat;
+  /* background-size: contain; */
+  background-size: 100% 100%;
+  width: 120%;
+  height: 10%;
+  text-indent: 20px;
+  font-size: 1.2vh;
+  box-sizing: border-box;
+  padding-top: 2px;
+  /* border: orangered solid 1px; */
+}
+</style>

src/components/index/4.vue

@@ -0,0 +1,481 @@
+<template>
+  <div id="myChartindex4" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+import { visitDept, visitPerson, deptCollect, PersonCollect } from '../../api'
+import echarts from 'echarts'
+
+export default {
+  name: "Mz_tx_charts",
+  data() {
+    return {
+      dataArr: [],
+      myChart: null
+    }
+  },
+  methods: {
+    getArrByKey(data, k) {
+      let key = k || "value";
+      let res = [];
+      if (data) {
+        data.forEach(function (t) {
+          res.push(t[key]);
+        });
+      }
+      return res;
+    },
+    getMaxValueOfArray(data) {
+      if (data == null || data.length == 0) {
+        return 0;
+      }
+      let maxValue = data[0].value;
+      for (let i = 1; i < data.length; i++) {
+        if (maxValue < data[i].value) {
+          maxValue = data[i].value;
+        }
+      }
+      return maxValue;
+    },
+    // 地区巡访
+    async draw1() {
+      const result = await visitDept({}, 'POST');
+      this.dataArr = result;
+
+      const seriesArr = [];
+      // for(let i = 0; i < this.dataArr.length; i++) {
+      //     const kkArr = new Array(length).fill({});
+      //     kkArr[i] = { value: 100, symbolPosition: 'start' };
+      //     let symbolImage = `image://${require('../../assets/index/y-text-4.png')}`;
+      //     if(i < 4) {
+      //         symbolImage =  `image://${require('../../assets/index/y-text-' + (i + 1) + '.png')}`
+      //     }
+      //     seriesArr.push({
+      //         type: 'pictorialBar',
+      //         symbol: symbolImage,
+      //         symbolSize: [24, 24],
+      //         symbolOffset: [-40, -8],
+      //         data: kkArr,
+      //         label: {
+      //             show: true,
+      //             position: 'left',
+      //             offset: [-19, -6],
+      //             color: '#fff',
+      //             fontSize: this.fontSize(0.17),
+      //             formatter: `${ i + 1 }`
+      //         },
+      //         z: 2
+      //     });
+      // }
+
+      if (this.myChart != null) {
+        this.myChart.clear();
+      }
+
+      this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
+      this.myChart.setOption({
+        grid: {
+          top: '10%',
+          bottom: '-18%',
+          right: '0%',
+          left: '2%',
+          containLabel: true
+        },
+        xAxis: {
+          show: false,
+          max: this.getMaxValueOfArray(this.dataArr)
+        },
+        yAxis: [{
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: this.getArrByKey(this.dataArr, 'label'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        }, {
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: this.getArrByKey(this.dataArr, 'label'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            // shadowOffsetX: '-0px',
+            // align: 'right',
+            // verticalAlign: 'bottom',
+            lineHeight: 0,
+            fontSize: this.fontSize(0.16),
+            color: '#fff',
+            formatter: (value, index) => {
+              return this.dataArr[index].value + '次';
+            },
+          }
+        }],
+        series: [{
+          type: 'bar',
+          showBackground: true,
+          barBorderRadius: 50,
+          yAxisIndex: 0,
+          data: this.dataArr,
+          barWidth: 6,
+          itemStyle: {
+            color: () => {
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: '#0071fc'
+              }, {
+                offset: 1,
+                color: '#4be2ec'
+              }]);
+            },
+            barBorderRadius: 30,
+          },
+          label: {
+            normal: {
+              color: '#00b8ff',
+              show: true,
+              position: [0, -this.fontSize(0.18)],
+              textStyle: {
+                fontSize: this.fontSize(0.16)
+              },
+              formatter: function (a,) {
+                return a.name;
+              }
+            }
+          }
+        }, ...seriesArr]
+      });
+    },
+    // 个人巡访
+    async draw2() {
+      const result = await visitPerson({}, 'POST');
+      this.dataArr = result;
+      const seriesArr = [];
+      if (this.myChart != null) {
+        this.myChart.clear();
+      }
+      this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
+      this.myChart.setOption({
+        grid: {
+          top: '10%',
+          bottom: '-18%',
+          right: '0%',
+          left: '2%',
+          containLabel: true
+        },
+        xAxis: {
+          show: false,
+          max: this.getMaxValueOfArray(this.dataArr)
+        },
+        yAxis: [{
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: this.getArrByKey(this.dataArr, 'label'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        }, {
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: this.getArrByKey(this.dataArr, 'label'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            // shadowOffsetX: '-50px',
+            // align: 'right',
+            // verticalAlign: 'bottom',
+            // lineHeight: 30,
+            fontSize: this.fontSize(0.16),
+            color: '#fff',
+            formatter: (value, index) => {
+              return this.dataArr[index].value + '次';
+            },
+          }
+        }],
+        series: [{
+          type: 'bar',
+          showBackground: true,
+          barBorderRadius: 30,
+          yAxisIndex: 0,
+          data: this.dataArr,
+          barWidth: 6,
+          itemStyle: {
+            color: () => {
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: '#0023ff'
+              }, {
+                offset: 1,
+                color: '#75c6ff'
+              }]);
+            },
+            barBorderRadius: 30,
+          },
+          label: {
+            normal: {
+              color: '#00b8ff',
+              show: true,
+              position: [0, -this.fontSize(0.18)],
+              textStyle: {
+                fontSize: this.fontSize(0.16)
+              },
+              formatter: function (a,) {
+                return a.name;
+              }
+            }
+          }
+        }, ...seriesArr]
+      });
+    },
+    // 地区采集
+    async draw3() {
+      const result = await deptCollect({}, 'POST');
+      this.dataArr = result;
+      const seriesArr = [];
+      if (this.myChart != null) {
+        this.myChart.clear();
+      }
+      this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
+      this.myChart.setOption({
+        grid: {
+          top: '10%',
+          bottom: '-18%',
+          right: '0%',
+          left: '2%',
+          containLabel: true
+        },
+        xAxis: {
+          show: false,
+          max: this.getMaxValueOfArray(this.dataArr)
+        },
+        yAxis: [{
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: this.getArrByKey(this.dataArr, 'label'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        }, {
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: this.getArrByKey(this.dataArr, 'label'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            // shadowOffsetX: '-50px',
+            // align: 'right',
+            // verticalAlign: 'bottom',
+            // lineHeight: 30,
+            fontSize: this.fontSize(0.16),
+            color: '#fff',
+            formatter: (value, index) => {
+              return this.dataArr[index].value + '次';
+            },
+          }
+        }],
+        series: [{
+          type: 'bar',
+          showBackground: true,
+          barBorderRadius: 30,
+          yAxisIndex: 0,
+          data: this.dataArr,
+          barWidth: 6,
+          itemStyle: {
+            color: () => {
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: '#0023ff'
+              }, {
+                offset: 1,
+                color: '#75c6ff'
+              }]);
+            },
+            barBorderRadius: 30,
+          },
+          label: {
+            normal: {
+              color: '#00b8ff',
+              show: true,
+              position: [0, -this.fontSize(0.18)],
+              textStyle: {
+                fontSize: this.fontSize(0.16)
+              },
+              formatter: function (a,) {
+                return a.name;
+              }
+            }
+          }
+        }, ...seriesArr]
+      });
+    },
+    // 个人采集
+    async draw4() {
+      const result = await PersonCollect({}, 'POST');
+      this.dataArr = result;
+      const seriesArr = [];
+      if (this.myChart != null) {
+        this.myChart.clear();
+      }
+      this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
+      this.myChart.setOption({
+        grid: {
+          top: '10%',
+          bottom: '-18%',
+          right: '0%',
+          left: '2%',
+          containLabel: true
+        },
+        xAxis: {
+          show: false,
+          max: this.getMaxValueOfArray(this.dataArr)
+        },
+        yAxis: [{
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: this.getArrByKey(this.dataArr, 'label'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        }, {
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: this.getArrByKey(this.dataArr, 'label'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            // shadowOffsetX: '-50px',
+            // align: 'right',
+            // verticalAlign: 'bottom',
+            // lineHeight: 30,
+            fontSize: this.fontSize(0.16),
+            color: '#fff',
+            formatter: (value, index) => {
+              return this.dataArr[index].value + '次';
+            },
+          }
+        }],
+        series: [{
+          type: 'bar',
+          showBackground: true,
+          barBorderRadius: 30,
+          yAxisIndex: 0,
+          data: this.dataArr,
+          barWidth: 6,
+          itemStyle: {
+            color: () => {
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: '#0023ff'
+              }, {
+                offset: 1,
+                color: '#75c6ff'
+              }]);
+            },
+            barBorderRadius: 30,
+          },
+          label: {
+            normal: {
+              color: '#00b8ff',
+              show: true,
+              position: [0, -this.fontSize(0.18)],
+              textStyle: {
+                fontSize: this.fontSize(0.16)
+              },
+              formatter: function (a,) {
+                return a.name;
+              }
+            }
+          }
+        }, ...seriesArr]
+      });
+    },
+    fontSize(res) {
+      let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+      if (!clientWidth) return;
+      let fontSize = 100 * (clientWidth / 1920);
+      return res * fontSize;
+    }
+  },
+  mounted() {
+    // this.draw4();
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/index/5.vue

@@ -0,0 +1,291 @@
+<template>
+    <div id="myChartindex5" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import {fourquan} from '../../api'
+
+    import 'echarts-liquidfill'
+
+    export default {
+        name: "OperationAnalysisCount",
+        data() {
+            return {
+                data1: {label: '巡访平均周期', value: '3.5天'},
+                data2: {label: '子女绑定占比', value: '60%'},
+                data3: {label: '积分存量', value: 123156},
+                data4: {label: '兑换比例', value: '60%'},
+                colorArr: [
+                    {color1: '#ff8d00', color2: '#FFF43F'},
+                    {color1: '#5fff06', color2: '#B4FF9F'},
+                    {color1: '#60b8db', color2: '#afd3ff'},
+                    {color1: '#ff00e8', color2: '#f48fff'}
+                ],
+                myChart: null
+            }
+        },
+        methods: {
+            handlerData(val) {
+                const length = String(parseInt(val)).length;
+                let r = 1;
+                if (length != 0) {
+                    r = r + new Array(length).fill(0).join('');
+                }
+                return (parseInt(val) / parseInt(r)).toFixed(2);
+            },
+            createLiquidfill(obj) {
+                return {
+                    type: 'liquidFill',
+                    data: [obj.value],
+                    radius: '67%',
+                    center: [`${obj.center_x}%`, `${obj.center_y}%`],
+                    outline: {
+                        show: false
+                    },
+                    backgroundStyle: {
+                        borderWidth: 0,
+                        color: "transparent"
+                    },
+                    waveAnimation: false, // 禁止左右波动
+                    label: {
+                        normal: {
+                            position: ['50%', '53%'],
+                            textStyle: {
+                                fontSize:  this.fontSize(0.20),
+                                color: '#fff'
+                            },
+                            formatter: `${obj.text}`
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: new this.$echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    {offset: 0, color: this.colorArr[obj.index].color1},
+                                    {offset: 1, color: this.colorArr[obj.index].color2}
+                                ]
+                            )
+                        }
+                    }
+                };
+            },
+            createCircleImage() {
+
+            },
+            async draw() {
+                const result = await fourquan({}, 'POST');
+                this.data1 = result.data1;
+                this.data2 = result.data2;
+                this.data3 = result.data3;
+                this.data4 = result.data4;
+
+                const seriesArr = [];
+
+                const liquidFill1 = this.createLiquidfill({
+                    index: 0,
+                    center_x: 46,
+                    center_y: 55,
+                    text: this.data1.value,
+                    value: this.handlerData(this.data1.value)
+                });
+                seriesArr.push(liquidFill1);
+
+                // const liquidFill2 = this.createLiquidfill({ index: 1, center_x: 66, center_y: 28, text: this.data2.value + '%', value: this.handlerData(this.data2.value + '%') });
+                // seriesArr.push(liquidFill2);
+                //
+                // const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 16, center_y: 78, text: this.data3.value, value: this.handlerData(this.data3.value) });
+                // seriesArr.push(liquidFill3);
+                //
+                // const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 66, center_y: 78, text: this.data4.value, value: this.handlerData(this.data4.value) });
+                // seriesArr.push(liquidFill4);
+
+                // seriesArr.push({
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/index/liquidfill-1-circle.png')}`,
+                //     symbolSize: [40, 40],
+                //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [20, -100] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [-45, -90],
+                //         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: [130, -60] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [-60, -55],
+                //         color: this.colorArr[0].color1,
+                //         fontSize: 16,
+                //         formatter: this.data1.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, -90],
+                //         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, -55],
+                //         color: this.colorArr[1].color1,
+                //         fontSize: 16,
+                //         formatter: `${this.data2.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: [20, 30] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [-60, 40],
+                //
+                //         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: [130, 70] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [-60, 75],
+                //         color: this.colorArr[2].color1,
+                //         fontSize: 16,
+                //         formatter: `${this.data3.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, 40],
+                //         color: '#fff',
+                //         fontSize: 16,
+                //         formatter: '兑换比例'
+                //     },
+                //     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, 80],
+                //         color: this.colorArr[3].color1,
+                //         fontSize: 16,
+                //         formatter: `${this.data4.value}`
+                //     },
+                //     z: 2
+                // });
+
+                if (this.myChart != null) {
+                    this.myChart.clear();
+                }
+
+                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
+                });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
+            }
+        },
+        mounted() {
+            // this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/index/6.vue

@@ -0,0 +1,284 @@
+<template>
+  <div id="myChartindex6" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import { fourquan } from '../../api'
+
+    import 'echarts-liquidfill'
+    export default {
+        name: "OperationAnalysisCount",
+        data() {
+          return {
+            data1: { label: '巡访平均周期', value: '3.5天' },
+            data2: { label: '子女绑定占比', value: '60%' },
+            data3: { label: '积分存量', value: 123156 },
+            data4: { label: '兑换比例', value: '60%' },
+            colorArr: [
+              { color1: '#ff8d00', color2: '#FFF43F' },
+              { color1: '#5fff06', color2: '#B4FF9F' },
+              { color1: '#60b8db', color2: '#afd3ff' },
+              { color1: '#ff00e8', color2: '#f48fff' }
+            ],
+            myChart: null
+          }
+        },
+        methods: {
+          handlerData(val) {
+            const length = String(parseInt(val)).length;
+            let r = 1;
+            if(length != 0) {
+              r = r + new Array(length).fill(0).join('');
+            }
+            return (parseInt(val) / parseInt(r)).toFixed(2);
+          },
+          createLiquidfill(obj) {
+            return {
+              type: 'liquidFill',
+              data: [obj.value],
+              radius: '60%',
+              center: [`${obj.center_x}%`, `${obj.center_y}%`],
+              outline: {
+                show: false
+              },
+              backgroundStyle: {
+                borderWidth: 0,
+                color: "transparent"
+              },
+              waveAnimation: false, // 禁止左右波动
+              label: {
+                normal: {
+                  position: ['50%', '53%'],
+                  textStyle: {
+                    fontSize:  this.fontSize(0.20),
+                    color: '#fff'
+                  },
+                  formatter: `${ obj.text }`
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: new this.$echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      {offset: 0, color: this.colorArr[obj.index].color1},
+                      {offset: 1, color: this.colorArr[obj.index].color2}
+                    ]
+                  )
+                }
+              }
+            };
+          },
+          createCircleImage(){
+
+          },
+          async draw() {
+              const result = await fourquan({}, 'POST');
+              this.data1 = result.data1;
+              this.data2 = result.data2;
+              this.data3 = result.data3;
+              this.data4 = result.data4;
+
+              const seriesArr = [];
+
+              // const liquidFill1 = this.createLiquidfill({ index: 0, center_x: 46, center_y: 55, text: this.data2.value, value: this.handlerData(this.data2.value) });
+              // seriesArr.push(liquidFill1);
+
+              const liquidFill2 = this.createLiquidfill({ index: 1, center_x: 46, center_y: 50, text: this.data2.value + '%', value: this.handlerData(this.data2.value + '%') });
+              seriesArr.push(liquidFill2);
+              //
+              // const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 16, center_y: 78, text: this.data3.value, value: this.handlerData(this.data3.value) });
+              // seriesArr.push(liquidFill3);
+              //
+              // const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 66, center_y: 78, text: this.data4.value, value: this.handlerData(this.data4.value) });
+              // seriesArr.push(liquidFill4);
+
+              // seriesArr.push({
+              //     type: 'pictorialBar',
+              //     symbol: `image://${require('../../assets/index/liquidfill-1-circle.png')}`,
+              //     symbolSize: [40, 40],
+              //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [20, -100] }, {}],
+              //     label: {
+              //         show: true,
+              //         position: 'top',
+              //         offset: [-45, -90],
+              //         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: [130, -60] }, {}],
+              //     label: {
+              //         show: true,
+              //         position: 'top',
+              //         offset: [-60, -55],
+              //         color: this.colorArr[0].color1,
+              //         fontSize: 16,
+              //         formatter: this.data1.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, -90],
+              //         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, -55],
+              //         color: this.colorArr[1].color1,
+              //         fontSize: 16,
+              //         formatter: `${this.data2.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: [20, 30] }, {}],
+              //     label: {
+              //         show: true,
+              //         position: 'top',
+              //         offset: [-60, 40],
+              //
+              //         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: [130, 70] }, {}],
+              //     label: {
+              //         show: true,
+              //         position: 'top',
+              //         offset: [-60, 75],
+              //         color: this.colorArr[2].color1,
+              //         fontSize: 16,
+              //         formatter: `${this.data3.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, 40],
+              //         color: '#fff',
+              //         fontSize: 16,
+              //         formatter: '兑换比例'
+              //     },
+              //     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, 80],
+              //         color: this.colorArr[3].color1,
+              //         fontSize: 16,
+              //         formatter: `${this.data4.value}`
+              //     },
+              //     z: 2
+              // });
+
+              if(this.myChart != null) {
+                  this.myChart.clear();
+              }
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartindex6'));
+              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
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        mounted() {
+          // this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/index/7.vue

@@ -0,0 +1,148 @@
+<template>
+  <div id="myChartindex77" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import { fourquan } from '../../api'
+
+    import 'echarts-liquidfill'
+    export default {
+        name: "OperationAnalysisCount",
+        data() {
+          return {
+            data1: { label: '巡访平均周期', value: '3.5天' },
+            data2: { label: '子女绑定占比', value: '60%' },
+            data3: { label: '积分存量', value: 123156 },
+            data4: { label: '兑换比例', value: '60%' },
+            colorArr: [
+              { color1: '#ff8d00', color2: '#FFF43F' },
+              { color1: '#5fff06', color2: '#B4FF9F' },
+              { color1: '#60b8db', color2: '#afd3ff' },
+              { color1: '#ff00e8', color2: '#f48fff' }
+            ],
+            myChart: null
+          }
+        },
+        methods: {
+          handlerData(val) {
+            const length = String(parseInt(val)).length;
+            let r = 1;
+            if(length != 0) {
+              r = r + new Array(length).fill(0).join('');
+            }
+            return (parseInt(val) / parseInt(r)).toFixed(2);
+          },
+          createLiquidfill(obj) {
+            return {
+              type: 'liquidFill',
+              data: [obj.value],
+              radius: '67%',
+              center: [`${obj.center_x}%`, `${obj.center_y}%`],
+              outline: {
+                show: false
+              },
+              backgroundStyle: {
+                borderWidth: 0,
+                color: "transparent"
+              },
+              waveAnimation: false, // 禁止左右波动
+              label: {
+                normal: {
+                  position: ['50%', '53%'],
+                  textStyle: {
+                    fontSize:  this.fontSize(0.20),
+                    color: '#fff'
+                  },
+                  formatter: `${ obj.text }`
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: new this.$echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      {offset: 0, color: this.colorArr[obj.index].color1},
+                      {offset: 1, color: this.colorArr[obj.index].color2}
+                    ]
+                  )
+                }
+              }
+            };
+          },
+          createCircleImage(){
+
+          },
+          async draw() {
+              const result = await fourquan({}, 'POST');
+
+              this.data1 = result.data1;
+              this.data2 = result.data2;
+              this.data3 = result.data3;
+              this.data4 = result.data4;
+
+              const seriesArr = [];
+            const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 46, center_y: 55, text: this.data3.value, value: this.handlerData(this.data3.value) });
+            seriesArr.push(liquidFill3);
+
+              if(this.myChart != null) {
+                  this.myChart.clear();
+              }
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartindex77'));
+              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
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+
+        },
+
+        mounted() {
+          // this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/index/8.vue

@@ -0,0 +1,148 @@
+<template>
+  <div id="myChartindex8" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import { fourquan } from '../../api'
+
+    import 'echarts-liquidfill'
+    export default {
+        name: "OperationAnalysisCount",
+        data() {
+          return {
+            data1: { label: '巡访平均周期', value: '3.5天' },
+            data2: { label: '子女绑定占比', value: '60%' },
+            data3: { label: '积分存量', value: 123156 },
+            data4: { label: '兑换比例', value: '60%' },
+            colorArr: [
+              { color1: '#ff8d00', color2: '#FFF43F' },
+              { color1: '#5fff06', color2: '#B4FF9F' },
+              { color1: '#60b8db', color2: '#afd3ff' },
+              { color1: '#ff00e8', color2: '#f48fff' }
+            ],
+            myChart: null
+          }
+        },
+        methods: {
+          handlerData(val) {
+            const length = String(parseInt(val)).length;
+            let r = 1;
+            if(length != 0) {
+              r = r + new Array(length).fill(0).join('');
+            }
+            return (parseInt(val) / parseInt(r)).toFixed(2);
+          },
+          createLiquidfill(obj) {
+            return {
+              type: 'liquidFill',
+              data: [obj.value],
+              radius: '67%',
+              center: [`${obj.center_x}%`, `${obj.center_y}%`],
+              outline: {
+                show: false
+              },
+              backgroundStyle: {
+                borderWidth: 0,
+                color: "transparent"
+              },
+              waveAnimation: false, // 禁止左右波动
+              label: {
+                normal: {
+                  position: ['50%', '53%'],
+                  textStyle: {
+                    fontSize: this.fontSize(0.20),
+                    color: '#fff'
+                  },
+                  formatter: `${ obj.text }`
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: new this.$echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      {offset: 0, color: this.colorArr[obj.index].color1},
+                      {offset: 1, color: this.colorArr[obj.index].color2}
+                    ]
+                  )
+                }
+              }
+            };
+          },
+          createCircleImage(){
+
+          },
+          async draw() {
+              const result = await fourquan({}, 'POST');
+              console.log(result,"0000");
+              this.data1 = result.data1;
+              this.data2 = result.data2;
+              this.data3 = result.data3;
+              this.data4 = result.data4;
+
+              const seriesArr = [];
+
+            const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 46, center_y: 55, text: this.data4.value, value: this.handlerData(this.data4.value) });
+            seriesArr.push(liquidFill4);
+
+
+              if(this.myChart != null) {
+                  this.myChart.clear();
+              }
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartindex8'));
+              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
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        mounted() {
+          // this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/index/jlMap.vue

@@ -0,0 +1,762 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="width: 100%;height: 100%;">
+      <el-button v-if="userDept =='吉林'" size="mini" type="primary" @click="backMap()" class="btn">返回吉林省</el-button>
+      <el-button v-if="userDepterji" size="mini" type="primary" @click="backMap1()" class="btn">返回{{userDept}}
+      </el-button>
+      <div id="map1" style=" width: 100%; height: 100%;"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+let echarts = require("echarts/lib/echarts");
+import $ from "jquery";
+require("echarts/lib/chart/map");
+require("echarts/map/js/china");
+import "echarts/map/js/province/jilin.js";
+//import jilin from "../../util/jilin";
+
+export default {
+  name: "mapChart",
+  data() {
+    return {
+      myChart: '',
+    };
+  },
+  props: {
+    userDept: {
+      type: String,
+      default: '',   //默认值
+    },
+    userDept1: {
+      type: String,
+      default: '',   //默认值
+    },
+  },
+  mounted() {
+    // 初始化加载
+    console.log(this.userDept, "ssssssssssssssss");
+    console.log(this.userDept1);
+    this.mapChart(this.userDept, this.userDept1);
+  },
+  computed: {
+    userDepterji() {
+      let flag = false
+      if (this.userDept == '白城市' || this.userDept == '松原市' || this.userDept == '长春市' || this.userDept == '四平市' || this.userDept == '吉林市' || this.userDept == '辽源市' || this.userDept == '通化市' || this.userDept == '白山市' || this.userDept == '延边朝鲜族自治州') {
+        flag = true
+      }
+      return flag
+    }
+  },
+  methods: {
+    backMap() {
+      // this.$options.methods.mapChart();
+      this.myChart.dispose();
+      this.mapChart(this.userDept, this.userDept1);
+      this.$parent.back();
+    },
+
+
+    backMap1() {
+      this.myChart.dispose();
+
+      this.mapChart(this.userDept, this.userDept1);
+      this.$parent.back1();
+    },
+
+    // 配置渲染map
+    mapChart(val1, val) {
+      let myChart = echarts.init(document.getElementById("map1"));
+      this.myChart = myChart
+      let dataList = [
+        { name: "四平市", dept2: '2' },
+        { name: "双辽市", dept3: '3' },
+        { name: "公主岭市", dept3: '3' },
+        { name: "梨树县", dept3: '3' },
+        { name: "铁西区", dept3: '3' },
+        { name: "铁东区", dept3: '3' },
+        { name: "伊通满族自治县", dept3: '3' },
+
+        { name: "吉林市", dept2: '2' },
+        { name: "舒兰市", dept3: '3' },
+        { name: "龙潭区", dept3: '3' },
+        { name: "丰满区", dept3: '3' },
+        { name: "船营区", dept3: '3' },
+        { name: "昌邑区", dept3: '3' },
+        { name: "永吉县", dept3: '3' },
+        { name: "磐石市", dept3: '3' },
+        { name: "蛟河市", dept3: '3' },
+        { name: "桦甸市", dept3: '3' },
+
+        { name: "长春市", dept2: '2' },
+        { name: "南关区", dept3: '3' },
+        { name: "朝阳区", dept3: '3' },
+        { name: "绿园区", dept3: '3' },
+        { name: "宽城区", dept3: '3' },
+        { name: "二道区", dept3: '3' },
+        { name: "双阳区", dept3: '3' },
+        { name: "榆树市", dept3: '3' },
+        { name: "德惠市", dept3: '3' },
+        { name: "九台区", dept3: '3' },
+        { name: "农安县", dept3: '3' },
+
+
+        { name: "辽源市", dept2: '2' },
+        { name: "西安区", dept3: '3' },
+        { name: "龙山区", dept3: '3' },
+        { name: "东辽县", dept3: '3' },
+        { name: "东丰县", dept3: '3' },
+
+
+        { name: "通化市", dept2: '2' },
+        { name: "梅河口市", dept3: '3' },
+        { name: "辉南县", dept3: '3' },
+        { name: "柳河县", dept3: '3' },
+        { name: "集安市", dept3: '3' },
+        { name: "通化县", dept3: '3' },
+        { name: "东昌区", dept3: '3' },
+        { name: "二道江区", dept3: '3' },
+
+
+        { name: "白山市", dept2: '2' },
+        { name: "江源区", dept3: '2' },
+        { name: "浑江区", dept3: '2' },
+        { name: "临江市", dept3: '2' },
+        { name: "靖宇县", dept3: '3' },
+        { name: "抚松县", dept3: '3' },
+        { name: "长白朝鲜族自治县", dept3: '3' },
+
+        { name: "松原市", dept2: '2' },
+        { name: "乾安县", dept3: '3' },
+        { name: "长岭县", dept3: '3' },
+        { name: "扶余市", dept3: '3' },
+        { name: "宁江区", dept3: '3' },
+        { name: "前郭尔罗斯蒙古族自治县", dept3: '3' },
+
+        { name: "白城市", dept2: '2' },
+        { name: "洮北区", dept3: '3' },
+        { name: "洮南市", dept3: '3' },
+        { name: "大安市", dept3: '3' },
+        { name: "通榆县", dept3: '3' },
+        { name: "镇赉县", dept3: '3' },
+
+        { name: "延边朝鲜族自治州", dept2: '2' },
+        { name: "敦化市", dept3: '3' },
+        { name: "龙井市", dept3: '3' },
+        { name: "和龙市", dept3: '3' },
+        { name: "延吉市", dept3: '3' },
+        { name: "图们市", dept3: '3' },
+        { name: "珲春市", dept3: '3' },
+        { name: "汪清县", dept3: '3' },
+        { name: "安图县", dept3: '3' },
+
+      ];
+      // echarts.registerMap('吉林', jilin)
+      // initEcharts("吉林");
+      let siveMap = '';
+      var that = this;
+      function initEcharts(map) {
+        siveMap = map;
+        let option = {
+          zlevel: 0,
+          geo: {
+            map: map,
+            roam: false,
+            scaleLimit: {
+              min: 1.2,
+              max: 3
+            },
+            zoom: 1.2,
+            //图形上的文本标签，可用于说明图形的一些数据信息
+            label: {
+              normal: {
+                show: true,
+                fontSize: 16,
+                color: "#fff"
+              }
+            },
+
+            //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
+            itemStyle: {
+              //normal 是图形在默认状态下的样式；
+              normal: {
+                areaColor: "rgba(30,117,187,0.7)",
+                borderColor: "#23b9e8"
+              },
+              //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
+              emphasis: {
+                areaColor: "#23b9e8"
+                // 713131  23b9e8
+              }
+            }
+          },
+          series: [
+            {
+              name: "信息量",
+              type: "map",
+              mapType: map,
+              geoIndex: 0,
+              data: dataList
+            }
+          ]
+        };
+        myChart.setOption(option)
+
+      }
+      //定义全国省份的数组
+      var provinces = {
+        // 23个省
+        台湾: "taiwan",
+        河北: "hebei",
+        山西: "shanxi",
+        辽宁: "liaoning",
+        吉林: "jilin",
+        黑龙江: "heilongjiang",
+        江苏: "jiangsu",
+        浙江: "zhejiang",
+        安徽: "anhui",
+        福建: "fujian",
+        江西: "jiangxi",
+        山东: "shandong",
+        河南: "henan",
+        湖北: "hubei",
+        湖南: "hunan",
+        广东: "guangdong",
+        海南: "hainan",
+        四川: "sichuan",
+        贵州: "guizhou",
+        云南: "yunnan",
+        陕西: "shanxi1",
+        甘肃: "gansu",
+        青海: "qinghai",
+        // 5个自治区
+        新疆: "xinjiang",
+        广西: "guangxi",
+        内蒙古: "neimenggu",
+        宁夏: "ningxia",
+        西藏: "xizang",
+        // 4个直辖市
+        北京: "beijing",
+        天津: "tianjin",
+        上海: "shanghai",
+        重庆: "chongqing",
+        // 2个特别行政区
+        香港: "xianggang",
+        澳门: "aomen"
+      };
+
+      // 市
+      var cityMap = {
+        北京市: "110100",
+        天津市: "120100",
+        上海市: "310100",
+        重庆市: "500100",
+        崇明县: "310200",
+        湖北省直辖县市: "429000",
+        铜仁市: "522200",
+        毕节市: "522400",
+        石家庄市: "130100",
+        唐山市: "130200",
+        秦皇岛市: "130300",
+        邯郸市: "130400",
+        邢台市: "130500",
+        保定市: "130600",
+        张家口市: "130700",
+        承德市: "130800",
+        沧州市: "130900",
+        廊坊市: "131000",
+        衡水市: "131100",
+        太原市: "140100",
+        大同市: "140200",
+        阳泉市: "140300",
+        长治市: "140400",
+        晋城市: "140500",
+        朔州市: "140600",
+        晋中市: "140700",
+        运城市: "140800",
+        忻州市: "140900",
+        临汾市: "141000",
+        吕梁市: "141100",
+        呼和浩特市: "150100",
+        包头市: "150200",
+        乌海市: "150300",
+        赤峰市: "150400",
+        通辽市: "150500",
+        鄂尔多斯市: "150600",
+        呼伦贝尔市: "150700",
+        巴彦淖尔市: "150800",
+        乌兰察布市: "150900",
+        兴安盟: "152200",
+        锡林郭勒盟: "152500",
+        阿拉善盟: "152900",
+        沈阳市: "210100",
+        大连市: "210200",
+        鞍山市: "210300",
+        抚顺市: "210400",
+        本溪市: "210500",
+        丹东市: "210600",
+        锦州市: "210700",
+        营口市: "210800",
+        阜新市: "210900",
+        辽阳市: "211000",
+        盘锦市: "211100",
+        铁岭市: "211200",
+        朝阳市: "211300",
+        葫芦岛市: "211400",
+        长春市: "220100",
+        吉林市: "220200",
+        四平市: "220300",
+        辽源市: "220400",
+        通化市: "220500",
+        白山市: "220600",
+        松原市: "220700",
+        白城市: "220800",
+        延边朝鲜族自治州: "222400",
+        哈尔滨市: "230100",
+        齐齐哈尔市: "230200",
+        鸡西市: "230300",
+        鹤岗市: "230400",
+        双鸭山市: "230500",
+        大庆市: "230600",
+        伊春市: "230700",
+        佳木斯市: "230800",
+        七台河市: "230900",
+        牡丹江市: "231000",
+        黑河市: "231100",
+        绥化市: "231200",
+        大兴安岭地区: "232700",
+        南京市: "320100",
+        无锡市: "320200",
+        徐州市: "320300",
+        常州市: "320400",
+        苏州市: "320500",
+        南通市: "320600",
+        连云港市: "320700",
+        淮安市: "320800",
+        盐城市: "320900",
+        扬州市: "321000",
+        镇江市: "321100",
+        泰州市: "321200",
+        宿迁市: "321300",
+        杭州市: "330100",
+        宁波市: "330200",
+        温州市: "330300",
+        嘉兴市: "330400",
+        湖州市: "330500",
+        绍兴市: "330600",
+        金华市: "330700",
+        衢州市: "330800",
+        舟山市: "330900",
+        台州市: "331000",
+        丽水市: "331100",
+        合肥市: "340100",
+        芜湖市: "340200",
+        蚌埠市: "340300",
+        淮南市: "340400",
+        马鞍山市: "340500",
+        淮北市: "340600",
+        铜陵市: "340700",
+        安庆市: "340800",
+        黄山市: "341000",
+        滁州市: "341100",
+        阜阳市: "341200",
+        宿州市: "341300",
+        六安市: "341500",
+        亳州市: "341600",
+        池州市: "341700",
+        宣城市: "341800",
+        福州市: "350100",
+        厦门市: "350200",
+        莆田市: "350300",
+        三明市: "350400",
+        泉州市: "350500",
+        漳州市: "350600",
+        南平市: "350700",
+        龙岩市: "350800",
+        宁德市: "350900",
+        南昌市: "360100",
+        景德镇市: "360200",
+        萍乡市: "360300",
+        九江市: "360400",
+        新余市: "360500",
+        鹰潭市: "360600",
+        赣州市: "360700",
+        吉安市: "360800",
+        宜春市: "360900",
+        抚州市: "361000",
+        上饶市: "361100",
+        济南市: "370100",
+        青岛市: "370200",
+        淄博市: "370300",
+        枣庄市: "370400",
+        东营市: "370500",
+        烟台市: "370600",
+        潍坊市: "370700",
+        济宁市: "370800",
+        泰安市: "370900",
+        威海市: "371000",
+        日照市: "371100",
+        莱芜市: "371200",
+        临沂市: "371300",
+        德州市: "371400",
+        聊城市: "371500",
+        滨州市: "371600",
+        菏泽市: "371700",
+        郑州市: "410100",
+        开封市: "410200",
+        洛阳市: "410300",
+        平顶山市: "410400",
+        安阳市: "410500",
+        鹤壁市: "410600",
+        新乡市: "410700",
+        焦作市: "410800",
+        濮阳市: "410900",
+        许昌市: "411000",
+        漯河市: "411100",
+        三门峡市: "411200",
+        南阳市: "411300",
+        商丘市: "411400",
+        信阳市: "411500",
+        周口市: "411600",
+        驻马店市: "411700",
+        省直辖县级行政区划: "469000",
+        武汉市: "420100",
+        黄石市: "420200",
+        十堰市: "420300",
+        宜昌市: "420500",
+        襄阳市: "420600",
+        鄂州市: "420700",
+        荆门市: "420800",
+        孝感市: "420900",
+        荆州市: "421000",
+        黄冈市: "421100",
+        咸宁市: "421200",
+        随州市: "421300",
+        恩施土家族苗族自治州: "422800",
+        长沙市: "430100",
+        株洲市: "430200",
+        湘潭市: "430300",
+        衡阳市: "430400",
+        邵阳市: "430500",
+        岳阳市: "430600",
+        常德市: "430700",
+        张家界市: "430800",
+        益阳市: "430900",
+        郴州市: "431000",
+        永州市: "431100",
+        怀化市: "431200",
+        娄底市: "431300",
+        湘西土家族苗族自治州: "433100",
+        广州市: "440100",
+        韶关市: "440200",
+        深圳市: "440300",
+        珠海市: "440400",
+        汕头市: "440500",
+        佛山市: "440600",
+        江门市: "440700",
+        湛江市: "440800",
+        茂名市: "440900",
+        肇庆市: "441200",
+        惠州市: "441300",
+        梅州市: "441400",
+        汕尾市: "441500",
+        河源市: "441600",
+        阳江市: "441700",
+        清远市: "441800",
+        东莞市: "441900",
+        中山市: "442000",
+        潮州市: "445100",
+        揭阳市: "445200",
+        云浮市: "445300",
+        南宁市: "450100",
+        柳州市: "450200",
+        桂林市: "450300",
+        梧州市: "450400",
+        北海市: "450500",
+        防城港市: "450600",
+        钦州市: "450700",
+        贵港市: "450800",
+        玉林市: "450900",
+        百色市: "451000",
+        贺州市: "451100",
+        河池市: "451200",
+        来宾市: "451300",
+        崇左市: "451400",
+        海口市: "460100",
+        三亚市: "460200",
+        三沙市: "460300",
+        成都市: "510100",
+        自贡市: "510300",
+        攀枝花市: "510400",
+        泸州市: "510500",
+        德阳市: "510600",
+        绵阳市: "510700",
+        广元市: "510800",
+        遂宁市: "510900",
+        内江市: "511000",
+        乐山市: "511100",
+        南充市: "511300",
+        眉山市: "511400",
+        宜宾市: "511500",
+        广安市: "511600",
+        达州市: "511700",
+        雅安市: "511800",
+        巴中市: "511900",
+        资阳市: "512000",
+        阿坝藏族羌族自治州: "513200",
+        甘孜藏族自治州: "513300",
+        凉山彝族自治州: "513400",
+        贵阳市: "520100",
+        六盘水市: "520200",
+        遵义市: "520300",
+        安顺市: "520400",
+        黔西南布依族苗族自治州: "522300",
+        黔东南苗族侗族自治州: "522600",
+        黔南布依族苗族自治州: "522700",
+        昆明市: "530100",
+        曲靖市: "530300",
+        玉溪市: "530400",
+        保山市: "530500",
+        昭通市: "530600",
+        丽江市: "530700",
+        普洱市: "530800",
+        临沧市: "530900",
+        楚雄彝族自治州: "532300",
+        红河哈尼族彝族自治州: "532500",
+        文山壮族苗族自治州: "532600",
+        西双版纳傣族自治州: "532800",
+        大理白族自治州: "532900",
+        德宏傣族景颇族自治州: "533100",
+        怒江傈僳族自治州: "533300",
+        迪庆藏族自治州: "533400",
+        拉萨市: "540100",
+        昌都地区: "542100",
+        山南地区: "542200",
+        日喀则地区: "542300",
+        那曲地区: "542400",
+        阿里地区: "542500",
+        林芝地区: "542600",
+        西安市: "610100",
+        铜川市: "610200",
+        宝鸡市: "610300",
+        咸阳市: "610400",
+        渭南市: "610500",
+        延安市: "610600",
+        汉中市: "610700",
+        榆林市: "610800",
+        安康市: "610900",
+        商洛市: "611000",
+        兰州市: "620100",
+        嘉峪关市: "620200",
+        金昌市: "620300",
+        白银市: "620400",
+        天水市: "620500",
+        武威市: "620600",
+        张掖市: "620700",
+        平凉市: "620800",
+        酒泉市: "620900",
+        庆阳市: "621000",
+        定西市: "621100",
+        陇南市: "621200",
+        临夏回族自治州: "622900",
+        甘南藏族自治州: "623000",
+        西宁市: "630100",
+        海东地区: "632100",
+        海北藏族自治州: "632200",
+        黄南藏族自治州: "632300",
+        海南藏族自治州: "632500",
+        果洛藏族自治州: "632600",
+        玉树藏族自治州: "632700",
+        海西蒙古族藏族自治州: "632800",
+        银川市: "640100",
+        石嘴山市: "640200",
+        吴忠市: "640300",
+        固原市: "640400",
+        中卫市: "640500",
+        乌鲁木齐市: "650100",
+        克拉玛依市: "650200",
+        吐鲁番地区: "652100",
+        哈密地区: "652200",
+        昌吉回族自治州: "652300",
+        博尔塔拉蒙古自治州: "652700",
+        巴音郭楞蒙古自治州: "652800",
+        阿克苏地区: "652900",
+        克孜勒苏柯尔克孜自治州: "653000",
+        喀什地区: "653100",
+        和田地区: "653200",
+        伊犁哈萨克自治州: "654000",
+        塔城地区: "654200",
+        阿勒泰地区: "654300",
+        自治区直辖县级行政区划: "659000",
+        台湾省: "710000",
+        香港特别行政区: "810100",
+        澳门特别行政区: "820000"
+      };
+
+      // 点击触发
+      myChart.on("click", param => {
+        console.log(dataList, "我是点击的onclick");
+        console.log(param, "00001121212");
+        if (param.data.dept3) {
+          dataList = dataList.map((item) => {
+            if (param.data.name === item.name) {
+              return {
+                name: item.name, dept3: item.dept3,
+                itemStyle: {
+                  normal: {
+                    color: '#23b9e8',
+                    label: {
+                      show: true,
+                      textStyle: {
+                        color: '#fff',
+                        fontSize: 15
+                      }
+                    }
+                  },
+                  emphasis: {// 也是选中样式
+                    borderWidth: 5,
+                    borderColor: 'yellow',
+                    areaColor: '#0471cd',
+                    label: {
+                      show: true,
+                      textStyle: {
+                        color: 'blue'
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            return { name: item.name, dept3: item.dept3 }
+          });
+          console.log(dataList, "我是点击后的最后一个");
+          initEcharts(siveMap);
+        }
+        if (param.name in provinces) {
+          // 处理省模块
+          let names = param.name;
+          for (let key in provinces) {
+            if (names == key) {
+              showProvince(provinces[key], key);
+              break;
+            }
+          }
+
+        }
+        else {
+          // 处理市模块
+          let names = param.name;
+          for (let key in cityMap) {
+            if (names == key) {
+              showCitys(cityMap[key], key);
+              break;
+            }
+          }
+        }
+        this.$parent.mapClick(param.data.name);
+      });
+      if (val1) {
+        dataList = dataList.map((item) => {
+          if (item.dept3) {
+            if (val1 === item.name) {
+              myChart.off("click");
+              return {
+                name: item.name,
+                itemStyle: {
+                  normal: {
+                    color: '#23b9e8',
+                    label: {
+                      show: true,
+                      textStyle: {
+                        color: '#fff',
+                        fontSize: 15
+                      }
+                    }
+                  },
+                  emphasis: {// 也是选中样式
+                    borderWidth: 5,
+                    borderColor: 'yellow',
+                    areaColor: '#23b9e8',
+                    label: {
+                      show: true,
+                      textStyle: {
+                        color: 'blue'
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            return {
+              name: item.name, dept3: '3'
+            }
+          }
+          return {
+            name: item.name, dept2: '2'
+          }
+        });
+        initEcharts(siveMap);
+        if (val1 in provinces) {
+          // 处理省模块
+          let names = val1;
+          console.log(val1, "省省");
+          for (let key in provinces) {
+            if (names == key) {
+              showProvince(provinces[key], key);
+              break;
+            }
+          }
+
+        }
+        else {
+          // 处理市模块
+          let names = val;
+          console.log(val, "11111111111");
+          for (let key in cityMap) {
+            if (names == key) {
+              showCitys(cityMap[key], key);
+              break;
+            }
+          }
+        }
+
+        // this.$parent.mapClick(val);
+
+        window.addEventListener("resize", () => {
+          myChart.resize();
+        });
+      }
+      //展示对应的省
+      function showProvince(eName, param) {
+        //  `/vueScreen/map/province/${eName}.json`
+        //   showScreen
+        $.getJSON(`/vueScreen/map/province/${eName}.json`, data => {
+          that.$echarts.registerMap(param, data);
+          initEcharts(param);
+        })
+      }
+      //展示对应市
+      function showCitys(cName, param) {
+        // 显示县级地图
+        // /vueScreen/map/city/${cName}.json
+        //  showScreen
+        $.getJSON(`/vueScreen/map/city/${cName}.json`, data => {
+          that.$echarts.registerMap(param, data);
+          initEcharts(param);
+        })
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.btn {
+  position: absolute;
+  right: 0%;
+  z-index: 999999;
+}
+</style>
+
+

src/components/oldStatistics/1.vue

@@ -0,0 +1,233 @@
+<template>
+    <!--  <div id="myChartold1" style="width: 100%; height: 100%; "></div>-->
+    <div class="flex-box">
+        <div class="flex-box1">
+            <div class="title">{{this.dataArr[0].label}}</div>
+            <div class="title1">{{this.dataArr[0].percent}}</div>
+            <div class="title2">{{this.dataArr[0].value}}人</div>
+        </div>
+        <div class="flex-box2">
+            <div class="title">{{this.dataArr[1].label}}</div>
+            <div class="title1" style="color:#e9f82d;">{{this.dataArr[1].percent}}</div>
+            <div class="title2" style="color:#e9f82d;">{{this.dataArr[1].value}}人</div>
+        </div>
+        <div class="flex-box3">
+            <div class="title">{{this.dataArr[2].label}}</div>
+            <div class="title1" style="color:#32fc6b;">{{this.dataArr[2].percent}}</div>
+            <div class="title2" style="color:#32fc6b;">{{this.dataArr[2].value}}人</div>
+        </div>
+        <div class="flex-box4">
+            <div class="title">{{this.dataArr[3].label}}</div>
+            <div class="title1" style="color:#fec400;">{{this.dataArr[3].percent}}</div>
+            <div class="title2" style="color:#fec400;">{{this.dataArr[3].value}}人</div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import {oldPersonFournums} from '../../api'
+
+    export default {
+        //老年人年龄分布统计
+        name: "OldPersonAgeCount",
+        data() {
+            return {
+                dataArr: [],
+                colorArr: ['rgba(1, 220, 254, 1)', 'rgba(238, 250, 42, 1)', 'rgba(51, 252, 108, 1)', 'rgba(255, 196, 0, 1)'],
+                myChart: null
+            }
+        },
+        methods: {
+            async draw() {
+                // if (this.myChart != null) {
+                //     this.myChart.clear();
+                // }
+                const result = await oldPersonFournums({}, 'POST');
+                this.dataArr = result;
+                const seriesArr = [];
+                for (let i = 0; i < this.dataArr.length; i++) {
+                    const d = this.dataArr[i];
+
+                    const arr = new Array(this.dataArr.length).fill({});
+                    arr[i] = {value: 130};
+
+                    seriesArr.push({
+                        type: 'pictorialBar',
+                        symbol: `image://${require('../../assets/oldStatistics/age-' + i + '.png')}`,
+                        symbolSize: [147, 147],
+                        symbolOffset: [0, -50],
+                        label: {
+                            show: true,
+                            position: 'top',
+                            textStyle: {
+                                fontSize: 15
+                            },
+                            color: this.colorArr[i],
+                            fontWeight: 'bold',
+                            offset: [0, 70],
+                            formatter: d.percent
+                        },
+                        data: arr
+                    });
+
+                    const topArr = new Array(this.dataArr.length).fill({});
+                    topArr[i] = {value: 155};
+
+                    seriesArr.push({
+                        type: 'pictorialBar',
+                        symbol: `image://${require('../../assets/oldStatistics/age-' + i + '-1.png')}`,
+                        symbolSize: [121, 6],
+                        symbolOffset: [0, -220],
+                        label: {
+                            show: true,
+                            position: 'top',
+                            textStyle: {
+                                fontSize: 15
+                            },
+                            color: this.colorArr[i],
+                            fontWeight: 'bold',
+                            offset: [0, 80],
+                            formatter: `${d.value}人`
+                        },
+                        data: topArr
+                    });
+                }
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartold1'));
+                this.myChart.setOption(
+                    {
+                        grid: {
+                            right: "14%",
+                        },
+                        xAxis: {
+                            type: 'category',
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: true,
+                                color: '#fff',
+                                fontWeight: 'bold',
+                                fontSize: 15,
+                                margin: -230
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            data: this.dataArr.map((item) => {
+                                return item.label;
+                            })
+                        },
+                        yAxis: {
+                            type: 'value',
+                            axisLabel: {
+                                formatter: '{value}%'
+                            },
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            // axisLabel: {
+                            //   show: false
+                            // }
+                        },
+                        series: seriesArr
+                    }
+                );
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+    .flex-box {
+        display: flex;
+        height: 100%;
+        height: 100%;
+    }
+
+    .flex-box1 {
+        background: url("../../assets/oldStatistics/age1.png") no-repeat;
+        background-size: contain;
+        width: 24%;
+        height: 100%;
+        margin-top: 7%;
+        position: relative;
+    }
+
+    .flex-box2 {
+        background: url("../../assets/oldStatistics/age2.png") no-repeat;
+        background-size: contain;
+        width: 24%;
+        height: 100%;
+        margin-top: 7%;
+        position: relative;
+    }
+
+    .flex-box3 {
+        background: url("../../assets/oldStatistics/age3.png") no-repeat;
+        background-size: contain;
+        width: 24%;
+        height: 100%;
+        margin-top: 7%;
+        position: relative;
+    }
+
+    .flex-box4 {
+        background: url("../../assets/oldStatistics/age4.png") no-repeat;
+        background-size: contain;
+        width: 24%;
+        height: 100%;
+        margin-top: 7%;
+        position: relative;
+    }
+    .title {
+        color: white;
+        margin-top: -6%;
+
+    }
+
+    .title1 {
+        color: #00d7ff;
+        position: absolute;
+        top: 23%;
+        left: 30%;
+        width: 40%;
+        font-size: 1.3vh;
+        text-align: center;
+
+    }
+
+     .tu-one p {
+        color: #00d7ff;
+        position: absolute;
+        top: 40%;
+        left: 30%;
+        width: 40%;
+         font-size: 1.3vh;
+        text-align: center;
+    }
+
+    .title2 {
+        position: absolute;
+        top: 32%;
+        left: 10%;
+        width: 80%;
+        color: #00d7ff;
+        font-size: 1.3vh;
+        text-align: center;
+    }
+
+</style>

src/components/oldStatistics/10.vue

@@ -0,0 +1,155 @@
+<template>
+    <div id="myChartold10" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import {oldPersonLivingCondition} from '../../api'
+
+    export default {
+        //老年人生活经济状况统计
+        name: "OldPersonLivingConditionsCount",
+        data() {
+            return {
+                dataArr: []
+            }
+        },
+        methods: {
+            async draw() {
+                const result = await oldPersonLivingCondition({}, 'POST');
+                this.dataArr = result;
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartold10'));
+                this.myChart.setOption({
+                    grid: {
+                        left: "16%",
+                        right: "5%",
+
+                    },
+
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: true,
+                        data: this.dataArr.map((item) => {
+                            return item.lable;
+                        }),
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: ['#315070'],
+                                width: 1,
+                                type: 'solid'
+                            }
+                        },
+
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#5c6ab6'
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                color: 'white',
+                            },
+                            fontSize: this.fontSize(0.15),
+                            interval: 0,
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel: {
+                            formatter: '{value}',
+                            show: true,
+                            fontSize: this.fontSize(0.15),
+                            textStyle: {
+                                color: 'white',
+                            },
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: ['#315070'],
+                                width: 1,
+                                type: 'solid'
+                            }
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#5c6ab6'
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+
+                    },
+                    series: [
+                        {
+                            type: 'line',
+                            smooth: true,
+                            areaStyle: {
+                                color: {
+                                    type: 'linear',
+                                    x: 0,
+                                    y: 0,
+                                    x2: 1,
+                                    y2: 0,
+                                    colorStops: [{
+                                        offset: 0, color: 'rgba(0, 144, 255, 0.2)' // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: 'rgba(215, 0, 255, 0.2)' // 100% 处的颜色
+                                    }],
+                                    global: false // 缺省为 false
+                                }
+                            },
+                            symbol: `image://${require('../../assets/oldStatistics/y.png')}`,
+                            symbolSize: [10, 10],
+                            data: this.dataArr.map((item) => {
+                                return item.value;
+                            }),
+                            label: {
+                                show: true,
+                                formatter: '{c}人',
+                                color: '#fff',
+                                fontSize: this.fontSize(0.15),
+
+                            },
+                            itemStyle: {
+                                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                                    offset: 0,
+                                    color: '#d700ff'
+                                }, {
+                                    offset: 1,
+                                    color: '#0090ff'
+                                }]),
+                            },
+                            lineStyle: {
+                                width: 2
+                            }
+                        }
+                    ]
+                });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
+            }
+
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/11.vue

@@ -0,0 +1,184 @@
+<template>
+    <div id="myChartold11" style=" width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import {oldPersonSex} from '../../api'
+
+    export default {
+        name: "OldPersonSexCount",
+        data() {
+            return {
+                dataArr: [],
+                colorArr: [
+                    // { color1: '#009cff', color2: '#5BB4FF' },
+                    {color1: '#ff5b00', color2: '#FF9648'}
+                ],
+                myChart: null
+            }
+        },
+        methods: {
+            async draw() {
+                if (this.myChart) {
+                    this.myChart.clear();
+                }
+
+                const result = await oldPersonSex({}, 'POST');
+                this.dataArr = result;
+                let title = [];
+                const seriesArr = [];
+                if (this.dataArr[0]) {
+                    title.push({
+                        text: this.dataArr[1].percent,
+                        x: 'center',
+                        y: 'center',
+                        textStyle: {
+                            fontWeight: 'normal',
+                            color: this.colorArr[0].color2,
+                            fontSize: '14'
+                        }
+
+                    });
+                }
+
+                for (let i = 0; i < this.dataArr.length; i++) {
+                    // const d = this.dataArr[i];
+
+                    seriesArr.push({
+                        type: 'pie',
+                        radius: ['100%', '60%'],
+                        center: [`50.5%`, '50%'],
+                        startAngle: 90,
+                        clockwise: false,
+                        labelLine: {
+                            show: false
+                        },
+                        data: [{
+                            value: parseInt(this.dataArr[1].percent),
+                            itemStyle: {
+                                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                    offset: 0,
+                                    color: this.colorArr[0].color1
+                                },
+                                    {
+                                        offset: 1,
+                                        color: this.colorArr[0].color2
+                                    }])
+                            }
+                        },
+                            {
+                                value: 100 - parseInt(this.dataArr[1].percent),
+                                itemStyle: {
+                                    color: "transparent"
+                                }
+                            }],
+                        z: 1
+                    });
+
+                    // seriesArr.push({
+                    //     type: 'pictorialBar',
+                    //     symbol:  i == 0 ? `image://${require("../../assets/oldStatistics/old-person-sex-male.png")}` : `image://${require("../../assets/oldStatistics/old-person-sex-female.png")}`,
+                    //     symbolSize: [144, 143],
+                    //     data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -120 : 120}`, 0] } ],
+                    //     label: {
+                    //         normal: {
+                    //             show: true,
+                    //             position: "top",
+                    //             offset: [i == 0 ? -120 : 120, 0],
+                    //             textStyle: {
+                    //                 fontSize: 18,
+                    //                 color: '#fff'
+                    //             },
+                    //             formatter: ['{a|' + d.value + '}', '{b|' + d.label + '}'].join('\n'),
+                    //             rich:{
+                    //                 a: {
+                    //                     fontSize: 26,
+                    //                     color: this.colorArr[i].color1
+                    //                 },
+                    //                 b: {
+                    //                     fontSize: 18,
+                    //                     color: '#fff',
+                    //                     padding: [5, 0]
+                    //                 }
+                    //             }
+                    //         }
+                    //     },
+                    //     z: 2
+                    // });
+                    //
+                    // seriesArr.push({
+                    //     type: 'pictorialBar',
+                    //     symbol: i == 0 ?  `image://${require("../../assets/oldStatistics/old-person-male-icon.png")}` :  `image://${require("../../assets/oldStatistics/old-person-female-icon.png")}`,
+                    //     symbolSize: [53, 52],
+                    //     data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -230 : 10}`, -50] } ],
+                    //     label: {
+                    //         normal: {
+                    //             show: true,
+                    //             position: "top",
+                    //             offset: [i == 0 ? -120 : 120, 50],
+                    //             textStyle: {
+                    //                 fontSize: 20,
+                    //                 color: this.colorArr[i].color1
+                    //             },
+                    //             formatter: () => {
+                    //                 return `${d.percent}`;
+                    //             }
+                    //         }
+                    //     },
+                    //     z: 1
+                    // });
+                }
+
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartold11'));
+                this.myChart.setOption(
+                    {
+                      title:title,
+                        xAxis: {
+                            type: 'category',
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            max: 200,
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            }
+                        },
+                        series: seriesArr
+                    }
+                );
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+    /*#myChartold2 {*/
+    /*  background: url("../../assets/oldStatistics/old-2.png") no-repeat !important;*/
+    /*  background-size: 90% 90% !important;*/
+    /*}*/
+</style>

src/components/oldStatistics/2.vue

@@ -0,0 +1,182 @@
+<template>
+  <div id="myChartold2" style=" width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import { oldPersonSex } from '../../api'
+
+    export default {
+        name: "OldPersonSexCount",
+        data() {
+          return {
+            dataArr: [],
+            colorArr: [
+              { color1: '#009cff', color2: '#5BB4FF' },
+              // { color1: '#ff5b00', color2: '#FF9648' }
+            ],
+            myChart: null
+          }
+        },
+        methods: {
+            async draw() {
+                if (this.myChart)
+                {
+                    this.myChart.dispose();
+                }
+                let title=[];
+                const result = await oldPersonSex({}, 'POST');
+                this.dataArr = result;
+                const seriesArr = [];
+              console.log(this.dataArr[0],"7878787878")
+                if(this.dataArr[0]) {
+                  title.push({
+                    text: this.dataArr[0].percent,
+                    x: 'center',
+                    y: 'center',
+                    textStyle: {
+                      fontWeight: 'normal',
+                      color: this.colorArr[0].color2,
+                      fontSize: '14'
+                    }
+
+                  });
+                }
+                for(let i = 0; i < this.dataArr.length; i++) {
+                  seriesArr.push({
+                    type: 'pie',
+                    radius: ['100%', '60%'],
+                    center: [`49.5%`, '50%'],
+                    startAngle: 90,
+                    clockwise: false,
+                    labelLine: {
+                      show: false
+                    },
+                    data: [{
+                      value: parseInt(this.dataArr[0].percent),
+                      itemStyle: {
+                        color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                          offset: 0,
+                          color: this.colorArr[0].color1
+                        },
+                          {
+                            offset: 1,
+                            color: this.colorArr[0].color2
+                          }])
+                      }
+                    },
+                      {
+                        value: 100 - parseInt(this.dataArr[0].percent),
+                        itemStyle: {
+                          color: "transparent"
+                        }
+                      }],
+                    z: 1
+                  });
+
+                    // seriesArr.push({
+                    //     type: 'pictorialBar',
+                    //     symbol:  i == 0 ? `image://${require("../../assets/oldStatistics/old-person-sex-male.png")}` : `image://${require("../../assets/oldStatistics/old-person-sex-female.png")}`,
+                    //     symbolSize: [144, 143],
+                    //     data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -120 : 120}`, 0] } ],
+                    //     label: {
+                    //         normal: {
+                    //             show: true,
+                    //             position: "top",
+                    //             offset: [i == 0 ? -120 : 120, 0],
+                    //             textStyle: {
+                    //                 fontSize: 18,
+                    //                 color: '#fff'
+                    //             },
+                    //             formatter: ['{a|' + d.value + '}', '{b|' + d.label + '}'].join('\n'),
+                    //             rich:{
+                    //                 a: {
+                    //                     fontSize: 26,
+                    //                     color: this.colorArr[i].color1
+                    //                 },
+                    //                 b: {
+                    //                     fontSize: 18,
+                    //                     color: '#fff',
+                    //                     padding: [5, 0]
+                    //                 }
+                    //             }
+                    //         }
+                    //     },
+                    //     z: 2
+                    // });
+                    //
+                    // seriesArr.push({
+                    //     type: 'pictorialBar',
+                    //     symbol: i == 0 ?  `image://${require("../../assets/oldStatistics/old-person-male-icon.png")}` :  `image://${require("../../assets/oldStatistics/old-person-female-icon.png")}`,
+                    //     symbolSize: [53, 52],
+                    //     data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -230 : 10}`, -50] } ],
+                    //     label: {
+                    //         normal: {
+                    //             show: true,
+                    //             position: "top",
+                    //             offset: [i == 0 ? -120 : 120, 50],
+                    //             textStyle: {
+                    //                 fontSize: 20,
+                    //                 color: this.colorArr[i].color1
+                    //             },
+                    //             formatter: () => {
+                    //                 return `${d.percent}`;
+                    //             }
+                    //         }
+                    //     },
+                    //     z: 1
+                    // });
+                }
+
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartold2'));
+                this.myChart.setOption(
+                    {
+                      title:title,
+                        xAxis: {
+                            type: 'category',
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            max: 200,
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            }
+                        },
+                        series: seriesArr
+                    }
+                );
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+  /*#myChartold2 {*/
+  /*  background: url("../../assets/oldStatistics/old-2.png") no-repeat !important;*/
+  /*  background-size: 90% 90% !important;*/
+  /*}*/
+</style>

src/components/oldStatistics/3.vue

@@ -0,0 +1,138 @@
+<template>
+  <div id="myChartold3" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import { oldPersonDemand } from '../../api'
+
+    export default {
+        //老年人关爱服务统计
+        name: "RadarChart2",
+        data() {
+          return {
+            dataArr: [],
+            myChart: null
+          }
+        },
+        methods: {
+          getMaxValueOfArray(data) {
+            if(data == null || data.length == 0) {
+                return 0;
+            }
+            let maxValue = data[0].value;
+            for(let i = 0; i < data.length; i++) {
+                if(maxValue < parseInt(data[i].value)) {
+                    maxValue = data[i].value;
+                }
+            }
+            return Math.ceil(maxValue);
+          },
+          async draw() {
+            const result = await oldPersonDemand({}, 'POST');
+            this.dataArr = result;
+
+            let maxValue = this.getMaxValueOfArray(this.dataArr);
+
+            const valueArr = this.dataArr.map((item) => {
+              return parseInt(item.value);
+            });
+
+            const labelArr = this.dataArr.map((item) => {
+              return {
+                name: item.label + '：' + item.value + '%',
+                max: maxValue
+              };
+            });
+
+            if(this.myChart != null) {
+                this.myChart.clear();
+            }
+
+            this.myChart = this.$echarts.init(document.getElementById('myChartold3'));
+            this.myChart.setOption({
+              normal: {
+                top: 200,
+                left: 300,
+                width: 500,
+                height: 400,
+                zIndex: 6
+              },
+              radar: {
+                center: ["50%", "52%"],
+                radius: "55%",
+                startAngle: 90,
+                splitNumber: 0,
+                splitArea: {
+                  areaStyle: {
+                    color: ["transparent"]
+                  }
+                },
+                name:{
+                  textStyle:{
+                    // color:'#000'
+                    fontSize: this.fontSize(0.17)
+                  }
+                },
+                axisLabel: {
+                  show: false,
+                  fontSize: 18,
+                  color: "#fff",
+                  fontStyle: "normal",
+                  fontWeight: "normal"
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: "white"
+                  }
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: 'white'
+                  }
+                },
+                indicator: labelArr
+              },
+              series: [{
+                type: "radar",
+                symbol: "circle",
+                symbolSize: 10,
+                areaStyle: {
+                  normal: {
+                    color: "#dcf7ff"
+                  }
+                },
+                itemStyle:{
+                  color:'#75beff',
+                  borderColor:'#ffcb00',
+                  borderWidth:3,
+                },
+                lineStyle: {
+                  normal: {
+                    type: "solid",
+                    color: "#83cfff",
+                    width: 2
+                  }
+                },
+                data: [ valueArr ]
+              }]
+            });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        mounted() {
+          this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/4.vue

@@ -0,0 +1,312 @@
+<template>
+    <div id="myChartold4" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import {oldPersonAbility} from '../../api'
+
+    export default {
+        //老年人能力评估统计
+        name: "OldPersonAbilityCount",
+        data() {
+            return {
+                dataArr: [],
+                colorArr: [
+                    {color1: '#FF815A', color2: '#F88A9C'},
+                    {color1: '#49FCFF', color2: '#4097FF'},
+                    {color1: '#D6F826', color2: '#E3C566'}
+                ],
+                myChart: null
+            }
+        },
+        methods: {
+            async draw() {
+                if (this.myChart != null) {
+                    this.myChart.clear();
+                }
+                const result = await oldPersonAbility({}, 'POST');
+                this.dataArr = result;
+                // const seriesArr = [{
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/oldStatistics/new.png')}`,
+                //     symbolSize: [94, 59],
+                //     data: [{value: 200, symbolPosition: 'center', symbolOffset: ['-120%', 0]}],
+                //     z: 1
+                // }];
+                const  seriesArr=[];
+                let elements=[
+                    {
+                        type: "image",
+                        style: {
+                            image: require('../../assets/oldStatistics/new.png'),
+                            width: this.fontSize(0.9),
+                            height: this.fontSize(0.8),
+                        },
+                        left: "23%",
+                        top: "35%",
+                        z: 20,
+                    }
+                ];
+                let nameList = ['完全自理', '半失能', '失能'];
+                const titleArr = [];
+                for (let i = 0; i < this.dataArr.length; i++) {
+                    seriesArr.push({
+                        type: 'bar',
+                        name: nameList[i % 3],
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                offset: 0,
+                                color: this.colorArr[i % 3].color1
+                            }, {
+                                offset: 1,
+                                color: this.colorArr[i % 3].color2
+                            }])
+                        }
+                    });
+                    // const d = this.dataArr[i];
+                    // titleArr.push({
+                    //     text: d.value,
+                    //     left: `72%`,
+                    //     top: `${17 + i * 29}%`,
+                    //     textAlign: "center",
+                    //     textStyle: {
+                    //         fontSize: this.fontSize(0.14),
+                    //         fontWeight: 'normal',
+                    //         color: this.colorArr[i].color1
+                    //     }
+                    // });
+                }
+
+
+                seriesArr.push({
+                    type: 'pie',
+                    radius: ['60%', '75%'],  //内部经 外半径
+                    center: ['30%', '50%'],
+                    clockwise: false,
+                    labelLine: {
+                        show: false
+                    },
+                    data: [{
+                        name: '失能',
+                        value: parseInt(this.dataArr[2].value),
+                        label: {
+                            show: false
+                        },
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                offset: 0,
+                                color: this.colorArr[2].color1
+                            }, {
+                                offset: 1,
+                                color: this.colorArr[2].color2
+                            }])
+                        }
+                    },
+                        {
+                            name: '半失能',
+                            value: parseInt(this.dataArr[1].value),
+                            label: {
+                                show: false
+                            },
+                            itemStyle: {
+                                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                    offset: 0,
+                                    color: this.colorArr[1].color1
+                                }, {
+                                    offset: 1,
+                                    color: this.colorArr[1].color2
+                                }])
+                            }
+                        },
+                        {
+                            value: 100 - parseInt(this.dataArr[1].value) - parseInt(this.dataArr[2].value),
+                            itemStyle: {
+                                color: "transparent"
+                            }
+                        }],
+                    z: 2
+                });
+
+                seriesArr.push({
+                    name: '完全自理',
+                    type: 'pie',
+                    radius: ["60%", '75%'],  //内部经 外半径
+                    center: ['30%', '49%'],
+                    clockwise: true,
+                    labelLine: {
+                        show: false
+                    },
+                    data: [{
+                        value: parseInt(this.dataArr[0].value),
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                offset: 0,
+                                color: this.colorArr[0].color1
+                            }, {
+                                offset: 1,
+                                color: this.colorArr[0].color2
+                            }])
+                        }
+                    },
+                        {
+                            value: 100 - parseInt(this.dataArr[0].value),
+                            itemStyle: {
+                                color: "transparent"
+                            }
+                        }],
+                    z: 2
+                });
+
+                seriesArr.push({
+                    type: 'pie',
+                    radius: ['80%','85%'],  //内部经 外半径
+                    center: ['30%', '49%'],
+                    clockwise: true,
+                    labelLine: {
+                        show: false
+                    },
+                    data: [{
+                        name: '完全自理',
+                        value: parseInt(this.dataArr[0].value),
+                        label: {
+                            show: false
+                        },
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                offset: 0,
+                                color: this.colorArr[0].color1
+                            }, {
+                                offset: 1,
+                                color: this.colorArr[0].color2
+                            }])
+                        }
+                    },
+                        {
+                            value: 100 - parseInt(this.dataArr[0].value),
+                            itemStyle: {
+                                color: "transparent"
+                            }
+                        }],
+                    z: 2
+                });
+                  let that=this;
+                this.myChart = this.$echarts.init(document.getElementById('myChartold4'));
+                this.myChart.setOption(
+                    {
+                        graphic: {
+                            elements: elements
+                        },
+                        title: titleArr,
+                        grid: {
+                            // right: "50%",
+                            // top:'20%',
+                            // left:"10%",
+                        },
+                        color: [this.colorArr[0].color1, this.colorArr[1].color1, this.colorArr[2].color1],
+                        legend: {
+                            show: true,
+                            orient: 'vertical',
+                            top: 'middle',
+                            left: 'middle',
+                            itemGap: this.fontSize(0.5),
+                            itemWidth: 13,
+                            itemHeight: 13,
+                            data: ['完全自理', '半失能', '失能'],
+                            formatter:function(name){
+                                let ind=0;
+                                nameList.forEach((item,index)=>{
+                                    if(name===item)
+                                    {
+                                        ind=index
+                                    }
+                                });
+                                let i=5-name.length;
+                                let key= new Array(i).fill('你').join('');
+                                return  '{name|'+name+'}'+'{key|'+key+'}'+'{value'+ind+'|'+that.dataArr[ind].value+'}'
+                            },
+                            textStyle: {
+                                color: 'white',
+                                rich:{
+                                    name:{
+                                        fontSize: this.fontSize(0.14),
+                                    },
+                                    key:{
+                                      color:'rgba(0,0,0,0)'
+                                    },
+                                    value0:{
+                                        fontSize: this.fontSize(0.14),
+                                        fontWeight: 'normal',
+                                        color: this.colorArr[0].color1,
+                                        // padding:[0,0,0,20],
+                                        align:'right',
+                                    },
+                                    value1:{
+                                        fontSize: this.fontSize(0.14),
+                                        fontWeight: 'normal',
+                                        color: this.colorArr[1].color1,
+                                        // padding:[0,0,0,20],
+                                        align:'right',
+                                    },
+                                    value2:{
+                                        fontSize: this.fontSize(0.14),
+                                        fontWeight: 'normal',
+                                        color: this.colorArr[2].color1,
+                                        // padding:[0,0,0,20],
+                                        align:'right',
+                                    },
+                                }
+                            },
+
+                        },
+                        xAxis: {
+                            type: 'category',
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            max: 200,
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                            }
+                        },
+                        series: seriesArr,
+                    }
+                );
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/5.vue

@@ -0,0 +1,113 @@
+<template>
+  <div id="myChartold5" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+    import { oldPersonOldHealth } from '../../api'
+
+    export default {
+        name: "MzColumnCharts",
+        data() {
+          return {
+            dataArr: [],
+            colorArr: [
+              { color1: '#ff2311', color2: 'rgba(255, 128, 125, 0.1)' },
+              { color1: '#2222ff', color2: 'rgba(161, 154, 255, 0.1)' },
+              { color1: '#00c8ff', color2: 'rgba(154, 235, 255, 0.1)' },
+              { color1: '#ff00fd', color2: 'rgba(255, 159, 242, 0.1)' }
+            ],
+            myChart: null
+          }
+        },
+        methods: {
+          async draw() {
+              const result = await oldPersonOldHealth({}, 'POST');
+              this.dataArr = result;
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartold5'));
+              this.myChart.setOption({
+                  grid:{
+                    left:'12%'
+                  },
+                  xAxis: {
+                      type: 'category',
+                      data: this.dataArr.map((item) => item.label),
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#3075e2'
+                          }
+                      },
+                      splitLine:{
+                          show:false
+                      },
+                      axisLabel: {
+                          show: true,
+                          textStyle: {
+                              color: 'white'
+                          },
+                        interval: 0,
+                      }
+
+                  },
+                  yAxis: {
+                      type: 'value',
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#3075e2'
+                          }
+                      },
+                      splitLine:{
+                          show:false
+                      },
+                      axisLabel: {
+                          show: true,
+                          textStyle: {
+                              color: 'white'
+                          },
+
+                      }
+                  },
+                  series: [{
+                      type: 'bar',
+                      barWidth:'40',
+                      data: this.dataArr.map((item) => item.value),
+                      itemStyle: {
+                          color: (params) => {
+                              return new this.$echarts.graphic.LinearGradient(
+                                  0, 0, 0, 1,
+                                  [
+                                      {offset: 0, color: this.colorArr[ params.dataIndex ].color1},
+                                      {offset: 1, color: this.colorArr[ params.dataIndex ].color2}
+                                  ]
+                              )
+                          }
+                      },
+                      label: {
+                          show: true,
+                          position: 'top',
+                          color: '#fff',
+                          fontSize: this.fontSize(0.15),
+                          formatter: '{c}人'
+                      }
+                  }]
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        mounted() {
+          this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/6.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="myChartold6" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+  //圆角柱状图
+  import { oldPersonOldType } from '../../api'
+
+  import echarts from 'echarts'
+  export default {
+    name: "MzFilletColumnChart2",
+    data() {
+      return {
+        dataArr:[],
+        colorArr: [
+          { color1: '#9db9ff', color2: '#00f' },
+          { color1: '#ffe49e', color2:  '#ffb300'}
+        ],
+        myChart: null
+      }
+    },
+    methods: {
+      async draw() {
+          const result = await oldPersonOldType({}, 'POST');
+          this.dataArr = result;
+
+          this.myChart = this.$echarts.init(document.getElementById('myChartold6'));
+          this.myChart.setOption({
+            grid:{
+              top:'23%'
+            },
+              xAxis: {
+                  type: 'category',
+                  data: this.dataArr.map((item) => item.label),
+                  axisTick: {
+                      show: false
+                  },
+                  axisLabel: {
+                      show: true,
+                      textStyle: {
+                          color: 'white',
+
+                      },
+                  },
+              },
+              yAxis: {
+                  type: 'value',
+                  axisLabel: {
+                      show: false
+                  },
+                  splitLine: {
+                      show: true,
+                      lineStyle:{
+                          color: ['#315070'],
+                          width: 1,
+                          type: 'solid'
+                      }
+                  },
+                  axisLine: {
+                      show: false
+                  },
+                  axisTick: {
+                      show: false
+                  },
+              },
+              series: [
+                  {
+                      data: this.dataArr.map((item) => item.value),
+                      type: 'bar',
+                      showBackground: true,
+                      backgroundStyle: {
+                          color: 'rgba(11, 43, 84, 0.2)',
+                          barBorderRadius: [50, 50, 50, 50]
+                      },
+                      barWidth: 14,
+                      itemStyle: {
+                          emphasis: {
+                              barBorderRadius: 7
+                          },
+                          normal: {
+                              barBorderRadius: 7,
+                              color: (params) => {
+                                  return new echarts.graphic.LinearGradient(
+                                      0, 0, 0, 1,
+                                      [
+                                          {offset: 0, color: this.colorArr[ params.dataIndex % 2 == 0 ? 0 : 1 ].color1},
+                                          {offset: 1, color: this.colorArr[ params.dataIndex % 2 == 0 ? 0 : 1 ].color2}
+                                      ]
+                                  )
+                              }
+                          }
+                      },
+                      label: {
+                          show: true,
+                          position: 'top',
+                          offset: [0, -10],
+                          color: '#fff',
+                        formatter: '{c}人'
+                      },
+                      z: 1
+                  },
+                  {
+                      type: 'line',
+                      data: this.dataArr.map((item) => item.value),
+
+                      symbol: (params, item) => {
+                          return item.dataIndex % 2 == 0 ? `image://${require("../../assets/oldStatistics/q1.png")}`  : `image://${require("../../assets/oldStatistics/q2.png")}` ;
+                      },
+                      symbolSize: [19, 19],
+                      lineStyle: {
+                          color: 'rgba(255, 165, 0, 1)',
+                          width: 1,
+                          type: 'dashed'
+                      },
+                      z: 2
+                  }
+              ]
+          });
+      }
+    },
+    mounted() {
+      this.draw();
+    }
+  }
+</script>
+
+<style type="text/css">
+
+</style>
+

src/components/oldStatistics/7.vue

@@ -0,0 +1,147 @@
+<template>
+  <div id="myChartold7" style="width:  100%; height: 100%; "></div>
+</template>
+
+<script>
+    import { oldPersonVisitFrequency } from '../../api'
+
+    export default {
+        //老年人探访频次统计
+        name: "OldPersonFrequencyCount",
+        data() {
+          return {
+            dataArr: [],
+            colorArr: [ 'rgba(0, 124, 255, 0.6)', 'rgba(129, 212, 255, 0.6)' ],
+            myChart: null
+          }
+        },
+        methods: {
+          async draw() {
+              const result = await oldPersonVisitFrequency({}, 'POST');
+              this.dataArr = result;
+
+              const arr = this.dataArr.reverse();
+              let maxValue = arr[0].value;
+              for(let i = 0; i < arr.length; i++) {
+                  if(maxValue < arr[i].value) {
+                      maxValue = arr[i].value;
+                  }
+              }
+
+              const seriesArr = [];
+              for(let i = 0; i < arr.length; i++) {
+                  const d = arr[i];
+
+                  const bgArr = new Array(arr.length).fill({});
+                  bgArr[i] = { value: maxValue, symbolPosition: 'start' };
+                  seriesArr.push({
+                      type: 'pictorialBar',
+                      symbol: `image://${require("../../assets/oldStatistics/x.png")}`,
+                      symbolSize: ['100%', 15],
+                      symbolOffset: [0, 0],
+                      data: bgArr,
+                      label: {
+                          show: true,
+                          position: 'right',
+                          offset: [10, 2],
+                          distance: 0,
+                          color: 'rgba(0, 124, 255, 1)',
+                          fontSize: this.fontSize(0.15),
+                          formatter: `${d.value}人`
+                      },
+                      z: 2
+                  });
+
+                  const imgArr = new Array(arr.length).fill({});
+                  imgArr[i] = { value: d.value, symbolPosition: 'start' };
+                  seriesArr.push({
+                      type: 'pictorialBar',
+                      symbol: 'rect',
+                      symbolSize: ['100%', 15],
+                      itemStyle: {
+                          normal: {
+                              color: () => {
+                                  return new this.$echarts.graphic.LinearGradient(
+                                      0, 0, 1, 0,
+                                      [
+                                          {offset: 0, color: this.colorArr[0]},
+                                          {offset: 1, color: this.colorArr[1]}
+                                      ]
+                                  )
+                              }
+                          }
+                      },
+                      data: imgArr,
+                      z: 3
+                  });
+              }
+
+              if(this.myChart != null) {
+                  this.myChart.clear();
+              }
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartold7'));
+              this.myChart.setOption({
+                  grid: {
+                      top: '15%',
+                      bottom: '15%',
+                      right: '18%',
+                      left: '4%',
+                      containLabel: true
+                  },
+                  xAxis: {
+                      type: 'value',
+                      max: maxValue,
+                      axisTick: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      splitLine: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'category',
+                      data: arr.map((item) => item.label),
+                      axisTick: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: true,
+                          color: '#fff',
+                          fontWeight: 'bold',
+                          fontSize: this.fontSize(0.16),
+
+                      },
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#fff'
+                          }
+                      }
+                  },
+                  series: seriesArr
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        mounted() {
+          this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/8.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="myChartold8" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import { oldPersonOldIncome } from '../../api'
+
+    export default {
+        //老年人收入来源统计
+        name: "OldPersonSourcesOfIncomeCount",
+        data() {
+          return {
+            dataArr: [],
+            myChart: null
+          }
+        },
+        methods: {
+          async draw() {
+              const result = await oldPersonOldIncome({}, 'POST');
+              this.dataArr = result;
+            console.log(this.dataArr,"wewew")
+              this.myChart = this.$echarts.init(document.getElementById('myChartold8'));
+              this.myChart.setOption({
+                  grid:{
+                      left:"16%",
+                      right:"5%",
+                  },
+                  xAxis: {
+                      type: 'category',
+                      boundaryGap: true,
+                      data: this.dataArr.map((item) => {
+                          return item.label;
+                      }),
+                      splitLine: {
+                          show: true,
+                          lineStyle:{
+                              color: ['#315070'],
+                              width: 1,
+                              type: 'solid'
+                          }
+                      },
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#344db0'
+                          }
+                      },
+                      axisLabel: {
+                          show: true,
+                          textStyle: {
+                              color: 'white',
+                              formatter: '{value}',
+                          },
+                          fontSize: this.fontSize(0.14),
+                        interval: 0,
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'value',
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#5c6ab6'
+                          }
+                      },
+                      splitLine: {
+                          show: true,
+                          lineStyle:{
+                              color: ['#315070'],
+                              width: 1,
+                              type: 'solid'
+                          }
+                      },
+                      axisLabel: {
+                          show: true,
+                          textStyle: {
+                              color: 'white',
+                              formatter: '{value}',
+                          }
+                      },
+                      axisTick: {
+                          show: false
+                      },
+                  },
+                  series: [
+                      {
+                          type: 'line',
+                          smooth: true,
+                          areaStyle: {
+                              color: {
+                                  type: 'linear',
+                                  x: 0,
+                                  y: 0,
+                                  x2: 0,
+                                  y2: 1,
+                                  colorStops: [{
+                                      offset: 0, color: '#A79A84' // 0% 处的颜色
+                                  }, {
+                                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
+                                  }],
+                                  global: false // 缺省为 false
+                              }
+                          },
+                          symbol: `image://${require('../../assets/oldStatistics/y.png')}`,
+                          symbolSize: [10, 10],
+                          data: this.dataArr.map((item) => {
+                              return item.value;
+                          }),
+                          label: {
+                              show: true,
+                              formatter: '{c}人',
+                              color: '#fff',
+                              fontSize: this.fontSize(0.16),
+
+                          },
+                          itemStyle: {
+                              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                  offset: 0,
+                                  color: '#FF6C13'
+                              }, {
+                                  offset: 1,
+                                  color: '#ffea22'
+                              }]),
+                          },
+                          lineStyle: {
+                              width: 2
+                          }
+                      }
+                  ]
+              });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
+          }
+        },
+        watch: {
+            data() {
+                this.myChart.destroy();
+                this.draw();
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/9.vue

@@ -0,0 +1,217 @@
+<template>
+    <div id="myChartold9" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    import {oldPersonIncome} from '../../api'
+
+    export default {
+        //老年人可支配收入统计
+        name: "OldPersonIncomeControlCount",
+        data() {
+            return {
+                dataArr: [],
+                colorArr: [
+                    {color1: '#0162eb', color2: '#00b9f9'},
+                    {color1: '#ff8209', color2: '#ffc334'},
+                    {color1: '#a1db5f', color2: '#6dba3e'}
+                ],
+                myChart: null
+            }
+        },
+        methods: {
+            async draw() {
+                const result = await oldPersonIncome({}, 'POST');
+                this.dataArr = result;
+
+                const seriesArr = [];
+                // const offset = 30;
+                let positon = [
+                    ['15%', '70%'],
+                    ['50%', '10%'],
+                    ['80%', '70%'],
+                ];
+                let title = [];
+                for (let i = 0; i < this.dataArr.length; i++) {
+                    const d = this.dataArr[i];
+
+                    // seriesArr.push({
+                    //     type: 'pictorialBar',
+                    //     symbol: i == 0 ? `image://${require("../../assets/oldStatistics/37.png")}` : ( i == 1 ? `image://${require("../../assets/oldStatistics/38.png")}` : `image://${require("../../assets/oldStatistics/39.png")}` ),
+                    //     symbolSize: [72, 72],
+                    //     data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -137 : ( i == 1 ? 0 : 137 )}`, -70] } ],
+                    //     label: {
+                    //         normal: {
+                    //             show: true,
+                    //             position: "top",
+                    //             offset: [i == 0 ? -135 : ( i == 1 ? 0 : 135 ), i == 0 ? 130 : ( i == 1 ? -30 : 130 )],
+                    //             textStyle: {
+                    //                 fontSize: 20,
+                    //                 color: '#fff'
+                    //             },
+                    //             formatter: `${d.lable}`
+                    //         }
+                    //     },
+                    //     z: 2
+                    // });
+                    title.push({
+                            show: true,
+                            text: d.lable,
+                            x: positon[i][0],
+                            y: positon[i][1],
+                            z: 8,
+                            textAlign: 'center',
+                            textStyle: {
+                                fontSize: this.fontSize(0.18),
+                                color: '#fff'
+                            },
+
+                        },
+                    );
+
+                    seriesArr.push({
+                            type: 'pie',
+                            radius: ['50%', '70%'],
+                            startAngle: '180',
+                            clockwise: !(i % 2),
+                            center: [`${16.6 + i * 33.33}%`, '46%'],
+                            labelLine: {
+                                show: false
+                            },
+                            data: [{
+                                value: parseInt(d.value) / 2,
+                                // label: {
+                                //     show: true,
+                                //     position: 'center',
+                                //     formatter: () => {
+                                //         return `${d.value}`
+                                //     },
+                                //     fontSize: 20,
+                                //     fontWeight: 'bold',
+                                //     color: '#fff'
+                                // },
+                                itemStyle: {
+                                    color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                        offset: 0,
+                                        color: this.colorArr[i].color1
+                                    }, {
+                                        offset: 1,
+                                        color: this.colorArr[i].color2
+                                    }])
+                                }
+                            },
+                                {
+                                    value: 50 - (parseInt(d.value) * 50 / 100).toFixed(1),
+                                    itemStyle: {
+                                        color: 'rgba(184, 255, 205, 0.1)'
+                                    }
+                                },
+                                {
+                                    value: 50,
+                                    itemStyle: {
+                                        color: "transparent"
+                                    }
+                                }],
+                            z: 2
+                        },
+                        {
+                            type: 'pie',
+                            radius: ['0', '35%'],
+                            center: [`${16.6 + i * 33.33}%`, '46%'],
+                            z: 8,
+                            hoverAnimation: false,
+                            data: [{
+                                name: '污染程度',
+                                value: '80',
+                                itemStyle: {
+                                    normal: {
+                                        color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                            offset: 0,
+                                            color: this.colorArr[i].color1
+                                        }, {
+                                            offset: 1,
+                                            color: this.colorArr[i].color2
+                                        }])
+                                    }
+
+                                },
+                                label: {
+                                    normal: {
+                                        rich: {
+                                            a: {
+                                                color: '#fff',
+                                                align: 'center',
+                                                fontSize:this.fontSize(0.15),
+                                                fontWeight: "bold"
+                                            },
+                                        },
+                                        formatter: function () {
+                                            return "{a|" + d.value + "}";
+                                        },
+                                        position: 'center',
+                                        show: true
+                                    }
+                                },
+                                labelLine: {
+                                    show: false
+                                }
+                            }],
+                        },
+                    );
+                }
+                console.log(title, "title");
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartold9'));
+                this.myChart.setOption({
+                    title: title,
+                    xAxis: {
+                        type: 'category',
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        max: 200,
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        }
+                    },
+                    series: seriesArr
+                });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
+            }
+        },
+        mounted() {
+            this.draw();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/people.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="p99">
+    <!-- <span class="title">多系统使用次数{{moreSystem}}次</span> -->
+    <!-- <span class="title">PC端{{pcSystem}}次</span>
+    <span class="title">小程序端{{xiaochengxuSystem}}次</span>
+    <span class="title">微信端{{weixinSystem}}次</span> -->
+  </div>
+</template>
+<script>
+import { total } from '../api'
+export default {
+  name: "chart",
+  props: {
+    dataArr: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      moreSystem: 1,
+      pcSystem: 1,
+      xiaochengxuSystem: 1,
+      weixinSystem: 1,
+
+    };
+  },
+  mounted() {
+    // this.timer = setInterval(() => {
+    //   this.setNowTimes();
+    // }, 1000);
+    this.total();
+
+
+  },
+  methods: {
+    async total() {
+      console.log("pppppppppppppppp");
+      const result = await total();
+      this.pcSystem = result[0]['PC端']
+      this.xiaochengxuSystem = result[0]['小程序端']
+      this.weixinSystem = result[0]['微信端']
+    },
+
+  },
+  computed: {}
+};
+</script>
+<style scoped>
+.p99 {
+  top: 1.4%;
+  right:2.5%;
+  position: absolute;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 800;
+  font-family: STHeitiSC;
+  font-weight: 300;
+  color: rgba(10, 182, 255, 1);
+}
+
+.title {
+  margin-right: 10px;
+}
+</style>

src/components/timeing.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="p99">
+        <span class="date">{{nowDate}}</span>
+        <span class="week">{{nowWeek}}</span>
+        <span class="time">{{nowTime}}</span>
+    </div>
+</template>
+<script>
+    export default {
+        name: "chart",
+        props: {
+            dataArr: {
+                type: Array,
+                default: () => {
+                    return [];
+                }
+            }
+        },
+        data() {
+            return {
+                nowWeek: "",
+                nowDate: "",
+                nowTime: "",
+            };
+        },
+        mounted() {
+            this.timer = setInterval(() => {
+                this.setNowTimes();
+            }, 1000);
+        },
+        methods: {
+            setNowTimes() {
+                let myDate = new Date();
+                // console.log(myDate)
+                let wk = myDate.getDay();
+                let yy = String(myDate.getFullYear());
+                let mm = myDate.getMonth() + 1;
+                let dd = String(
+                    myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
+                );
+                let hou = String(
+                    myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
+                );
+                let min = String(
+                    myDate.getMinutes() < 10
+                        ? "0" + myDate.getMinutes()
+                        : myDate.getMinutes()
+                );
+                let sec = String(
+                    myDate.getSeconds() < 10
+                        ? "0" + myDate.getSeconds()
+                        : myDate.getSeconds()
+                );
+                let weeks = [
+                    "星期日",
+                    "星期一",
+                    "星期二",
+                    "星期三",
+                    "星期四",
+                    "星期五",
+                    "星期六"
+                ];
+                let week = weeks[wk];
+                this.nowDate = yy + "年" + mm + "月" + dd + "日";
+                this.nowTime = hou + ":" + min + ":" + sec;
+                this.nowWeek = week;
+                this.month = mm;
+            }
+        },
+        computed: {}
+    };
+</script>
+<style scoped>
+    .p99 {
+        top: 1%;
+        left: 1%;
+        position: absolute;
+        color: #fff;
+        font-size: 24px;
+        font-weight: 800;
+    }
+
+    .date {
+        margin-right: 10px;
+        font-size: 16px;
+        font-family: STHeitiSC;
+        font-weight: 600;
+         color: #0ab7ff;
+    }
+
+    .week {
+        margin-right: 10px;
+        font-size: 16px;
+        font-family: STHeitiSC;
+        font-weight: 600;
+         color: #0ab7ff;
+    }
+
+    .time {
+        font-size: 16px;
+        font-family: STHeitiSC;
+        font-weight: 600;
+         color: #0ab7ff;
+    }
+</style>

src/lib/lib-flexible.js

@@ -0,0 +1,117 @@
+
+(function(win, lib) {
+    var doc = win.document;
+    var docEl = doc.documentElement;
+    var metaEl = doc.querySelector('meta[name="viewport"]');
+    var flexibleEl = doc.querySelector('meta[name="flexible"]');
+    var dpr = 0;
+    var scale = 0;
+    var tid;
+    var flexible = lib.flexible || (lib.flexible = {});
+
+    if (metaEl) {
+        console.warn('将根据已有的meta标签来设置缩放比例');
+        var match = metaEl.getAttribute('content').match(/initialscale=([\d]+)/);
+        if (match) {
+            scale = parseFloat(match[1]);
+            dpr = parseInt(1 / scale);
+        }
+    } else if (flexibleEl) {
+        var content = flexibleEl.getAttribute('content');
+        if (content) {
+            var initialDpr = content.match(/initialdpr=([\d]+)/);
+            var maximumDpr = content.match(/maximumdpr=([\d]+)/);
+            if (initialDpr) {
+                dpr = parseFloat(initialDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+            if (maximumDpr) {
+                dpr = parseFloat(maximumDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+        }
+    }
+
+    if (!dpr && !scale) {
+        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+        var devicePixelRatio = win.devicePixelRatio;
+        if (isIPhone) {
+            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+                dpr = 3;
+            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
+                dpr = 2;
+            } else {
+                dpr = 1;
+            }
+        } else {
+            // 其他设备下，仍旧使用1倍的方案
+            dpr = 1;
+        }
+        scale = 1 / dpr;
+    }
+
+    docEl.setAttribute('data-dpr', dpr);
+    if (!metaEl) {
+        metaEl = doc.createElement('meta');
+        metaEl.setAttribute('name', 'viewport');
+        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
+        if (docEl.firstElementChild) {
+            docEl.firstElementChild.appendChild(metaEl);
+        } else {
+            var wrap = doc.createElement('div');
+            wrap.appendChild(metaEl);
+            doc.write(wrap.innerHTML);
+        }
+    }
+
+    function refreshRem(){
+        var width = docEl.getBoundingClientRect().width;
+        if (width / dpr > 540) {
+            width = width * dpr;
+        }
+        var rem = width / 10;
+        docEl.style.fontSize = rem + 'px';
+        flexible.rem = win.rem = rem;
+    }
+
+    win.addEventListener('resize', function() {
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+    }, false);
+    win.addEventListener('pageshow', function(e) {
+        if (e.persisted) {
+            clearTimeout(tid);
+            tid = setTimeout(refreshRem, 300);
+        }
+    }, false);
+
+    if (doc.readyState === 'complete') {
+        doc.body.style.fontSize = 12 * dpr + 'px';
+    } else {
+        doc.addEventListener('DOMContentLoaded', function() {
+            doc.body.style.fontSize = 12 * dpr + 'px';
+        }, false);
+    }
+
+
+    refreshRem();
+
+    flexible.dpr = win.dpr = dpr;
+    flexible.refreshRem = refreshRem;
+    flexible.rem2px = function(d) {
+        var val = parseFloat(d) * this.rem;
+        if (typeof d === 'string' && d.match(/rem$/)) {
+            val += 'px';
+        }
+        return val;
+    }
+    flexible.px2rem = function(d) {
+        var val = parseFloat(d) / this.rem;
+        if (typeof d === 'string' && d.match(/px$/)) {
+            val += 'rem';
+        }
+        return val;
+    }
+
+})(window, window['lib'] || (window['lib'] = {}));

src/main.js

@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import echarts from 'echarts'
+import 'echarts-liquidfill';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import timeing from "./components/timeing";
+import people from "./components/people";
+import storageUtil from './util/storageUtil'
+import './lib/lib-flexible';
+import md5 from 'js-md5';
+import qs from 'qs'
+
+Vue.prototype.$md5 = md5
+Vue.config.productionTip = false
+Vue.prototype.$echarts = echarts
+Vue.use(ElementUI);
+Vue.component('timeing', timeing);
+Vue.component('people', people);
+import './font/font.css'
+Vue.prototype.$qs = qs
+
+router.beforeEach((to, from, next) => {
+    const path = to.path;
+    if (path == '/') {
+        storageUtil.save('dept-array', '');
+    }
+    next();
+});
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

src/pages/PatrolmanStatistics.vue

@@ -0,0 +1,860 @@
+<template>
+  <!--  :style="{height: height}"  -->
+  <div class="home">
+    <timeing></timeing>
+    <!-- <people></people> -->
+    <div class="p99">
+      <!-- <span class="title">多系统使用次数{{moreSystem}}次</span> -->
+      <!-- <span class="title">PC端{{pcSystem}}次</span>
+      <span class="title">小程序端{{xiaochengxuSystem}}次</span>
+      <span class="title">微信端{{weixinSystem}}次</span> -->
+    </div>
+    <p class="backtitle">巡访员信息统计</p>
+    <div class="return-btn" @click="goHome">返回首页</div>
+    <div class="select-div">
+      <span class="address-title">省：</span>
+      <el-select class="input" v-model="dept1" :clearable="provinceClearable" :popper-append-to-body="false"
+                 placeholder="请选择" @change="provinceChange">
+        <el-option v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">地市：</span>
+      <el-select class="input" v-model="dept2" :clearable='cityClearable' :popper-append-to-body="false"
+                 placeholder="请选择" @change="cityChange">
+        <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">县(市区)：</span>
+      <el-select class="input1" v-model="dept3" :clearable='areaClearable' :popper-append-to-body="false"
+                 placeholder="请选择" @change="areaChange">
+        <el-option v-for="item in areas" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span v-if="!isZhankai" class="bj-zhankai" @click="zhankai"></span>
+      <span v-else class="bj-shouqi" @click="guanbi"></span>
+      <span class="bj-qeuren" @click="queren"></span>
+      <span v-if="isZhankai" class="address-title">乡镇(街道)：</span>
+      <el-select v-if="isZhankai" style="margin-top: 1%" class="input1" :clearable='countyClearable'
+                 :popper-append-to-body="false" v-model="dept4" placeholder="请选择" @change="countyChange">
+        <el-option v-for="item in countys" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span v-if="isZhankai" class="address-title">村(居)民委员会：</span>
+      <el-select v-if="isZhankai" class="input1" :clearable='villageClearable' :popper-append-to-body="false"
+                 v-model="dept5" placeholder="请选择">
+        <el-option v-for="item in villages" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+    </div>
+    <div class="header">
+      <!--  图1     -->
+      <div class="tu-one">
+        <!--        <com1 :dataArr="dataArr1"></com1>-->
+        <div class="number">{{score1 || 0}}</div>
+        <div class="small-title">采集积分（分）</div>
+      </div>
+      <div class="tu-two">
+        <div class="number">{{score2 || 0}}</div>
+        <div class="small-title">累计积分（分）</div>
+      </div>
+      <div class="tu-three">
+        <p class="title1">巡访员积分排行TOP10</p>
+        <div v-if="listData.length == 0" class="zanwushuju">暂无数据</div>
+        <div v-else class="scorll-div scroll">
+          <ul class="item " style="height:100%">
+            <li v-for="(item, index) in listData" :key="index">
+              <el-row style="padding-top:1%;padding-bottom:1%;margin-top:2%;color:#fff;font-size: 1.6vh" type="flex"
+                      justify="center" align="middle" :class="{'sc0': index%2==0}">
+                <el-col :span="2" class="col4">
+                  <el-image v-if="index == 0 ||index == 1 || index== 2 " class="img" :src="scrollTextisColor(index)">
+                  </el-image>
+                  <div v-else class="top10-number">{{index+1}}</div>
+                </el-col>
+                <el-col :span="5">{{item.userName}}</el-col>
+                <el-col :span="12">{{item.address}}</el-col>
+                <el-col :span="5">{{item.score}}分</el-col>
+              </el-row>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="tu-four">
+        <p class="title1">巡访员性别分布统计</p>
+        <com1 ref="c1"></com1>
+      </div>
+      <div class="tu-five">
+        <p class="title1">巡访员认证数据统计</p>
+        <com2 ref="c2"></com2>
+      </div>
+      <div class="tu-six">
+        <p class="title1">巡访员职务分布统计</p>
+        <com3 ref="c3"></com3>
+      </div>
+      <div class="tu-seven">
+        <p class="title1">巡访员巡访方式统计</p>
+        <com4 ref="c4"></com4>
+      </div>
+      <div class="tu-thirteen">
+        <p class="title1">核心巡访数据统计</p>
+      </div>
+    </div>
+    <div class="foot">
+      <div class="tu-eight">
+        <p class="title1">老年人健康状况</p>
+        <com5 ref='c5'></com5>
+      </div>
+      <div class="tu-nine">
+        <p class="title1">老年人精神状态</p>
+        <com6 ref="c6"></com6>
+      </div>
+      <div class="tu-ten">
+        <p class="title1">老年人安全情况</p>
+        <com7 ref="c7"></com7>
+      </div>
+      <div class="tu-eleven">
+        <p class="title1">老年人卫生环境</p>
+        <com8 ref="c8"></com8>
+      </div>
+      <div class="tu-twelve">
+        <p class="title1">老年人居住环境</p>
+        <com9 ref="c9"></com9>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import com1 from "../components/PatrolmanStatistics/1.vue";
+import com2 from "../components/PatrolmanStatistics/2.vue";
+import com3 from "../components/PatrolmanStatistics/3.vue";
+import com4 from "../components/PatrolmanStatistics/4.vue";
+import com5 from "../components/PatrolmanStatistics/5.vue";
+import com6 from "../components/PatrolmanStatistics/6.vue";
+import com7 from "../components/PatrolmanStatistics/7.vue";
+import com8 from "../components/PatrolmanStatistics/8.vue";
+import com9 from "../components/PatrolmanStatistics/9.vue";
+
+import storageUtil from '../util/storageUtil'
+import { findDept, oldPersonSelectUserValue, oldPersonSelectDeptValue, total } from '../api'
+
+export default {
+  name: "Home",
+  components: { com1, com2, com3, com4, com5, com6, com7, com8, com9 },
+  data() {
+    return {
+      height: '0px',
+      provinces: [],   // 省份
+      citys: [], // 市
+      areas: [],   // 县
+      countys: [],  // 乡
+      villages: [],  // 村
+      dept1: '',
+      dept2: '',
+      dept3: '',
+      dept4: '',
+      dept5: '',
+      provinceClearable: true,
+      cityClearable: true,
+      areaClearable: true,
+      villageClearable: true,
+      countyClearable: true,
+      isZhankai: false,  //是够展开和收起
+      listData: [],
+      score1: 0,
+      score2: 0,
+      moreSystem: 1,
+      pcSystem: 1,
+      xiaochengxuSystem: 1,
+      weixinSystem: 1,
+    };
+  },
+  async mounted() {
+    let provinces = await this.findDept({ 'level': '1' });
+    this.provinces = provinces.filter(item => {
+      return item.label == '吉林省'
+    })
+    this.dept1 = this.provinces[0].value;
+    console.log(this.dept1, "dept111111");
+    let userInfo = storageUtil.read('userInfo');
+    if (userInfo.dept5) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = false;
+      this.countyClearable = false;
+      this.villageClearable = false;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+
+      if (this.dept2) {
+        let areas = await this.findDept({ fid: this.dept2 });
+        this.areas = areas.filter(item => {
+          return item.value == userInfo.dept3
+        })
+        this.dept3 = this.areas[0].value
+
+        if (this.dept3) {
+          let countys = await this.findDept({ fid: this.dept3 });
+          this.countys = countys.filter(item => {
+            return item.value == userInfo.dept4
+          })
+          this.dept4 = this.countys[0].value
+
+          if (this.dept4) {
+            let villages = await this.findDept({ fid: this.dept4 });
+
+            this.villages = villages.filter(item => {
+              return item.value == userInfo.dept5
+            })
+          }
+          this.dept5 = this.villages[0].value
+
+        }
+      }
+    } else if (userInfo.dept4) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = false;
+      this.countyClearable = false;
+      this.villageClearable = true;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+      if (this.dept2) {
+        let areas = await this.findDept({ fid: this.dept2 });
+        this.areas = areas.filter(item => {
+          return item.value == userInfo.dept3
+        })
+        this.dept3 = this.areas[0].value
+        if (this.dept3) {
+          let countys = await this.findDept({ fid: this.dept3 });
+          this.countys = countys.filter(item => {
+            return item.value == userInfo.dept4
+          })
+          this.dept4 = this.countys[0].value
+          this.countyChange(this.dept4);
+
+        }
+      }
+    } else if (userInfo.dept3) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = false;
+      this.countyClearable = true;
+      this.villageClearable = true;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+      if (this.dept2) {
+        let areas = await this.findDept({ fid: this.dept2 });
+        this.areas = areas.filter(item => {
+          return item.value == userInfo.dept3
+        })
+        this.dept3 = this.areas[0].value
+        this.areaChange(this.dept3)
+        //this.oldPersonSex();
+      }
+    } else if (userInfo.dept2) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = true;
+      this.countyClearable = true;
+      this.villageClearable = true;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+      this.cityChange(this.dept2);
+      //this.oldPersonSex();
+    } else if (userInfo.dept1) {
+      this.provinceClearable = false;
+      this.cityClearable = true;
+      this.areaClearable = true;
+      this.countyClearable = true;
+      this.villageClearable = true;
+      let provinces = await this.findDept({ 'level': '1' });
+      this.provinces = provinces.filter(item => {
+        return item.label == '吉林省'
+      })
+      this.dept1 = this.provinces[0].value;
+      if (this.dept1) {
+        this.provinceChange(this.dept1);
+        //this.oldPersonSex();
+      }
+
+    }
+
+    let arr = new Array();
+    if (this.dept1 != '') {
+      arr.push(this.dept1);
+    }
+    if (this.dept2 != '') {
+      arr.push(this.dept2);
+    }
+    if (this.dept3 != '') {
+      arr.push(this.dept3);
+    }
+    if (this.dept4 != '') {
+      arr.push(this.dept4);
+    }
+    if (this.dept5 != '') {
+      arr.push(this.dept5);
+    }
+    storageUtil.save('dept-array', arr);
+
+    if (userInfo.rolename == '超级管理员') {
+      this.total({ user: 'admin' });
+    } else {
+      this.total({ user: '0000' });
+    }
+
+    this.$refs.c1.draw();
+    this.$refs.c2.draw();
+    this.$refs.c3.draw();
+    this.$refs.c4.draw();
+    this.$refs.c5.draw();
+    this.$refs.c6.draw();
+    this.$refs.c7.draw();
+    this.$refs.c8.draw();
+    this.$refs.c9.draw();
+
+    this.listData = await oldPersonSelectUserValue({}, 'POST');
+    const result = await oldPersonSelectDeptValue({}, 'POST');
+    this.score1 = result.infoValue;
+    this.score2 = result.totalValue;
+
+    // const deptArray = storageUtil.read('dept-array');
+    // console.log(deptArray, "打印下锕");
+    // if (deptArray != null && deptArray != '' && deptArray.length > 0) {
+    //   for (let i = 0; i < deptArray.length; i++) {
+    //     this['dept' + (i + 1)] = deptArray[i];
+    //   }
+    // }
+
+    // if (this.dept1 != '') {
+    //   this.citys = await this.findDept({ fid: this.dept1 });
+    // }
+
+    // if (this.dept2 != '') {
+    //   this.areas = await this.findDept({ fid: this.dept2 });
+    // }
+
+    // if (this.dept3 != '') {
+    //   this.countys = await this.findDept({ fid: this.dept3 });
+    // }
+
+    // if (this.dept4 != '') {
+    //   this.villages = await this.findDept({ fid: this.dept4 });
+    // }
+
+
+  },
+  methods: {
+    //获取地区
+    async findDept(data) {
+      const result = await findDept(data, 'POST');
+      return result;
+    },
+    async provinceChange(val) {
+      if (val != '' && val != null) {
+        this.citys = await this.findDept({ fid: val });
+      } else {
+        this.citys = [];
+        this.areas = [];
+        this.countys = [];
+        this.villages = [];
+      }
+      this.dept2 = '';
+      this.dept3 = '';
+      this.dept4 = '';
+      this.dept5 = '';
+    },
+    async cityChange(val) {
+      if (val != '' && val != null) {
+        this.areas = await this.findDept({ fid: val });
+      } else {
+        this.areas = [];
+        this.countys = [];
+        this.villages = [];
+      }
+
+      this.dept3 = '';
+      this.dept4 = '';
+      this.dept5 = '';
+    },
+
+    async total(val) {
+      const result = await total(val);
+      this.pcSystem = result[0]['PC端']
+      this.xiaochengxuSystem = result[0]['小程序端']
+      this.weixinSystem = result[0]['微信端']
+    },
+
+
+    async areaChange(val) {
+      if (val != '' && val != null) {
+        this.countys = await this.findDept({ fid: val });
+      } else {
+        this.countys = [];
+        this.villages = [];
+      }
+      this.dept4 = '';
+      this.dept5 = '';
+    },
+    async countyChange(val) {
+      if (val != '' && val != null) {
+        this.villages = await this.findDept({ fid: val });
+      } else {
+        this.villages = [];
+      }
+
+      this.dept5 = '';
+    },
+    //返回首页
+    goHome() {
+      storageUtil.save('dept-array', '');
+      this.$router.push('/home/home')
+    },
+    zhankai() {
+      this.isZhankai = !this.isZhankai
+    },
+    guanbi() {
+      this.isZhankai = !this.isZhankai
+    },
+    async queren() {
+      let arr = new Array();
+      if (this.dept1 != '') {
+        arr.push(this.dept1);
+      }
+      if (this.dept2 != '') {
+        arr.push(this.dept2);
+      }
+      if (this.dept3 != '') {
+        arr.push(this.dept3);
+      }
+      if (this.dept4 != '') {
+        arr.push(this.dept4);
+      }
+      if (this.dept5 != '') {
+        arr.push(this.dept5);
+      }
+      storageUtil.save('dept-array', arr);
+
+      this.$refs.c1.draw();
+      this.$refs.c2.draw();
+      this.$refs.c3.draw();
+      this.$refs.c4.draw();
+      this.$refs.c5.draw();
+      this.$refs.c6.draw();
+      this.$refs.c7.draw();
+      this.$refs.c8.draw();
+      this.$refs.c9.draw();
+
+      this.listData = await oldPersonSelectUserValue({}, 'POST');
+      const result = await oldPersonSelectDeptValue({}, 'POST');
+      this.score1 = result.infoValue;
+      this.score2 = result.totalValue;
+
+    },
+    // 滚动颜色
+    scrollTextisColor: function (i) {
+      if (i == 0) {
+        return require("../assets/PatrolmanStatistics/top1.png")
+      } else if (i == 1) {
+        return require("../assets/PatrolmanStatistics/top2.png")
+      } else if (i == 2) {
+        return require("../assets/PatrolmanStatistics/top3.png")
+      }
+    }
+  },
+  computed: {},
+  // created() {
+  //     this.height = window.innerWidth * 1080 /  1920 +'px'
+  //
+  // }
+};
+</script>
+<style scoped lang="less" type="text/css">
+.backtitle {
+  background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 3.3vh;
+  font-weight: 900;
+  font-weight: 900;
+  position: absolute;
+  left: 44%;
+  top: 1%;
+}
+
+.select-div {
+  width: 38%;
+  /*height: 4%;*/
+  position: absolute;
+  top: 4.5%;
+  left: 2%;
+  z-index: 999;
+  background: #01135b;
+}
+
+.return-btn {
+  /*background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);*/
+  background: url('../assets/oldStatistics/fanhuishouye.png') no-repeat;
+  background-size: 100% 100%;
+  width: 4%;
+  line-height: 250%;
+  height: 4%;
+  font-size: 1.5vh;
+  text-align: center;
+  font-weight: 900;
+  position: absolute;
+  right: 2%;
+  top: 5%;
+  padding: 0 10px;
+  color: #011168;
+  z-index: 999;
+  cursor: pointer;
+}
+
+.return-btn:hover {
+  cursor: pointer;
+}
+
+.home {
+  /*height: 100%;*/
+  /*left: 50%;*/
+  /*top: 50%;*/
+  /*transform: translate(-50%,-50%);*/
+  /*position: absolute;*/
+  /*width: 100%;*/
+  /*background: url("../assets/PatrolmanStatistics/bj.png");*/
+  /*background-size: 100% 100%;*/
+  /*display: flex;*/
+  /*flex-direction: column;*/
+
+  height: 100%;
+  position: fixed;
+  width: 100%;
+  background: url('../assets/PatrolmanStatistics/bj.png');
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  width: 100%;
+  height: 67%;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.tu-one {
+  width: 18%;
+  height: 17%;
+  position: absolute;
+  top: 15%;
+  left: 2%;
+  text-align: center;
+}
+
+.tu-two {
+  width: 18%;
+  height: 17%;
+  position: absolute;
+  top: 35%;
+  left: 2%;
+  text-align: center;
+}
+
+.tu-three {
+  width: 23.3%;
+  height: 37%;
+  position: absolute;
+  top: 15%;
+  left: 21.5%;
+  text-align: center;
+}
+
+.tu-four {
+  width: 23%;
+  height: 37%;
+  position: absolute;
+  top: 15%;
+  left: 46%;
+  text-align: center;
+}
+
+.tu-five {
+  width: 26%;
+  height: 36%;
+  position: absolute;
+  top: 55%;
+  left: 2%;
+  text-align: center;
+}
+
+.tu-six {
+  width: 40%;
+  height: 36%;
+  position: absolute;
+  top: 55%;
+  left: 29%;
+  text-align: center;
+}
+
+.tu-seven {
+  width: 27%;
+  height: 76%;
+  position: absolute;
+  top: 15%;
+  left: 70.5%;
+  text-align: center;
+}
+
+.tu-eight {
+  width: 18%;
+  height: 85%;
+  position: absolute;
+  top: 7%;
+  left: 3%;
+  text-align: center;
+}
+
+.tu-nine {
+  width: 18%;
+  height: 85%;
+  position: absolute;
+  top: 7%;
+  left: 22%;
+  text-align: center;
+}
+
+.tu-ten {
+  width: 18%;
+  height: 85%;
+  position: absolute;
+  top: 7%;
+  left: 41%;
+  text-align: center;
+}
+
+.tu-eleven {
+  width: 18%;
+  height: 85%;
+  position: absolute;
+  top: 7%;
+  left: 60%;
+  text-align: center;
+}
+
+.tu-twelve {
+  width: 18%;
+  height: 85%;
+  position: absolute;
+  top: 7%;
+  left: 79%;
+  text-align: center;
+}
+
+.tu-thirteen {
+  width: 100%;
+  height: 5%;
+  position: absolute;
+  bottom: 0%;
+  left: 3%;
+  text-align: center;
+}
+
+.number {
+  font-size: 5.5vh;
+  font-weight: 400;
+  color: rgba(248, 255, 63, 1);
+  font-family: LCD;
+  letter-spacing: 1.3vh;
+  margin-top: 4%;
+}
+
+.small-title {
+  color: white;
+  margin-top: 1%;
+  font-size: 1.8vh;
+  /*border: 1px silver solid;*/
+}
+
+.title1 {
+  font-size: 1.8vh;
+  font-family: SourceHanSansCN;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 1);
+}
+
+.scorll-div {
+  height: 82%;
+  width: 100%;
+  margin-top: 4%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.top10-number {
+  color: #ffd821;
+}
+
+.item {
+  font-size: 16px;
+}
+
+.foot {
+  width: 100%;
+  height: 32%;
+  position: relative;
+}
+
+.scroll::-webkit-scrollbar {
+  background-color: #374991;
+  height: 8px;
+  width: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.scroll::-webkit-scrollbar-track {
+  opacity: 0;
+  transition: opacity 0.12s ease-out;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+  background-color: #1c95ce;
+  transition: background-color 0.3s;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.address-title {
+  color: #00d8fe;
+  font-size: 1.3vh;
+}
+
+.input {
+  width: 15.5%;
+}
+
+.input1 {
+  width: 20%;
+  margin-right: 1%;
+}
+
+.bj-zhankai {
+  display: inline-block;
+  background: url('../assets/PatrolmanStatistics/zhankai.png') no-repeat;
+  background-size: contain;
+  width: 10%;
+  height: 37px;
+  margin-right: 0%;
+  vertical-align: bottom;
+}
+
+.bj-zhankai:hover {
+  cursor: pointer;
+}
+
+.bj-shouqi {
+  display: inline-block;
+  background: url('../assets/PatrolmanStatistics/shouqi.png') no-repeat;
+  background-size: contain;
+  width: 10%;
+  height: 37px;
+  /*margin-right: 1%;*/
+  vertical-align: bottom;
+}
+
+.bj-shouqi:hover {
+  cursor: pointer;
+}
+
+.bj-qeuren {
+  display: inline-block;
+  background: url('../assets/PatrolmanStatistics/queren.png') no-repeat;
+  background-size: contain;
+  width: 10%;
+  height: 37px;
+  vertical-align: bottom;
+}
+
+.bj-qeuren:hover {
+  cursor: pointer;
+}
+
+/deep/ .el-select,
+/deep/ .el-input,
+/deep/ .el-input__inner {
+  color: #00d0f6;
+  text-align: center;
+  background: rgba(254, 196, 0, 0);
+  border-radius: 10px;
+  border: 0.8px solid #00d0f6;
+  /*border-image: linear-gradient(-90deg, rgba(0, 187, 234, 0), rgba(3, 77, 129, 1), rgba(0, 161, 254, 0)) 1 1;*/
+  box-shadow: 0px 0px 46px 0px rgba(8, 91, 168, 0.4);
+}
+
+/deep/ .el-select .el-input .el-select__caret {
+  color: #00d0f6;
+}
+
+/deep/ .el-select-dropdown__item.hover,
+/deep/ .el-select-dropdown__item:hover {
+  background: #123a80;
+  color: white;
+}
+
+/deep/ .el-select-dropdown {
+  background: #010f5a;
+  border: 3px solid #00d7ff;
+  color: red;
+}
+
+/deep/ .el-select-dropdown__item {
+  color: #00d7ff;
+}
+
+.zanwushuju {
+  color: white;
+  text-align: center;
+  height: 20%;
+  position: absolute;
+  top: 55%;
+  width: 100%;
+  font-size: 1.7vh;
+}
+
+
+.p99 {
+  top: 1.4%;
+  right: 2.5%;
+  position: absolute;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 800;
+  font-family: STHeitiSC;
+  font-weight: 300;
+  color: rgba(10, 182, 255, 1);
+}
+</style>

src/pages/Ranking.vue

@@ -0,0 +1,794 @@
+<template>
+  <div class="home">
+    <timeing></timeing>
+    <!-- <people></people> -->
+    <div class="p99">
+      <!-- <span class="title">多系统使用次数{{moreSystem}}次</span> -->
+      <!-- <span class="title">PC端{{pcSystem}}次</span>
+      <span class="title">小程序端{{xiaochengxuSystem}}次</span>
+      <span class="title">微信端{{weixinSystem}}次</span> -->
+    </div>
+    <p class="backtitle">采集探访数据排行榜</p>
+    <!--        <div class="select-div-top">-->
+    <!--            <span class="address-title">排行：</span>-->
+    <!--            <el-select class="input" v-model="paixing" clearable :popper-append-to-body="false" placeholder="请选择"-->
+    <!--                       @change="paixingceChange">-->
+    <!--                <el-option-->
+    <!--                        v-for="item in list"-->
+    <!--                        :key="item.value"-->
+    <!--                        :label="item.label"-->
+    <!--                        :value="item.value"-->
+    <!--                >-->
+    <!--                </el-option>-->
+    <!--            </el-select>-->
+    <!--        </div>-->
+    <div class="select-div">
+      <span class="address-title">排行：</span>
+      <el-select class="input" v-model="paixing" :popper-append-to-body="false" placeholder="请选择"
+                 @change="paixingceChange">
+        <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+      <span class="address-title">省：</span>
+      <el-select class="input" v-model="dept1" clearable :popper-append-to-body="false" placeholder="请选择"
+                 @change="provinceChange">
+        <el-option v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">地市：</span>
+      <el-select class="input" v-model="dept2" clearable :popper-append-to-body="false" placeholder="请选择"
+                 @change="cityChange">
+        <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">县(市区)：</span>
+      <el-select class="input" v-model="dept3" clearable :popper-append-to-body="false" placeholder="请选择"
+                 @change="areaChange">
+        <el-option v-for="item in areas" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">乡镇(街道)：</span>
+      <el-select class="input1" clearable :popper-append-to-body="false" v-model="dept4" placeholder="请选择"
+                 @change="countyChange">
+        <el-option v-for="item in countys" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">村(居)民委员会：</span>
+      <el-select class="input1" clearable :popper-append-to-body="false" v-model="dept5" placeholder="请选择">
+        <el-option v-for="item in villages" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">选择时间：</span>
+      <el-date-picker class="input1" v-model="date" type="month" value-format="yyyy-MM" format="yyyy年MM月"
+                      placeholder="选择月">
+      </el-date-picker>
+      <span class="bj-qeuren" @click="queren"></span>
+      <span class="return-btn" @click="goHome"></span>
+    </div>
+    <div class="title-leftdiv">{{title1}}</div>
+    <div class="title-rightdiv">{{title2}}</div>
+    <div class="left-box scroll">
+      <el-row class="row24" :span="24" v-for="(item, index) in listData" :key="index">
+        <el-col :span="3" class="name">
+          <div v-if="index == 0  " class="img0">aa</div>
+          <div v-else-if="index == 1  " class="img1">cc</div>
+          <div v-else-if="index == 2  " class="img2">dd</div>
+          <div v-else class="top11-number">{{index+1}}</div>
+        </el-col>
+        <el-col :span="7" class="name">{{item.name}}</el-col>
+        <el-col :span="10" class="name">
+          <el-progress :stroke-width="15" :show-text="isText" :percentage="formatNum(item.num)"></el-progress>
+        </el-col>
+        <el-col :span="3" class="name">{{item.num}}次</el-col>
+      </el-row>
+    </div>
+    <div class="right-box scroll">
+      <div v-if="listData1.length == 0" class="meiyouxinxi">暂无排行</div>
+      <el-row class="row24" v-else :span="24" v-for="(item, index) in listData1" :key="index">
+        <el-col :span="3" class="name">
+          <el-image v-if="index == 0 ||index == 1 || index== 2 " class="img" :src="scrollTextisColor(index)"></el-image>
+          <div v-else class="top10-number">{{index+1}}</div>
+        </el-col>
+        <el-col :span="4" class="name">{{item.name}}</el-col>
+        <el-col :span="7" class="name">{{item.address}}</el-col>
+        <el-col :span="7" class="name">
+          <el-progress :stroke-width="15" :show-text="isText" :percentage="formatNum1(item.num)"></el-progress>
+        </el-col>
+        <el-col :span="3" class="name">{{item.num}}次</el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import storageUtil from '../util/storageUtil'
+import { findDept, visitDeptPage, visitPersonPage, infoPersonPage, infoDeptPage, total } from '../api'
+
+export default {
+  name: "Home",
+  components: {},
+  data() {
+    return {
+      provinces: [],   // 省份
+      citys: [], // 市
+      areas: [],   // 县
+      countys: [],  // 乡
+      villages: [],  // 村
+      provinceClearable: true,
+      cityClearable: true,
+      areaClearable: true,
+      villageClearable: true,
+      countyClearable: true,
+      list: [
+        { label: '巡访数据', value: '巡访数据' },
+        { label: '采集数据', value: '采集数据' },
+      ],
+      title1: '地区巡访数据排行',
+      title2: '个人巡访数据排行',
+      dept1: '',
+      dept2: '',
+      dept3: '',
+      dept4: '',
+      dept5: '',
+      date: '',
+      isZhankai: false,  //是够展开和收起
+      // 左一
+      dataArr1: [],
+      // 左二
+      dataArr2: [],
+      listData: [],  //地区
+      listData1: [], //个人
+      isText: false,
+      paixing: '巡访数据',
+      moreSystem: 1,
+      pcSystem: 1,
+      xiaochengxuSystem: 1,
+      weixinSystem: 1,
+    };
+  },
+  async mounted() {
+    // let provinces = await this.findDept({ 'level': '1' });
+    // this.provinces = provinces.filter(item => {
+    //   return item.label == '吉林省'
+    // })
+
+
+    let provinces = await this.findDept({ 'level': '1' });
+    this.provinces = provinces.filter(item => {
+      return item.label == '吉林省'
+    })
+    this.dept1 = this.provinces[0].value;
+    let userInfo = storageUtil.read('userInfo');
+    if (userInfo.dept5) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = false;
+      this.countyClearable = false;
+      this.villageClearable = false;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+
+      if (this.dept2) {
+        let areas = await this.findDept({ fid: this.dept2 });
+        this.areas = areas.filter(item => {
+          return item.value == userInfo.dept3
+        })
+        this.dept3 = this.areas[0].value
+
+        if (this.dept3) {
+          let countys = await this.findDept({ fid: this.dept3 });
+          this.countys = countys.filter(item => {
+            return item.value == userInfo.dept4
+          })
+          this.dept4 = this.countys[0].value
+
+          if (this.dept4) {
+            let villages = await this.findDept({ fid: this.dept4 });
+
+            this.villages = villages.filter(item => {
+              return item.value == userInfo.dept5
+            })
+          }
+          this.dept5 = this.villages[0].value
+
+        }
+      }
+    } else if (userInfo.dept4) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = false;
+      this.countyClearable = false;
+      this.villageClearable = true;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+      if (this.dept2) {
+        let areas = await this.findDept({ fid: this.dept2 });
+        this.areas = areas.filter(item => {
+          return item.value == userInfo.dept3
+        })
+        this.dept3 = this.areas[0].value
+        if (this.dept3) {
+          let countys = await this.findDept({ fid: this.dept3 });
+          this.countys = countys.filter(item => {
+            return item.value == userInfo.dept4
+          })
+          this.dept4 = this.countys[0].value
+          this.countyChange(this.dept4);
+
+        }
+      }
+    } else if (userInfo.dept3) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = false;
+      this.countyClearable = true;
+      this.villageClearable = true;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+      if (this.dept2) {
+        let areas = await this.findDept({ fid: this.dept2 });
+        this.areas = areas.filter(item => {
+          return item.value == userInfo.dept3
+        })
+        this.dept3 = this.areas[0].value
+        this.areaChange(this.dept3)
+        //this.oldPersonSex();
+      }
+    } else if (userInfo.dept2) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = true;
+      this.countyClearable = true;
+      this.villageClearable = true;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+      this.cityChange(this.dept2);
+      //this.oldPersonSex();
+    } else if (userInfo.dept1) {
+      this.provinceClearable = false;
+      this.cityClearable = true;
+      this.areaClearable = true;
+      this.countyClearable = true;
+      this.villageClearable = true;
+      let provinces = await this.findDept({ 'level': '1' });
+      this.provinces = provinces.filter(item => {
+        return item.label == '吉林省'
+      })
+      this.dept1 = this.provinces[0].value;
+      if (this.dept1) {
+        this.provinceChange(this.dept1);
+        //this.oldPersonSex();
+      }
+
+    }
+
+
+    let arr = new Array();
+    if (this.dept1 != '') {
+      arr.push(this.dept1);
+    }
+    if (this.dept2 != '') {
+      arr.push(this.dept2);
+    }
+    if (this.dept3 != '') {
+      arr.push(this.dept3);
+    }
+    if (this.dept4 != '') {
+      arr.push(this.dept4);
+    }
+    if (this.dept5 != '') {
+      arr.push(this.dept5);
+    }
+    storageUtil.save('dept-array', arr);
+
+    let param = {};
+    if (this.date != '' && this.date != null) {
+      param = { time: this.date };
+    }
+    if (this.paixing == '巡访数据') {
+      this.loadDeptData(param);
+      this.loadPersonData(param);
+    } else {
+      this.loadInfoDeptData(param);
+      this.loadInfoPersonData(param);
+    }
+
+
+    if (userInfo.rolename == '超级管理员') {
+      this.total({ user: 'admin' });
+    } else {
+      this.total({ user: '0000' });
+    }
+
+    // const deptArray = storageUtil.read('dept-array');
+    // if (deptArray != null && deptArray != '' && deptArray.length > 0) {
+    //   for (let i = 0; i < deptArray.length; i++) {
+    //     this['dept' + (i + 1)] = deptArray[i];
+    //   }
+    // }
+
+    // if (this.dept1 != '') {
+    //   this.citys = await this.findDept({ fid: this.dept1 });
+    // }
+
+    // if (this.dept2 != '') {
+    //   this.areas = await this.findDept({ fid: this.dept2 });
+    // }
+
+    // if (this.dept3 != '') {
+    //   this.countys = await this.findDept({ fid: this.dept3 });
+    // }
+
+    // if (this.dept4 != '') {
+    //   this.villages = await this.findDept({ fid: this.dept4 });
+    // }
+  },
+  methods: {
+    //获取地区
+    async findDept(data) {
+      const result = await findDept(data, 'POST');
+      return result;
+    },
+
+    async total(val) {
+      const result = await total(val);
+      this.pcSystem = result[0]['PC端']
+      this.xiaochengxuSystem = result[0]['小程序端']
+      this.weixinSystem = result[0]['微信端']
+    },
+
+    async provinceChange(val) {
+      if (val != '' && val != null) {
+        this.citys = await this.findDept({ fid: val });
+      } else {
+        this.citys = [];
+        this.areas = [];
+        this.countys = [];
+        this.villages = [];
+      }
+      this.dept2 = '';
+      this.dept3 = '';
+      this.dept4 = '';
+      this.dept5 = '';
+    },
+    async cityChange(val) {
+      if (val != '' && val != null) {
+        this.areas = await this.findDept({ fid: val });
+      } else {
+        this.areas = [];
+        this.countys = [];
+        this.villages = [];
+      }
+
+      this.dept3 = '';
+      this.dept4 = '';
+      this.dept5 = '';
+    },
+    async areaChange(val) {
+      if (val != '' && val != null) {
+        this.countys = await this.findDept({ fid: val });
+      } else {
+        this.countys = [];
+        this.villages = [];
+      }
+      this.dept4 = '';
+      this.dept5 = '';
+    },
+    async countyChange(val) {
+      if (val != '' && val != null) {
+        this.villages = await this.findDept({ fid: val });
+      } else {
+        this.villages = [];
+      }
+
+      this.dept5 = '';
+    },
+    async loadDeptData(obj) {
+      const result = await visitDeptPage(obj, 'POST');
+      this.listData = result;
+    },
+
+    async loadPersonData(obj) {
+      const result = await visitPersonPage(obj, 'POST');
+      this.listData1 = result;
+    },
+
+    // 采集的地区
+    async loadInfoDeptData(obj) {
+      const result = await infoDeptPage(obj, 'POST');
+      this.listData = result;
+    },
+    // 采集的个人
+    async loadInfoPersonData(obj) {
+      const result = await infoPersonPage(obj, 'POST');
+      this.listData1 = result;
+    },
+    paixingceChange(value) {
+      console.log(value, "00000")
+      if (value == '采集数据') {
+        this.title1 = '地区采集数据排行';
+        this.title2 = '个人采集数据排行';
+      } else {
+        this.title1 = '地区巡访数据排行';
+        this.title2 = '个人巡访数据排行';
+      }
+    },
+
+    //糊掉首页
+    goHome() {
+      storageUtil.save('dept-array', '');
+      this.$router.push('/home/home')
+    },
+    // 省市选择框 展开
+    zhankai() {
+      this.isZhankai = !this.isZhankai
+
+    },
+    // 省市选择框 收起
+    guanbi() {
+      this.isZhankai = !this.isZhankai
+    },
+    // 省市选择框 确认
+    queren() {
+      let arr = new Array();
+      if (this.dept1 != '') {
+        arr.push(this.dept1);
+      }
+      if (this.dept2 != '') {
+        arr.push(this.dept2);
+      }
+      if (this.dept3 != '') {
+        arr.push(this.dept3);
+      }
+      if (this.dept4 != '') {
+        arr.push(this.dept4);
+      }
+      if (this.dept5 != '') {
+        arr.push(this.dept5);
+      }
+      storageUtil.save('dept-array', arr);
+
+      let param = {};
+      if (this.date != '' && this.date != null) {
+        param = { time: this.date };
+      }
+      if (this.paixing == '巡访数据') {
+        this.loadDeptData(param);
+        this.loadPersonData(param);
+      } else {
+        this.loadInfoDeptData(param);
+        this.loadInfoPersonData(param);
+      }
+    },
+    // 滚动颜色
+    scrollTextisColor: function (i) {
+      if (i == 0) {
+        return require("../assets/PatrolmanStatistics/top1.png")
+      } else if (i == 1) {
+        return require("../assets/PatrolmanStatistics/top2.png")
+      } else if (i == 2) {
+        return require("../assets/PatrolmanStatistics/top3.png")
+      }
+
+    },
+    // 滚动颜色
+    scrollTextisColor1: function (i) {
+      if (i == 0) {
+        return require("../assets/Ranking/1.png")
+      } else if (i == 1) {
+        return require("../assets/Ranking/2.png")
+      } else if (i == 2) {
+        return require("../assets/Ranking/3.png")
+      }
+    },
+  },
+  computed: {
+    formatNum() {
+      return function (num) {
+        console.log(num)
+        if (this.listData[0].num == 0) {
+          return 100
+        } else {
+          return num / this.listData[0].num * 100
+        }
+
+      }
+    },
+
+    formatNum1() {
+      return function (num) {
+        return num / this.listData1[0].num * 100
+      }
+    }
+  }
+};
+</script>
+<style scoped lang="less" type="text/css">
+.backtitle {
+  background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 3.5vh;
+  font-weight: 900;
+  position: absolute;
+  left: 42%;
+  top: 1%;
+}
+
+.address-title {
+  color: #00d8fe;
+  font-size: 1.3vh;
+}
+
+.top10-number {
+  color: #ffd821;
+}
+
+.top11-number {
+  background: url('../assets/Ranking/lanyuan.png') no-repeat center;
+  background-size: contain;
+  height: 24px;
+}
+
+.img0 {
+  background: url('../assets/Ranking/1.png') no-repeat center;
+  background-size: contain;
+  height: 24px;
+  color: transparent;
+}
+
+.img1 {
+  background: url('../assets/Ranking/2.png') no-repeat center;
+  background-size: contain;
+  height: 24px;
+  color: transparent;
+}
+
+.img2 {
+  background: url('../assets/Ranking/3.png') no-repeat center;
+  background-size: contain;
+  height: 24px;
+  color: transparent;
+}
+
+.input {
+  width: 7%;
+  margin-right: 0.5%;
+}
+
+.input1 {
+  width: 9%;
+  margin-right: 0.5%;
+}
+
+.select-div {
+  width: 100%;
+  height: 4%;
+  position: absolute;
+  top: 10%;
+  left: 2%;
+  z-index: 999;
+  background: #01135b;
+}
+
+.select-div-top {
+  width: 100%;
+  height: 4%;
+  position: absolute;
+  top: 5%;
+  left: 2%;
+  z-index: 9999;
+  background: #01135b;
+  border: 1px seagreen solid;
+}
+
+.title-leftdiv {
+  width: 47%;
+  height: 3.5%;
+  position: absolute;
+  top: 16%;
+  left: 2%;
+  text-align: center;
+  font-size: 1.9vh;
+  font-family: SourceHanSansCN;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+}
+
+.title-rightdiv {
+  width: 47%;
+  height: 3.5%;
+  position: absolute;
+  top: 16%;
+  left: 51%;
+  text-align: center;
+  font-size: 1.9vh;
+  font-family: SourceHanSansCN;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+}
+
+.return-btn {
+  display: inline-block;
+  vertical-align: bottom;
+  background: url('../assets/Ranking/fanhui.png') no-repeat;
+  background-size: 95% 95%;
+  width: 70px;
+  line-height: 40px;
+  height: 39px;
+  text-align: center;
+  font-weight: 900;
+  color: #00afde;
+  font-size: 10px;
+}
+
+.return-btn:hover {
+  cursor: pointer;
+}
+
+.home {
+  height: 100%;
+  position: fixed;
+  width: 100%;
+  background: url('../assets/Ranking/bj.png');
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.bj-qeuren {
+  display: inline-block;
+  background: url('../assets/Ranking/queren.png') no-repeat;
+  background-size: 90% 90%;
+  width: 69px;
+  height: 37px;
+  vertical-align: bottom;
+  margin-right: 0.5%;
+}
+
+.bj-qeuren:hover {
+  cursor: pointer;
+}
+
+.scroll::-webkit-scrollbar {
+  background-color: #374991;
+  width: 15px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.scroll::-webkit-scrollbar-track {
+  opacity: 0;
+  transition: opacity 0.12s ease-out;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+  background-color: #15a1e1;
+  transition: background-color 0.3s;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 10px;
+}
+
+/deep/ .el-select,
+/deep/ .el-input,
+/deep/ .el-input__inner {
+  color: #00d0f6;
+  text-align: center;
+  background: rgba(254, 196, 0, 0);
+  border-radius: 10px;
+  border: 0.8px solid #00d0f6;
+  /*border-image: linear-gradient(-90deg, rgba(0, 187, 234, 0), rgba(3, 77, 129, 1), rgba(0, 161, 254, 0)) 1 1;*/
+  box-shadow: 0px 0px 46px 0px rgba(8, 91, 168, 0.4);
+}
+
+/deep/ .el-select .el-input .el-select__caret {
+  color: #00d0f6;
+}
+
+/deep/ .el-select-dropdown__item.hover,
+/deep/ .el-select-dropdown__item:hover {
+  background: #123a80;
+  color: white;
+}
+
+/deep/ .el-select-dropdown {
+  background: #010f5a;
+  border: 1px solid #00d7ff;
+}
+
+/deep/ .el-select-dropdown__item {
+  color: #00d7ff;
+}
+
+.right-box {
+  width: 47%;
+  height: 74.8%;
+  position: absolute;
+  top: 22%;
+  left: 51%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 1.7vh;
+}
+
+.left-box {
+  width: 47%;
+  height: 74.8%;
+  position: absolute;
+  top: 22%;
+  left: 2%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 1.7vh;
+}
+
+.name {
+  color: white;
+  text-align: center;
+}
+
+/deep/ .el-row {
+  margin-top: 25px;
+}
+
+.left-box /deep/ .el-progress-bar__inner {
+  background: linear-gradient(-90deg, rgba(75, 226, 236, 1), rgba(0, 113, 252, 1));
+}
+
+.right-box /deep/ .el-progress-bar__inner {
+  background: linear-gradient(-90deg, #fab41d, #e98000);
+}
+
+/deep/ .el-date-editor.el-input,
+/deep/ .el-date-editor.el-input__inner {
+  width: 10%;
+}
+
+.meiyouxinxi {
+  color: white;
+  font-size: 1.9vh;
+  position: absolute;
+  top: 50%;
+  height: 10%;
+  width: 100%;
+  text-align: center;
+}
+
+.p99 {
+  top: 1.4%;
+  right: 2.5%;
+  position: absolute;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 800;
+  font-family: STHeitiSC;
+  font-weight: 300;
+  color: rgba(10, 182, 255, 1);
+}
+
+/*.row24 {*/
+/*   ba*/
+/*    height: 3%;*/
+/*}*/
+</style>

src/pages/login.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="bg">
+    <!-- <div class="content">
+      <img
+        src="../assets/login/logo_new.png"
+        style="position: relative;
+                left: 50%;transform: translate(-50%);"
+      />
+      <p style="color: #666;font-size: 16px;  margin-bottom: 20px;">请用管理员账号密码登录</p>
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
+        <el-form-item prop="loginName">
+          <el-input placeholder="请输入账号" clearable v-model="ruleForm.loginName"></el-input>
+        </el-form-item>
+        <el-form-item prop="loginPwd">
+          <el-input placeholder="请输入密码" show-password clearable v-model="ruleForm.loginPwd"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" style="width:100%;" @click="login">登录</el-button>
+    </div>-->
+    <div class="login_main">
+      <div class="login_main_left"></div>
+      <div class="login_main_right">
+        <div class="login_box">
+          <div class="login_box_top">系 统 登 录</div>
+          <div class="login_box_main">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
+              <el-form-item prop="loginName">
+                <el-input placeholder="账号" clearable v-model="ruleForm.loginName"></el-input>
+              </el-form-item>
+              <el-form-item prop="loginPwd">
+                <el-input placeholder="密码" show-password clearable v-model="ruleForm.loginPwd"></el-input>
+              </el-form-item>
+            </el-form>
+            <el-button
+              type="primary"
+              style="width:100%;margin-top: 10%"
+              @click="login"
+              :loading="logining"
+            >登录</el-button>
+          </div>
+          <div class="login_box_foot">
+            技术支持：
+            <span style="margin-right: 3%;color: #409EFF">盛创科技</span>联系电话：
+            <span style="color: #409EFF">17004319000</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { userLogin } from "../api";
+import storageUtil from "../util/storageUtil";
+export default {
+  data() {
+    return {
+      ruleForm: {
+        loginName: "",
+        loginPwd: ""
+      }, //表单数据
+      rules: {
+        loginName: [
+          { required: true, message: "请输入账号", trigger: "change" }
+        ],
+        loginPwd: [{ required: true, message: "请输入密码", trigger: "change" }]
+      }
+    };
+  },
+  methods: {
+    login() {
+      this.$refs["ruleForm"].validate(valid => {
+        if (valid) {
+          this.loginSussess();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    async loginSussess() {
+      const result = await userLogin(
+        {
+          loginName: this.ruleForm.loginName,
+          pwd: this.$md5(this.ruleForm.loginPwd)
+        },
+        `POST`
+      );
+      if (result.code == 0) {
+        storageUtil.save("userInfo", result.data);
+        storageUtil.save("name", this.ruleForm.loginName);
+        storageUtil.save("pwd", this.$md5(this.ruleForm.loginPwd));
+        console.log(storageUtil.read("userInfo"), "我存了吗");
+        console.log(storageUtil.read("name"), "我存了吗");
+        console.log(storageUtil.read("pwd"));
+        this.$router.push("/home/home");
+      } else {
+        this.$message.error("登录失败，请核对账号和密码");
+      }
+      //this.$router.push('/home/home')
+      // this.logining = true;
+      // let result = await userLogin({
+      //   loginName: this.formData.loginName,
+      //   loginPwd: this.$md5(this.formData.loginPwd)
+      // });
+      // this.logining = false;
+      // if (result.code == 0) {
+      //   this.storageUtil.save("sessionId", result.data);
+      //   this.$router.replace("/home");
+      //   if (this.formData.loginPwd === this.$dict.defaultPassword) {
+      //     const h = this.$createElement;
+      //     this.$notify({
+      //       title: '提示',
+      //       message: h('b',
+      //         '当前密码为初始密码,为了信息采集的安全，请尽快修改密码!'),
+      //       type: 'warning',
+      //       position: 'bottom-right',
+      //       duration: 0
+      //     });
+      //   }
+      // }
+    },
+    GetQueryString(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+      var r = window.atob(window.location.search.substr(1)).match(reg); //search,查询？后面的参数，并匹配正则
+      console.log(r);
+      if (r != null) return unescape(r[2]);
+      return null;
+    }
+  },
+  mounted() {
+    console.log(this.GetQueryString("name"), "我是带过来的账号");
+    console.log(this.GetQueryString("password"), "我是带过来的密码");
+    var name = this.GetQueryString("name");
+    var password = this.GetQueryString("password");
+    if (name != null && password != null) {
+      this.ruleForm = {
+        loginName: name,
+        loginPwd: password
+      };
+      this.loginSussess();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.bg {
+  height: 100vh;
+  background: url("../../src/assets/login/login_bg.png") no-repeat;
+  background-size: 100% 100%;
+}
+.login_main {
+  position: absolute;
+  width: 58.4375vw;
+  height: 31.0416vw;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  background: #ffffff;
+  box-shadow: 0 3px 25px 2px rgba(41, 125, 236, 0.2);
+}
+.login_main_left {
+  flex: 4;
+  background: url("../../src/assets/login/old.png") no-repeat;
+  background-size: 100% 100%;
+}
+.login_main_right {
+  flex: 6;
+  position: relative;
+}
+.login_box {
+  width: 65%;
+  height: 80%;
+  position: absolute;
+  left: 50%;
+  bottom: 8%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+.login_box_top {
+  flex: 2;
+  font-size: 1.875vw;
+  font-weight: bold;
+  color: #484848;
+}
+.login_box_main {
+  flex: 7;
+}
+.login_box_foot {
+  flex: 1;
+  font-size: 0.8333vw;
+  font-weight: 400;
+  color: #484848;
+}
+.el-form-item >>> .el-input__inner {
+  height: 2.76vw;
+  line-height: 2.76vw;
+  background: #f1f8fd;
+  border-radius: 1.354vw;
+  font-size: 1.0416vw;
+}
+.el-button--primary {
+  height: 3.333vw;
+  background: #5f9bff;
+  border-radius: 1.666vw;
+  font-size: 1.302vw;
+  font-weight: 400;
+  color: #ffffff;
+}
+</style>

src/pages/oldStatistics.vue

@@ -0,0 +1,930 @@
+<template>
+  <div class="home">
+    <timeing></timeing>
+    <!-- <people></people> -->
+    <div class="p99">
+      <!-- <span class="title">多系统使用次数{{moreSystem}}次</span> -->
+      <!-- <span class="">PC端{{pcSystem}}次</span>
+      <span class="">小程序端{{xiaochengxuSystem}}次</span>
+      <span class="">微信端{{weixinSystem}}次</span> -->
+    </div>
+    <p class="backtitle">老年人信息统计</p>
+    <div class="return-btn" @click="goHome">返回首页</div>
+    <div class="select-div">
+      <span class="address-title">省：</span>
+      <el-select class="input" v-model="dept1" :clearable="provinceClearable" :popper-append-to-body="false"
+                 placeholder="请选择" @change="provinceChange">
+        <el-option v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">地市：</span>
+      <el-select class="input" v-model="dept2" :clearable='cityClearable' :popper-append-to-body="false"
+                 placeholder="请选择" @change="cityChange">
+        <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span class="address-title">县(市区)：</span>
+      <el-select class="input1" v-model="dept3" :clearable='areaClearable' :popper-append-to-body="false"
+                 placeholder="请选择" @change="areaChange">
+        <el-option v-for="item in areas" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span v-if="!isZhankai" class="bj-zhankai" @click="zhankai"></span>
+      <span v-else class="bj-shouqi" @click="guanbi"></span>
+      <span class="bj-qeuren" @click="queren"></span>
+      <span v-if="isZhankai" class="address-title">乡镇(街道)：</span>
+      <el-select v-if="isZhankai" class="input1" :clearable='countyClearable' style="margin-top: 1%"
+                 :popper-append-to-body="false" v-model="dept4" placeholder="请选择" @change="countyChange">
+        <el-option v-for="item in countys" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+      <span v-if="isZhankai" class="address-title">村(居)民委员会：</span>
+      <el-select v-if="isZhankai" class="input1" :clearable='villageClearable' :popper-append-to-body="false"
+                 v-model="dept5" placeholder="请选择">
+        <el-option v-for="item in villages" :key="item.value" :label="item.label" :value="item.value"
+                   :disabled="item.disabled">
+        </el-option>
+      </el-select>
+    </div>
+    <div class="header">
+      <!--  图1     -->
+      <div class="tu-one">
+        <p class="title1">老年人年龄分布统计</p>
+        <div class="tu-one-one">
+          <com1 ref="c1"></com1>
+        </div>
+      </div>
+      <div class="tu-two">
+        <p class="title1">老年人性别分布统计</p>
+        <!--                <div class="tu-two-two">-->
+        <!--                    -->
+        <!--                </div>-->
+      </div>
+      <div class="tu-two-two">
+        <div class="tu-two-two-left">
+          <div class="tu-two-two-left-left">
+            <div class="tu-two-two-left-male"></div>
+          </div>
+          <div class="tu-two-two-left-right">
+            <div class="tu-two-two-left-top">
+              <div style="font-family:AgencyFB;font-weight:normal;color:rgba(0,215,255,1);font-size: 2.5vh">
+                {{this.dataArr2[0].value}}人
+              </div>
+              <div style="color:white; font-size: 2vh">
+                {{this.dataArr2[0].label}}
+              </div>
+            </div>
+            <div class="tu-two-two-left-bottom">
+              <com2 ref="c2"></com2>
+            </div>
+
+          </div>
+
+        </div>
+        <div class="tu-two-two-left">
+          <div class="tu-two-two-left-left">
+            <div class="tu-two-two-right-male"></div>
+          </div>
+          <div class="tu-two-two-left-right">
+            <div class="tu-two-two-left-top">
+              <div style="font-family:AgencyFB;font-weight:normal;color:#FDC001;font-size: 2.5vh">
+                {{this.dataArr2[1].value}}人
+              </div>
+              <div style="color:white; font-size: 2vh">
+                {{this.dataArr2[1].label}}
+              </div>
+            </div>
+            <div class="tu-two-two-right-bottom ">
+              <com11 ref="c11"></com11>
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+      <div class="tu-three">
+        <p class="title1">老年人关爱服务统计</p>
+        <com3 ref="c3"></com3>
+      </div>
+      <div class="tu-four">
+        <p class="title1">老年人能力评估统计</p>
+        <div class="tu-four-four">
+          <com4 ref="c4"></com4>
+        </div>
+
+      </div>
+      <div class="tu-five">
+        <p class="title1">老年人健康状况统计</p>
+        <com5 ref="c5"></com5>
+      </div>
+      <div class="tu-six">
+        <p class="title1">老年人类别分布统计</p>
+        <com6 ref="c6"></com6>
+      </div>
+    </div>
+    <div class="foot">
+      <div class="tu-seven">
+        <p class="title1">老年人巡访意愿频次统计</p>
+        <com7 ref="c7"></com7>
+      </div>
+      <div class="tu-eight">
+        <p class="title1">老年人收入来源统计</p>
+        <com8 ref="c8"></com8>
+      </div>
+      <div class="tu-nine">
+        <p class="title1">老年人可支配收入统计</p>
+        <div class="tu-nine-nine">
+          <!--                    <div class="tu-nine-nine-flex">-->
+          <!--                        -->
+          <!--                    </div>-->
+          <!--                    <div class="tu-nine-nine-flex"></div>-->
+          <!--                    <div class="tu-nine-nine-flex"></div>-->
+          <com9 ref="c9"></com9>
+
+        </div>
+
+      </div>
+      <div class="tu-ten">
+        <p class="title1">老年人生活经济状况统计</p>
+        <com10 ref="c10"></com10>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import com1 from "../components/oldStatistics/1.vue";
+import com2 from "../components/oldStatistics/2.vue";
+import com3 from "../components/oldStatistics/3.vue";
+import com4 from "../components/oldStatistics/4.vue";
+import com5 from "../components/oldStatistics/5.vue";
+import com6 from "../components/oldStatistics/6.vue";
+import com7 from "../components/oldStatistics/7.vue";
+import com8 from "../components/oldStatistics/8.vue";
+import com9 from "../components/oldStatistics/9.vue";
+import com10 from "../components/oldStatistics/10.vue";
+import com11 from "../components/oldStatistics/11.vue";
+
+import storageUtil from '../util/storageUtil'
+import { findDept, oldPersonSex, total } from '../api'
+
+export default {
+  name: "Home",
+  components: { com1, com2, com3, com4, com5, com6, com7, com8, com9, com10, com11 },
+  data() {
+    return {
+      provinces: [],   // 省份
+      citys: [], // 市
+      areas: [],   // 县
+      countys: [],  // 乡
+      villages: [],  // 村
+      dept1: '',
+      dept2: '',
+      dept3: '',
+      dept4: '',
+      dept5: '',
+      moreSystem: 1,
+      pcSystem: 1,
+      xiaochengxuSystem: 1,
+      weixinSystem: 1,
+      provinceClearable: true,
+      cityClearable: true,
+      areaClearable: true,
+      villageClearable: true,
+      countyClearable: true,
+      isZhankai: false,  //是够展开和收起
+      // 左一
+      dataArr1: [],
+      // 左二
+      dataArr2: [],
+    };
+  },
+  async mounted() {
+    let provinces = await this.findDept({ 'level': '1' });
+    this.provinces = provinces.filter(item => {
+      return item.label == '吉林省'
+    })
+    this.dept1 = this.provinces[0].value;
+    let userInfo = storageUtil.read('userInfo');
+    if (userInfo.dept5) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = false;
+      this.countyClearable = false;
+      this.villageClearable = false;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+
+      if (this.dept2) {
+        let areas = await this.findDept({ fid: this.dept2 });
+        this.areas = areas.filter(item => {
+          return item.value == userInfo.dept3
+        })
+        this.dept3 = this.areas[0].value
+
+        if (this.dept3) {
+          let countys = await this.findDept({ fid: this.dept3 });
+          this.countys = countys.filter(item => {
+            return item.value == userInfo.dept4
+          })
+          this.dept4 = this.countys[0].value
+
+          if (this.dept4) {
+            let villages = await this.findDept({ fid: this.dept4 });
+
+            this.villages = villages.filter(item => {
+              return item.value == userInfo.dept5
+            })
+          }
+          this.dept5 = this.villages[0].value
+
+        }
+      }
+    } else if (userInfo.dept4) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = false;
+      this.countyClearable = false;
+      this.villageClearable = true;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+      if (this.dept2) {
+        let areas = await this.findDept({ fid: this.dept2 });
+        this.areas = areas.filter(item => {
+          return item.value == userInfo.dept3
+        })
+        this.dept3 = this.areas[0].value
+        if (this.dept3) {
+          let countys = await this.findDept({ fid: this.dept3 });
+          this.countys = countys.filter(item => {
+            return item.value == userInfo.dept4
+          })
+          this.dept4 = this.countys[0].value
+          this.countyChange(this.dept4);
+
+        }
+      }
+    } else if (userInfo.dept3) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = false;
+      this.countyClearable = true;
+      this.villageClearable = true;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+      if (this.dept2) {
+        let areas = await this.findDept({ fid: this.dept2 });
+        this.areas = areas.filter(item => {
+          return item.value == userInfo.dept3
+        })
+        this.dept3 = this.areas[0].value
+        this.areaChange(this.dept3)
+        //this.oldPersonSex();
+      }
+    } else if (userInfo.dept2) {
+      this.provinceClearable = false;
+      this.cityClearable = false;
+      this.areaClearable = true;
+      this.countyClearable = true;
+      this.villageClearable = true;
+      let citys = await this.findDept({ fid: userInfo.dept1 });
+      this.citys = citys.filter(item => {
+        return item.value == userInfo.dept2
+      })
+      this.dept2 = this.citys[0].value
+      this.cityChange(this.dept2);
+      //this.oldPersonSex();
+    } else if (userInfo.dept1) {
+      this.provinceClearable = false;
+      this.cityClearable = true;
+      this.areaClearable = true;
+      this.countyClearable = true;
+      this.villageClearable = true;
+      let provinces = await this.findDept({ 'level': '1' });
+      this.provinces = provinces.filter(item => {
+        return item.label == '吉林省'
+      })
+      this.dept1 = this.provinces[0].value;
+      if (this.dept1) {
+        this.provinceChange(this.dept1);
+        //this.oldPersonSex();
+      }
+
+    }
+    let arr = new Array();
+    if (this.dept1 != '') {
+      arr.push(this.dept1);
+    }
+    if (this.dept2 != '') {
+      arr.push(this.dept2);
+    }
+    if (this.dept3 != '') {
+      arr.push(this.dept3);
+    }
+    if (this.dept4 != '') {
+      arr.push(this.dept4);
+    }
+    if (this.dept5 != '') {
+      arr.push(this.dept5);
+    }
+    storageUtil.save('dept-array', arr);
+
+    if (userInfo.rolename == '超级管理员') {
+      this.total({ user: 'admin' });
+    } else {
+      this.total({ user: '0000' });
+    }
+    this.oldPersonSex();
+    this.$refs.c1.draw();
+    this.$refs.c2.draw();
+    this.$refs.c3.draw();
+    this.$refs.c4.draw();
+    this.$refs.c5.draw();
+    this.$refs.c6.draw();
+    this.$refs.c7.draw();
+    this.$refs.c8.draw();
+    this.$refs.c9.draw();
+    this.$refs.c10.draw();
+    this.$refs.c11.draw();
+    // const deptArray = storageUtil.read('dept-array');
+    // if (deptArray != null && deptArray != '' && deptArray.length > 0) {
+    //     for (let i = 0; i < deptArray.length; i++) {
+    //         this['dept' + (i + 1)] = deptArray[i];
+    //     }
+    // }
+
+    // if (this.dept1 != '') {
+    //     this.citys = await this.findDept({fid: this.dept1});
+    // }
+
+    // if (this.dept2 != '') {
+    //     this.areas = await this.findDept({fid: this.dept2});
+    // }
+
+    // if (this.dept3 != '') {
+    //     this.countys = await this.findDept({fid: this.dept3});
+    // }
+
+    // if (this.dept4 != '') {
+    //     this.villages = await this.findDept({fid: this.dept4});
+    // }
+  },
+  methods: {
+    //获取地区
+    async findDept(data) {
+      const result = await findDept(data, 'POST');
+      return result;
+    },
+    async total(val) {
+      const result = await total(val);
+      this.pcSystem = result[0]['PC端']
+      this.xiaochengxuSystem = result[0]['小程序端']
+      this.weixinSystem = result[0]['微信端']
+    },
+    async oldPersonSex() {
+
+      const result = await oldPersonSex({}, 'POST');
+      this.dataArr2 = result;
+      console.log(this.dataArr2)
+    },
+    async provinceChange(val) {
+      if (val != '' && val != null) {
+        this.citys = await this.findDept({ fid: val });
+      } else {
+        this.citys = [];
+        this.areas = [];
+        this.countys = [];
+        this.villages = [];
+      }
+      this.dept2 = '';
+      this.dept3 = '';
+      this.dept4 = '';
+      this.dept5 = '';
+    },
+    async cityChange(val) {
+      if (val != '' && val != null) {
+        this.areas = await this.findDept({ fid: val });
+      } else {
+        this.areas = [];
+        this.countys = [];
+        this.villages = [];
+      }
+      this.dept3 = '';
+      this.dept4 = '';
+      this.dept5 = '';
+    },
+    async areaChange(val) {
+      if (val != '' && val != null) {
+        this.countys = await this.findDept({ fid: val });
+      } else {
+        this.countys = [];
+        this.villages = [];
+      }
+      this.dept4 = '';
+      this.dept5 = '';
+    },
+    async countyChange(val) {
+      if (val != '' && val != null) {
+        this.villages = await this.findDept({ fid: val });
+      } else {
+        this.villages = [];
+      }
+
+      this.dept5 = '';
+    },
+
+    //糊掉首页
+    goHome() {
+      storageUtil.save('dept-array', '');
+      this.$router.push('/home/home')
+    },
+    // 省市选择框 展开
+    zhankai() {
+      this.isZhankai = !this.isZhankai
+
+    },
+    // 省市选择框 收起
+    guanbi() {
+      this.isZhankai = !this.isZhankai
+    },
+    // 省市选择框 确认
+    async queren() {
+      let arr = new Array();
+      if (this.dept1 != '') {
+        arr.push(this.dept1);
+      }
+      if (this.dept2 != '') {
+        arr.push(this.dept2);
+      }
+      if (this.dept3 != '') {
+        arr.push(this.dept3);
+      }
+      if (this.dept4 != '') {
+        arr.push(this.dept4);
+      }
+      if (this.dept5 != '') {
+        arr.push(this.dept5);
+      }
+      storageUtil.save('dept-array', arr);
+      this.oldPersonSex();
+      this.$refs.c1.draw();
+      this.$refs.c2.draw();
+      this.$refs.c3.draw();
+      this.$refs.c4.draw();
+      this.$refs.c5.draw();
+      this.$refs.c6.draw();
+      this.$refs.c7.draw();
+      this.$refs.c8.draw();
+      this.$refs.c9.draw();
+      this.$refs.c10.draw();
+      this.$refs.c11.draw();
+    }
+  },
+  computed: {}
+};
+</script>
+<style scoped lang="less" type="text/css">
+.backtitle {
+  background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 3.5vh;
+  font-weight: 900;
+  position: absolute;
+  left: 43.5%;
+  top: 1%;
+}
+.select-div {
+  width: 38%;
+  /*height: 4%;*/
+  position: absolute;
+  top: 4.5%;
+  left: 2%;
+  z-index: 999;
+  background: #01135b;
+}
+.return-btn {
+  /*background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);*/
+  background: url('../assets/oldStatistics/fanhuishouye.png') no-repeat;
+  background-size: 100% 100%;
+  width: 4%;
+  line-height: 250%;
+  height: 4%;
+  font-size: 1.5vh;
+  text-align: center;
+  font-weight: 900;
+  position: absolute;
+  right: 2%;
+  top: 5%;
+  padding: 0 10px;
+  color: #011168;
+  z-index: 999;
+  cursor: pointer;
+}
+
+.home {
+  height: 100%;
+  position: fixed;
+  width: 100%;
+  background: url('../assets/oldStatistics/bj.jpg');
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  width: 100%;
+  height: 67%;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.tu-one {
+  width: 36%;
+  height: 42%;
+  position: relative;
+  top: 15.5%;
+  left: 0;
+  text-align: center;
+}
+
+.tu-one-one {
+  position: absolute;
+  width: 88%;
+  height: 70%;
+  top: 20%;
+  left: 6%;
+}
+
+.tu-two {
+  width: 31%;
+  height: 4%;
+  position: absolute;
+  top: 16%;
+  left: 36%;
+  text-align: center;
+}
+
+.tu-two-two {
+  width: 32%;
+  height: 36%;
+  position: absolute;
+  top: 21%;
+  left: 35%;
+  text-align: center;
+  display: flex;
+}
+
+.tu-two-two-left {
+  width: 45%;
+  display: flex;
+}
+
+.tu-two-two-left-left {
+  width: 40%;
+  height: 100%;
+  position: relative;
+}
+
+.tu-two-two-left-male {
+  background: url('../assets/oldStatistics/old-person-male-icon.png') no-repeat;
+  background-size: contain;
+  width: 40%;
+  height: 40%;
+  position: absolute;
+  top: 60%;
+  right: -10%;
+}
+
+.tu-two-two-left-right {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  margin-top: 2%;
+}
+
+.tu-two-two-left-top {
+  width: 100%;
+  height: 40%;
+  text-align: center;
+}
+
+.tu-two-two-left-bottom {
+  background: url('../assets/oldStatistics/old-person-sex-male.png') no-repeat center;
+
+  background-size: contain;
+  width: 100%;
+  height: 50%;
+}
+
+.tu-two-two-right-bottom {
+  background: url('../assets/oldStatistics/old-person-sex-female.png') no-repeat center;
+  background-size: contain;
+  width: 100%;
+  height: 50%;
+}
+
+.tu-two-two-right {
+  width: 50%;
+  border: 1px greenyellow solid;
+}
+
+.tu-two-two-right-left {
+  width: 40%;
+  height: 100%;
+  position: relative;
+}
+
+.tu-two-two-right-male {
+  background: url('../assets/oldStatistics/old-person-female-icon.png') no-repeat;
+  background-size: contain;
+  width: 40%;
+  height: 40%;
+  position: absolute;
+  top: 60%;
+  right: -10%;
+}
+
+.tu-two-two-right-right {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tu-two-two-right-top {
+  width: 100%;
+  height: 40%;
+  text-align: left;
+}
+
+.tu-three {
+  width: 31%;
+  height: 41%;
+  position: absolute;
+  top: 16%;
+  left: 67%;
+  text-align: center;
+}
+
+.tu-four {
+  width: 36%;
+  height: 40%;
+  position: absolute;
+  top: 60%;
+  left: 0%;
+  text-align: center;
+}
+.tu-four-four {
+  position: absolute;
+  left: 5%;
+  top: 15%;
+  width: 89%;
+
+  height: 88%;
+}
+
+.tu-five {
+  width: 31%;
+  height: 40%;
+  position: absolute;
+  top: 60%;
+  left: 36%;
+  text-align: center;
+}
+
+.tu-six {
+  width: 31%;
+  height: 40%;
+  position: absolute;
+  top: 60%;
+  left: 67%;
+  text-align: center;
+}
+
+.tu-seven {
+  width: 23%;
+  height: 90%;
+  position: absolute;
+  top: 8%;
+  left: 2%;
+  text-align: center;
+}
+
+.tu-eight {
+  width: 23%;
+  height: 90%;
+  position: absolute;
+  top: 8%;
+  left: 26%;
+  text-align: center;
+}
+
+.tu-nine {
+  width: 23%;
+  height: 90%;
+  position: relative;
+  top: 8%;
+  left: 50.5%;
+  text-align: center;
+}
+
+.tu-nine-nine {
+  width: 100%;
+  height: 80%;
+  position: absolute;
+  top: 5%;
+  text-align: center;
+  display: flex;
+  /*background-position: 100% 40% ;*/
+  margin-top: 8%;
+}
+
+.tu-nine-nine-flex {
+  width: 33%;
+  height: 100%;
+  border: 1px salmon solid;
+}
+
+.tu-ten {
+  width: 23%;
+  height: 90%;
+  position: absolute;
+  top: 8%;
+  left: 74.5%;
+  text-align: center;
+}
+
+.title {
+  font-size: 16px;
+  font-family: SourceHanSansCN;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 1);
+  position: absolute;
+  top: 12.5%;
+  left: 36%;
+}
+
+.title1 {
+  font-size: 1.8vh;
+  font-family: SourceHanSansCN;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 1);
+}
+
+.foot {
+  width: 100%;
+  height: 32%;
+  position: relative;
+}
+
+.p1legend img {
+  float: right;
+  margin-right: 2%;
+}
+
+.p2legend img {
+  float: right;
+  margin-right: 2%;
+  margin-top: 1%;
+}
+
+.p3legend img {
+  float: right;
+  margin-right: 2%;
+  margin-top: 1%;
+}
+
+.p4legend img {
+  float: right;
+  margin-right: 2%;
+  margin-top: 1%;
+}
+
+.p6title p {
+  position: absolute;
+  bottom: 20%;
+  left: 6%;
+  font-size: 1.2em;
+}
+
+.p5title p {
+  position: absolute;
+  top: 20%;
+  left: 6%;
+}
+
+.address-title {
+  color: #00d8fe;
+  font-size: 1.3vh;
+}
+
+.input {
+  width: 15.5%;
+}
+
+.input1 {
+  width: 20%;
+  margin-right: 1%;
+}
+
+.bj-zhankai {
+  display: inline-block;
+  background: url('../assets/PatrolmanStatistics/zhankai.png') no-repeat;
+  background-size: contain;
+  width: 10%;
+  height: 37px;
+  margin-right: 0%;
+  vertical-align: bottom;
+}
+
+.bj-zhankai:hover {
+  cursor: pointer;
+}
+
+.bj-shouqi {
+  display: inline-block;
+  background: url('../assets/PatrolmanStatistics/shouqi.png') no-repeat;
+  background-size: contain;
+  width: 10%;
+  height: 37px;
+  /*margin-right: 1%;*/
+  vertical-align: bottom;
+}
+
+.bj-shouqi:hover {
+  cursor: pointer;
+}
+
+.bj-qeuren {
+  display: inline-block;
+  background: url('../assets/PatrolmanStatistics/queren.png') no-repeat;
+  background-size: contain;
+  width: 10%;
+  height: 37px;
+  vertical-align: bottom;
+}
+
+.bj-qeuren:hover {
+  cursor: pointer;
+}
+
+/deep/ .el-select,
+/deep/ .el-input,
+/deep/ .el-input__inner {
+  color: #00d0f6;
+  text-align: center;
+  background: rgba(254, 196, 0, 0);
+  border-radius: 10px;
+  border: 0.8px solid #00d0f6;
+  /*border-image: linear-gradient(-90deg, rgba(0, 187, 234, 0), rgba(3, 77, 129, 1), rgba(0, 161, 254, 0)) 1 1;*/
+  box-shadow: 0px 0px 46px 0px rgba(8, 91, 168, 0.4);
+}
+
+/deep/ .el-select .el-input .el-select__caret {
+  color: #00d0f6;
+}
+
+/deep/ .el-select-dropdown__item.hover,
+/deep/ .el-select-dropdown__item:hover {
+  background: #123a80;
+  color: white;
+}
+
+/deep/ .el-select-dropdown {
+  background: #010f5a;
+  border: 1px solid #00d7ff;
+  color: red;
+}
+
+/deep/ .el-select-dropdown__item {
+  color: #00d7ff;
+}
+
+.p99 {
+  top: 1.4%;
+  right: 2.5%;
+  position: absolute;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 800;
+  font-family: STHeitiSC;
+  font-weight: 300;
+  color: rgba(10, 182, 255, 1);
+}
+</style>

src/router/index.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../pages/Home.vue'
+import login from '../pages/login.vue'
+import oldStatistics from '../pages/oldStatistics.vue'
+import PatrolmanStatistics from '../pages/PatrolmanStatistics.vue'
+import Ranking from '../pages/Ranking.vue'
+Vue.use(VueRouter)
+const routes = [
+  {
+    path: '/',
+    name: 'login',
+    component: login
+  },
+  {
+    path: '/home/home',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/home/oldStatistics',
+    name: 'oldStatistics',
+    component: oldStatistics
+  },
+  {
+    path: '/home/PatrolmanStatistics',
+    name: 'oldStatistics',
+    component: PatrolmanStatistics
+  },
+  {
+    path: '/home/Ranking',
+    name: 'oldStatistics',
+    component: Ranking
+  }
+]
+const router = new VueRouter({
+  routes
+})
+
+export default router

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/util/storageUtil.js

@@ -0,0 +1,18 @@
+export default {
+    save (key, value) {
+        window.localStorage.setItem(key, JSON.stringify(value));
+    },
+    clear(key) {
+        window.localStorage.removeItem(key);
+    },
+    //根据key读取缓存数据
+    read(key) {
+        let parse = null;
+        try {
+            parse = JSON.parse(window.localStorage.getItem(key));
+        } catch (e) {
+            parse = null;
+        }
+        return parse;
+    }
+}

vue.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+    productionSourceMap: false,
+    publicPath: "./",
+    devServer: {
+        open: true,
+      // host: "10.16.4.3",
+        port: 8080,
+        https: false,
+        hotOnly: false,
+    },
+    css: {
+        loaderOptions: {
+            postcss: {
+                // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
+                plugins: [
+                    require("postcss-px2rem")({
+                        remUnit: 192
+                    })
+                ]
+            }
+        }
+    }
+};