完善

src/views/opc/Opc.vue

@@ -23,7 +23,7 @@
           <template slot="title">
             {{ item.positionNum }}
           </template>
-          <div class="info"> {{ item.positionNum }}</div>
+          <div class="info" @click="handleInfo"> {{ item.positionNum }}</div>
         </a-tooltip>
       </VueDragResize>
     </div>
@@ -62,6 +62,7 @@
         </span>
       </a-table>
     </a-drawer>
+    <BaseChartInfo ref="baseChartInfo" @ok="handleOk"/>
   </div>
 </template>
 
@@ -69,11 +70,13 @@
 import VueDragResize from 'vue-drag-resize'
 import { getSbPositionTree, fetchSbPosition } from '@/api/sb/position'
 import { queryRemoteOpc, updateRemoteOpc } from '@/api/remote/opc'
-
+import BaseChartInfo from './modules/BaseChartInfo.vue'
 export default {
   name: 'Opc',
   components: {
-    VueDragResize
+    VueDragResize,
+    BaseChartInfo
+
   },
   data () {
     return {
@@ -98,7 +101,9 @@ export default {
     }
   },
   created () {
+    this.positionId = this.$route.query.line
     this.setTree()
+    this.getOpcInfo()
   },
   methods: {
     resize (newRect) {
@@ -145,8 +150,14 @@ export default {
       getSbPositionTree({ opcFlag: 1 }).then(res => {
         this.treeData = res.data
       })
-    }
+    },
+    handleInfo () {
+      const model = this.$refs.baseChartInfo
+      model.base()
+    },
+    handleOk () {
 
+    }
   }
 }
 </script>

src/views/opc/modules/BaseChartInfo.vue

@@ -0,0 +1,144 @@
+<template>
+  <a-modal
+    title="历史曲线"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :footer="null"
+    :width="800"
+    @cancel="handleCancel"
+  >
+    <div class="chart">
+      <a-row type="flex" justify="space-between">
+        <a-col :span="24">
+          <a-form :form="form">
+            <a-row type="flex" justify="end">
+              <a-col :span="10">
+                <a-form-item label="开始时间" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+                  <a-date-picker
+                    :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN"
+                    v-model="queryParam.searchStartTime" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="10">
+                <a-form-item label="结束时间" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+                  <a-date-picker
+                    :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN"
+                    v-model="queryParam.searchEndTime" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="3">
+                <a-form-item >
+                  <a-button type="primary" @click="getInfo">查询</a-button>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+      </a-row>
+      <div>
+        <div id="chart"></div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { Chart } from '@antv/g2'
+
+export default {
+  data () {
+    return {
+      form: this.$form.createForm(this),
+      visible: false,
+      confirmLoading: false,
+      queryParam: {},
+      chart1: null,
+      dataList1: [],
+      dataList: [
+        { time: '2009/7/20 0:00', value: 32, type: 'aa' },
+        { time: '2009/7/20 1:00', value: 8, type: 'bb' },
+        { time: '2009/7/20 2:00', value: 28, type: 'aa' },
+        { time: '2009/7/20 2:00', value: 6, type: 'bb' },
+        { time: '2009/7/20 4:00', value: 5, type: 'aa' },
+        { time: '2009/7/20 4:00', value: 13, type: 'bb' },
+        { time: '2009/7/20 6:00', value: 12, type: 'aa' },
+        { time: '2009/7/20 6:00', value: 31, type: 'bb' },
+        { time: '2009/7/20 8:00', value: 1, type: 'aa' },
+        { time: '2009/7/20 8:00', value: 16, type: 'bb' }
+      ]
+    }
+  },
+  created () {
+  },
+  mounted () {
+
+  },
+  methods: {
+    base () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.createChart(this.dataList)
+      })
+    },
+    getInfo () {
+
+    },
+    createChart (data) {
+      this.chart1 && this.chart1.destroy()
+      this.chart1 = new Chart({
+        container: 'chart',
+        autoFit: true,
+        height: 440,
+        padding: [16, 50, 64]
+      })
+      this.chart1.data(data)
+      this.chart1.scale({
+        time: {
+          type: 'time',
+          tickCount: 8,
+          mask: 'M/DD HH:mm'
+        },
+        value: {
+          min: 0
+        }
+      })
+      this.chart1.legend({
+        position: 'top',
+        offsetY: 4
+      })
+
+      this.chart1.tooltip({
+        showCrosshairs: true,
+        shared: true
+      })
+
+      this.chart1.option('slider', {
+        start: 0.001,
+        end: 1,
+        trendCfg: {
+          isArea: false
+        }
+      })
+
+      this.chart1
+        .line()
+        .position('time*value')
+        .color('type')
+      this.chart1.interaction('element-visible-filter')
+      this.chart1
+        .point()
+        .color('type')
+        .position('time*value')
+      this.chart1.render()
+    },
+    handleCancel (e) {
+      console.log('Clicked cancel button')
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>