manage-client 3.1.14-aode → 3.1.14

package/src/components/daping/Ring.vue

@@ -0,0 +1,227 @@
+<template>
+<div style="width: 100%;height: 100%">
+  <div id='ring' style="width: 100%;height: 80%">
+  </div>
+  <div  style="width: 100%;height: 20%;padding-left: 5vw">
+      <a><span :class="[param?'class1':'class2']"  @click="getChargeCount">年交易笔数比例</span></a><a>
+       <span :class="[param?'class2':'class1']"   @click="getChargeMoney">年消费金额比例</span></a>
+
+  </div>
+</div>
+
+</template>
+
+<script>
+  import {HttpResetClass} from 'vue-client'
+  export default {
+    title: '收费',
+    data () {
+      return {
+        param:1,
+        rows: [
+          {
+            name: '营业厅',
+            value: 13
+          }, {
+            name: '中国银行',
+            value: 23
+          },  {
+            name: '邮局',
+            value: 26
+          }, {
+            name: '西安银行',
+            value: 24
+          }, {
+            name: '利安',
+            value: 12
+          },
+          {
+            name: '其它',
+            value: 12
+          }],
+        come: ['营业厅', '中国银行', '邮局', '西安银行', '利安', '其他']
+      }
+    },
+  watch:{
+   'param'(val){
+     this.getData()
+   }
+  },
+    methods: {
+      getData(){
+     let url = this.param? 'rs/sql/getSellSumByAmount' : 'rs/sql/getSellSumByBank'
+     let http = new HttpResetClass()
+      http.load('post', url, {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+       this.rows = res.data
+        this.init()
+      })
+
+      },
+      getChargeCount(){
+        console.log(1111)
+        this.param =1
+
+      },
+     getChargeMoney(){
+         console.log(123)
+        this.param =0
+      },
+      init () {
+        var colorarr = ['#897BD3', '#F27C79', '#42A8EF', '#6FD9D0', '#EF9861', '#F76F01']
+        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: '20%',
+            textStyle: {
+              color: '#fff',
+              fontSize: 12
+            },
+            itemWidth: 10,
+            itemHeight: 10,
+            orient: 'horizontal',
+            icon: 'circle',
+            bottom: '10%',
+            right: '5%',
+            padding: [8, 8],
+            itemGap: 10,
+            data: this.come
+          },
+          series: [{
+            type: 'pie',
+            center: ['40%', '50%'],
+            radius: ['30%', '45%'],
+            color: colorarr,
+            startAngle: 135,
+            labelLine: {
+              normal: {
+                length: 20
+              }
+            },
+            label: {
+              show: true,
+              formatter: '{b|{b}}{per|{d}%}',
+              rich: {
+                a: {
+                  color: '#999',
+                  lineHeight: 16,
+                  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.rows
+          }]
+        }
+        let barchart = this.$echarts.init(document.getElementById('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)
+        // 鼠标划入
+
+      }
+    },
+    ready () {
+      this.getData()
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+  @media screen and (max-width: 1920px) {
+    .class1 {
+      background: #012c45;
+      color: #01c5ba;
+      border: 1px solid #01c5ba;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 0 10px;
+    }
+
+    .class2 {
+      background: #011332;
+      color: #426164;
+      border: 1px solid #013544;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 0 10px;
+    }
+  }
+  @media screen and (max-width: 1440px) {
+    .class1 {
+      background: #012c45;
+      color: #01c5ba;
+      border: 1px solid #01c5ba;
+      cursor: pointer;
+      font-size: 12px;
+      padding: 0 10px;
+    }
+
+    .class2 {
+      background: #011332;
+      color: #426164;
+      border: 1px solid #013544;
+      cursor: pointer;
+      font-size: 12px;
+      padding: 0 10px;
+    }
+  }
+</style>
+

package/src/components/daping/SafeCheckRing.vue

@@ -0,0 +1,160 @@
+<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>
+

package/src/components/daping/SafecheckBarChart.vue

@@ -0,0 +1,294 @@
+<template>
+  <div id="safecheck-barchart" style="height: 100%;width:100%">
+  </div>
+</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,
+          borderData = [],
+          legend = ['累计到访户数', '实际入户数'],
+          colorArr = [{
+            start: 'rgba(242,153,97)',
+            mid: 'rgba(242,153,97,0.7)',
+            end: 'rgba(0, 0, 0,0.5)'
+          },
+            {
+              end: 'rgba(0, 0, 0,0.5)',
+              mid: 'rgba(111,217,208,0.7)',
+              start: 'rgba(111,217,208)'
+            },
+            {
+              color: '#00EAFF'
+            }
+          ]
+        let normalColor = 'rgba(8,115,142)'
+        let seriesData = []
+        var borderHeight = 4
+        xData.forEach(element => {
+          borderData.push(borderHeight)
+        });
+        [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
+                  }
+                }
+              }
+            }
+            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)
+          }
+        })
+        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%',
+            bottom: '20%',
+            containLabel: true
+          },
+          legend: {
+            show: true,
+            icon: 'circle',
+            itemWidth: 10,
+            itemHeight: 10,
+            right: 'center',
+            bottom: '7%',
+            textStyle: {
+              color: '#fff'
+            },
+            data: legend
+          },
+          tooltip: {
+            position: function (pos, params, dom, rect, size) {
+              let yPos = '20%'
+              let xPos = 0
+              if (pos[0] < size.viewSize[0] / 2) {
+                xPos = pos[0] + 10
+              } else {
+                xPos = pos[0] - dom.offsetWidth - 10
+              }
+              return [xPos, yPos]
+            },
+            trigger: 'axis',
+            extraCssText: 'width:auto;height:40%;border:1px solid #015999;background:#032f53 ',
+            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 />`
+                }
+              }
+              return str
+            }
+          },
+          xAxis: [{
+            name: '近6月',
+            type: 'category',
+            nameTextStyle: {
+              color: '#95bad7',
+              fontSize: 12
+            },
+            data: xData,
+            interval: 0,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#95bad7',
+                fontSize: '1vw'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: normalColor
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            nameTextStyle: {
+              color: '#95bad7',
+              fontSize: 12
+            },
+            // 'min': 0,
+            // 'max': 50,
+            axisLabel: {
+              formatter: '{value}',
+              textStyle: {
+                color: '#95bad7',
+                fontSize: '1vw'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: normalColor
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: 'dashed',
+                color: normalColor
+              }
+            }
+          }],
+          series: seriesData
+        }
+        console.log(option)
+        let barchart = this.$echarts.init(document.getElementById('safecheck-barchart'))
+        console.log(option)
+        barchart.setOption(option)
+        var index = 0
+        // var mTime = setInterval(function () {
+        //   barchart.dispatchAction({
+        //     type: 'showTip',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   index++
+        //   if (index > xData.length) {
+        //     index = 0
+        //   }
+        // }, 1000)
+      }
+    },
+    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()
+      })
+
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+  /*div{*/
+  /*height: auto;*/
+  /*}*/
+</style>
+