yyl update

src/api/index.js

@@ -56,6 +56,11 @@ export const oldPersonSelectByJob = (params, requestMethod) => ajax(`${BASE_URL}
  */
 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);
+
 /**
  * --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  */
@@ -145,4 +150,17 @@ export const infomonth = (params, requestMethod) => ajax(`${BASE_URL}/chart/info
  */
 export const selectSexAndLook = (params, requestMethod) => ajax(`${BASE_URL}/chart/user/selectSexAndLook`, 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);

src/components/PatrolmanStatistics/4.vue

@@ -3,135 +3,146 @@
 </template>
 
 <script>
+    import { oldPersonVisitWay } from '../../api'
+
     export default {
         //巡防员巡防方式统计
         name: "PatrolmanPatrolModeCount",
         data() {
           return {
-            dataArr: [
-              { label: '电话问候', value: 60 },
-              { label: '上门巡防', value: 20 },
-              { label: '其它', value: 20 }
-            ]
+            dataArr: [],
+            myChart: null
           }
         },
-        mounted() {
-          const seriesArr = [];
+        methods: {
+          async draw() {
+              const result = await oldPersonVisitWay({}, 'POST');
+              this.dataArr = result;
 
-          for(let i = 0; i < this.dataArr.length; i++) {
-            const d = this.dataArr[i];
+              const seriesArr = [];
 
-            const borderArr = new Array(this.dataArr.length).fill({});
-            borderArr[i] = { value: 269, symbolPosition: 'start' };
+              for(let i = 0; i < this.dataArr.length; i++) {
+                  const d = this.dataArr[i];
 
-            seriesArr.push({
-              type: 'pictorialBar',
-              symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
-              symbolSize: [269, 32],
-              symbolOffset: [0, 0],
-              data: borderArr,
-              label: {
-                show: true,
-                position: 'right',
-                offset: [-120, -40],
-                color: '#71dbff',
-                fontSize: 18,
-                formatter: (params) => {
-                  return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].value }%`;
-                }
-              },
-              z: 1
-            });
+                  const borderArr = new Array(this.dataArr.length).fill({});
+                  borderArr[i] = { value: 269, symbolPosition: 'start' };
 
-            const borderBgArr = new Array(this.dataArr.length).fill({});
-            borderBgArr[i] = { value: 251, symbolPosition: 'start' };
+                  seriesArr.push({
+                      type: 'pictorialBar',
+                      symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
+                      symbolSize: [269, 32],
+                      symbolOffset: [0, 0],
+                      data: borderArr,
+                      label: {
+                          show: true,
+                          position: 'right',
+                          offset: [-120, -40],
+                          color: '#71dbff',
+                          fontSize: 18,
+                          formatter: (params) => {
+                              return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].value }%`;
+                          }
+                      },
+                      z: 1
+                  });
 
-            seriesArr.push({
-              type: 'pictorialBar',
-              symbol: `image://${require('../../assets/PatrolmanStatistics/border-bg.png')}`,
-              symbolSize: [251, 21],
-              symbolOffset: [10, 0],
-              data: borderBgArr,
-              label: {
-                show: true,
-                position: 'right',
-                offset: [-280, -40],
-                color: '#fff',
-                fontSize: 16,
-                formatter: (params) => {
-                  return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].label }`;
-                }
-              },
-              z: 2
-            });
+                  const borderBgArr = new Array(this.dataArr.length).fill({});
+                  borderBgArr[i] = { value: 251, symbolPosition: 'start' };
 
-            const step = (Math.floor(d.value / 10) < 1 ? 1 : Math.floor(d.value / 10));
-            for(let j = 0; j < step; j++) {
-              const blockArr = new Array(this.dataArr.length).fill({});
-              blockArr[this.dataArr.length - 1 - i] = { value: 251, symbolPosition: 'start' };
-              seriesArr.push({
-                type: 'pictorialBar',
-                symbol: `image://${require('../../assets/PatrolmanStatistics/block-' + j + '.png')}`,
-                symbolSize: [20, 19],
-                symbolOffset: [10 + j * 25.6, 0],
-                data: blockArr,
-                z: 10
-              });
-            }
+                  seriesArr.push({
+                      type: 'pictorialBar',
+                      symbol: `image://${require('../../assets/PatrolmanStatistics/border-bg.png')}`,
+                      symbolSize: [251, 21],
+                      symbolOffset: [10, 0],
+                      data: borderBgArr,
+                      label: {
+                          show: true,
+                          position: 'right',
+                          offset: [-280, -40],
+                          color: '#fff',
+                          fontSize: 16,
+                          formatter: (params) => {
+                              return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].label }`;
+                          }
+                      },
+                      z: 2
+                  });
 
-            const kkArr = new Array(length).fill({});
-            kkArr[i] = { value: 300, symbolPosition: 'start' };
-            seriesArr.push({
-              type: 'pictorialBar',
-              symbol: `image://${require('../../assets/PatrolmanStatistics/big-img-' + (this.dataArr.length - 1 - i) + '.png')}`,
-              symbolSize: [157, 134],
-              symbolOffset: [-180, -10],
-              data: kkArr,
-              z: 2
-            });
+                  const step = (Math.floor(d.value / 10) < 1 ? 1 : Math.floor(d.value / 10));
+                  for(let j = 0; j < step; j++) {
+                      const blockArr = new Array(this.dataArr.length).fill({});
+                      blockArr[this.dataArr.length - 1 - i] = { value: 251, symbolPosition: 'start' };
+                      seriesArr.push({
+                          type: 'pictorialBar',
+                          symbol: `image://${require('../../assets/PatrolmanStatistics/block-' + j + '.png')}`,
+                          symbolSize: [20, 19],
+                          symbolOffset: [10 + j * 25.6, 0],
+                          data: blockArr,
+                          z: 10
+                      });
+                  }
 
-          }
+                  const kkArr = new Array(length).fill({});
+                  kkArr[i] = { value: 300, symbolPosition: 'start' };
+                  seriesArr.push({
+                      type: 'pictorialBar',
+                      symbol: `image://${require('../../assets/PatrolmanStatistics/big-img-' + (this.dataArr.length - 1 - i) + '.png')}`,
+                      symbolSize: [157, 134],
+                      symbolOffset: [-180, -10],
+                      data: kkArr,
+                      z: 2
+                  });
 
-          let myChart = this.$echarts.init(document.getElementById('zz'));
-          myChart.setOption({
-            grid:{
-              left:"35%",
-              right:"2%",
-              top:"2%",
-              bottom:"2%",
-            },
-            xAxis: {
-              max: 300,
-              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
+
+              if(this.myChart != null) {
+                  this.myChart.clear();
               }
-            },
-            series: seriesArr
-          });
+
+              this.myChart = this.$echarts.init(document.getElementById('zz'));
+              this.myChart.setOption({
+                  grid:{
+                      left:"35%",
+                      right:"2%",
+                      top:"2%",
+                      bottom:"2%",
+                  },
+                  xAxis: {
+                      max: 300,
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: false
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'category',
+                      splitLine: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: false
+                      },
+                      axisTick: {
+                          show: false
+                      }
+                  },
+                  series: seriesArr
+              });
+          }
+        },
+        mounted() {
+          this.draw();
         }
     }
 </script>

