manage-client 3.1.26 → 3.1.27

package/src/components/daping/SafeCheckRing.vue

@@ -1,160 +1,149 @@
-<template>
-  <div id='safecheck-ring' style="width: 100%;height: 100%">
-  </div>
-</template>
-
-<script>
-  import {HttpResetClass} from 'vue-client'
-  export default {
-    title: '收费',
-    data () {
-      return{
-       data:[{
-              name: '到访不遇',
-              value: 2595
-            }, {
-              name: '无法检查',
-              value: 503
-            }, {
-              name: '正常入户',
-              value: 4715
-            }, {
-              name: '拒绝检查',
-              value: 4700
-            }]
-      }
-    },
-    methods: {
-      init () {
-        var colorarr = ['#00FFFF', '#f27c79', '#00FFA8', '#897bd3']
-        var option = {
-          backgroundColor: '#ffffff00',
-          animation: true,
-          title: {
-                   text:'年度安检情况分布',
-            x: '10%',
-            y: '10%',
-             backgroundColor: '#002c45', //标题背景颜色，默认'rgba(0,0,0,0)'透明
-             borderColor: '#01fee8', //标题边框颜色,默认'#ccc'
-             borderWidth: 1, //标题边框线宽，单位px，默认为0（无边框）
-            padding:5,
-            textStyle: {
-              fontSize: 12,
-              fontWeight: 'normal',
-              fontFamily: 'pFBold',
-              lineHeight: 12,
-              color: '#24d4d4',
-              align: 'center'
-            }
-          },
-          legend: {
-            width: '50%',
-            textStyle: {
-              color: ' #a2b8cf',
-              fontSize: 12
-            },
-            orient: 'vertical',
-            icon: 'circle',
-            itemWidth: 8,
-            itemHeight:8,
-            bottom: '2%',
-            right: '10%',
-            itemGap: 10,
-            data: ['到访不遇', '无法检查','正常入户','拒绝检查']
-          },
-          series: [{
-            type: 'pie',
-            center: ['34%', '70%'],
-            radius: ['35%', '50%'],
-            color: colorarr,
-            startAngle: 135,
-            labelLine: {
-              normal: {
-                length: 20
-              }
-            },
-            label: {
-              show: true,
-              formatter: '{b|{b}}\n{per|{d}%}',
-              rich: {
-                a: {
-                  color: '#999',
-                  lineHeight: 22,
-                  align: 'center'
-                },
-                hr: {
-                  borderColor: '#aaa',
-                  width: '100%',
-                  borderWidth: 1,
-                  height: 0
-                },
-                b: {
-                  fontSize: 10,
-                  padding: [5, 0],
-                  color: '#fff'
-                },
-                c: {
-                  fontSize: 10,
-                  color: '#eee'
-                },
-                per: {
-                  color: '#FDF44E',
-                  fontSize: 10,
-                  borderRadius: 2
-                }
-              },
-              position: 'outside'
-            },
-            data: this.data
-          }]
-        }
-        let barchart = this.$echarts.init(document.getElementById('safecheck-ring'))
-        console.log(option)
-        barchart.setOption(option)
-        let index = -1 // 高亮所在下标
-        let dataLength = colorarr.length   // 当前饼图有多少个扇形
-        // 用定时器控制饼图高亮
-        // this.mTime = setInterval(() => {
-        //   // 清除之前的高亮
-        //   barchart.dispatchAction({
-        //     type: 'downplay',
-        //     seriesIndex: 0,
-        //     dataIndex: index
-        //   })
-        //   index = (index + 1) % dataLength
-        //   // 当前下标高亮
-        //   barchart.dispatchAction({
-        //     type: 'highlight',
-        //     seriesIndex: 0,
-        //     dataIndex: index
-        //   })
-        //   if (index > dataLength) {
-        //     index = 0
-        //   }
-        // }, 1000)
-        // 鼠标划入
-        barchart.on('mouseover', () => {
-          // 停止定时器，清除之前的高亮
-          // clearInterval(this.mTime)
-          this.echartsPie.dispatchAction({
-            type: 'downplay',
-            seriesIndex: 0,
-            dataIndex: index
-          })
-        })
-      }
-    },
-    ready () {
-        let http = new HttpResetClass()
-      http.load('post', '/rs/sql/getSafecheckSumByType', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-        this.data = res.data
-         this.init()
-      })
-
-    },
-    props: {}
-  }
-</script>
-<style scoped>
-</style>
-
+<template>
+  <div id='safecheck-ring' style="width: 100%;height: 100%">
+  </div>
+</template>
+
+<script>
+  export default {
+    title: '收费',
+    data () {
+    },
+    methods: {
+      init () {
+        var colorarr = ['#00FFFF', '#f27c79', '#00FFA8', '#897bd3']
+        var option = {
+          backgroundColor: '#ffffff00',
+          animation: true,
+          title: {
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              color: '#fff',
+              fontSize: 60,
+              fontWeight: 'normal',
+              align: 'center',
+              width: '200px'
+            },
+            subtextStyle: {
+              color: '#fff',
+              fontSize: 20,
+              fontWeight: 'normal',
+              align: 'center'
+            }
+          },
+          legend: {
+            width: '70%',
+            textStyle: {
+              color: '#fff',
+              fontSize: 12
+            },
+            orient: 'vertical',
+            icon: 'circle',
+            bottom: '10%',
+            right: '10%',
+            itemGap: 10,
+            data: ['到访不遇', '无法检查','正常入户','拒绝检查']
+          },
+          series: [{
+            type: 'pie',
+            center: ['30%', '60%'],
+            radius: ['30%', '55%'],
+            color: colorarr,
+            startAngle: 135,
+            labelLine: {
+              normal: {
+                length: 20
+              }
+            },
+            label: {
+              show: true,
+              formatter: '{b|{b}}\n{per|{d}%}',
+              rich: {
+                a: {
+                  color: '#999',
+                  lineHeight: 22,
+                  align: 'center'
+                },
+                hr: {
+                  borderColor: '#aaa',
+                  width: '100%',
+                  borderWidth: 1,
+                  height: 0
+                },
+                b: {
+                  fontSize: 10,
+                  padding: [5, 0],
+                  color: '#fff'
+                },
+                c: {
+                  fontSize: 10,
+                  color: '#eee'
+                },
+                per: {
+                  color: '#FDF44E',
+                  fontSize: 10,
+                  borderRadius: 2
+                }
+              },
+              position: 'outside'
+            },
+            data: [{
+              name: '到访不遇',
+              value: 259574
+            }, {
+              name: '无法检查',
+              value: 503
+            }, {
+              name: '正常入户',
+              value: 471544
+            }, {
+              name: '拒绝检查',
+              value: 4700
+            }]
+          }]
+        }
+        let barchart = this.$echarts.init(document.getElementById('safecheck-ring'))
+        console.log(option)
+        barchart.setOption(option)
+        let index = -1 // 高亮所在下标
+        let dataLength = colorarr.length   // 当前饼图有多少个扇形
+        // 用定时器控制饼图高亮
+        // this.mTime = setInterval(() => {
+        //   // 清除之前的高亮
+        //   barchart.dispatchAction({
+        //     type: 'downplay',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   index = (index + 1) % dataLength
+        //   // 当前下标高亮
+        //   barchart.dispatchAction({
+        //     type: 'highlight',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   if (index > dataLength) {
+        //     index = 0
+        //   }
+        // }, 1000)
+        // 鼠标划入
+        // barchart.on('mouseover', () => {
+        //   // 停止定时器，清除之前的高亮
+        //   // clearInterval(this.mTime)
+        //   this.echartsPie.dispatchAction({
+        //     type: 'downplay',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        // })
+      }
+    },
+    ready () {
+      this.init()
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+</style>
+

package/src/components/daping/SafecheckBarChart.vue

@@ -4,38 +4,17 @@
 </template>
 
 <script>
-  import {HttpResetClass} from 'vue-client'
   export default {
     title: '收费',
     data() {
-      return{
-        thisYear: undefined,
-        lastYear: undefined,
-        nextYear: undefined,
-        thisMonth: undefined,
-        today: undefined,
-        xData : ['1', '2', '3', '4', '5', '6'],
-        yData1 : [12944, 72188, 55748, 36948, 28498, 27358],
-        yData2 : [25968, 13128, 47838, 23148, 23498, 26538]
-      }
     },
     methods: {
-      initDate(){
-        let dt = new Date()
-        this.thisYear = dt.getFullYear()
-        this.lastYear = dt.getFullYear() - 1
-        this.nextYear = dt.getFullYear() + 1
-        this.today = dt.getDay()
-        this.thisMonth = this.today>10?dt.getMonth()+1:dt.getMonth()
-      },
       init() {
-
-
-        var xData =this.xData,
-          yData1 = this.yData1,
-          yData2 = this.yData2,
+        var xData = ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+          yData1 = [60871, 0, 2, 26946, 108042, 136004, 156401, 164792, 83286],
+          yData2 = [35337, 0, 2, 15514, 72138, 78966, 101071, 110397, 58137],
           borderData = [],
-          legend = ['累计到访户数', '实际入户数'],
+          legend = ['计划安检量', '正常入户量'],
           colorArr = [{
             start: 'rgba(242,153,97)',
             mid: 'rgba(242,153,97,0.7)',
@@ -58,99 +37,57 @@
         });
         [yData1, yData2].forEach((item, index) => {
           var obj1 = {}
-       if (index < 2) {
-            obj1 = {
-              name: legend[index],
-              type: 'bar',
-              stack: legend[index],
-              data: item,
-              barWidth: '12',
-              itemStyle: {
-                normal: {
-                  barBorderRadius: [30, 30, 0, 0],
-                  color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                      offset: 0,
-                      color: colorArr[index].start
-                    },
-                      {
-                        offset: 0.5,
-                        color: colorArr[index].start
-                      },
-                      {
-                        offset: 1,
-                        color: colorArr[index].start
-                      }
-                    ],
-                    globalCoord: false
+          obj1 = {
+            name: legend[index],
+            type: 'bar',
+            stack: legend[index],
+            data: item,
+            barWidth: '10%',
+            itemStyle: {
+              normal: {
+                barBorderRadius: [30, 30, 30, 30],
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [{
+                    offset: 0,
+                    color: colorArr[index].start
+                  },
+                  {
+                    offset: 0.5,
+                    color: colorArr[index].mid
+                  },
+                  {
+                    offset: 1,
+                    color: colorArr[index].end
                   }
+                  ],
+                  globalCoord: false
                 }
               }
             }
-            seriesData.push(obj1)
-          } else {
-            var obj3 = {
-              data: item,
-              type: 'line',
-              smooth: true,
-              name: legend[index],
-              symbol: 'circle',
-              symbolSize: 8,
-                itemStyle:{
-                        normal:{
-                            color:'orange',
-                            borderColor:'orange',
-                        }
-                },
-              lineStyle: {
-                color: colorArr[index].color,
-                width: 1,
-                shadowColor: '#e5925e', //设置折线阴影
-                shadowBlur: 15,
-                shadowOffsetY: 20,
-              }
-            }
-            seriesData.push(obj3)
           }
+          seriesData.push(obj1)
         })
         console.log(seriesData)
         // 更改柱状图位置
         let option = {
-          title: {
-            text:'近六月安检情况',
-            x: '12%',
-            y: '1%',
-            backgroundColor: '#002c45', //标题背景颜色，默认'rgba(0,0,0,0)'透明
-            borderColor: '#01fee8', //标题边框颜色,默认'#ccc'
-            borderWidth: 1, //标题边框线宽，单位px，默认为0（无边框）
-            padding:5,
-            textStyle: {
-              fontSize: 12,
-              fontWeight: 'normal',
-              fontFamily: 'pFBold',
-              lineHeight: 20,
-              color: '#24d4d4',
-              align: 'center'
-            }
-          },
           backgroundColor: '#ffffff00',
           grid: {
             left: '2%',
-            top: '10%',
-            right: '10%',
+            top: '2%',
+            right: '7%',
             bottom: '20%',
             containLabel: true
           },
           legend: {
             show: true,
-            icon: 'circle',
-            itemWidth: 10,
-            itemHeight: 10,
+            icon: 'rect',
+            itemWidth: 30,
+            itemHeight: 20,
             right: 'center',
             bottom: '7%',
             textStyle: {
@@ -170,24 +107,20 @@
               return [xPos, yPos]
             },
             trigger: 'axis',
-            extraCssText: 'width:auto;height:40%;border:1px solid #015999;background:#032f53 ',
+            extraCssText: 'width:15%;height:30%;',
             formatter: function (params) {
               var str = ''
               for (var i = 0; i < params.length; i++) {
                 if (params[i].seriesName !== '') {
-                  str += `<span style="font-size:12px">${params[i].seriesName}:</span><span style="color:gold;margin-left:5px">${params[i].value}</span> <br />`
+                  str += `<span>${params[i].name}月${params[i].seriesName}</span><span style="color:gold">${params[i].value}</span> <br />`
                 }
               }
               return str
             }
           },
           xAxis: [{
-            name: '近6月',
+            name: '月份',
             type: 'category',
-            nameTextStyle: {
-              color: '#95bad7',
-              fontSize: 12
-            },
             data: xData,
             interval: 0,
             axisPointer: {
@@ -195,8 +128,8 @@
             },
             axisLabel: {
               textStyle: {
-                color: '#95bad7',
-                fontSize: '1vw'
+                color: normalColor,
+                fontSize: 12
               }
             },
             axisLine: {
@@ -214,7 +147,7 @@
           yAxis: [{
             type: 'value',
             nameTextStyle: {
-              color: '#95bad7',
+              color: normalColor,
               fontSize: 12
             },
             // 'min': 0,
@@ -222,8 +155,8 @@
             axisLabel: {
               formatter: '{value}',
               textStyle: {
-                color: '#95bad7',
-                fontSize: '1vw'
+                color: normalColor,
+                fontSize: 12
               }
             },
             axisLine: {
@@ -235,7 +168,7 @@
               show: false
             },
             splitLine: {
-              show: false,
+              show: true,
               lineStyle: {
                 type: 'dashed',
                 color: normalColor
@@ -263,25 +196,7 @@
       }
     },
     ready() {
-      this.initDate()
-      let http = new HttpResetClass()
-      // getSafecheckSumByMonth
-      http.load('post','rs/logic/getBpm',{data:{
-          sql:`getSafecheckSumByMonth`,
-          this_year:this.thisYear,
-          this_month:this.thisMonth
-        }}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-              this.yData1 =[]
-       this.yData2=[]
-       this.xData = []
-         for(let i=0;i<res.data.length;i++){
-          this.xData.push(res.data[i].time)
-          this.yData1.push(res.data[i].plannum)
-          this.yData2.push(res.data[i].normalnum)
-         }
-             this.init()
-      })
-
+      this.init()
     },
     props: {}
   }