manage-client 3.2.37 → 3.2.41

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

@@ -1,233 +1,233 @@
-<template>
-  <div>
-    <div class="label t1" @click="drillclick">{{title}}</div>
-    <div id="NoContact"></div>
-  </div>
-</template>
-
-<script>
-  import * as DataSql from '../../../stores/DataSql'
-  import co from 'co'
-  import * as Util from '../../../stores/Util'
-
-  export default {
-    name: "NoContact",
-    data() {
-      return {
-        title: '失联用户统计',
-        xc: '',
-        resdata: [],
-        nocontactdata: [],
-      }
-    },
-    methods: {
-      setBar(id) {
-        this.xc = this.$echarts.init(document.getElementById(id))
-        var scale = 0.8
-        var xAxisData = [];
-        var legendData = ['用户数量'];
-        var serieData = [];
-        var metaDate = []
-        var Auxiliarydata = []
-        var data0 = 0
-        var num = 0
-        for (var i = this.nocontactdata.length; i > 0; i--) {
-          xAxisData.push(this.nocontactdata[i - 1].name)
-          metaDate.push(this.nocontactdata[i - 1].value)
-          num = num + this.nocontactdata[i - 1].value
-        }
-        this.$parent.warningnum = this.$parent.warningnum + num
-        xAxisData.push("")
-        metaDate.forEach(function (s) {
-          data0 = data0 + s
-        })
-        for (var i = 0; i < metaDate.length; i++) {
-          Auxiliarydata.push(data0 / 60)
-        }
-        var rich = {
-          white: {
-            color: "#f7cb32",
-            padding: [0, 0, -20, 0]
-          }
-        }
-        var yname = ' 月份'
-        for (var v = 0; v < legendData.length; v++) {
-          var serie = {
-            name: legendData[0],
-            type: "bar",
-            stack: "总量",
-            barWidth: '40%',
-            barGap: "20%",
-            itemStyle: {
-              normal: {
-                color: "#013e48",
-                label: {
-                  show: true,
-                  textStyle: {
-                    color: "#f7cb32"
-                  },
-                  position: "top",
-                  formatter: function (p) {
-                    var s = p.value > 0 ? (p.value) : ''
-                    return '{white|' + s + '}'
-                  },
-                  rich: rich
-                }
-              }
-            },
-            data: metaDate,
-          }
-          var serie1 = {
-            name: 'ser',
-            type: "bar",
-            stack: "总量",
-            itemStyle: {
-              normal: {
-                color: "#6fd9d0",
-                barBorderRadius: 0,
-                label: {
-                  show: false,
-                }
-              }
-            },
-            data: Auxiliarydata
-          }
-          serieData.push(serie)
-          serieData.push(serie1)
-        }
-        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
-        this.xc.setOption({
-          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},
-          color: colors,
-          grid: {left: '4%', top: "18%", bottom: "3%", right: "5%", containLabel: true},
-          dataZoom: [{
-            type: 'inside',
-            show: true,
-            xAxisIndex: [0],
-            left: '9%',
-            bottom: -5,
-            start: 2,
-            end: 90 //初始化滚动条
-          }],
-          tooltip: {
-            formatter: function (params) {
-              if (params[0].axisValue == '') {
-                return ''
-              }
-              var result = ''
-              params.forEach(function (item) {
-                if (item.seriesName !== 'ser') {
-                  result += item.seriesName + " : " + item.value + "</br>";
-                }
-              });
-              return params[0].axisValue + '月 <br/> ' + result
-            },
-            axisPointer: {type: 'line', lineStyle: {width: 0}},
-            trigger: 'axis',
-            extraCssText: 'width: auto;height: auto;'
-          },
-          xAxis: [
-            {
-              name: yname,
-              type: 'category',
-              nameTextStyle: {
-                fontSize: 14 * scale,
-                color: '#15dce2',
-                padding: [48 * scale, 0, 0, -70 * scale],
-              },
-              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
-              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
-              axisTick: {show: false},
-              data: xAxisData,
-              min:6
-            },
-          ],
-          yAxis: [
-            {
-              name: '用户数量',
-              nameTextStyle: {
-                fontSize: 14 * scale,
-                padding: [-10 * scale, 35 * scale, 0, 0],
-              },
-              axisTick: {show: false},
-              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
-              axisLabel: {interval: 0, textStyle: {color: '#15dce2', fontSize: 14 * scale}},
-              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
-            },
-          ],
-          series: serieData
-        })
-      },
-      // 查询sql
-      sqlsearch() {
-        // var date = DataSql.toBeforeDate(365)
-        // DataSql.param = date + ' 00:00:00'
-        let getData = DataSql.getData(this,'lossassociation',{}, 'resdata')
-        co(getData)
-      },
-      //整理数据
-      processData() {
-          var self=this
-        this.resdata.forEach(function (s) {
-          let item = {}
-          item.name = s.dates
-          item.value = s.num
-          self.nocontactdata.push(item)
-
-        })
-        console.log(this.nocontactdata)
-      },
-      // 钻取入口
-      drillclick() {
-        console.log(this.title)
-        let total = []
-        for (var i = this.nocontactdata; i > 0; i--) {
-          total.push(this.nocontactdata[i - 1])
-        }
-        var date=eval(Util.toStandardDateString().toString().substring(0, 4) + '-2') + '-01-01 00:00:00'
-        var initdatatr = {
-          startDate:date ,
-          endDate: Util.toStandardDateString() + ' 00:00:00',
-          param: '',
-          param1: '',
-          listparam: ' al.f_hand_date>=\''+date+'\' and '
-        }
-        this.$emit('drill', 'lossassociation', 'nocontact', this.title, initdatatr)
-        this.$emit('drilldata', total)
-      },
-    },
-    watch: {
-      'resdata': {
-        deep: true,
-        handler(val) {
-          console.log(this.resdata, '失联用户统计')
-          this.processData()
-          this.setBar('NoContact')
-          this.$parent.loaddata++
-        }
-      },
-    },
-    ready() {
-      this.sqlsearch()
-    }
-  }
-</script>
-
-<style scoped>
-  .label {
-    margin-left: 6%;
-    font-size: 0.85em;
-    color: #fff;
-    height: 8%;
-  }
-
-  #NoContact {
-    height: 91%;
-    width: 99%;
-    padding: 1% 2% 3% 2%;
-
-  }
-  .t1{
-    color: #4bf2ff;
-  }
-</style>
+<template>
+  <div>
+    <div class="label t1" @click="drillclick">{{title}}</div>
+    <div id="NoContact"></div>
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+  import * as Util from '../../../stores/Util'
+
+  export default {
+    name: "NoContact",
+    data() {
+      return {
+        title: '失联用户统计',
+        xc: '',
+        resdata: [],
+        nocontactdata: [],
+      }
+    },
+    methods: {
+      setBar(id) {
+        this.xc = this.$echarts.init(document.getElementById(id))
+        var scale = 0.8
+        var xAxisData = [];
+        var legendData = ['用户数量'];
+        var serieData = [];
+        var metaDate = []
+        var Auxiliarydata = []
+        var data0 = 0
+        var num = 0
+        for (var i = this.nocontactdata.length; i > 0; i--) {
+          xAxisData.push(this.nocontactdata[i - 1].name)
+          metaDate.push(this.nocontactdata[i - 1].value)
+          num = num + this.nocontactdata[i - 1].value
+        }
+        this.$parent.warningnum = this.$parent.warningnum + num
+        xAxisData.push("")
+        metaDate.forEach(function (s) {
+          data0 = data0 + s
+        })
+        for (var i = 0; i < metaDate.length; i++) {
+          Auxiliarydata.push(data0 / 60)
+        }
+        var rich = {
+          white: {
+            color: "#f7cb32",
+            padding: [0, 0, -20, 0]
+          }
+        }
+        var yname = ' 月份'
+        for (var v = 0; v < legendData.length; v++) {
+          var serie = {
+            name: legendData[0],
+            type: "bar",
+            stack: "总量",
+            barWidth: '40%',
+            barGap: "20%",
+            itemStyle: {
+              normal: {
+                color: "#013e48",
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: "#f7cb32"
+                  },
+                  position: "top",
+                  formatter: function (p) {
+                    var s = p.value > 0 ? (p.value) : ''
+                    return '{white|' + s + '}'
+                  },
+                  rich: rich
+                }
+              }
+            },
+            data: metaDate,
+          }
+          var serie1 = {
+            name: 'ser',
+            type: "bar",
+            stack: "总量",
+            itemStyle: {
+              normal: {
+                color: "#6fd9d0",
+                barBorderRadius: 0,
+                label: {
+                  show: false,
+                }
+              }
+            },
+            data: Auxiliarydata
+          }
+          serieData.push(serie)
+          serieData.push(serie1)
+        }
+        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
+        this.xc.setOption({
+          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},
+          color: colors,
+          grid: {left: '4%', top: "18%", bottom: "3%", right: "5%", containLabel: true},
+          dataZoom: [{
+            type: 'inside',
+            show: true,
+            xAxisIndex: [0],
+            left: '9%',
+            bottom: -5,
+            start: 2,
+            end: 90 //初始化滚动条
+          }],
+          tooltip: {
+            formatter: function (params) {
+              if (params[0].axisValue == '') {
+                return ''
+              }
+              var result = ''
+              params.forEach(function (item) {
+                if (item.seriesName !== 'ser') {
+                  result += item.seriesName + " : " + item.value + "</br>";
+                }
+              });
+              return params[0].axisValue + '月 <br/> ' + result
+            },
+            axisPointer: {type: 'line', lineStyle: {width: 0}},
+            trigger: 'axis',
+            extraCssText: 'width: auto;height: auto;'
+          },
+          xAxis: [
+            {
+              name: yname,
+              type: 'category',
+              nameTextStyle: {
+                fontSize: 14 * scale,
+                color: '#15dce2',
+                padding: [48 * scale, 0, 0, -70 * scale],
+              },
+              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
+              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
+              axisTick: {show: false},
+              data: xAxisData,
+              min:6
+            },
+          ],
+          yAxis: [
+            {
+              name: '用户数量',
+              nameTextStyle: {
+                fontSize: 14 * scale,
+                padding: [-10 * scale, 35 * scale, 0, 0],
+              },
+              axisTick: {show: false},
+              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
+              axisLabel: {interval: 0, textStyle: {color: '#15dce2', fontSize: 14 * scale}},
+              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
+            },
+          ],
+          series: serieData
+        })
+      },
+      // 查询sql
+      sqlsearch() {
+        // var date = DataSql.toBeforeDate(365)
+        // DataSql.param = date + ' 00:00:00'
+        let getData = DataSql.getData(this,'lossassociation',{}, 'resdata')
+        co(getData)
+      },
+      //整理数据
+      processData() {
+          var self=this
+        this.resdata.forEach(function (s) {
+          let item = {}
+          item.name = s.dates
+          item.value = s.num
+          self.nocontactdata.push(item)
+
+        })
+        console.log(this.nocontactdata)
+      },
+      // 钻取入口
+      drillclick() {
+        console.log(this.title)
+        let total = []
+        for (var i = this.nocontactdata; i > 0; i--) {
+          total.push(this.nocontactdata[i - 1])
+        }
+        var date=eval(Util.toStandardDateString().toString().substring(0, 4) + '-2') + '-01-01 00:00:00'
+        var initdatatr = {
+          startDate:date ,
+          endDate: Util.toStandardDateString() + ' 00:00:00',
+          param: '',
+          param1: '',
+          listparam: ' al.f_hand_date>=\''+date+'\' and '
+        }
+        this.$emit('drill', 'lossassociation', 'nocontact', this.title, initdatatr)
+        this.$emit('drilldata', total)
+      },
+    },
+    watch: {
+      'resdata': {
+        deep: true,
+        handler(val) {
+          console.log(this.resdata, '失联用户统计')
+          this.processData()
+          this.setBar('NoContact')
+          this.$parent.loaddata++
+        }
+      },
+    },
+    ready() {
+      this.sqlsearch()
+    }
+  }
+</script>
+
+<style scoped>
+  .label {
+    margin-left: 6%;
+    font-size: 0.85em;
+    color: #fff;
+    height: 8%;
+  }
+
+  #NoContact {
+    height: 91%;
+    width: 99%;
+    padding: 1% 2% 3% 2%;
+
+  }
+  .t1{
+    color: #4bf2ff;
+  }
+</style>