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

<template>
  <div class="main">
    <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"
        >
          <a-tooltip>
            <template slot="title">
              {{ item.description }}
            </template>
            <div class="info" @click="handleInfo(item)" @click.right.prevent="handleView(item)">
              <span :style="{'color':item.warnFirstColor}" v-if="(+item.result)<=item.warnFirst&&item.warnFirst!==null">{{ item.result }}</span>
              <span :style="{'color':item.warnSecondColor}" v-else-if="item.warnFirst<(+item.result)&&(+item.result)<item.warnSecond">{{ item.result }}</span>
              <span :style="{'color':item.warnThirdColor}" v-else-if="item.warnThird<(+item.result)&&(+item.result)<item.warnFour">{{ item.result }}</span>
              <span :style="{'color':item.warnFourColor}" v-else-if="(+item.result)>=item.warnFour&&item.warnFirst!==null">{{ item.result }}</span>
              <span v-else>{{ item.result }}</span>
            </div>
          </a-tooltip>
        </VueDragResize>
        <VueDragResize
          v-if="item.type===2"
          :isActive="item.isActive"
          :w="40"
          :h="40"
          :minh="20"
          :x="item.imgXPosition"
          :y="item.imgYPosition"
          :isDraggable="item.isActive"
          :isResizable="item.isActive"
          :stickSize="5"
        >
          <a-tooltip>
            <template slot="title">
              {{ item.description }}
            </template>
            <img src="@/assets/stop.png" alt="" width="40px" height="40px">
          </a-tooltip>
        </VueDragResize>
      </div>
    </div>
    <a-drawer
      title="点位列表"
      placement="right"
      :closable="false"
      :width="350"
      :visible="visibleRight"
      @close="onCloseRight"
    >
      <div>
        <a-tree-select
          style="width: 60%;margin-right:10px;"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          :treeData="treeData"
          :treeNodeFilterProp="'title'"
          :showSearch="true"
          v-model="positionId"
          placeholder="请选择"
          @change="handleChange"
        >
        </a-tree-select>
      </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"/>
    <detail ref="detailModal" @ok="handleOk" />

  </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize'
import { getSbPositionTree, fetchSbPosition } from '@/api/sb/position'
import { queryRemoteOpc, updateRemoteOpc,
  fetchRemoteOpc
} from '@/api/remote/opc'
import Detail from '@/views/remote/opc/modules/Detail.vue'
import BaseChartInfo from './modules/BaseChartInfo.vue'
export default {
  name: 'Opc',
  components: {
    VueDragResize,
    BaseChartInfo,
    Detail
  },
  data () {
    return {
      visibleRight: false,
      positionId: '',
      treeData: [],
      optDot: null,
      imgUrl: '',
      dotList: [],
      timer: null,
      columns: [
        {
          title: '位号',
          dataIndex: 'positionNum',
          key: 'positionNum'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    this.positionId = this.$route.query.line
    this.getImg()
    getSbPositionTree({ opcFlag: 1 }).then(res => {
      this.treeData = res.data
    })
    this.timer = setInterval(() => {
      console.log(this.positionId)
      this.getOpcInfo()
    }, 5000)
  },
  destroyed () {
    clearInterval(this.timer)
  },
  methods: {
    resize (newRect) {
      console.log(newRect)
      const params = {
        ...this.dotList[this.optDot],
        height: newRect.height,
        width: newRect.width,
        xposition: newRect.left,
        yposition: newRect.top
      }
      updateRemoteOpc(params).then(res => {
        console.log(res)
        this.dotList[this.optDot].isActive = false
      })
    },
    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 () {
      queryRemoteOpc({ line: this.positionId })
        .then((res) => {
          this.dotList = res.data
          this.dotList.forEach(item => {
            item.isActive = false
          })
        })
    },
    getImg () {
      fetchSbPosition({ id: this.positionId }).then(res => {
        this.imgUrl = res.data.opcImg
      })
    },
    handleChange () {
      this.getOpcInfo()
      this.getImg()
    },
    handleInfo (remoteOpc) {
      const model = this.$refs.baseChartInfo
      model.base(remoteOpc)
    },
    handleView (record) {
      fetchRemoteOpc({ id: record.id }).then(res => {
        const modal = this.$refs.detailModal
        modal.base(res.data)
      })
    },
    handleOk () {

    }
  }
}
</script>

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

}
</style>