manage-client 3.2.83-aode → 3.2.83-jb

package/src/components/BasisEcharts/LineChart.vue

@@ -0,0 +1,243 @@
+
+<template>
+  <div>
+    <div class="text-1">
+      <div id="charts"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "lineChart",
+
+    /*
+      折线图
+     1.必须要传的参数:xdata,sdata,legendData
+
+     2.规范值
+     传入参数 例
+          xdata:[1,2,3,4]
+          sdata:[
+            [2,4,6,8],
+            [1,3,5,7]
+          ]
+          legendData:['第一个','第二个']
+          legendData的长度等于sdata的长度
+          sdata的每一个数组的长度要和  xdata的长度相等
+
+    3.参数含义
+    xdata   :  x轴数据
+    sdata   :  展示的数据
+    legendData : 展示那些显示那些不显示
+    title   :  标题
+    yname   :  y轴名称
+    xname   :  y轴名称
+    settime   :  tooltip 轮播的时间 默认 1500
+    showtooltip : 是否展示 提示框 默认展示
+    smooth : 曲线 平滑线 默认曲线
+    showtitle : 标题是否展示
+    showyname: y轴名称是否显示
+     */
+    props: [
+      'xdata',
+      'sdata',
+      'legendData',
+      'title',
+      'yname',
+      'settime',
+      'showtooltip',
+      'smooth',
+      'showtitle',
+      'showyname',
+      'showxname',
+      'xname'
+    ],
+    data() {
+      return {
+
+        xc: '',
+        timer: '',
+        time:1500,  // 轮播提示的时间 默认 1500
+        showtTip:true,   // 轮播提示框 默认展示
+        csmooth:false,  // 线的类型  true 为平滑线 反之曲线
+        cshowtitle:true, //标题 默认展示
+        cshowyname:true , //y轴名称 默认展示
+        cshowxname:true , //x轴名称 默认展示
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      setBar() {
+        console.log('进入画图~~~~~~~~~~~~~~~~~~~')
+        console.log(this.legendData)
+        const  width=document.getElementById('canvas').offsetWidth
+        let fontSize=0
+        if(width<600){
+          fontSize=14
+        }else if(width<1200) {
+          fontSize=18
+        }else{
+          fontSize=22
+        }
+        this.xc = this.$echarts.init(document.getElementById('charts'))
+        if(this.settime!==undefined){
+          this.time=this.settime
+        }
+        if(this.showtooltip!==undefined){ // 判断提示框
+          this.showtTip=this.showtooltip
+        }
+        if(this.csmooth!==undefined){ // 判断平滑线 折线
+          this.csmooth=this.smooth
+        }
+        if(this.showtitle!==undefined){ // 判断标题
+          this.cshowtitle=this.showtitle
+        }
+        if(this.showyname!==undefined){ // 判断是否展示y轴名称
+          this.cshowyname=this.showyname
+        }
+        if(this.showxname!==undefined){ // 判断是否展示x轴名称
+          this.cshowxname=this.showxname
+        }
+        if(this.cyname!==undefined){ // 判断平滑线 折线
+          this.cyname=this.yname
+        }
+        var serieData = []
+        var legendData = this.legendData
+        for (let i = 0; i < legendData.length; i++) {
+          var series= {
+            name: legendData[i],
+            type: 'line',
+            stack: legendData[i],
+            smooth: this.csmooth,
+            data: this.sdata[i]
+          }
+          serieData.push(series)
+        }
+        this.xc.setOption({
+          title: {
+            text: this.title,
+            left:'center',
+            textStyle:{
+              fontSize:fontSize
+            },
+            show:this.cshowtitle
+          },
+          tooltip: {
+            show:this.showtTip,
+            alwaysShowContent: true,
+            backgroundColor: 'rgba(2, 59, 63, 0.45)',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth: 0,
+            hideDelay: 100,
+            textStyle: {
+              fontSize: fontSize
+            },
+            confine: false,
+            formatter: function (params) {
+              var result = ''
+              params.forEach(function (item) {
+                result += item.marker + " " + item.seriesName + " &nbsp;&nbsp;&nbsp; <sapn style='color:#e1e52a;font-weight: bolder'>" + item.value + "</sapn></br>";
+              });
+              return "<div style='text-align: center;height: 1px;font-weight: normal'>" + params[0].axisValue + '</div><br/>' + result
+            },
+            trigger: 'axis',
+            axisPointer: {type: 'line', lineStyle: {width: 0}},
+            extraCssText: 'width: auto;height: auto;'
+          },
+          legend: {
+            // padding:[50,40,0,200], // 上右下左
+            data: this.legendData,
+            textStyle:{
+              fontSize:fontSize
+            },
+            left:'20%',
+            top:'10%'
+          },
+          grid: {
+            left: '6%',
+            right: '15%',
+            bottom: '4%',
+            top:'20%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              name:this.cshowxname===true?this.xname:'',
+              type: 'category',
+              boundaryGap: true,
+
+              axisTick:{
+                show:false
+              },
+              axisLabel:{
+                fontSize:fontSize
+              },
+              nameTextStyle:{
+                fontSize:fontSize,
+                padding:[0,100,15,-12], // 上右下左
+              },
+              data:this.xdata
+            }
+
+          ],
+          yAxis: [
+            {
+              name:this.cshowyname===true?this.yname:'',
+              type: 'value',
+              nameTextStyle:{
+                fontSize:fontSize,
+                padding:[0,0,15,60], // 上右下左
+              },
+              axisLabel:{
+                fontSize:fontSize,
+                formatter: function (params) {
+                  if (params > 9999) {
+                    return params / 10000 + "万"
+                  }
+                  else
+                    return params
+                }
+              },
+              axisTick:{
+                show:false
+              },
+            }
+          ],
+          series: serieData
+        })
+        let idx = -1;
+        var dataLen = this.sdata[0].length
+        this.timer = setInterval(() => {
+          idx = (idx + 1) % dataLen;
+          this.xc.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 1,
+            dataIndex: idx
+          });
+
+        }, this.time)
+
+
+      },
+
+    },
+    watch: {
+        'sdata'(){
+          //清除定时器
+          clearInterval(this.timer);
+        }
+    },
+    ready() {
+      this.setBar()
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/BasisEcharts/RingChart.vue

@@ -0,0 +1,196 @@
+
+<template>
+  <div>
+    <div class="text-1">
+      <div :id="charts"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "ringChart",
+    /*
+    环形图
+    sdata   :  展示的数据
+    legend : 展示那些显示那些不显示
+    title   :  标题
+    setTime   :  tootip 轮播的时间 默认 1500
+    showtooltip : 是否展示 提示框 默认展示
+    colorList : 传入的颜色列表
+
+     */
+    props: [
+      'sdata',
+      'legend',
+      'colorList',
+      'setTime',
+      'showtitle',
+      'showtooltip',
+      'title'
+
+    ],
+    data() {
+      return {
+        canvas: 'canvas_'+new Date().getTime()+'_'+Math.random()*10,
+        charts: 'charts_'+new Date().getTime()+'_'+Math.random()*10,
+        xc: '',
+        timer: '',
+        time:1500,
+        showtTip:true,   // 轮播提示框 默认展示
+        cshowtitle:true, //标题 默认展示
+        ccolorList:['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      setBar(){
+        let colorList=this.ccolorList
+        this.xc = this.$echarts.init(document.getElementById(this.charts))
+
+        if(this.setTime!==undefined){
+          this.time=this.setTime
+        }
+        if(this.colorList!==undefined){
+          colorList=this.colorList
+        }
+        if(this.showtooltip!==undefined){ // 判断提示框
+          this.showtTip=this.showtooltip
+        }
+        if(this.showtitle!==undefined){ // 判断标题
+          this.cshowtitle=this.showtitle
+        }
+        this.xc.setOption(
+          {
+            title: {
+              text: this.title,
+              x: 'center',
+              y: 'center',
+              textStyle: {
+                color: '#201b1b'
+              },
+              show:this.cshowtitle
+            },
+            tooltip: {
+              trigger: 'item',
+              // borderColor: 'rgba(255,255,255,.3)',
+              // backgroundColor: 'rgba(13,5,30,.6)',
+              extraCssText: 'width:auto;height:25%;',
+              borderWidth: 1,
+              padding: 5,
+              formatter: function(parms) {
+                var str = parms.marker + "" + parms.data.name + "</br>" +
+                  "" + parms.data.value + "</br>" +
+                  "占比：" + parms.percent + "%";
+                return str;
+              },
+              show:this.showtTip
+            },
+            legend: {
+              top: '30',
+              textStyle: {
+                color: '#161414',
+                fontSize:18
+              },
+              data: this.legend
+            },
+            series: [{
+              type: 'pie',
+              z: 3,
+              center: ['50%', '50%'],
+              radius: ['25%', '45%'],
+              clockwise: true,
+              avoidLabelOverlap: true,
+              hoverOffset: 15,
+              itemStyle: {
+                normal: {
+                  color: function(params) {
+                    return colorList[params.dataIndex]
+                  }
+                }
+              },
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{a|{b}：{d}%}\n{hr|}',
+                rich: {
+                  hr: {
+                    backgroundColor: 't',
+                    borderRadius: 3,
+                    width: 3,
+                    height: 3,
+                    padding: [3, 3, 0, -12]
+                  },
+                  a: {
+                    padding: [-30, 15, -20, 15]
+                  }
+                }
+              },
+              labelLine: {
+                show:false,
+                normal: {
+                  length: 20,
+                  length2: 30,
+                  lineStyle: {
+                    width: 1
+                  }
+                }
+              },
+              data: this.sdata
+            }]
+          }
+        )
+        let index = 0;
+        let myChart=this.xc
+        this.timer = setInterval(() => {
+          myChart.dispatchAction({
+            type: 'hideTip',
+            seriesIndex: 0,
+            dataIndex: index
+          });
+          // 显示提示框
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: index
+          });
+          // 取消高亮指定的数据图形
+          myChart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: index === 0 ? 5 : index - 1
+          });
+          myChart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: index
+          });
+          index++;
+          if (index > 5) {
+            index = 0;
+          }
+
+        }, this.time)
+      }
+
+    },
+    watch: {
+      'sdata'(){
+        //清除定时器
+        clearInterval(this.timer);
+        this.setBar()
+      }
+    },
+    ready() {
+      this.setBar()
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ManageHome/Home/Monitor.vue

@@ -42,7 +42,6 @@
     },
     data() {
       return {
-        date: [2018, 2017, 2016],
         xc: '',
         warn: '',
         suspicious: '',
@@ -92,10 +91,9 @@
             show: false,
           },
           yAxis: {
+            data: data.grade,
             type: 'category',
             axisLabel: {
-              margin: 10 * scale,
-              show: true,
               color: function (param) {
                 if (param == '警告类型') {
                   return '#fff'
@@ -110,7 +108,7 @@
             axisLine: {
               show: false,
             },
-            data: data.grade
+
           },
           series: [{
             type: 'bar',
@@ -209,6 +207,7 @@
           this.warn = this.resdata[0].warn
           this.suspicious = this.resdata[0].suspicious
           this.$parent.loaddata++
+          console.log(this.resdata, '----------警告用户统计----------')
         }
       },
       'monitordata': {
@@ -235,6 +234,7 @@
     },
     ready() {
       this.searchdata()
+
     }
   }
 </script>

package/src/components/ManageHome/Home/UserModule.vue

@@ -95,10 +95,10 @@
               text: result,
               left: '43%',
               top: '47%',
-              padding: [10 * scale, 10 * scale],
+              padding: [1000 * scale, 1000 * scale],
               textStyle: {
                 color: '#00e2ea',
-                fontSize: 12 * scale,
+                fontSize: 120 * scale,
 
               }
             }],
@@ -174,7 +174,7 @@
                       }
                     }
                   },
