hitch-sb-antd/src/views/remote/opc-log/modules/Detail.vue

<template>
  <a-modal
    :title="modalTitle"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    class="ant-modal2"
    @cancel="handleCancel"
    :footer="null"
  >
    <div class="table-operator" style="margin-bottom: 8px;">
      <a-row>
        <a-col :md="16">
          <!--          <a-date-picker
            :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
            @change="onChange"
            v-model="searchDay"/>-->
          <a-select default-value="1" v-model="searchDay" style="width: 120px" @change="onChange">
            <a-select-option value="1">
              5分钟
            </a-select-option>
            <a-select-option value="2">
              15分钟
            </a-select-option>
            <a-select-option value="3">
              1小时
            </a-select-option>
            <!--            <a-select-option value="4">
              3小时
            </a-select-option>
            <a-select-option value="5">
              6小时
            </a-select-option>
            <a-select-option value="6">
              12小时
            </a-select-option>
            <a-select-option value="7">
              24小时
            </a-select-option>
            <a-select-option value="8">
              2天
            </a-select-option>
            <a-select-option value="9">
              7天
            </a-select-option>
            <a-select-option value="10">
              30天
            </a-select-option>-->
          </a-select>
          <a-button
            style="margin-left: 8px"
            v-if="$auth('remote-opc-logs-export')"
            type="primary"
            icon="download"
            :loading="confirmLoading"
            @click="doExport">导出
          </a-button>
        </a-col>
      </a-row>
    </div>
    <a-divider>详情</a-divider>
    <detail-list title="" :col="2">
      <detail-list-item term="点位id">{{ model.sbId }}</detail-list-item>
      <detail-list-item term="点位名称">{{ model.sbName }}</detail-list-item>
      <detail-list-item term="点位">{{ model.positionNum }}</detail-list-item>
      <detail-list-item term="类型">{{ BaseTool.Object.getField(map,model.type) }}</detail-list-item>
      <detail-list-item term="描述">{{ model.description }}</detail-list-item>
      <detail-list-item term="系数">{{ model.ratio }}</detail-list-item>
      <detail-list-item term="单位">{{ model.unit }}</detail-list-item>
      <!--      <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
      <detail-list-item term="年">{{ model.year }}</detail-list-item>
      <detail-list-item term="月">{{ model.month }}</detail-list-item>
      <detail-list-item term="日">{{ model.day }}</detail-list-item>
      <detail-list-item term="时">{{ model.hour }}</detail-list-item>
      <detail-list-item term="实时数值">{{ model.result }}</detail-list-item>
      <detail-list-item term="创建人">{{ model.createdUserId }}</detail-list-item>
      <detail-list-item term="更新人">{{ model.updateUserId }}</detail-list-item>
      <detail-list-item term="更新日期">{{ model.updateTime }}</detail-list-item>-->
    </detail-list>
    <a-divider orientation="left">趋势图</a-divider>
    <div style="width: 100%">
      <div id="container"></div>
    </div>
    <a-divider orientation="left">数据明细</a-divider>
    <div>
      <a-table
        bordered
        :data-source="chartsData"
        :columns="columns"
        tableLayout="auto"
        :scroll="{x: 1, y: BaseTool.Constant.scrollY }"
        rowKey="time">

      </a-table>
    </div>
  </a-modal>
</template>

<script>
import { Chart } from '@antv/g2'
import DetailList from '@/components/tools/DetailList'
import { queryInfluxDBHistory, exportInfluxDBHistory } from '@/api/influxDB/influxDB'
const DetailListItem = DetailList.Item

export default {
  name: 'RemoteDegreeLogDetail',
  components: {
    DetailList,
    Chart,
    DetailListItem
  },
  data () {
    return {
      confirmLoading: false,
      mdl: {},
      modalTitle: null,
      searchDay: 1,
      map: {},
      visible: false,
      // 下拉框map
      model: {
        'sbId': null,
        'sbName': null,
        'positionNum': null,
        'type': null,
        'description': null,
        'result': null,
        'ratio': null,
        'unit': null,
        'time': null,
        'month': null,
        'day': null,
        'hour': null,
        'remark': null,
        'createdUserId': null,
        'updateUserId': null,
        'updateTime': null
      },
      // 表头
      chart: null, // 创建一个chart变量
      chartsData: [],
      columns: [
        {
          title: '时间',
          dataIndex: 'time'
        },
        {
          title: '数值',
          dataIndex: 'value'
        }
      ]
    }
  },
  watch: {
    chartsData: {
      handler (newDate) {
        this.chart.changeData(newDate)
      },
      deep: true
    }
  },
  created () {
    // 下拉框map
    this.map = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REMOTE_OPC)
  },
  methods: {
    base (record) {
      this.visible = true
      this.confirmLoading = true
      this.modalTitle = '详情'
      this.model = record
      this.onChange(1)
    },
    getCharts () {
      this.chart && this.chart.destroy()// 防止点击搜索按钮新增一个
      const data1 = [
        { time: '1991', value: 3 },
        { time: '1992', value: 4 },
        { time: '1993', value: 3.5 },
        { time: '1994', value: 5 },
        { time: '1995', value: 4.9 },
        { time: '1996', value: 6 },
        { time: '1997', value: 7 },
        { time: '1998', value: 9 },
        { time: '1999', value: 13 }
      ]

      // 初始化,指定容器DOM id、高度
      this.chart = new Chart({
        container: 'container',
        autoFit: true,
        width: 1600, // 图标宽度
        height: 400, // 图表高度
        padding: [40, 40, 40, 40]// 图表内边距,依次为:上，右，下，左
      })

      // data 数据
      this.chart.data(this.chartsData)
      // scale 度量配置, 生成坐标轴刻度值

      // tooltip 提示信息，是指当鼠标悬停在图形上时，以提示框的形式展示该点的数据
      this.chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        shared: true
      })

      // 几何图形 Geometry;
      // 使用 line 绘制折线图
      // 使用 position 通道将对应的变量映射到 x 和 y 位置空间上；
      // 使用label 展示value值；
      // this.chart.line().position('time*value').label('value')
      this.chart.line().position('time*value')
      // 使用 point 绘制点
      // 使用 position 将对应的变量映射到 x 和 y 位置空间上；
      this.chart.point().position('time*value')
      this.chart.render()
    },
    onChange (value) {
      this.confirmLoading = true
      this.searchDay = value
      const parameter = {}
      parameter.id = this.model.id
      parameter.type = value
      queryInfluxDBHistory(parameter).then(res => {
        this.model = res.data
        if (this.model.dataJsonStr == null) {
          this.$message.info('无数据')
        }
        this.chartsData = JSON.parse(this.model.dataJsonStr)
        // this.getCharts(this.chartsData)
        this.confirmLoading = false
      }).catch(() => {
        this.confirmLoading = false
      })
    },
    doExport () {
      this.confirmLoading = true
      exportInfluxDBHistory(this.model).then(file => {
        this.BaseTool.UPLOAD.downLoadExportExcel(file)
        this.confirmLoading = false
      })
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.searchDay = 1
      this.chart = null
      this.chartsData = []
      this.$emit('ok')
    }
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0,0,0,.45);
    cursor: pointer;
    transition: color .32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
</style>