manage-client 3.2.37 → 3.2.41

package/src/components/ManageHome/User/UserGascontrast.vue

@@ -1,223 +1,223 @@
-<template>
-  <div>
-    <div class="label t1" @click="drillclick" >{{title}}</div>
-    <div id="usergascontrast"></div>
-  </div>
-</template>
-
-<script>
-  import * as Util from '../../../stores/Util'
-  import * as DataSql from '../../../stores/DataSql'
-  import co from 'co'
-
-  export default {
-    name: "user-gas",
-    props: {
-      listenheight: String,
-    },
-    data() {
-      return {
-        title: '主要用户展示',
-        principaluser: [],
-        principalstring: [],
-        usertag1: false,
-        resdata: []
-      }
-    },
-    methods: {
-      // 三级页面点击入口
-      drillclick() {
-        var initdatatr = {
-          startDate: eval(Util.toStandardDateString().toString().substring(0, 4) + '-4') + '-01-01 00:00:00',
-          endDate: Util.toStandardDateString() + ' 00:00:00',
-          param: '',
-          param1: '',
-          listparam: '',
-        }
-        this.$emit('drill', 'mainuser', 'usergas', this.title, initdatatr)
-        this.$emit('drilldata', this.principaluser)
-      },
-      setBar(id) {
-        this.xc = this.$echarts.init(document.getElementById(id))
-        var scale = 0.8
-        var visits = []
-        var grade = []
-        var l = this.principaluser.length
-        for (var i = 0; i < l; i++) {
-          let s = this.principaluser[l - 1 - i]
-          grade.push(s.name)
-          visits.push(s.value)
-        }
-        var echartData1 = this.principalstring
-        var data = {
-          grade: grade,
-          visits: visits,
-        }
-        var rich = {
-          blue: {
-            color: '#15dce2',
-            fontSize: 12 * scale,
-            align: 'center',
-            padding: [-12, 0, 0, 0]
-          }
-        }
-        this.xc.setOption({
-          title: [
-            {
-              text: '售气量top5',
-              // padding:[0,0,'1%',0],
-              x: 'center',
-              textStyle: {
-                align: 'left',
-                color: '#fff',
-                fontSize: 14 * scale
-              }
-            },
-          ],
-          grid: {
-            left: '33%',
-            right: '14%',
-            height: '85%',
-            top: '6%',
-            bottom: '0'
-          },
-          xAxis: {
-            show: false,
-          },
-          yAxis: {
-            type: 'category',
-            axisLabel: {
-              // margin: 10,
-              show: true,
-              color: '#69d8d2',
-              fontSize: 12 * scale,
-              formatter: function (value, index) {
-                //进行客户名称截取换行
-                var s = ''
-                // 长度超过10个字符进行换行
-                if (value.toString().length > 10 && value.toString().length < 20) {
-                  var s0 = value.toString().substring(0, 10)
-                  var s1 = value.toString().substring(10, value.toString().length)
-                  s = s0 + '\n' + s1
-                  return s
-                }
-                // 长度超过20个字符进行再次换行
-                if (value.toString().length > 19) {
-                  var s0 = value.toString().substring(0, 10)
-                  var s1 = value.toString().substring(10, 20)
-                  var s2 = value.toString().substring(20, value.toString().length)
-                  s = s0 + '\n' + s1 + '\n' + s2
-                  return s
-                }
-                s = value.toString()
-                return s;
-              }
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
-            data: data.grade
-          },
-          series: [{
-            type: 'bar',
-            barGap: '-99%',
-            barWidth: '30%',
-            itemStyle: {
-              normal: {
-                barBorderRadius: 12 * scale,
-                color: {
-                  type: 'linear',
-                  x: 0,
-                  x1: 1,
-                  colorStops: [{
-                    offset: 0,
-                    color: '#69d8d2'
-                  }, {
-                    offset: 1,
-                    color: '#69d8d2'
-                  }]
-                }
-              },
-            },
-            max: 1,
-            labelLine: {
-              show: true,
-            },
-            label: {
-              show: true,
-              position: 'right',
-              formatter: function (params) {
-                for (var i = 0; i < echartData1.length; i++) {
-                  // 对比列名,显示单位化后的数据
-                  if (echartData1[i].name == params.name) {
-                    return '{blue|' + echartData1[i].value + '}\n';
-                  }
-                }
-              },
-              rich: rich,
-            },
-            data: data.visits,
-          }]
-        })
-      },
-      //请求后台数据
-      searchdata(year) {
-        let sqldata = DataSql.getData(this, 'usergas',{startDate:year}, "resdata")
-        co(sqldata)
-      },
-      resize() {
-        // this.$parent.$parent.changeresize(this.xc)
-      }
-    },
-    watch: {
-      'resdata': {
-        deep: true,
-        handler(val) {
-          this.principaluser = this.resdata
-          console.log(this.resdata, '主要用户数据')
-        }
-      },
-      // 监听用户数据并进行绘图
-      'principaluser': {
-        deep: true,
-        handler(val) {
-          DataSql.dataunitarray(this, 'principaluser', 'principalstring')
-          this.setBar('usergascontrast')
-          this.$parent.loaddata++
-        }
-      },
-      //监听浏览器大小变化
-      'listenheight': {
-        deep: true,
-        handler(val) {
-          if (this.listenheight !== '') {
-            // this.$parent.$parent.changeresize(this.xc)
-          }
-        },
-      }
-    },
-    ready() {
-      // 拼接sql，请求后台
-      var year = Util.toStandardDateString()
-      year = year.toString().substring(0, 4)
-      year = eval(year + '-1')
-      this.searchdata(year)
-    }
-  }
-</script>
-
-<style scoped>
-  .label {
-    margin-left: 6%;
-    font-size: 0.85em;
-    color: #fff;
-    width: 100%;
-    height: 9%;
-  }
-  .t1{
-    color: #4bf2ff;
-  }
-</style>
+<template>
+  <div>
+    <div class="label t1" @click="drillclick" >{{title}}</div>
+    <div id="usergascontrast"></div>
+  </div>
+</template>
+
+<script>
+  import * as Util from '../../../stores/Util'
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+
+  export default {
+    name: "user-gas",
+    props: {
+      listenheight: String,
+    },
+    data() {
+      return {
+        title: '主要用户展示',
+        principaluser: [],
+        principalstring: [],
+        usertag1: false,
+        resdata: []
+      }
+    },
+    methods: {
+      // 三级页面点击入口
+      drillclick() {
+        var initdatatr = {
+          startDate: eval(Util.toStandardDateString().toString().substring(0, 4) + '-4') + '-01-01 00:00:00',
+          endDate: Util.toStandardDateString() + ' 00:00:00',
+          param: '',
+          param1: '',
+          listparam: '',
+        }
+        this.$emit('drill', 'mainuser', 'usergas', this.title, initdatatr)
+        this.$emit('drilldata', this.principaluser)
+      },
+      setBar(id) {
+        this.xc = this.$echarts.init(document.getElementById(id))
+        var scale = 0.8
+        var visits = []
+        var grade = []
+        var l = this.principaluser.length
+        for (var i = 0; i < l; i++) {
+          let s = this.principaluser[l - 1 - i]
+          grade.push(s.name)
+          visits.push(s.value)
+        }
+        var echartData1 = this.principalstring
+        var data = {
+          grade: grade,
+          visits: visits,
+        }
+        var rich = {
+          blue: {
+            color: '#15dce2',
+            fontSize: 12 * scale,
+            align: 'center',
+            padding: [-12, 0, 0, 0]
+          }
+        }
+        this.xc.setOption({
+          title: [
+            {
+              text: '售气量top5',
+              // padding:[0,0,'1%',0],
+              x: 'center',
+              textStyle: {
+                align: 'left',
+                color: '#fff',
+                fontSize: 14 * scale
+              }
+            },
+          ],
+          grid: {
+            left: '33%',
+            right: '14%',
+            height: '85%',
+            top: '6%',
+            bottom: '0'
+          },
+          xAxis: {
+            show: false,
+          },
+          yAxis: {
+            type: 'category',
+            axisLabel: {
+              // margin: 10,
+              show: true,
+              color: '#69d8d2',
+              fontSize: 12 * scale,
+              formatter: function (value, index) {
+                //进行客户名称截取换行
+                var s = ''
+                // 长度超过10个字符进行换行
+                if (value.toString().length > 10 && value.toString().length < 20) {
+                  var s0 = value.toString().substring(0, 10)
+                  var s1 = value.toString().substring(10, value.toString().length)
+                  s = s0 + '\n' + s1
+                  return s
+                }
+                // 长度超过20个字符进行再次换行
+                if (value.toString().length > 19) {
+                  var s0 = value.toString().substring(0, 10)
+                  var s1 = value.toString().substring(10, 20)
+                  var s2 = value.toString().substring(20, value.toString().length)
+                  s = s0 + '\n' + s1 + '\n' + s2
+                  return s
+                }
+                s = value.toString()
+                return s;
+              }
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            data: data.grade
+          },
+          series: [{
+            type: 'bar',
+            barGap: '-99%',
+            barWidth: '30%',
+            itemStyle: {
+              normal: {
+                barBorderRadius: 12 * scale,
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  x1: 1,
+                  colorStops: [{
+                    offset: 0,
+                    color: '#69d8d2'
+                  }, {
+                    offset: 1,
+                    color: '#69d8d2'
+                  }]
+                }
+              },
+            },
+            max: 1,
+            labelLine: {
+              show: true,
+            },
+            label: {
+              show: true,
+              position: 'right',
+              formatter: function (params) {
+                for (var i = 0; i < echartData1.length; i++) {
+                  // 对比列名,显示单位化后的数据
+                  if (echartData1[i].name == params.name) {
+                    return '{blue|' + echartData1[i].value + '}\n';
+                  }
+                }
+              },
+              rich: rich,
+            },
+            data: data.visits,
+          }]
+        })
+      },
+      //请求后台数据
+      searchdata(year) {
+        let sqldata = DataSql.getData(this, 'usergas',{startDate:year}, "resdata")
+        co(sqldata)
+      },
+      resize() {
+        // this.$parent.$parent.changeresize(this.xc)
+      }
+    },
+    watch: {
+      'resdata': {
+        deep: true,
+        handler(val) {
+          this.principaluser = this.resdata
+          console.log(this.resdata, '主要用户数据')
+        }
+      },
+      // 监听用户数据并进行绘图
+      'principaluser': {
+        deep: true,
+        handler(val) {
+          DataSql.dataunitarray(this, 'principaluser', 'principalstring')
+          this.setBar('usergascontrast')
+          this.$parent.loaddata++
+        }
+      },
+      //监听浏览器大小变化
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            // this.$parent.$parent.changeresize(this.xc)
+          }
+        },
+      }
+    },
+    ready() {
+      // 拼接sql，请求后台
+      var year = Util.toStandardDateString()
+      year = year.toString().substring(0, 4)
+      year = eval(year + '-1')
+      this.searchdata(year)
+    }
+  }
+</script>
+
+<style scoped>
+  .label {
+    margin-left: 6%;
+    font-size: 0.85em;
+    color: #fff;
+    width: 100%;
+    height: 9%;
+  }
+  .t1{
+    color: #4bf2ff;
+  }
+</style>