hitch-sb-antd/src/views/opc/modules/BaseChartInfo.vue

<template>
  <a-modal
    title="历史曲线"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :footer="null"
    :width="1200"
    @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
                    show-time
                    :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN"
                    v-model="queryParam.createdTimeEnd" />
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item label="时间跨度" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
                  <a-select v-model="queryParam.searchType" style="width: 120px">
                    <a-select-option value="1">
                      1小时
                    </a-select-option>
                    <a-select-option value="2">
                      2小时
                    </a-select-option>
                    <a-select-option value="3">
                      3小时
                    </a-select-option>
                  </a-select>
                </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'
import { queryRemoteOpcLogHisory } from '@/api/remote/opc-log'

export default {
  data () {
    return {
      form: this.$form.createForm(this),
      visible: false,
      confirmLoading: false,
      queryParam: {
        searchType: '1',
        createdTimeEnd: this.BaseTool.Date.formatter(new Date(), this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)
      },
      remoteOpc: null,
      positionNum: null,
      chart1: null,
      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 (remoteOpc) {
      this.visible = true
      this.remoteOpc = remoteOpc
      this.queryParam.createdTimeEnd = this.BaseTool.Date.formatter(new Date(), this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)
      console.log(this.queryParam.createdTimeEnd)
      this.getInfo()
      /* this.$nextTick(() => {
        this.createChart(this.dataList)
      }) */
    },
    getInfo () {
      this.queryParam.createdTimeEnd = this.queryParam.createdTimeEnd ? this.BaseTool.Date.formatter(this.queryParam.createdTimeEnd, this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN) : null
      this.queryParam.positionNum = this.remoteOpc.positionNum
      if (this.queryParam.createdTimeEnd == null) {
        this.$message.error('请选择查询时间')
        return
      }
      if (this.queryParam.searchType == null) {
        this.$message.error('请选择时间跨度')
        return
      }
      queryRemoteOpcLogHisory(this.queryParam)
        .then((res) => {
          if (res.data == null || res.data.length === 0) {
            this.$message.error('无数据')
            return
          }
          const data = []
          res.data.filter(item => data.push({ time: item.createdTime, value: item.result, type: this.remoteOpc.sbName }))
          this.dataList = data
          if (this.dataList != null && this.dataList.length > 0) {
            this.createChart(this.dataList)
          }
        })
    },
    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.chart1 && this.chart1.destroy()
      this.queryParam = {
        searchType: '1'

      }
      this.visible = false
    }
  }
}
</script>

<style>

</style>