manage-client 3.2.77-aode → 3.2.77-jb

package/src/components/daping/Ring.vue

@@ -0,0 +1,212 @@
+<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: true,
+        rows: [],
+        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.come = Array.from(new Set(res.data.map(x => x.name)))
+        this.init()
+      })
+
+      },
+      getChargeCount(){
+        console.log(1111)
+        this.param = true
+
+      },
+     getChargeMoney(){
+         console.log(123)
+        this.param = false
+      },
+      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/SafeCheck.vue

@@ -0,0 +1,446 @@
+<template>
+  <div class="safe">
+    <div class="label">安检</div>
+    <!--<div class="d1">-->
+    <div class="f2">
+      <div id="safe"></div>
+      <div id="safeerror"></div>
+    </div>
+    <div class="f1">
+      <table>
+        <tr>
+          <td class="td1"><img src="../../../static/ManageHomePic/图层11.png"></td>
+          <td>安检总数<br/>&nbsp;<span class="s1">{{totalstring}}</span></td>
+        </tr>
+        <tr>
+          <td class="td1"><img src="../../../static/ManageHomePic/椭圆8拷贝6.png"></td>
+          <td>隐患总数<br/>&nbsp;<span class="s2">{{hiddenuser}}</span></td>
+        </tr>
+      </table>
+    </div>
+
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../stores/DataSql'
+  import co from 'co'
+
+
+  export default {
+    name: "safe-check",
+    props: {
+      listenheight: String,
+      f_filiale:String,
+    },
+    data() {
+      return {
+        xc: '',
+        resdata: [],
+        resdata1: [],
+        totalstring: '',
+        safedata: [{value: 0, name: '当年已完成数'}, {value: 0, name: '当年未完成数'}],
+        safedatastring: [{value: "", name: '当年已完成数'}, {value: "", name: '当年未完成数'}],
+        safeerrordata:[] ,
+        hiddenuser:'',
+        timer:'',
+        timer1:'',
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+      clearInterval(this.timer1);
+    },
+    methods: {
+      setBar(id, iddata) {
+        var self = this
+        this.xc = this.$echarts.init(document.getElementById(id))
+
+        var scale=this.$parent.$parent.$parent.scale
+        var color = ["#e7c83c", "#2f3f2b"]
+        var center = [66, 82]
+        var startAngle=90
+        if (id == 'safeerror') {
+          color = ["#69d8d2", "#013e48"]
+          center = [66*scale, 82*scale]
+          startAngle=0
+        }
+        this.xc.setOption({
+          tooltip: {
+            show: true,
+            alwaysShowContent:true,
+            backgroundColor:'rgba(2, 59, 63, 0.6)',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth:0,
+            hideDelay:100,
+            triggerOn:'mousemove',
+              padding:10*scale,
+              textStyle:{
+                  fontSize:16*scale
+              },
+            formatter: function (params) {
+              return  params.marker + " " + params.name + "  <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;" + params.value + "</span>"
+            },
+            enterable:true,
+            position: function(point, params, dom, rect, size) {
+              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+              var x = point[0]; //
+              var y = point[1];
+              var viewWidth = size.viewSize[0];
+              var viewHeight = size.viewSize[1];
+              var boxWidth = size.contentSize[0];
+              var boxHeight = size.contentSize[1];
+              var posX = 0; //x坐标位置
+              var posY = 0; //y坐标位置
+              if (x < boxWidth) { //左边放不开
+                posX = 5;
+              } else { //左边放的下
+                posX = x - boxWidth;
+              }
+
+              if (y < boxHeight) { //上边放不开
+                posY = 5;
+              } else { //上边放得下
+                posY = y - boxHeight;
+              }
+              return [posX, posY];
+            },
+            extraCssText:'width: auto;height:auto;',
+          },
+          color: color,
+          series: [
+            {
+              name: 'demo',
+              type: 'pie',
+              center: ['52%', '55%'],
+              radius: ['40%', '60%'],
+              minAngle: 15,//最小角度
+              startAngle: startAngle, //起始角度
+              avoidLabelOverlap: false,
+              hoverAnimation: false,
+              label: {
+                show:false
+                // normal: {
+                //   formatter: function (params, ticket, callback) {
+                //     if (id == 'safe') {
+                //       for (var i = 0; i < self.safedatastring.length; i++) {
+                //         if (self.safedatastring[i].name == params.name) {
+                //           return '{a|' + params.name + '}{a|' + self.safedatastring[i].value + '}\n';
+                //         }
+                //       }
+                //     }
+                //     return '{b|' + params.name + '}{b|' + params.value + '}\n';
+                //   },
+                //   borderWidth: 20 * scale,
+                //   borderRadius: 4 * scale,
+                //   padding: [0, -89 * scale],
+                //   rich: {
+                //     a: {
+                //       color: '#f3c832',
+                //       fontSize: 12 * scale,
+                //     },
+                //     b: {
+                //       fontSize: 12 * scale,
+                //       color: '#6fd9d0'
+                //     }
+                //   }
+                // }
+              },
+              labelLine: {
+                show:false
+                // normal: {
+                //   length: 10 * scale,
+                //   length2: 90 * scale,
+                //   lineStyle: {
+                //     color: color[0]
+                //   }
+                // }
+              },
+              data: iddata
+            }
+          ]
+        })
+        if (id == 'safeerror') {
+          let idx = 0;
+          var dataLen=iddata.length
+          var oroptionmapjsonr_charts=this.xc
+          this.timer=setInterval(()=>{
+            // 取消之前选中的图形
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'pieUnSelect',
+              seriesIndex: 0,
+              dataIndex: idx,
+            });
+
+            idx = (idx+ 1) % dataLen;
+            //console.log(app.currentIndex);
+            // 选中当前图形
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'pieSelect',
+              seriesIndex: 0,
+              dataIndex: idx
+            });
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'showTip',
+              seriesIndex: 0,
+              dataIndex: idx
+            });
+          }, 3000)
+        }else {
+          let idx = 0;
+          var dataLen=iddata.length
+          var oroptionmapjsonr_charts=this.xc
+          this.timer1=setInterval(()=>{
+            // 取消之前选中的图形
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'pieUnSelect',
+              seriesIndex: 0,
+              dataIndex: idx,
+            });
+
+            idx = (idx+ 1) % dataLen;
+            //console.log(app.currentIndex);
+            // 选中当前图形
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'pieSelect',
+              seriesIndex: 0,
+              dataIndex: idx
+            });
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'showTip',
+              seriesIndex: 0,
+              dataIndex: idx
+            });
+          }, 3000)
+        }
+
+      },
+    },
+    watch: {
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            var self = this.$echarts.init(document.getElementById('safe'))
+            // this.$parent.$parent.changeresize(self)
+            var self1 = this.$echarts.init(document.getElementById('safeerror'))
+            // this.$parent.$parent.changeresize(self1)
+          }
+        },
+      },
+      'resdata': {
+        deep: true,
+        handler(val) {
+          console.log(this.resdata, '测试安检数据')
+          if (typeof this.resdata[0].totalsafe !== "undefined") {
+            this.safedata[0].value = this.resdata[0].complete
+            this.safedata[1].value = this.resdata[0].undone
+            DataSql.dataunitarray(this, 'safedata', 'safedatastring')
+            this.setBar('safe', this.safedata)
+            this.totalstring = DataSql.dataunit(this.resdata[0].totalsafe)
+            // if(this.safeerrordata.length>0){
+            //   var self=this
+            //   // this.safeerrordata.forEach(function (s) {
+            //   //   if(s.name=='隐患数'){
+            //   //     self.hiddenuser=s.value
+            //   //   }
+            //   // })
+            // }
+            this.$parent.loaddata++
+          }
+        },
+      },
+      'resdata1': {
+        deep: true,
+        handler(val) {
+          this.safeerrordata=this.resdata1
+
+          // this.totalstring = DataSql.dataunit(this.resdata1[0].totalsafe)
+          this.setBar('safeerror', this.safeerrordata)
+          this.hiddenuser=0
+          if(this.resdata1.length>0){
+            this.safeerrordata.forEach((s)=> {
+                if(s.name==='有隐患用户数'){
+                  this.hiddenuser=s.value
+                }
+
+            })
+          }
+          this.$parent.loaddata++
+        },
+      },
+      'f_filiale'(){
+        clearInterval(this.timer);
+        clearInterval(this.timer1);
+        let getdata = DataSql.getData(this, 'noplancheck',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
+        co(getdata)
+        let getdata1 = DataSql.getData(this, 'hiddennum',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata1')
+        co(getdata1)
+      }
+    },
+    ready() {
+      let getdata = DataSql.getData(this, 'noplancheck',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
+      co(getdata)
+      let getdata1 = DataSql.getData(this, 'hiddennum',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata1')
+      co(getdata1)
+
+    }
+  }
+</script>
+
+<style scoped>
+  @media screen and (max-width: 1920px) {.label {
+    margin-left: 6%;
+    font-size: 1.85rem;
+    float: left;
+    color: #fff;
+    height: 8%;
+  }
+
+    .safe {
+
+    }
+
+    table {
+      width: 100%;
+      height: 100%;
+    }
+
+    td {
+      /*width: 94px;*/
+      /*height: 120px;*/
+      font-size: 1.4rem;
+      padding-left: 6%;
+      width: 50%;
+      height: 50%;
+      color: #ffffff;
+    }
+
+    .td1 {
+      width: 33%;
+    }
+
+    .f1 {
+      /*height: 314px;*/
+      /*width: 180px;*/
+      padding: 0% 0% 0% 15%;
+      height: 90%;
+      width: 45%;
+      float: left;
+    }
+
+    .f2 {
+      height: 100%;
+      width: 55%;
+      float: right;
+    }
+
+    span {
+      font-size: 1.5em;
+    }
+
+    #safe {
+      width: 100%;
+      height: 50%;
+    }
+
+    #safeerror {
+      width: 100%;
+      height: 50%;
+    }
+
+    .s1 {
+      color: #f3c832;
+      font-weight: bolder;
+    }
+
+    .s2 {
+      color: #05c3c7;
+      font-weight: bolder;
+    }
+
+    img {
+      width: 90%;
+      /*height: 34%;*/
+    }
+  }
+  @media screen and (max-width: 1366px) {
+    .label {
+      margin-left: 6%;
+      font-size: 1.85rem;
+      float: left;
+      color: #fff;
+      height: 8%;
+    }
+
+    .safe {
+
+    }
+
+    table {
+      width: 100%;
+      height: 100%;
+    }
+
+    td {
+      /*width: 94px;*/
+      /*height: 120px;*/
+      font-size: 1rem;
+      padding-left: 6%;
+      width: 50%;
+      height: 50%;
+      color: #ffffff;
+    }
+
+    .td1 {
+      width: 33%;
+    }
+
+    .f1 {
+      /*height: 314px;*/
+      /*width: 180px;*/
+      padding: 0% 0% 0% 15%;
+      height: 90%;
+      width: 45%;
+      float: left;
+    }
+
+    .f2 {
+      height: 100%;
+      width: 55%;
+      float: right;
+    }
+
+    span {
+      font-size: 1.1em;
+    }
+
+    #safe {
+      width: 100%;
+      height: 50%;
+    }
+
+    #safeerror {
+      width: 100%;
+      height: 50%;
+    }
+
+    .s1 {
+      color: #f3c832;
+      font-weight: bolder;
+    }
+
+    .s2 {
+      color: #05c3c7;
+      font-weight: bolder;
+    }
+
+    img {
+      width: 90%;
+      /*height: 34%;*/
+    }
+  }
+
+</style>