manage-client 3.2.89-aode → 3.2.89-aodeToV4

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

@@ -1,329 +1,329 @@
-<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 class="col-sm-3 flex">
-          <div class="row flex">
-            <span class="font-style f24" style="margin-bottom: 5%;">{{warn}}</span>
-            <span class="font-style f16">警告用户</span>
-          </div>
-          <div class="row flex">
-            <span class="font-style f24" style="margin-bottom: 5%;">{{suspicious}}</span>
-            <span class="font-style f16">可疑用户</span>
-          </div>
-        </div>
-        <div class="col-sm-9 flex" style="height: 100%;padding-top: 3%">
-          <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,
-    },
-    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 = 0.8
-        var data = {
-          grade: this.grade,
-          visits: this.monitordata1,
-          totalCost: [1, 1, 1, 1, 1, 1],
-          cost: this.monitorscale,
-        }
-        var rich = {
-          blue: {
-            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: '0',
-            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>
-  .monitor {
-
-  }
-
-  .label {
-    font-size: 0.85em;
-    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: 0.4em;
-    font-stretch: normal;
-    letter-spacing: 0px;
-    color: #ffffff;
-  }
-
-  .d1 {
-    height: 8%;
-    margin-left: 40%;
-  }
-
-  .d2 {
-    height: 81%;
-    padding-right: 1%;
-    padding-top: 1%;
-  }
-
-  .f24 {
-    font-size: 0.75rem;
-    color: #f3c832;
-  }
-
-  .f16 {
-    font-size: 0.75rem;
-    color: #ffffff;
-  }
-
-  .fleft {
-    font-size: 0.75rem;
-    color: #ffffff;
-    display: inline-block;
-    width: 30%;
-    float: left;
-    text-align: right;
-  }
-
-  .fright {
-    font-size: 0.75em;
-    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: 0.75em;
-    width: 10%;
-  }
-
-  #monitor {
-    height: 88%;
-    width: 100%;
-  }
-</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 class="col-sm-3 flex">
+          <div class="row flex">
+            <span class="font-style f24" style="margin-bottom: 5%;">{{warn}}</span>
+            <span class="font-style f16">警告用户</span>
+          </div>
+          <div class="row flex">
+            <span class="font-style f24" style="margin-bottom: 5%;">{{suspicious}}</span>
+            <span class="font-style f16">可疑用户</span>
+          </div>
+        </div>
+        <div class="col-sm-9 flex" style="height: 100%;padding-top: 3%">
+          <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,
+    },
+    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 = 0.8
+        var data = {
+          grade: this.grade,
+          visits: this.monitordata1,
+          totalCost: [1, 1, 1, 1, 1, 1],
+          cost: this.monitorscale,
+        }
+        var rich = {
+          blue: {
+            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: '0',
+            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>
+  .monitor {
+
+  }
+
+  .label {
+    font-size: 0.85em;
+    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: 0.4em;
+    font-stretch: normal;
+    letter-spacing: 0px;
+    color: #ffffff;
+  }
+
+  .d1 {
+    height: 8%;
+    margin-left: 40%;
+  }
+
+  .d2 {
+    height: 81%;
+    padding-right: 1%;
+    padding-top: 1%;
+  }
+
+  .f24 {
+    font-size: 0.75rem;
+    color: #f3c832;
+  }
+
+  .f16 {
+    font-size: 0.75rem;
+    color: #ffffff;
+  }
+
+  .fleft {
+    font-size: 0.75rem;
+    color: #ffffff;
+    display: inline-block;
+    width: 30%;
+    float: left;
+    text-align: right;
+  }
+
+  .fright {
+    font-size: 0.75em;
+    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: 0.75em;
+    width: 10%;
+  }
+
+  #monitor {
+    height: 88%;
+    width: 100%;
+  }
+</style>