hitch-sb-antd/src/views/opc/Opc.vue

<template>
  <div class="main" @click.ctrl="handleClickAdd">
    <img :src="imgUrl" width="1920px" alt="">
    <div class="icon" style="right:20px">
      <a-button type="primary" icon="appstore" size="large" @click="visibleRight=true" />
    </div>
    <div v-if="dotList !=null && dotList.length>0">
      <VueDragResize
        v-for="item in dotList"
        :key="item.id"
        v-show="item.positionFlag"
        :isActive="item.isActive"
        :w="item.width"
        :h="item.height"
        :minh="20"
        :x="item.xposition"
        :y="item.yposition"
        :isDraggable="item.isActive"
        :isResizable="item.isActive"
        :stickSize="5"
        @dragstop="resize">
        <a-tooltip>
          <template slot="title">
            {{ item.description }}
          </template>
          <div class="info" @click.right.prevent="handleEdit(item)"> {{ item.description }}</div>
        </a-tooltip>
      </VueDragResize>
    </div>
    <a-drawer
      title="点位配置"
      placement="right"
      :closable="false"
      :width="400"
      :visible="visibleRight"
      @close="onCloseRight"
    >
      <div>
        <a-tree-select
          style="width: 50%;margin-right:10px;"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          :treeData="treeData"
          :treeNodeFilterProp="'title'"
          :showSearch="true"
          v-model="positionId"
          placeholder="请选择"
        >
        </a-tree-select>
        <a-button style="margin-right:10px;" type="primary" @click="getOpcInfo">搜索</a-button>
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </div>
      <br>
      <a-table
        :columns="columns"
        :data-source="dotList"
        :pagination="{ pageSize: 100 }"
        :scroll="{ y: 650 }"
      >
        <span slot="action" slot-scope="text, record,index">
          <a @click="disposition(record,index)">配置</a>
          <a-button style="color:#ccc" v-show="record.positionFlag" type="link" icon="eye-invisible" @click="handleShow(index,0)" />
          <a-button v-show="!record.positionFlag" type="link" icon="eye" @click="handleShow(index,1)" />
        </span>
      </a-table>
    </a-drawer>
    <BaseChartInfo ref="baseChartInfo" @ok="handleOk"/>
    <BaseForm ref="baseForm" @ok="handleOk"/>

  </div>
</template>

<script>
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'
import BaseForm from '@/views/remote/opc/modules/BaseForm.vue'
export default {
  name: 'Opc',
  components: {
    VueDragResize,
    BaseChartInfo,
    BaseForm

  },
  data () {
    return {
      visibleRight: false,
      positionId: '',
      treeData: [],
      optDot: null,
      imgUrl: '',
      dotList: [],
      columns: [
        {
          title: '位号',
          dataIndex: 'description',
          key: 'description'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    this.positionId = this.$route.query.line
    this.setTree()
    this.getOpcInfo()
  },
  methods: {
    resize (newRect) {
      console.log(newRect)
      const params = {
        ...this.dotList[this.optDot],
        height: newRect.height,
        width: newRect.width,
        xposition: newRect.left,
        yposition: newRect.top
      }
      console.log('1222222..........................')
      if (params.id != null) {
        updateRemoteOpc(params).then(res => {
          console.log(res)
          this.dotList[this.optDot].isActive = true
        })
      }
    },
    onCloseRight () {
      this.visibleRight = false
    },
    disposition (val, i) {
      val.isActive = true
      val.positionFlag = 1
      this.optDot = i
      this.visibleRight = false
    },
    handleShow (val, key) {
      this.dotList[val].positionFlag = key
    },
    getOpcInfo () {
      fetchSbPosition({ id: this.positionId }).then(res => {
        this.imgUrl = res.data.opcImg
        console.log(this.imgUrl)
      })
      queryRemoteOpc({ line: this.positionId })
        .then((res) => {
          this.dotList = res.data
          this.dotList.forEach(item => {
            item.isActive = true
          })
        })
    },
    setTree (record = {}) {
      getSbPositionTree({ opcFlag: 1 }).then(res => {
        this.treeData = res.data
      })
    },
    handleInfo (remoteOpc) {
      if (remoteOpc.isActive) return
      const model = this.$refs.baseChartInfo
      model.base(remoteOpc)
    },
    handleAdd () {
      const model = this.$refs.baseForm
      model.base({
        line: this.positionId
      })
    },
    handleEdit (val) {
      const model = this.$refs.baseForm
      model.base(val)
    },
    handleClickAdd (e) {
      console.log(e)
      const model = this.$refs.baseForm
      model.base({
        line: this.positionId
      }
      , {
        xposition: e.x,
        yposition: e.y
      })
    },
    handleOk () {
      this.getOpcInfo()
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  position: relative;
}
.info{
  font-size: 12px;
  font-weight: bold;
  color: blue;
  // transform: scale(0.5);
}
.icon{
  font-size: 30px;
  color: #fff;
  position: absolute;
  top:20px;

}
</style>