From c798f93ca1b17046e7d7d80396153d1d895fbfca Mon Sep 17 00:00:00 2001
From: xu_lw <xu_lw@murongtech.com>
Date: Tue, 3 Sep 2019 11:25:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B5=81=E9=87=8F=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E5=8F=8A=E5=AE=89=E5=85=A8=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opn/opnstrategyflowinf-monitor.vue        | 259 ++++++++++++++++++
 .../views/modules/opn/opnstrategyflowinf.vue  |   1 +
 2 files changed, 260 insertions(+)
 create mode 100644 console-web/src/views/modules/opn/opnstrategyflowinf-monitor.vue

diff --git a/console-web/src/views/modules/opn/opnstrategyflowinf-monitor.vue b/console-web/src/views/modules/opn/opnstrategyflowinf-monitor.vue
new file mode 100644
index 00000000..dda544ad
--- /dev/null
+++ b/console-web/src/views/modules/opn/opnstrategyflowinf-monitor.vue
@@ -0,0 +1,259 @@
+<template>
+  <el-dialog title="交易监控" :close-on-click-modal="false" :visible.sync="visible" @open="init01()">
+    <div class="mod-demo-echarts">
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-card>
+            <div id="J_chartLineBox" ref="J_chartLineBox" class="chart-box"></div>
+          </el-card>
+        </el-col>
+        <el-col :span="24">
+          <el-card>
+            <div id="J_chartBarBox" ref="J_chartBarBox" class="chart-box"></div>
+          </el-card>
+        </el-col>
+        <el-col :span="24">
+          <el-card>
+            <div id="J_chartPieBox" ref="J_chartPieBox" class="chart-box"></div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  export default {
+    data() {
+      return {
+        visible: false,
+        chartLine: null,
+        chartBar: null,
+        chartPie: null,
+        chartScatter: null
+      }
+    },
+    activated() {
+      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
+      if (this.chartLine) {
+        this.chartLine.resize()
+      }
+      if (this.chartBar) {
+        this.chartBar.resize()
+      }
+      if (this.chartPie) {
+        this.chartPie.resize()
+      }
+      if (this.chartScatter) {
+        this.chartScatter.resize()
+      }
+    },
+    methods: {
+      init01() {
+
+      },
+      init() {
+        this.visible = true
+        this.$nextTick(function () {
+          this.initChartLine()
+          this.initChartBar()
+          this.initChartPie()
+          this.initChartScatter()
+        })
+      },
+      // 流量趋势图；处理时间趋势图
+      initChartLine() {
+        var option = {
+          'title': {
+            'text': '折线图堆叠'
+          },
+          'tooltip': {
+            'trigger': 'axis'
+          },
+          'legend': {
+            'data': ['流量趋势图', '处理时间趋势图']
+          },
+          'grid': {
+            'left': '3%',
+            'right': '4%',
+            'bottom': '3%',
+            'containLabel': true
+          },
+          'toolbox': {
+            'feature': {
+              'saveAsImage': {}
+            }
+          },
+          'xAxis': {
+            'type': 'category',
+            'boundaryGap': false,
+            'data': ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+          },
+          'yAxis': {
+            'type': 'value'
+          },
+          'series': [
+            {
+              'name': '流量趋势图',
+              'type': 'line',
+              'stack': '总量',
+              'data': [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+              'name': '处理时间趋势图',
+              'type': 'line',
+              'stack': '总量',
+              'data': [220, 182, 191, 234, 290, 330, 310]
+            }
+          ]
+        }
+        // console.log('chartLineBox:' + chartLineBox + ',' + this.$refs.J_chartLineBox)
+        // this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
+        this.chartLine = echarts.init(this.$refs.J_chartLineBox)
+        this.chartLine.setOption(option)
+        window.addEventListener('resize', () => {
+          this.chartLine.resize()
+        })
+      },
+      // 日交易量
+      initChartBar() {
+        var option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          series: [
+            {
+              name: '交易量',
+              type: 'bar',
+              data: [320, 332, 301, 334, 390, 330, 320]
+            }
+          ]
+        }
+        // this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
+        this.chartBar = echarts.init(this.$refs.J_chartBarBox)
+
+        this.chartBar.setOption(option)
+        window.addEventListener('resize', () => {
+          this.chartBar.resize()
+        })
+      },
+      // 交易成功率
+      initChartPie() {
+        var option = {
+          backgroundColor: '#2c343c',
+          title: {
+            text: '交易成功率',
+            left: 'center',
+            top: 20,
+            textStyle: {
+              color: '#ccc'
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+          },
+          visualMap: {
+            show: false,
+            min: 80,
+            max: 600,
+            inRange: {
+              colorLightness: [0, 1]
+            }
+          },
+          series: [
+            {
+              name: '访问来源',
+              type: 'pie',
+              radius: '55%',
+              center: ['50%', '50%'],
+              data: [
+                { value: 335, name: '成功' },
+                { value: 310, name: '失败' }
+              ].sort(function (a, b) { return a.value - b.value }),
+              roseType: 'radius',
+              label: {
+                normal: {
+                  textStyle: {
+                    color: 'rgba(255, 255, 255, 0.3)'
+                  }
+                }
+              },
+              labelLine: {
+                normal: {
+                  lineStyle: {
+                    color: 'rgba(255, 255, 255, 0.3)'
+                  },
+                  smooth: 0.2,
+                  length: 10,
+                  length2: 20
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: '#c23531',
+                  shadowBlur: 200,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+              animationType: 'scale',
+              animationEasing: 'elasticOut',
+              animationDelay: function (idx) {
+                return Math.random() * 200
+              }
+            }
+          ]
+        }
+        this.chartPie = echarts.init(this.$refs.J_chartPieBox)
+        // this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
+        this.chartPie.setOption(option)
+        window.addEventListener('resize', () => {
+          this.chartPie.resize()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+.mod-demo-echarts {
+  > .el-alert {
+    margin-bottom: 10px;
+  }
+  > .el-row {
+    margin-top: -10px;
+    margin-bottom: -10px;
+    .el-col {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+  .chart-box {
+    min-height: 400px;
+  }
+}
+</style>
diff --git a/console-web/src/views/modules/opn/opnstrategyflowinf.vue b/console-web/src/views/modules/opn/opnstrategyflowinf.vue
index e28caad1..7df2b2fc 100644
--- a/console-web/src/views/modules/opn/opnstrategyflowinf.vue
+++ b/console-web/src/views/modules/opn/opnstrategyflowinf.vue
@@ -140,6 +140,7 @@
           if (isGDASucc(data)) {
             this.gatewayList = data.data
             this.dataForm.gateway_id = this.gatewayList[0]['id']
+            this.getDataList01()
           }
         })
       },