manage-client 3.2.89-aode → 3.2.89-aodeToV4

package/src/components/ManageHomeCS/User/UsernumIncrease.vue

@@ -1,277 +1,277 @@
-<template>
-  <div>
-    <div class="label">用户数量增长情况</div>
-    <div id="userincrease" class="d1"></div>
-  </div>
-</template>
-
-<script>
-  import * as Util from '../../../Util'
-  import * as DataSql from '../../../stores/DataSql'
-  import co from 'co'
-
-  export default {
-    name: "user-increase",
-    props: {
-      listenheight: String,
-      f_filiale: String,
-    },
-    data() {
-      return {
-        xc: '',
-        totaluser: [], //总用户数据
-        civiluse: [],  //民用用户数据
-        nociviluse: [], //非民用用户数据
-        resdata: [],
-        timer:''
-      }
-    },
-    beforeDestroy() {
-      //清除定时器
-      clearInterval(this.timer);
-    },
-    methods: {
-      setBar() {
-        this.xc = this.$echarts.init(document.getElementById('userincrease'))
-        var scale=this.$parent.$parent.$parent.scale
-        var xAxisData = [];
-        let data0 = []
-        let data1 = []
-        let data2 = []
-        for (var i = this.totaluser.length - 2; i > -1; i--) {
-          xAxisData.push(this.totaluser[i].name)
-          data0.push(this.totaluser[i].value)
-          data1.push(this.civiluse[i].value)
-          data2.push(this.nociviluse[i].value)
-        }
-        xAxisData.push('')
-        var serieData = [];
-        var metaDate = []
-        metaDate.push(data0)
-        metaDate.push(data1)
-        metaDate.push(data2)
-        var legendData = ['总用户', '民用用户', '非民用用户'];
-        for (var v = 0; v < legendData.length; v++) {
-          var serie = {
-            name: legendData[v],
-            type: 'line',
-            symbol: "circle",
-            symbolSize: 5 * scale,
-            itemStyle: {
-              normal: {
-                lineStyle: {
-                  width: 1,
-                  shadowBlur:0,
-                  // shadowOffsetY: 15 * scale,
-                }
-              }
-            },
-            data: metaDate[v]
-          }
-          serieData.push(serie)
-        }
-        var colors = ["#6fd9d0", "#f7cb32", "#6e93e0"];
-
-        this.xc.setOption({
-          title: {
-            text: '',
-            textAlign: 'left',
-            textStyle: {color: "#FFFFFF", fontSize: 20 * scale, fontWeight: "normal"}
-          },
-          legend: {
-            itemGap: 20,
-            width: '90%',
-            show: true,
-            right:'2%',
-            data: legendData,
-            y: '8%',
-            padding: [0, 25*scale, 0, 0],
-            itemWidth: 14 * scale,
-            itemHeight: 6 * scale,
-            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 * scale},
-          },
-          color: colors,
-          grid: {left: '5%', top: "22%", bottom: "2%", right: "5%", width: '90%', containLabel: true},
-          tooltip: {
-            alwaysShowContent:true,
-            backgroundColor:'rgba(2, 59, 63, 0.45)',
-            // borderColor :'rgba(13, 109, 180)',
-            borderWidth:0,
-            hideDelay:100,
-              padding:10*scale,
-              textStyle:{
-                  fontSize:18*scale
-              },
-            formatter: function (params) {
-              if (params[0].data == '') {
-                return ''
-              }
-              var result = ''
-              params.forEach(function (item) {
-                result += item.marker + " " + item.seriesName + " &nbsp;&nbsp;&nbsp; <span style='color:#e1e52a;font-weight: bolder'>" + item.value + "</span></br>";
-              });
-              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '年</div><br/>' + result
-            },
-            trigger: 'axis',
-            extraCssText: 'width: auto;height: auto;',
-            axisPointer: {lineStyle: {width: 0}},
-          },
-          xAxis: [
-            {
-              name: '      年',
-              type: 'category',
-              nameTextStyle: {
-                fontSize: 12 * scale,
-                color: '#15dce2',
-                padding: [28*scale, 0, 0, -80 * scale],
-              },
-              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
-              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
-              axisTick: {show: false},
-              data: xAxisData,
-            },
-          ],
-          yAxis: [
-            {
-              name: '数量',
-              nameTextStyle: {
-                fontSize: 12 * scale,
-                padding: [0, 35 * scale, 0, 0],
-              },
-              axisTick: {show: false},
-              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
-              axisLabel: {
-                textStyle: {color: '#15dce2', fontSize: 14 * scale}, formatter: function (params) {
-                  if (params > 999) {
-                    return params / 10000 + "万"
-                  }
-                  // else if(params>999){
-                  //    return params/10000+"万"
-                  //  }
-                  else
-                    return params
-                }
-              },
-              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
-            },
-          ],
-          series: serieData
-        })
-        let idx = -1;
-        var dataLen=serieData.length
-        var oroptionmapjsonr_charts1=this.xc
-        this.timer= setInterval(()=>{
-          idx = (idx+ 1) % dataLen;
-          oroptionmapjsonr_charts1.dispatchAction({
-            type: 'showTip',
-            seriesIndex: 1,
-            dataIndex: idx
-          });
-
-        }, 3000)
-
-      },
-      //请求后台数据
-      searchdata() {
-        var self = this
-        let sqldata = DataSql.getData(this,'userincrease',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
-        co(sqldata)
-      },
-      resize() {
-        // this.$parent.$parent.changeresize(this.xc)
-      }
-    },
-    watch: {
-      'resdata': {
-        deep: true,
-        handler(val) {
-          var s=0
-          if(this.resdata.length>5){
-            s=6
-          }else {
-            s=this.resdata.length
-          }
-          for (var i = 0; i < s; i++) {
-            let item0 = {}
-            let item1 = {}
-            let item2 = {}
-            item0.name = this.resdata[i].year
-            item0.value = this.resdata[i].totalnum
-            this.totaluser.push(item0)
-            item1.name = this.resdata[i].year
-            item1.value = this.resdata[i].civiluse
-            this.civiluse.push(item1)
-            item2.name = this.resdata[i].year
-            item2.value = this.resdata[i].nociviluse
-            this.nociviluse.push(item2)
-          }
-        }
-      },
-      // 监听用户数据并进行绘图
-      'totaluser': {
-        deep: true,
-        handler(val) {
-          var increase = 0
-          var year = Util.toStandardDateString().toString().substring(0, 4)
-          var l = 0
-          for (var i = 0; i < this.totaluser.length; i++) {
-            if (this.totaluser[i].name != year) {
-              increase = increase + this.totaluser[i].value
-              l++
-            }
-            if (l == 5) {
-              break
-            }
-          }
-
-          var s = increase / 5
-          var index = s.toString().indexOf('.')
-          if (index != -1) {
-            s = s.toString().substring(0, index)
-          }
-
-          this.$parent.increaseuser = parseInt(s)
-          this.setBar()
-          this.$parent.loaddata++
-        }
-      },
-      //监听浏览器大小变化
-      'listenheight': {
-        deep: true,
-        handler(val) {
-          if (this.listenheight !== '') {
-            // this.$parent.$parent.changeresize(this.xc)
-          }
-        },
-      },
-    },
-    ready() {
-      // 拼接sql，请求后台
-      this.searchdata()
-    },
-  }
-</script>
-
-<style scoped>
-  .label {
-    margin-left: 6%;
-    font-size: 1.85rem;
-    color: #fff;
-    width: 100%;
-    height: 9%;
-  }
-
-  .callstatic {
-    /*padding: 0% 1%;*/
-  }
-
-  .d1 {
-
-  }
-
-  #userincrease {
-    height: 88%;
-    width: 99%;
-    padding: 1% 2% 3% 2%;
-  }
-</style>
+<template>
+  <div>
+    <div class="label">用户数量增长情况</div>
+    <div id="userincrease" class="d1"></div>
+  </div>
+</template>
+
+<script>
+  import * as Util from '../../../Util'
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+
+  export default {
+    name: "user-increase",
+    props: {
+      listenheight: String,
+      f_filiale: String,
+    },
+    data() {
+      return {
+        xc: '',
+        totaluser: [], //总用户数据
+        civiluse: [],  //民用用户数据
+        nociviluse: [], //非民用用户数据
+        resdata: [],
+        timer:''
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      setBar() {
+        this.xc = this.$echarts.init(document.getElementById('userincrease'))
+        var scale=this.$parent.$parent.$parent.scale
+        var xAxisData = [];
+        let data0 = []
+        let data1 = []
+        let data2 = []
+        for (var i = this.totaluser.length - 2; i > -1; i--) {
+          xAxisData.push(this.totaluser[i].name)
+          data0.push(this.totaluser[i].value)
+          data1.push(this.civiluse[i].value)
+          data2.push(this.nociviluse[i].value)
+        }
+        xAxisData.push('')
+        var serieData = [];
+        var metaDate = []
+        metaDate.push(data0)
+        metaDate.push(data1)
+        metaDate.push(data2)
+        var legendData = ['总用户', '民用用户', '非民用用户'];
+        for (var v = 0; v < legendData.length; v++) {
+          var serie = {
+            name: legendData[v],
+            type: 'line',
+            symbol: "circle",
+            symbolSize: 5 * scale,
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  width: 1,
+                  shadowBlur:0,
+                  // shadowOffsetY: 15 * scale,
+                }
+              }
+            },
+            data: metaDate[v]
+          }
+          serieData.push(serie)
+        }
+        var colors = ["#6fd9d0", "#f7cb32", "#6e93e0"];
+
+        this.xc.setOption({
+          title: {
+            text: '',
+            textAlign: 'left',
+            textStyle: {color: "#FFFFFF", fontSize: 20 * scale, fontWeight: "normal"}
+          },
+          legend: {
+            itemGap: 20,
+            width: '90%',
+            show: true,
+            right:'2%',
+            data: legendData,
+            y: '8%',
+            padding: [0, 25*scale, 0, 0],
+            itemWidth: 14 * scale,
+            itemHeight: 6 * scale,
+            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 * scale},
+          },
+          color: colors,
+          grid: {left: '5%', top: "22%", bottom: "2%", right: "5%", width: '90%', containLabel: true},
+          tooltip: {
+            alwaysShowContent:true,
+            backgroundColor:'rgba(2, 59, 63, 0.45)',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth:0,
+            hideDelay:100,
+              padding:10*scale,
+              textStyle:{
+                  fontSize:18*scale
+              },
+            formatter: function (params) {
+              if (params[0].data == '') {
+                return ''
+              }
+              var result = ''
+              params.forEach(function (item) {
+                result += item.marker + " " + item.seriesName + " &nbsp;&nbsp;&nbsp; <span style='color:#e1e52a;font-weight: bolder'>" + item.value + "</span></br>";
+              });
+              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '年</div><br/>' + result
+            },
+            trigger: 'axis',
+            extraCssText: 'width: auto;height: auto;',
+            axisPointer: {lineStyle: {width: 0}},
+          },
+          xAxis: [
+            {
+              name: '      年',
+              type: 'category',
+              nameTextStyle: {
+                fontSize: 12 * scale,
+                color: '#15dce2',
+                padding: [28*scale, 0, 0, -80 * scale],
+              },
+              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
+              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
+              axisTick: {show: false},
+              data: xAxisData,
+            },
+          ],
+          yAxis: [
+            {
+              name: '数量',
+              nameTextStyle: {
+                fontSize: 12 * scale,
+                padding: [0, 35 * scale, 0, 0],
+              },
+              axisTick: {show: false},
+              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
+              axisLabel: {
+                textStyle: {color: '#15dce2', fontSize: 14 * scale}, formatter: function (params) {
+                  if (params > 999) {
+                    return params / 10000 + "万"
+                  }
+                  // else if(params>999){
+                  //    return params/10000+"万"
+                  //  }
+                  else
+                    return params
+                }
+              },
+              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
+            },
+          ],
+          series: serieData
+        })
+        let idx = -1;
+        var dataLen=serieData.length
+        var oroptionmapjsonr_charts1=this.xc
+        this.timer= setInterval(()=>{
+          idx = (idx+ 1) % dataLen;
+          oroptionmapjsonr_charts1.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 1,
+            dataIndex: idx
+          });
+
+        }, 3000)
+
+      },
+      //请求后台数据
+      searchdata() {
+        var self = this
+        let sqldata = DataSql.getData(this,'userincrease',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
+        co(sqldata)
+      },
+      resize() {
+        // this.$parent.$parent.changeresize(this.xc)
+      }
+    },
+    watch: {
+      'resdata': {
+        deep: true,
+        handler(val) {
+          var s=0
+          if(this.resdata.length>5){
+            s=6
+          }else {
+            s=this.resdata.length
+          }
+          for (var i = 0; i < s; i++) {
+            let item0 = {}
+            let item1 = {}
+            let item2 = {}
+            item0.name = this.resdata[i].year
+            item0.value = this.resdata[i].totalnum
+            this.totaluser.push(item0)
+            item1.name = this.resdata[i].year
+            item1.value = this.resdata[i].civiluse
+            this.civiluse.push(item1)
+            item2.name = this.resdata[i].year
+            item2.value = this.resdata[i].nociviluse
+            this.nociviluse.push(item2)
+          }
+        }
+      },
+      // 监听用户数据并进行绘图
+      'totaluser': {
+        deep: true,
+        handler(val) {
+          var increase = 0
+          var year = Util.toStandardDateString().toString().substring(0, 4)
+          var l = 0
+          for (var i = 0; i < this.totaluser.length; i++) {
+            if (this.totaluser[i].name != year) {
+              increase = increase + this.totaluser[i].value
+              l++
+            }
+            if (l == 5) {
+              break
+            }
+          }
+
+          var s = increase / 5
+          var index = s.toString().indexOf('.')
+          if (index != -1) {
+            s = s.toString().substring(0, index)
+          }
+
+          this.$parent.increaseuser = parseInt(s)
+          this.setBar()
+          this.$parent.loaddata++
+        }
+      },
+      //监听浏览器大小变化
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            // this.$parent.$parent.changeresize(this.xc)
+          }
+        },
+      },
+    },
+    ready() {
+      // 拼接sql，请求后台
+      this.searchdata()
+    },
+  }
+</script>
+
+<style scoped>
+  .label {
+    margin-left: 6%;
+    font-size: 1.85rem;
+    color: #fff;
+    width: 100%;
+    height: 9%;
+  }
+
+  .callstatic {
+    /*padding: 0% 1%;*/
+  }
+
+  .d1 {
+
+  }
+
+  #userincrease {
+    height: 88%;
+    width: 99%;
+    padding: 1% 2% 3% 2%;
+  }
+</style>