manage-client 3.2.86-aode → 3.2.86-aodeToV4

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

@@ -1,301 +1,301 @@
-<template>
-  <div class="monitor">
-    <div>
-      <div class="label t1" @click="drillclick">{{title}}</div>
-      <div class="d1">
-        <!--<select v-model="date">-->
-        <!--<option :value="date" v-for="s in date" >{{s}}年</option>-->
-        <!--</select>-->
-      </div>
-      <div class="d2">
-        <div id="caveat"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import * as Util from '../../../Util'
-  import co from 'co'
-  import * as DataSql from '../../../stores/DataSql'
-
-  export default {
-    name: "Caveat",
-    props: {
-      showdate: {
-        type: Boolean,
-        default: false
-      },
-      listenheight: String,
-    },
-    data() {
-      return {
-        date: [2018, 2017, 2016],
-        title: '警告',
-        xc: '',
-        monitortotal: '',
-        monitordata: [],
-        monitorscale: [],
-        grade: ['警告类型', '关阀走气', '过流保护关阀', '周期关阀', '报警关阀', '磁干扰'],
-        monitortag0: false,
-        resdata: []
-      }
-    },
-    methods: {
-      setBar(id) {
-        this.xc = this.$echarts.init(document.getElementById(id))
-        var scale=this.$parent.$parent.$parent.scale*1.2
-        var data = {
-          grade: this.grade,
-          visits: this.monitordata,
-          totalCost: [1, 1, 1, 1, 1, 1],
-          cost: this.monitorscale,
-        }
-        var rich = {
-          blue: {
-            fontSize:16*scale,
-            color: '#15dce2'
-          },
-          white: {
-            fontSize:12*scale,
-            color: '#fff'
-          }
-        }
-        this.xc.setOption({
-          title: {
-            // top: '5%',
-            left: 'center',
-            text: '',
-            textStyle: {
-              align: 'center',
-              color: '#15dce2',
-              fontSize: 12 * scale
-            }
-          },
-          grid: {
-            left: '25%',
-            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',
-                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 sqldata = DataSql.getData(this,"monitor",{}, "resdata")
-        co(sqldata)
-      },
-      scale() {
-        var l = this.monitordata[1]
-        this.monitortotal = l
-        for (var i = 1; i < 5; i++) {
-          this.monitortotal = this.monitortotal + this.monitordata[i + 1]
-          if (l < this.monitordata[i + 1]) {
-            l = this.monitordata[i + 1]
-          }
-        }
-        l = l * 1.3
-        for (var i = 1; i < 6; i++) {
-          if (this.monitordata[i] == 0 || l == 0) {
-            this.monitorscale[i] = 0
-            continue
-          }
-          this.monitorscale[i] = this.monitordata[i] / l
-        }
-        this.monitorscale[0] = 0
-      },
-      // 钻取入口
-      drillclick() {
-        console.log(this.title)
-        var total = []
-
-        for (var i = 0; i < this.grade.length; i++) {
-          if (this.grade[i] == '警告类型') {
-            continue
-          }
-          let item = {}
-          item.name = this.grade[i]
-          item.value = this.monitordata[i]
-          total.push(item)
-        }
-        var initdatatr = {
-          startDate: eval(Util.toStandardDateString().toString().substring(0, 4) + '-1') + '-01-01 00:00:00',
-          endDate: Util.toStandardDateString() + ' 00:00:00',
-          param: '',
-          param1: '',
-          listparam: ' (f_magneticInterference=1 or f_alarmShutValve=1 or f_cycleShutValue=1 or f_overCurrentProtection=1 or ' +
-          'f_leakageFlag=1  ) and '
-        }
-        this.$emit('drill', 'caveat', 'caveat', this.title, initdatatr)
-        this.$emit('drilldata', total)
-      },
-    },
-    watch: {
-      'resdata': {
-        deep: true,
-        handler(val) {
-          let s = []
-          var num = 0
-          for (var i = 0; i < 6; i++) {
-            if (i == 0) {
-              s[i] = 0
-            } else {
-              s[i] = this.resdata[0][this.grade[i]]
-              num = num + s[i]
-            }
-          }
-          this.monitordata = s
-          this.$parent.warningnum = this.$parent.warningnum + num
-          console.log(this.monitordata, num, '警告用户数')
-        }
-      },
-      'monitordata': {
-        deep: true,
-        handler(val) {
-          this.scale()
-          this.setBar('caveat')
-          this.$parent.loaddata++
-        }
-      },
-      'listenheight': {
-        deep: true,
-        handler(val) {
-          if (this.listenheight !== '') {
-            // this.$parent.$parent.changeresize(this.xc)
-          }
-        },
-        immediate: true
-      }
-    },
-    ready() {
-      this.searchdata()
-    }
-  }
-</script>
-
-<style scoped>
-  .label {
-    font-size: 0.85em;
-    color: #fff;
-    height: 8%;
-    width: 100%;
-    margin-left: 6%;
-  }
-
-  .d1 {
-    height: 8%;
-    margin-left: 15%;
-  }
-
-  .d2 {
-    height: 81%;
-    padding-right: 1%;
-    padding-top: 1%;
-  }
-
-  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: #fff;
-    font-size: 0.75em;
-    width: 23%;
-  }
-
-  #Caveat {
-    height: 100%;
-    width: 100%;
-  }
-  .t1{
-    color: #4bf2ff;
-  }
-</style>
+<template>
+  <div class="monitor">
+    <div>
+      <div class="label t1" @click="drillclick">{{title}}</div>
+      <div class="d1">
+        <!--<select v-model="date">-->
+        <!--<option :value="date" v-for="s in date" >{{s}}年</option>-->
+        <!--</select>-->
+      </div>
+      <div class="d2">
+        <div id="caveat"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as Util from '../../../Util'
+  import co from 'co'
+  import * as DataSql from '../../../stores/DataSql'
+
+  export default {
+    name: "Caveat",
+    props: {
+      showdate: {
+        type: Boolean,
+        default: false
+      },
+      listenheight: String,
+    },
+    data() {
+      return {
+        date: [2018, 2017, 2016],
+        title: '警告',
+        xc: '',
+        monitortotal: '',
+        monitordata: [],
+        monitorscale: [],
+        grade: ['警告类型', '关阀走气', '过流保护关阀', '周期关阀', '报警关阀', '磁干扰'],
+        monitortag0: false,
+        resdata: []
+      }
+    },
+    methods: {
+      setBar(id) {
+        this.xc = this.$echarts.init(document.getElementById(id))
+        var scale=this.$parent.$parent.$parent.scale*1.2
+        var data = {
+          grade: this.grade,
+          visits: this.monitordata,
+          totalCost: [1, 1, 1, 1, 1, 1],
+          cost: this.monitorscale,
+        }
+        var rich = {
+          blue: {
+            fontSize:16*scale,
+            color: '#15dce2'
+          },
+          white: {
+            fontSize:12*scale,
+            color: '#fff'
+          }
+        }
+        this.xc.setOption({
+          title: {
+            // top: '5%',
+            left: 'center',
+            text: '',
+            textStyle: {
+              align: 'center',
+              color: '#15dce2',
+              fontSize: 12 * scale
+            }
+          },
+          grid: {
+            left: '25%',
+            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',
+                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 sqldata = DataSql.getData(this,"monitor",{}, "resdata")
+        co(sqldata)
+      },
+      scale() {
+        var l = this.monitordata[1]
+        this.monitortotal = l
+        for (var i = 1; i < 5; i++) {
+          this.monitortotal = this.monitortotal + this.monitordata[i + 1]
+          if (l < this.monitordata[i + 1]) {
+            l = this.monitordata[i + 1]
+          }
+        }
+        l = l * 1.3
+        for (var i = 1; i < 6; i++) {
+          if (this.monitordata[i] == 0 || l == 0) {
+            this.monitorscale[i] = 0
+            continue
+          }
+          this.monitorscale[i] = this.monitordata[i] / l
+        }
+        this.monitorscale[0] = 0
+      },
+      // 钻取入口
+      drillclick() {
+        console.log(this.title)
+        var total = []
+
+        for (var i = 0; i < this.grade.length; i++) {
+          if (this.grade[i] == '警告类型') {
+            continue
+          }
+          let item = {}
+          item.name = this.grade[i]
+          item.value = this.monitordata[i]
+          total.push(item)
+        }
+        var initdatatr = {
+          startDate: eval(Util.toStandardDateString().toString().substring(0, 4) + '-1') + '-01-01 00:00:00',
+          endDate: Util.toStandardDateString() + ' 00:00:00',
+          param: '',
+          param1: '',
+          listparam: ' (f_magneticInterference=1 or f_alarmShutValve=1 or f_cycleShutValue=1 or f_overCurrentProtection=1 or ' +
+          'f_leakageFlag=1  ) and '
+        }
+        this.$emit('drill', 'caveat', 'caveat', this.title, initdatatr)
+        this.$emit('drilldata', total)
+      },
+    },
+    watch: {
+      'resdata': {
+        deep: true,
+        handler(val) {
+          let s = []
+          var num = 0
+          for (var i = 0; i < 6; i++) {
+            if (i == 0) {
+              s[i] = 0
+            } else {
+              s[i] = this.resdata[0][this.grade[i]]
+              num = num + s[i]
+            }
+          }
+          this.monitordata = s
+          this.$parent.warningnum = this.$parent.warningnum + num
+          console.log(this.monitordata, num, '警告用户数')
+        }
+      },
+      'monitordata': {
+        deep: true,
+        handler(val) {
+          this.scale()
+          this.setBar('caveat')
+          this.$parent.loaddata++
+        }
+      },
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            // this.$parent.$parent.changeresize(this.xc)
+          }
+        },
+        immediate: true
+      }
+    },
+    ready() {
+      this.searchdata()
+    }
+  }
+</script>
+
+<style scoped>
+  .label {
+    font-size: 0.85em;
+    color: #fff;
+    height: 8%;
+    width: 100%;
+    margin-left: 6%;
+  }
+
+  .d1 {
+    height: 8%;
+    margin-left: 15%;
+  }
+
+  .d2 {
+    height: 81%;
+    padding-right: 1%;
+    padding-top: 1%;
+  }
+
+  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: #fff;
+    font-size: 0.75em;
+    width: 23%;
+  }
+
+  #Caveat {
+    height: 100%;
+    width: 100%;
+  }
+  .t1{
+    color: #4bf2ff;
+  }
+</style>