src/components/index/4.vue

@@ -3,34 +3,15 @@
 </template>
 
 <script>
+    import { visitDept, visitPerson } from '../../api'
     import echarts from 'echarts'
 
     export default {
         name: "Mz_tx_charts",
         data() {
           return {
-            dataArr: [
-              {
-                label: '南关区',
-                value: 3000
-              },
-              {
-                label: '朝阳区',
-                value: 2000
-              },
-              {
-                label: '二道区',
-                value: 1000
-              },
-              {
-                label: '绿园区',
-                value: 500
-              },
-              {
-                label: '高薪区',
-                value: 300
-              }
-            ]
+            dataArr: [],
+            myChart: null
           }
         },
         methods: {
@@ -43,126 +24,274 @@
               });
             }
             return res;
-          }
-        },
-        mounted() {
-          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')}`
+          },
+          getMaxValueOfArray(data) {
+            if(data == null || data.length == 0) {
+                return 0;
             }
-            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: 14,
-                formatter: `${ i + 1 }`
-              },
-              z: 2
-            });
-          }
+            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;
 
-          let myChart = this.$echarts.init(document.getElementById('myChartindex4'));
-          myChart.setOption({
-            grid: {
-              top: '19%',
-              bottom: '-8%',
-              right: '0%',
-              left: '15%',
-              containLabel: true
-            },
-            xAxis: {
-              show: false,
-              max: 10000
-            },
-            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
+              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: 14,
+                          formatter: `${ i + 1 }`
+                      },
+                      z: 2
+                  });
               }