-                  padding: [0, -100 * scale],
+                  padding: [100, -100 * scale],
                   rich: rich,
                 }
               },

package/src/components/ManageHome/Monitor/NoContact.vue

@@ -139,6 +139,7 @@
               axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
               axisTick: {show: false},
               data: xAxisData,
+              min:6
             },
           ],
           yAxis: [

package/src/components/ManageHomeCS/CustomerService/ContentmentStatistics.vue

@@ -34,13 +34,13 @@
             name: legendData[v],
             type: 'line',
             symbol: "circle",
-            symbolSize: 5 * scale,
+            symbolSize: 5 ,
             itemStyle: {
               normal: {
                 lineStyle: {
                   width: 1,
-                  shadowBlur: 10 * scale,
-                  shadowOffsetY: 15 * scale,
+                  shadowBlur: 10 ,
+                  shadowOffsetY: 15 ,
                 }
               }
             },
@@ -65,9 +65,9 @@
             data: legendData,
             y: 'top',
             // padding: [0, 25*scale, 0, 0],
-            itemWidth: 14 * scale,
-            itemHeight: 6 * scale,
-            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 * scale},
+            itemWidth: 14 ,
+            itemHeight: 6 ,
+            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 },
           },
           color: colors,
           grid: {left: '5%', top: "18%", bottom: "5%", right: "5%", containLabel: true},

