manage-client 3.1.46 → 3.1.47

package/src/components/webmeter/newwebmeter/NewException/NewExceptionEcharsTotal.vue

@@ -1,275 +1,288 @@
-<template lang="html">
-
-  <div class="basic-main" style="height: 100%;">
-    <div class="row" style="height: 15%;width: 100%;" v-show="echarts">
-      <div style="width: 70%;display: inline-block;">
-        <button @click="$parent.notShowEcharts()" class="button_clear button_spacing">隐藏图表</button>
-      </div>
-      <!--图显示模板-->
-      <div class="mystyle" style="width: 30%;display: inline-block;">
-        <label class="font_normal_body">图表统计项</label>
-        <v-select :options='$parent.getgroupname' :value.sync="groupname"
-                  close-on-select
-                  id="groupname"
-                  placeholder='分组项'
-                  v-model="groupname"
-                  value-single="true"></v-select>
-      </div>
-    </div>
-    <div style=" height: 80%;width: 98%;">
-      <div id="exception" style="width: 1500px;height: 600px;"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import * as Util from '../../../../Util'
-  import co from 'co'
-  import {HttpResetClass} from 'vue-client'
-
-  let getData = function* (self, condition) {
-    console.log('异常分析图表分析')
-    console.log('异常分析图表分析数据', self)
-    let load = new HttpResetClass()
-    load.load('POST', 'rs/sql/DrillErrorEchars',
-      {data: {condition: condition, groupname: self.groupname[0], startDate: self.startdate, endDate: self.enddate}},
-      {resolveMsg: null, rejectMsg: null}).then((res) => {
-      console.log('开始进行图表重新选渲染', res)
-      let all = res.data
-      let f_error_type = Array.from(new Set(all.map(x => x.f_error_type)))
-      console.log('f_error_type去重后', f_error_type)
-      let f_insert_date = Array.from(new Set(all.map(x => x.f_insert_date)))
-      console.log('f_insert_date去重后', f_insert_date)
-      let type = []
-      let data = []
-      f_error_type.forEach((item,index) => {
-        console.log(index);
-        let R = Math.floor(Math.random() * 255)
-        let G = Math.floor(Math.random() * 255)
-        let B = Math.floor(Math.random() * 255)
-        let r = Math.floor(Math.random() * 255)
-        let g = Math.floor(Math.random() * 255)
-        let b = Math.floor(Math.random() * 255)
-        type.push(
-          {
-            name: item,
-            icon: 'circle',
-            textStyle: {
-              color: 'rgb(' + R + ',' + G + ',' + B + ')',
-              fontSize: 20
-            }
-          },
-          {
-            name: item + '比率',
-            icon: 'circle',
-            textStyle: {
-              color: 'rgb(' + r + ',' + g + ',' + b + ')',
-              fontSize: 20
-            }
-          }
-        )
-        let ls = []
-        let lsbv = []
-        f_insert_date.forEach((r) =>{
-          let sum = all.filter(x => x.f_error_type == item && x.f_insert_date == r).map(x => x.num).reduce((x, y) => x + y, 0)
-          let datesum = all.filter(x => x.f_insert_date == r).map(x => x.num).reduce((x, y) => x + y, 0)
-          console.log('sum------>', sum)
-          console.log('sum------>', datesum)
-          ls.push(sum)
-          lsbv.push(((sum/datesum)*100).toFixed(2))
-        })
-        data.push(
-          {
-            name: item,
-            nameTextStyle: {
-              fontSize: 15
-            },
-            type: 'bar',
-            data: ls,
-            markPoint: {
-              data: [
-                {type: 'max', name: '最大值'},
-                {type: 'min', name: '最小值'}
-              ]
-            },
-            markLine: {
-              data: [
-                {type: 'average', name: '平均值'}
-              ]
-            },
-            barWidth: 'auto',
-            itemStyle: {
-              normal: {
-                color: 'rgb(' + R + ',' + G + ',' + B + ')'
-              }
-            },
-            barGap: '0'
-          },
-          {
-            name: item + '比率',
-            type: 'line',
-            data: lsbv,
-            yAxisIndex: 1,
-            itemStyle: {
-              normal: {
-                color: 'rgb(' + r + ',' + g + ',' + b + ')',
-                fontSize: 10
-              }
-            },
-            smooth: true
-          }
-        )
-        console.log('ls---->', ls)
-        console.log('lsbv---->', lsbv)
-      })
-
-      console.log('组织后的type数据', type)
-      console.log('组织后的data数据', data)
-      console.log('组织后的f_insert_date数据', f_insert_date)
-      self.set(type, data, f_insert_date)
-    })
-  }
-  export default {
-    props: {
-      echarts: {
-        type: Boolean,
-        default: false
-      },
-      startdate: {
-        type: String,
-        default: Util.toStandardDateString()
-      },
-      enddate: {
-        type: String,
-        default: Util.toStandardDateString()
-      },
-      condition: {
-        type: String,
-        default: '1=1'
-      },
-      groupname: {
-        type: String,
-        default: 'year'
-      }
-    },
-    data() {
-      return {
-        xc: ''
-      }
-    },
-    methods: {
-      set(type,data,tit) {
-
-        let name1 = ''
-        if (this.groupname === 'year') {
-          name1 = '年'
-        } else if (this.groupname === 'month') {
-          name1 = '月'
-        } else if (this.groupname === 'week') {
-          name1 = '周'
-        } else {
-          name1 = '日'
-        }
-        const statInfo = document.getElementById('exception') // 获取图表元素
-        statInfo.style.width = window.innerWidth - 200 + "px";  //初始化echarts图表宽度
-        this.xc = this.$echarts.init(statInfo)
-        // 设置宽度自适应
-        window.addEventListener('resize', () => {
-          statInfo.style.width = window.innerWidth - 200 + "px";
-          this.xc.resize();
-        })
-        this.xc.setOption({
-          'title': {
-            'text': '异常' + name1 + '分析',
-            'left': 'center',
-            'y': '10',
-            'textStyle': {
-              'color': '#696969',
-              fontSize: 20
-            }
-          },
-          'tooltip': {
-            'trigger': 'axis',
-            'extraCssText': 'width: auto;height: auto;'
-          },
-          'legend': {
-            'data': type,
-            type: 'scroll',
-            orient: 'vertical',
-            left: '10%',
-            top: '10%',
-            bottom: '20%',
-            'textStyle': {
-              'color': '#fff'
-            }
-          },
-          'xAxis': [
-            {
-              'type': 'category',
-              'data': tit,
-              'name': '时间',
-              'axisPointer': {
-                'type': 'shadow'
-              },
-              'axisLabel': {
-                'show': true,
-                'textStyle': {
-                  'color': '#7d838b',
-                  fontSize: 15
-                }
-              }
-            }
-          ],
-          'yAxis': [
-            {
-              'type': 'value',
-              'name': '异常数',
-              nameTextStyle: {
-                fontSize: 10
-              },
-              'show': true,
-              'axisLabel': {
-                'show': true,
-                'textStyle': {
-                  'color': '#7d838b',
-                  fontSize: 10
-                }
-              }
-            },
-            {
-              'type': 'value',
-              'name': '比率%',
-              nameTextStyle: {
-                fontSize: 15
-              },
-              'show': true,
-              'axisLabel': {
-                'show': true,
-                'textStyle': {
-                  'color': '#ffaa00',
-                  fontSize: 15
-                }
-              }
-            }
-          ],
-          'grid': {
-            left: '30%', top: "18%", bottom: "5%", right: "5%", containLabel: true
-          },
-          'series': data
-        })
-      },
-      searchdata(condition) {
-        let getGen = getData(this, condition)
-        co(getGen)
-      }
-    },
-    watch: {
-      'echarts'(val) {
-        this.searchdata(this.condition)
-      },
-      'groupname'(val) {
-        this.searchdata(this.condition)
-      }
-    }
-  }
-</script>
+<template lang="html">
+
+  <div class="basic-main" style="height: 100%;">
+    <div class="row" style="height: 15%;width: 100%;" v-show="echarts">
+      <div style="width: 50%;display: inline-block;">
+        <button @click="$parent.notShowEcharts()" class="button_clear button_spacing">隐藏图表</button>
+      </div>
+      <!--图显示模板-->
+      <div class="mystyle" style="width: 30%;display: inline-block;">
+        <label class="font_normal_body">图表统计项</label>
+        <v-select :options='$parent.getgroupname' :value.sync="groupname"
+                  close-on-select
+                  id="groupname"
+                  placeholder='分组项'
+                  v-model="groupname"
+                  value-single="true"></v-select>
+      </div>
+    </div>
+    <div style=" height: 80%;width: 98%;">
+      <div id="exception" style="width: 1500px;height: 600px;"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as Util from '../../../../Util'
+  import co from 'co'
+  import {HttpResetClass} from 'vue-client'
+
+  let getData = function* (self, condition) {
+    console.log('异常分析图表分析')
+    console.log('异常分析图表分析数据', self)
+    let colors = ['rgb(213,65,198)',
+                  'rgb(109,26,121)',
+                  'rgb(46,172,231)',
+                  'rgb(207,146,194)',
+                  'rgb(124,129,4)',
+                  'rgb(99,56,201)',
+                  'rgb(35,26,121)',
+                  'rgb(26,121,107)',
+                  'rgb(65,92,116)',
+                  'rgb(199,88,39)',
+                  'rgb(135,97,62)',
+                  'rgb(29,99,163)',
+                  'rgb(140,205,143)',]
+    let load = new HttpResetClass()
+    load.load('POST', 'rs/sql/DrillErrorEchars',
+      {data: {condition: condition, groupname: self.groupname[0], startDate: self.startdate, endDate: self.enddate}},
+      {resolveMsg: null, rejectMsg: null}).then((res) => {
+      console.log('开始进行图表重新选渲染', res)
+      let all = res.data
+      let f_error_type = Array.from(new Set(all.map(x => x.f_error_type)))
+      console.log('f_error_type去重后', f_error_type)
+      let f_insert_date = Array.from(new Set(all.map(x => x.f_insert_date)))
+      console.log('f_insert_date去重后', f_insert_date)
+      let type = []
+      let data = []
+      let colorIndex = 0;
+      f_error_type.forEach((item,index) => {
+        console.log(index);
+        let cola = colors[colorIndex++]
+        let colb = colors[colorIndex++]
+        // let R = Math.floor(Math.random() * 255)
+        // let G = Math.floor(Math.random() * 255)
+        // let B = Math.floor(Math.random() * 255)
+        // let r = Math.floor(Math.random() * 255)
+        // let g = Math.floor(Math.random() * 255)
+        // let b = Math.floor(Math.random() * 255)
+        type.push(
+          {
+            name: item,
+            icon: 'circle',
+            textStyle: {
+              color: cola,
+              fontSize: 20
+            }
+          },
+          {
+            name: item + '比率',
+            icon: 'circle',
+            textStyle: {
+              color: colb,
+              fontSize: 20
+            }
+          }
+        )
+        let ls = []
+        let lsbv = []
+        f_insert_date.forEach((r) =>{
+          let sum = all.filter(x => x.f_error_type == item && x.f_insert_date == r).map(x => x.num).reduce((x, y) => x + y, 0)
+          let datesum = all.filter(x => x.f_insert_date == r).map(x => x.num).reduce((x, y) => x + y, 0)
+          console.log('sum------>', sum)
+          console.log('sum------>', datesum)
+          ls.push(sum)
+          lsbv.push(((sum/datesum)*100).toFixed(2))
+        })
+        data.push(
+          {
+            name: item,
+            nameTextStyle: {
+              fontSize: 15
+            },
+            type: 'bar',
+            data: ls,
+            markPoint: {
+              data: [
+                {type: 'max', name: '最大值'},
+                {type: 'min', name: '最小值'}
+              ]
+            },
+            markLine: {
+              data: [
+                {type: 'average', name: '平均值'}
+              ]
+            },
+            barWidth: 'auto',
+            itemStyle: {
+              normal: {
+                color: cola
+              }
+            },
+            barGap: '0'
+          },
+          {
+            name: item + '比率',
+            type: 'line',
+            data: lsbv,
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: colb,
+                fontSize: 10
+              }
+            },
+            smooth: true
+          }
+        )
+        console.log('ls---->', ls)
+        console.log('lsbv---->', lsbv)
+      })
+
+      console.log('组织后的type数据', type)
+      console.log('组织后的data数据', data)
+      console.log('组织后的f_insert_date数据', f_insert_date)
+      self.set(type, data, f_insert_date)
+    })
+  }
+  export default {
+    props: {
+      echarts: {
+        type: Boolean,
+        default: false
+      },
+      startdate: {
+        type: String,
+        default: Util.toStandardDateString()
+      },
+      enddate: {
+        type: String,
+        default: Util.toStandardDateString()
+      },
+      condition: {
+        type: String,
+        default: '1=1'
+      },
+      groupname: {
+        type: String,
+        default: 'year'
+      }
+    },
+    data() {
+      return {
+        xc: ''
+      }
+    },
+    methods: {
+      set(type,data,tit) {
+
+        let name1 = ''
+        if (this.groupname === 'year') {
+          name1 = '年'
+        } else if (this.groupname === 'month') {
+          name1 = '月'
+        } else if (this.groupname === 'week') {
+          name1 = '周'
+        } else {
+          name1 = '日'
+        }
+        const statInfo = document.getElementById('exception') // 获取图表元素
+        statInfo.style.width = window.innerWidth - 200 + "px";  //初始化echarts图表宽度
+        this.xc = this.$echarts.init(statInfo)
+        // 设置宽度自适应
+        window.addEventListener('resize', () => {
+          statInfo.style.width = window.innerWidth - 200 + "px";
+          this.xc.resize();
+        })
+        this.xc.setOption({
+          'title': {
+            'text': '异常' + name1 + '分析',
+            'left': 'center',
+            'y': '10',
+            'textStyle': {
+              'color': '#696969',
+              fontSize: 20
+            }
+          },
+          'tooltip': {
+            'trigger': 'axis',
+            'extraCssText': 'width: auto;height: auto;'
+          },
+          'legend': {
+            'data': type,
+            type: 'scroll',
+            orient: 'vertical',
+            left: '10%',
+            top: '10%',
+            itemGap: 25
+          },
+          'xAxis': [
+            {
+              'type': 'category',
+              'data': tit,
+              'name': '时间',
+              'axisPointer': {
+                'type': 'shadow'
+              },
+              'axisLabel': {
+                'show': true,
+                'textStyle': {
+                  'color': '#7d838b',
+                  fontSize: 15
+                }
+              }
+            }
+          ],
+          'yAxis': [
+            {
+              'type': 'value',
+              'name': '异常数',
+              nameTextStyle: {
+                fontSize: 10
+              },
+              'show': true,
+              'axisLabel': {
+                'show': true,
+                'textStyle': {
+                  'color': '#7d838b',
+                  fontSize: 10
+                }
+              }
+            },
+            {
+              'type': 'value',
+              'name': '比率%',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'show': true,
+              'axisLabel': {
+                'show': true,
+                'textStyle': {
+                  'color': '#ffaa00',
+                  fontSize: 15
+                }
+              }
+            }
+          ],
+          'grid': {
+            left: '30%', top: "18%", bottom: "5%", right: "5%", containLabel: true
+          },
+          'series': data
+        })
+      },
+      searchdata(condition) {
+        let getGen = getData(this, condition)
+        co(getGen)
+      }
+    },
+    watch: {
+      'echarts'(val) {
+        this.searchdata(this.condition)
+      },
+      'groupname'(val) {
+        this.searchdata(this.condition)
+      }
+    }
+  }
+</script>