-            }, {
-              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: '-20px',
-                align: 'right',
-                verticalAlign: 'bottom',
-                lineHeight: 30,
-                fontSize: 16,
-                color: '#fff',
-                formatter: (value, index) => {
-                  return this.dataArr[index].value + '   ';
-                },
+
+              if(this.myChart != null) {
+                  this.myChart.clear();
               }
-            }],
-            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, '-20px'],
-                  textStyle: {
-                    fontSize: 15
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
+              this.myChart.setOption({
+                  grid: {
+                      top: '19%',
+                      bottom: '-8%',
+                      right: '0%',
+                      left: '15%',
+                      containLabel: true
+                  },
+                  xAxis: {
+                      show: false,
+                      max: this.getMaxValueOfArray(this.dataArr)
                   },
-                  formatter: function(a,) {
-                    return a.name;
+                  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: '-20px',
+                          align: 'right',
+                          verticalAlign: 'bottom',
+                          lineHeight: 30,
+                          fontSize: 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, '-20px'],
+                              textStyle: {
+                                  fontSize: 15
+                              },
+                              formatter: function(a,) {
+                                  return a.name;
+                              }
+                          }
+                      }
+                  }, ...seriesArr]
+              });
+          },
+          async draw2(){
+              const result = await visitPerson({}, '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: 14,
+                          formatter: `${ i + 1 }`
+                      },
+                      z: 2
+                  });
               }
-            }, ...seriesArr]
-          });
+
+              if(this.myChart != null) {
+                  this.myChart.clear();
+              }
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
+              this.myChart.setOption({
+                  grid: {
+                      top: '19%',
+                      bottom: '-8%',
+                      right: '0%',
+                      left: '15%',
+                      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: '-20px',
+                          align: 'right',
+                          verticalAlign: 'bottom',
+                          lineHeight: 30,
+                          fontSize: 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, '-20px'],
+                              textStyle: {
+                                  fontSize: 15
+                              },
+                              formatter: function(a,) {
+                                  return a.name;
+                              }
+                          }
+                      }
+                  }, ...seriesArr]
+              });
+          }
+        },
+        mounted() {
+          this.draw1();
         }
     }
 </script>

src/components/oldStatistics/3.vue

@@ -15,10 +15,24 @@
           }
         },
         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);
             });
@@ -26,8 +40,7 @@
             const labelArr = this.dataArr.map((item) => {
               return {
                 name: item.label + '：' + item.value + '%',
-                max: 100,
-
+                max: maxValue
               };
             });
 

src/pages/Home.vue

@@ -119,7 +119,7 @@
                     <span :class="isTure ? 'kaung2': 'kaung1' " @click="right2">地区探访数据</span>
                 </div>
                 <div class="p4chart bj">
-                    <com4></com4>
+                    <com4 ref="c4"></com4>
                 </div>
             </div>
             <!-- 右二 -->
@@ -175,7 +175,8 @@
         selectUserByAuth,
         oldPersonSelectDeptValue,
         oldnum,
-        visitnum
+        visitnum,
+        visitNumDay
     } from "../api";
 
     export default {
@@ -372,16 +373,21 @@
                 this.count4 = result.totalValue;
             },
             async count5_method() {
-
+                const result = await visitNumDay({}, 'POST');
+                this.count5 = result.visitnum;
             },
 
             //  右边第一个  地区探访数据 按钮
             right1() {
                 this.isTure = false;
+
+                this.$refs.c4.draw2();
             },
             //  右边第二个
             right2() {
                 this.isTure = true;
+
+                this.$refs.c4.draw1();
             },
             // 认证数据 按钮切换
             left1() {

src/pages/PatrolmanStatistics.vue

@@ -108,7 +108,7 @@
             </div>
             <div class="tu-seven">
                 <p class="title1">巡访员巡访方式统计</p>
-                <com4></com4>
+                <com4 ref="c4"></com4>
             </div>
             <div class="tu-thirteen">
                 <p class="title1">核心巡访数据统计</p>
@@ -265,6 +265,7 @@
                 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();