package/src/components/ManageHomeCS/CustomerService/ExcepCollect.vue

@@ -38,7 +38,7 @@
           type: 'line',
           smooth: false,  // true: 光滑曲线  , false: 直线
           symbol: 'circle',
-          symbolSize: 5 * scale,
+          symbolSize: 5 ,
           areaStyle: {
             normal: {
               color: new this.$echarts.graphic.LinearGradient(
@@ -56,7 +56,7 @@
             position: 'top',
             textStyle: { //数值样式
               color: '#f7cb32',
-              fontSize: 14 * scale
+              fontSize: 14
             }
           },
           itemStyle: {
@@ -83,9 +83,9 @@
             right:'5%',
             data: legendData,
             y: 'top',
-            itemWidth: 12 * scale,
-            itemHeight: 6 * scale,
-            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 * scale},
+            itemWidth: 12 ,
+            itemHeight: 6 ,
+            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 },
             formatter: function (params) {
               return params
             },

package/src/components/ManageHomeCS/CustomerService/ReasonComplaint.vue

@@ -6,14 +6,28 @@
 </template>
 
 <script>
+  import * as DataSql from "../../../stores/DataSql";
+  import co from "co";
+
   export default {
     name: "ReasonComplaint",
+    data() {
+      return {
+        ReasonComplaint:[],
+        visits:[],
+        grade:[],
+      }
+    },
     methods:{
+      searchdata(){
+        let ReasonComplaint = DataSql.getData(this, 'reasonComplaint', {},'ReasonComplaint')
+        co(ReasonComplaint)
+      },
       setBar() {
         this.xc = this.$echarts.init(document.getElementById('complaint'))
         var scale=this.$parent.$parent.$parent.scale
-        var visits = [92, 102, 89,100,150]
-        var grade = ['话务员态度差','维修员延误','上门服务态度差' ,'维修未能完成','抢修未成功']
+        var visits = this.visits
+        var grade = this.grade
         var data = {
           grade: grade,
           visits: visits,
@@ -95,7 +109,23 @@
       },
     },
     ready() {
-      this.setBar()
+      this.searchdata()
+    },
+    watch:{
+      'ReasonComplaint': {
+        deep: true,
+        handler(val) {
+          console.log('-------------客服')
+          console.log('客服',this.ReasonComplaint)
+          console.log('长度',this.ReasonComplaint.length)
+          for (let i = 4; i >=0 ; i--) {
+            this.visits.push(this.ReasonComplaint[i].count)
+            this.grade.push(this.ReasonComplaint[i].f_content)
+          }
+          this.setBar()
+        }
+      },
+
     }
   }
 </script>

package/src/components/ManageHomeCS/CustomerService/ReasonConsultation.vue

@@ -6,14 +6,28 @@
 </template>
 
 <script>
+  import * as DataSql from "../../../stores/DataSql";
+  import co from "co";
+
   export default {
     name: "ReasonConsultation",
+    data() {
+      return {
+        consultingdata:[],
+        visits:[],
+        grade:[],
+      }
+    },
     methods:{
+      searchdata(){
+        let consultingdata = DataSql.getData(this, 'consultingdata', {},'consultingdata')
+        co(consultingdata)
+      },
       setBar() {
         this.xc = this.$echarts.init(document.getElementById('consultation'))
         var scale=this.$parent.$parent.$parent.scale
-        var visits = [92, 102, 89,100,150]
-        var grade = ['漏气','卡表故障','管道故障' ,'调压箱故障','壁挂炉故障']
+        var visits = this.visits
+        var grade = this.grade
         var data = {
           grade: grade,
           visits: visits,
@@ -94,7 +108,26 @@
       },
     },
     ready() {
-      this.setBar()
+      // 拼接sql，请求后台
+      this.searchdata()
+
+    }
+    ,
+    watch :{
+      'consultingdata': {
+        deep: true,
+        handler(val) {
+          console.log('-------------客服')
+          console.log('客服',this.consultingdata)
+          console.log('长度',this.consultingdata.length)
+          for (let i = 4; i >=0 ; i--) {
+              this.visits.push(this.consultingdata[i].count)
+              this.grade.push(this.consultingdata[i].f_content)
+          }
+          this.setBar()
+        }
+      },
+
     }
   }
 </script>