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">
      <div v-for="item in dotList" :key="item.id">
        <VueDragResize
          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"
          @resizing="handleOpt(item)"
          @dragging="handleOpt(item)"
          @resizestop="resize"
          @dragstop="resize">
          <a-tooltip>
            <template slot="title">
              {{ item.description }}
            </template>
            <div class="info" @click.right.prevent="handleEdit(item)"> {{ item.description }}</div>
          </a-tooltip>
        </VueDragResize>
        <VueDragResize
          v-if="item.type===2"
          :isActive="item.isActive"
          :w="35"
          :h="35"
          :minh="20"
          :x="item.imgXPosition"
          :y="item.imgYPosition"
          :isDraggable="item.isActive"
          :isResizable="item.isActive"
          :stickSize="5"
          @dragging="handleOpt(item)"
          @dragstop="resizeImg">
          <a-tooltip>
            <template slot="title">
              {{ item.description }}
            </template>
            <img src="@/assets/stop.png" alt="" width="35px" height="35px">
          </a-tooltip>
        </VueDragResize>
      </div>
    </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">
          <a @click="disposition(record)">配置</a>
          <a-button style="color:#ccc" v-show="record.positionFlag" type="link" icon="eye-invisible" @click="handleShow(record,0)" />
          <a-button v-show="!record.positionFlag" type="link" icon="eye" @click="handleShow(record,1)" />
        </span>
      </a-table>
    </a-drawer>-->
    <div class="btn">
      <a-button-group>
        <a-button v-for="item in list" :key="item.id" :disabled="positionId===item.id" @click="getOpcInfo(item.id)">{{ item.name }}</a-button>
      </a-button-group>
    </div>
    <BaseChartInfo ref="baseChartInfo" @ok="handleOk"/>
    <BaseForm ref="baseForm" @ok="handleOk"/>

  </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize'
import { getSbPositionTree, fetchSbPosition, querySbPosition } 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,
      parentId: '',
      positionId: '',
      treeData: [],
      list: [],
      visible: false,
      optDot: null,
      positionName: '',
      imgUrl: '',
      dotList: [],
      columns: [
        {
          title: '位号',
          dataIndex: 'description',
          key: 'description'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    this.parentId = this.$route.query.parentId
    this.positionId = this.$route.query.line
    this.setTree()
    this.getOpcInfo(this.positionId)
  },
  methods: {
    resize (newRect) {
      console.log(newRect)
      const params = {
        ...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.optDot = null
        })
      }
    },
    resizeImg (newRect) {
      console.log(newRect)
      const params = {
        ...this.optDot,
        imgXPosition: newRect.left,
        imgYPosition: newRect.top
      }
      if (params.id != null) {
        updateRemoteOpc(params).then(res => {
          console.log(res)
          this.optDot = null
        })
      }
    },
    onCloseRight () {
      this.visibleRight = false
    },
    disposition (val) {
      val.positionFlag = 1
      this.optDot = val
      this.visibleRight = false
    },
    handleOpt (val) {
      this.optDot = val
    },
    handleShow (val, key) {
      val.positionFlag = key
    },
    getOpcInfo (positionId) {
      this.positionId = positionId
      fetchSbPosition({ id: this.positionId }).then(res => {
        this.imgUrl = res.data.opcImg
        this.positionName = res.data.name
        console.log(this.imgUrl)
      })
      queryRemoteOpc({ line: this.positionId })
        .then((res) => {
          this.dotList = res.data
          this.dotList.forEach(item => {
            item.isActive = true
          })
        })
    },
    setTree (record = {}) {
      querySbPosition({ parentId: this.parentId }).then(res => {
        this.list = res.data
      })
      getSbPositionTree({ opcFlag: 1 }).then(res => {
        this.treeData = res.data
      })
    },
    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,
        imgXPosition: e.x,
        imgYposition: e.y + 50
      })
    },
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer () {
      this.visible = true
    },
    onClose () {
      this.visible = false
    },
    handleOk () {
      this.getOpcInfo(this.positionId)
    }
  }
}
</script>

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

}
.btn{
  position: fixed;
  bottom: 10px;
  left:50%;
  transform: translateX(-50%);
}
</style>