manage-client 3.2.91-1 → 3.2.91-aode

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

@@ -1,148 +1,65 @@
 <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 id="charts">
+    <div id="exception" style=" height: 98%;width: 98%;padding: 1% 1%;"></div>
   </div>
 </template>
 
 <script>
   import * as Util from '../../../../Util'
   import co from 'co'
+  import echarts from 'echarts'
   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}},
+      {data: {condition: condition, groupname: self.groupname, 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)
+      console.log('开始进行图表重新选渲染')
+      let name = []
+      let type1 = []
+      let type1_lv = []
+      let type2 = []
+      let type2_lv = []
+      let type3 = []
+      let type3_lv = []
+      let type4 = []
+      let type4_lv = []
+      let type5 = []
+      let type5_lv = []
+      let type6 = []
+      let type6_lv = []
+      let type7 = []
+      let type7_lv = []
+      let type8 = []
+      let type8_lv = []
+      let type9 = []
+      let type9_lv = []
+      for (var i = 0; i < res.data.length; i++) {
+        name[i] = res.data[i].f_insert_date
+        type1[i] = res.data[i].type1
+        type1_lv[i] = res.data[i].type1_lv
+        type2[i] = res.data[i].type2
+        type2_lv[i] = res.data[i].type2_lv
+        type3[i] = res.data[i].type3
+        type3_lv[i] = res.data[i].type3_lv
+        type4[i] = res.data[i].type4
+        type4_lv[i] = res.data[i].type4_lv
+        type5[i] = res.data[i].type5
+        type5_lv[i] = res.data[i].type5_lv
+        type6[i] = res.data[i].type6
+        type6_lv[i] = res.data[i].type6_lv
+        type7[i] = res.data[i].type7
+        type7_lv[i] = res.data[i].type7_lv
+        type8[i] = res.data[i].type8
+        type8_lv[i] = res.data[i].type8_lv
+        type9[i] = res.data[i].type9
+        type9_lv[i] = res.data[i].type9_lv
+      }
+      self.set(name, type1, type1_lv, type2, type2_lv, type3, type3_lv, type4, type4_lv,
+        type5, type5_lv, type6, type6_lv, type7, type7_lv, type8, type8_lv, type9, type9_lv)
     })
   }
   export default {
@@ -174,7 +91,8 @@
       }
     },
     methods: {
-      set(type,data,tit) {
+      set(name, type1, type1_lv, type2, type2_lv, type3, type3_lv, type4, type4_lv,
+          type5, type5_lv, type6, type6_lv, type7, type7_lv, type8, type8_lv, type9, type9_lv) {
 
         let name1 = ''
         if (this.groupname === 'year') {
@@ -186,14 +104,7 @@
         } 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 = echarts.init(document.getElementById('exception'))
         this.xc.setOption({
           'title': {
             'text': '异常' + name1 + '分析',
@@ -204,22 +115,168 @@
               fontSize: 20
             }
           },
+          'backgroundColor': '#F8F8FF',
+          'color': '#384757',
           'tooltip': {
             'trigger': 'axis',
             'extraCssText': 'width: auto;height: auto;'
           },
           'legend': {
-            'data': type,
-            type: 'scroll',
-            orient: 'vertical',
-            left: '10%',
-            top: '10%',
-            itemGap: 25
+            'data': [
+              {
+                'name': '拆表上报',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#7d838b',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': '补抄上报',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#233564',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': '锂电低电上报',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#ffaa00',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E7上报',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#FD2234',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E8上报',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#AE3345',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E16上报',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#Bc0',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E21上报',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#dedfda',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E23上报',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#ffaaff',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': '其他上报',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#daaaaa',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': '拆表上报率',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#7d838b',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': '补抄上报率',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#233564',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': '锂电低电上报率',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#ffaa00',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E7上报率',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#FD2234',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E8上报率',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#AE3345',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E16上报率',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#Bc0',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E21上报率',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#dedfda',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': 'E23上报率',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#ffaaff',
+                  fontSize: 20
+                }
+              },
+              {
+                'name': '其他上报率',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#daaaaa',
+                  fontSize: 20
+                }
+              }
+            ],
+            'top': '10%',
+            'textStyle': {
+              'color': '#fff'
+            }
           },
           'xAxis': [
             {
               'type': 'category',
-              'data': tit,
+              'data': name,
               'name': '时间',
               'axisPointer': {
                 'type': 'shadow'
@@ -251,7 +308,7 @@
             },
             {
               'type': 'value',
-              'name': '比率%',
+              'name': '概率%',
               nameTextStyle: {
                 fontSize: 15
               },
@@ -266,9 +323,376 @@
             }
           ],
           'grid': {
-            left: '30%', top: "18%", bottom: "5%", right: "5%", containLabel: true
+            'top': '20%'
           },
-          'series': data
+          'series': [
+            {
+              'name': '拆表上报',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'bar',
+              'data': type1,
+              'markPoint': {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'barWidth': 'auto',
+              'itemStyle': {
+                'normal': {
+                  'color': '#7d838b'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': '拆表上报率',
+              'type': 'line',
+              'data': type1_lv,
+              'yAxisIndex': 1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#7d838b',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            },
+            {
+              'name': '补抄上报',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'bar',
+              'data': type2,
+              'markPoint': {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'barWidth': 'auto',
+              'itemStyle': {
+                'normal': {
+                  'color': '#233564'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': '补抄上报率',
+              'type': 'line',
+              'yAxisIndex': 1,
+              'data': type2_lv,
+              'itemStyle': {
+                'normal': {
+                  'color': '#233564',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            },
+            {
+              'name': '锂电低电上报',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'bar',
+              'data': type3,
+              'markPoint': {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'barWidth': 'auto',
+              'itemStyle': {
+                'normal': {
+                  'color': '#ffaa00'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': '锂电低电上报率',
+              'type': 'line',
+              'data': type3_lv,
+              'yAxisIndex': 1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#ffaa00',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            },
+            {
+              'name': 'E7上报',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'bar',
+              'data': type4,
+              'markPoint': {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'barWidth': 'auto',
+              'itemStyle': {
+                'normal': {
+                  'color': '#FD2234'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': 'E7上报率',
+              'type': 'line',
+              'data': type4_lv,
+              'yAxisIndex': 1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#FD2234',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            },
+            {
+              'name': 'E8上报',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'bar',
+              'data': type5,
+              'markPoint': {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'barWidth': 'auto',
+              'itemStyle': {
+                'normal': {
+                  'color': '#AE3345'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': 'E8上报率',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'line',
+              'data': type5_lv,
+              'yAxisIndex': 1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#AE3345',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            },
+            {
+              'name': 'E16上报',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'bar',
+              'data': type6,
+              'markPoint': {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'barWidth': 'auto',
+              'itemStyle': {
+                'normal': {
+                  'color': '#Bc0'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': 'E16上报率',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'line',
+              'data': type6_lv,
+              'yAxisIndex': 1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#Bc0',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            },
+            {
+              'name': 'E21上报',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'bar',
+              'data': type7,
+              'markPoint': {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'barWidth': 'auto',
+              'itemStyle': {
+                'normal': {
+                  'color': '#dedfda'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': 'E21上报率',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'line',
+              'data': type7_lv,
+              'yAxisIndex': 1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#dedfda',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            },
+            {
+              'name': 'E23上报',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'bar',
+              'data': type8,
+              'markPoint': {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'barWidth': 'auto',
+              'itemStyle': {
+                'normal': {
+                  'color': '#ffaaff'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': 'E23上报率',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'line',
+              'data': type8_lv,
+              'yAxisIndex': 1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#ffaaff',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            },
+            {
+              'name': '其他上报',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'bar',
+              'data': type9,
+              'markPoint': {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'barWidth': 'auto',
+              'itemStyle': {
+                'normal': {
+                  'color': '#daaaaa'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': '其他上报率',
+              nameTextStyle: {
+                fontSize: 15
+              },
+              'type': 'line',
+              'data': type9_lv,
+              'yAxisIndex': 1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#daaaaa',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            }
+          ]
         })
       },
       searchdata(condition) {