manage-client 3.2.86-4 → 3.2.86-aodeToV4

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

@@ -1,423 +1,415 @@
-<template>
-  <div class="monitor">
-    <div>
-      <div class="label">监控</div>
-      <!--<div class="d1" >-->
-      <!--<select v-model="date">-->
-      <!--<option :value="date" v-for="s in date" >{{s}}</option>-->
-      <!--</select>-->
-      <!--</div>-->
-      <div class="d2">
-        <div style="width: 35%;float: left;height: 100%;padding-left: 10%">
-          <div class="row flex" style="height: 50%">
-            <span class="font-style f24" style="margin-bottom: 5%;font-weight: bolder">{{warn}}</span>
-            <span class="font-style f16">警告用户</span>
-          </div>
-          <div class="row flex" style="height: 50%">
-            <span class="font-style f24" style="margin-bottom: 5%;font-weight: bolder">{{suspicious}}</span>
-            <span class="font-style f16">可疑用户</span>
-          </div>
-        </div>
-        <div style="width: 55%;float:left;height: 100%;">
-          <div id="monitor"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import * as DataSql from '../../../stores/DataSql'
-  import co from 'co'
-
-
-  export default {
-    name: "monitor",
-    props: {
-      showdate: {
-        type: Boolean,
-        default: false
-      },
-      listenheight: String,
-      f_filiale:String,
-    },
-    data() {
-      return {
-        date: [2018, 2017, 2016],
-        xc: '',
-        warn: '',
-        suspicious: '',
-        resdata: '',
-        monitordata: [],
-        monitordata1: [],
-        monitorscale: [],
-        grade: ['警告类型', '关阀走气', '过流保护关阀', '周期关阀', '报警关阀', '磁干扰'],
-      }
-    },
-    methods: {
-      setBar() {
-        this.xc = this.$echarts.init(document.getElementById('monitor'))
-        var scale=this.$parent.$parent.$parent.scale
-        var data = {
-          grade: this.grade,
-          visits: this.monitordata1,
-          totalCost: [1, 1, 1, 1, 1, 1],
-          cost: this.monitorscale,
-        }
-        var rich = {
-          blue: {
-            fontSize:16*scale,
-            color: '#15dce2'
-          },
-          white: {
-            color: '#fff'
-          }
-        }
-        this.xc.setOption({
-          title: {
-            // top: '5%',
-            left: 'center',
-            text: '',
-            textStyle: {
-              align: 'center',
-              color: '#15dce2',
-              fontSize: 12 * scale
-            }
-          },
-          grid: {
-            left: '30%',
-            right: '15%',
-            top: '10%',
-            bottom: '0'
-          },
-          xAxis: {
-            show: false,
-          },
-          yAxis: {
-            type: 'category',
-            axisLabel: {
-
-              color: function (param) {
-                if (param == '警告类型') {
-                  return '#fff'
-                }
-                return '#15dce2';
-              },
-              fontSize: 12 * scale
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
-            data: data.grade
-          },
-          series: [{
-            type: 'bar',
-            barGap: '-100%',
-            label: {
-              normal: {
-                show: true,
-                position: 'right',
-                fontSize: 12 * scale,
-                formatter:
-                  function (param) {
-                    if (param.name == '警告类型') {
-                      return '{white|户数}'
-                    }
-                    return '{blue|' + data.visits[param.dataIndex] + '}';
-                  },
-                rich: rich,
-              }
-            },
-            barWidth: '35%',
-            itemStyle: {
-              normal: {
-                // borderColor: 'rgba(1,207,242,0.05)',
-                borderWidth: 2,
-                barBorderRadius: 15,
-                color: function (param) {
-                  if (param.name == '警告类型') {
-                    return 'rgba(1, 207, 242, 0.001)'
-                  }
-                  return '#003d4c';
-                },
-              },
-            },
-            z: 1,
-            data: data.totalCost,
-            // data: da
-          }, {
-            type: 'bar',
-            barGap: '-99%',
-            barWidth: '33%',
-            itemStyle: {
-              normal: {
-                barBorderRadius: 16 * scale,
-                color: {
-                  type: 'linear',
-                  x: 0,
-                  x1: 1,
-                  colorStops: [{
-                    offset: 0,
-                    color: '#6fd9d0'
-                  }, {
-                    offset: 1,
-                    color: '#6fd9d0'
-                  }]
-                }
-              },
-            },
-            max: 1,
-            labelLine: {
-              show: true,
-            },
-            z: 2,
-            data: data.cost,
-          }]
-        })
-      },
-      searchdata() {
-        let warndata = DataSql.getData(this,'warningcount',{}, 'resdata')
-        co(warndata)
-        let sqldata = DataSql.getData(this, 'monitor',{}, 'monitordata')
-        co(sqldata)
-      },
-      scale() {
-        var l = this.monitordata1[1]
-        for (var i = 1; i < 5; i++) {
-          l = l + this.monitordata1[i + 1]
-          if (l < this.monitordata1[i + 1]) {
-            l = this.monitordata1[i + 1]
-          }
-        }
-        l = l * 1.3
-        for (var i = 1; i < 6; i++) {
-          if (this.monitordata1[i] == 0 || l == 0) {
-            this.monitorscale[i] = 0
-            continue
-          }
-          this.monitorscale[i] = this.monitordata1[i] / l
-        }
-        this.monitorscale[0] = 0
-      },
-    },
-    watch: {
-      'resdata': {
-        deep: true,
-        handler(val) {
-          if(this.resdata.length>0){
-            this.warn = this.resdata[0].num
-          } else {
-            this.warn = 0
-          }
-          if(this.resdata.length>1){
-            this.suspicious = this.resdata[1].num
-          } else {
-            this.suspicious = 0
-          }
-
-          this.$parent.loaddata++
-        }
-      },
-      'monitordata': {
-        deep: true,
-        handler(val) {
-          let s = []
-          for (var i = 1; i < 6; i++) {
-            s[i] = this.monitordata[0][this.grade[i]]
-          }
-          this.monitordata1 = s
-          this.scale()
-          this.setBar()
-          this.$parent.loaddata++
-        }
-      },
-      'listenheight': {
-        deep: true,
-        handler(val) {
-          if (this.listenheight !== '') {
-            // this.$parent.$parent.changeresize(this.xc)
-          }
-        },
-      }
-    },
-    ready() {
-      this.searchdata()
-    }
-  }
-</script>
-
-<style scoped>
-  @media screen and (max-width: 1920px) {
-    .label {
-      font-size: 1.85rem;
-      color: #fff;
-      height: 8%;
-      width: 100%;
-      margin-left: 6%;
-    }
-
-    .flex {
-      /*flex 布局*/
-      display: flex;
-      /*实现垂直居中*/
-      align-items: center;
-      /*实现水平居中*/
-      justify-content: center;
-      text-align: justify;
-      margin: 0 auto;
-    }
-
-    .font-style {
-      font-size: 1.4rem;
-      font-stretch: normal;
-      letter-spacing: 0px;
-      color: #ffffff;
-    }
-
-    .d1 {
-      height: 8%;
-      margin-left: 40%;
-    }
-
-    .d2 {
-      height: 91%;
-      padding-right: 1%;
-      padding-top: 1%;
-    }
-
-    .f24 {
-      font-size: 2rem;
-      color: #f3c832;
-    }
-
-    .f16 {
-      font-size: 1.4rem;
-      color: #ffffff;
-    }
-
-    .fleft {
-      font-size: 1.4rem;
-      color: #ffffff;
-      display: inline-block;
-      width: 30%;
-      float: left;
-      text-align: right;
-    }
-
-    .fright {
-      font-size: 1.4rem;
-      color: #ffffff;
-      display: inline-block;
-      float: right;
-      width: 30%;
-      text-align: right;
-    }
-
-    select {
-      padding-left: 1%;
-      border: none;
-      appearance: none;
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      background-color: #001521;
-      background: url('../../../../static/ManageHomePic/图层5拷贝4.png') no-repeat right center;
-      color: #15dce2;
-      font-size: 1.4rem;
-      width: 10%;
-    }
-
-    #monitor {
-      height: 88%;
-      width: 110%;
-    }
-  }
-  @media screen and (max-width: 1366px) {
-    .label {
-      font-size: 1.85rem;
-      color: #fff;
-      height: 8%;
-      width: 100%;
-      margin-left: 6%;
-    }
-
-    .flex {
-      /*flex 布局*/
-      display: flex;
-      /*实现垂直居中*/
-      align-items: center;
-      /*实现水平居中*/
-      justify-content: center;
-      text-align: justify;
-      margin: 0 auto;
-    }
-
-    .font-style {
-      font-size: 1rem;
-      font-stretch: normal;
-      letter-spacing: 0px;
-      color: #ffffff;
-    }
-
-    .d1 {
-      height: 8%;
-      margin-left: 40%;
-    }
-
-    .d2 {
-      height: 91%;
-      padding-right: 1%;
-      padding-top: 1%;
-    }
-
-    .f24 {
-      font-size: 1.6rem;
-      color: #f3c832;
-    }
-
-    .f16 {
-      font-size: 1rem;
-      color: #ffffff;
-    }
-
-    .fleft {
-      font-size: 1rem;
-      color: #ffffff;
-      display: inline-block;
-      width: 30%;
-      float: left;
-      text-align: right;
-    }
-
-    .fright {
-      font-size: 1rem;
-      color: #ffffff;
-      display: inline-block;
-      float: right;
-      width: 30%;
-      text-align: right;
-    }
-
-    select {
-      padding-left: 1%;
-      border: none;
-      appearance: none;
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      background-color: #001521;
-      background: url('../../../../static/ManageHomePic/图层5拷贝4.png') no-repeat right center;
-      color: #15dce2;
-      font-size: 1rem;
-      width: 10%;
-    }
-
-    #monitor {
-      height: 88%;
-      width: 110%;
-    }
-  }
-
-
-</style>
+<template>
+  <div class="monitor">
+    <div>
+      <div class="label">监控</div>
+      <!--<div class="d1" >-->
+      <!--<select v-model="date">-->
+      <!--<option :value="date" v-for="s in date" >{{s}}</option>-->
+      <!--</select>-->
+      <!--</div>-->
+      <div class="d2">
+        <div style="width: 35%;float: left;height: 100%;padding-left: 10%">
+          <div class="row flex" style="height: 50%">
+            <span class="font-style f24" style="margin-bottom: 5%;font-weight: bolder">{{warn}}</span>
+            <span class="font-style f16">警告用户</span>
+          </div>
+          <div class="row flex" style="height: 50%">
+            <span class="font-style f24" style="margin-bottom: 5%;font-weight: bolder">{{suspicious}}</span>
+            <span class="font-style f16">可疑用户</span>
+          </div>
+        </div>
+        <div style="width: 55%;float:left;height: 100%;">
+          <div id="monitor"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+
+
+  export default {
+    name: "monitor",
+    props: {
+      showdate: {
+        type: Boolean,
+        default: false
+      },
+      listenheight: String,
+      f_filiale:String,
+    },
+    data() {
+      return {
+        date: [2018, 2017, 2016],
+        xc: '',
+        warn: '',
+        suspicious: '',
+        resdata: '',
+        monitordata: [],
+        monitordata1: [],
+        monitorscale: [],
+        grade: ['警告类型', '关阀走气', '过流保护关阀', '周期关阀', '报警关阀', '磁干扰'],
+      }
+    },
+    methods: {
+      setBar() {
+        this.xc = this.$echarts.init(document.getElementById('monitor'))
+        var scale=this.$parent.$parent.$parent.scale
+        var data = {
+          grade: this.grade,
+          visits: this.monitordata1,
+          totalCost: [1, 1, 1, 1, 1, 1],
+          cost: this.monitorscale,
+        }
+        var rich = {
+          blue: {
+            fontSize:16*scale,
+            color: '#15dce2'
+          },
+          white: {
+            color: '#fff'
+          }
+        }
+        this.xc.setOption({
+          title: {
+            // top: '5%',
+            left: 'center',
+            text: '',
+            textStyle: {
+              align: 'center',
+              color: '#15dce2',
+              fontSize: 12 * scale
+            }
+          },
+          grid: {
+            left: '30%',
+            right: '15%',
+            top: '10%',
+            bottom: '0'
+          },
+          xAxis: {
+            show: false,
+          },
+          yAxis: {
+            type: 'category',
+            axisLabel: {
+              margin: 10 * scale,
+              show: true,
+              color: function (param) {
+                if (param == '警告类型') {
+                  return '#fff'
+                }
+                return '#15dce2';
+              },
+              fontSize: 12 * scale
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            data: data.grade
+          },
+          series: [{
+            type: 'bar',
+            barGap: '-100%',
+            label: {
+              normal: {
+                show: true,
+                position: 'right',
+                fontSize: 12 * scale,
+                formatter:
+                  function (param) {
+                    if (param.name == '警告类型') {
+                      return '{white|户数}'
+                    }
+                    return '{blue|' + data.visits[param.dataIndex] + '}';
+                  },
+                rich: rich,
+              }
+            },
+            barWidth: '35%',
+            itemStyle: {
+              normal: {
+                // borderColor: 'rgba(1,207,242,0.05)',
+                borderWidth: 2,
+                barBorderRadius: 15,
+                color: function (param) {
+                  if (param.name == '警告类型') {
+                    return 'rgba(1, 207, 242, 0.001)'
+                  }
+                  return '#003d4c';
+                },
+              },
+            },
+            z: 1,
+            data: data.totalCost,
+            // data: da
+          }, {
+            type: 'bar',
+            barGap: '-99%',
+            barWidth: '33%',
+            itemStyle: {
+              normal: {
+                barBorderRadius: 16 * scale,
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  x1: 1,
+                  colorStops: [{
+                    offset: 0,
+                    color: '#6fd9d0'
+                  }, {
+                    offset: 1,
+                    color: '#6fd9d0'
+                  }]
+                }
+              },
+            },
+            max: 1,
+            labelLine: {
+              show: true,
+            },
+            z: 2,
+            data: data.cost,
+          }]
+        })
+      },
+      searchdata() {
+        let warndata = DataSql.getData(this,'warningcount',{}, 'resdata')
+        co(warndata)
+        let sqldata = DataSql.getData(this, 'monitor',{}, 'monitordata')
+        co(sqldata)
+      },
+      scale() {
+        var l = this.monitordata1[1]
+        for (var i = 1; i < 5; i++) {
+          l = l + this.monitordata1[i + 1]
+          if (l < this.monitordata1[i + 1]) {
+            l = this.monitordata1[i + 1]
+          }
+        }
+        l = l * 1.3
+        for (var i = 1; i < 6; i++) {
+          if (this.monitordata1[i] == 0 || l == 0) {
+            this.monitorscale[i] = 0
+            continue
+          }
+          this.monitorscale[i] = this.monitordata1[i] / l
+        }
+        this.monitorscale[0] = 0
+      },
+    },
+    watch: {
+      'resdata': {
+        deep: true,
+        handler(val) {
+          this.warn = this.resdata[0].warn
+          this.suspicious = this.resdata[0].suspicious
+          this.$parent.loaddata++
+        }
+      },
+      'monitordata': {
+        deep: true,
+        handler(val) {
+          let s = []
+          for (var i = 1; i < 6; i++) {
+            s[i] = this.monitordata[0][this.grade[i]]
+          }
+          this.monitordata1 = s
+          this.scale()
+          this.setBar()
+          this.$parent.loaddata++
+        }
+      },
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            // this.$parent.$parent.changeresize(this.xc)
+          }
+        },
+      }
+    },
+    ready() {
+      this.searchdata()
+    }
+  }
+</script>
+
+<style scoped>
+  @media screen and (max-width: 1920px) {
+    .label {
+      font-size: 1.85rem;
+      color: #fff;
+      height: 8%;
+      width: 100%;
+      margin-left: 6%;
+    }
+
+    .flex {
+      /*flex 布局*/
+      display: flex;
+      /*实现垂直居中*/
+      align-items: center;
+      /*实现水平居中*/
+      justify-content: center;
+      text-align: justify;
+      margin: 0 auto;
+    }
+
+    .font-style {
+      font-size: 1.4rem;
+      font-stretch: normal;
+      letter-spacing: 0px;
+      color: #ffffff;
+    }
+
+    .d1 {
+      height: 8%;
+      margin-left: 40%;
+    }
+
+    .d2 {
+      height: 91%;
+      padding-right: 1%;
+      padding-top: 1%;
+    }
+
+    .f24 {
+      font-size: 2rem;
+      color: #f3c832;
+    }
+
+    .f16 {
+      font-size: 1.4rem;
+      color: #ffffff;
+    }
+
+    .fleft {
+      font-size: 1.4rem;
+      color: #ffffff;
+      display: inline-block;
+      width: 30%;
+      float: left;
+      text-align: right;
+    }
+
+    .fright {
+      font-size: 1.4rem;
+      color: #ffffff;
+      display: inline-block;
+      float: right;
+      width: 30%;
+      text-align: right;
+    }
+
+    select {
+      padding-left: 1%;
+      border: none;
+      appearance: none;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      background-color: #001521;
+      background: url('../../../../static/ManageHomePic/图层5拷贝4.png') no-repeat right center;
+      color: #15dce2;
+      font-size: 1.4rem;
+      width: 10%;
+    }
+
+    #monitor {
+      height: 88%;
+      width: 110%;
+    }
+  }
+  @media screen and (max-width: 1366px) {
+    .label {
+      font-size: 1.85rem;
+      color: #fff;
+      height: 8%;
+      width: 100%;
+      margin-left: 6%;
+    }
+
+    .flex {
+      /*flex 布局*/
+      display: flex;
+      /*实现垂直居中*/
+      align-items: center;
+      /*实现水平居中*/
+      justify-content: center;
+      text-align: justify;
+      margin: 0 auto;
+    }
+
+    .font-style {
+      font-size: 1rem;
+      font-stretch: normal;
+      letter-spacing: 0px;
+      color: #ffffff;
+    }
+
+    .d1 {
+      height: 8%;
+      margin-left: 40%;
+    }
+
+    .d2 {
+      height: 91%;
+      padding-right: 1%;
+      padding-top: 1%;
+    }
+
+    .f24 {
+      font-size: 1.6rem;
+      color: #f3c832;
+    }
+
+    .f16 {
+      font-size: 1rem;
+      color: #ffffff;
+    }
+
+    .fleft {
+      font-size: 1rem;
+      color: #ffffff;
+      display: inline-block;
+      width: 30%;
+      float: left;
+      text-align: right;
+    }
+
+    .fright {
+      font-size: 1rem;
+      color: #ffffff;
+      display: inline-block;
+      float: right;
+      width: 30%;
+      text-align: right;
+    }
+
+    select {
+      padding-left: 1%;
+      border: none;
+      appearance: none;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      background-color: #001521;
+      background: url('../../../../static/ManageHomePic/图层5拷贝4.png') no-repeat right center;
+      color: #15dce2;
+      font-size: 1rem;
+      width: 10%;
+    }
+
+    #monitor {
+      height: 88%;
+      width: 110%;
+    }
+  }
+
+
+</style>