opc: dcs雨水管网单独展示

src/router/generator-platform-routers.js

@@ -506,6 +506,10 @@ export const constantRouterMap = [
     path: '/opc/info',
     component: () => import('@/views/opc/OpcInfo.vue')
   },
+  {
+    path: '/opc/infoYushui',
+    component: () => import('@/views/opc/OpcInfoYushui.vue')
+  },
   {
     path: '/toWorkplaceBacklog',
     component: () => import('@/views/statisticView/22')

src/views/opc/OpcInfoYushui.vue

@@ -0,0 +1,434 @@
+<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
+          :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 + '(' + item.time + ')' }}
+            </template>
+            <!--            <div class="info" @click="handleInfo(item)" @click.right.prevent="handleView(item)">-->
+            <div v-if="item.type===1||item.type===5" class="info" @click="handleInfo(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==null?'-':item.result }}</span>
+            </div>
+          </a-tooltip>
+        </VueDragResize>
+        <VueDragResize
+          v-if="item.type===2"
+          v-show="item.result===0"
+          :isActive="item.isActive"
+          :w="35"
+          :h="35"
+          :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
+              v-if="item.imgPosition===1"
+              src="@/assets/kg_red_left.png"
+              @click="handleInfo(item)"
+              alt=""
+              width="30px"
+              height="30px">
+            <img
+              v-if="item.imgPosition===2"
+              src="@/assets/kg_red_top.png"
+              @click="handleInfo(item)"
+              alt=""
+              width="30px"
+              height="30px">
+            <img
+              v-if="item.imgPosition===3"
+              src="@/assets/kg_red_right.png"
+              @click="handleInfo(item)"
+              alt=""
+              width="30px"
+              height="30px">
+            <img
+              v-if="item.imgPosition===4"
+              src="@/assets/kg_red_down.png"
+              @click="handleInfo(item)"
+              alt=""
+              width="30px"
+              height="30px">
+          </a-tooltip>
+        </VueDragResize>
+        <VueDragResize
+          v-if="item.type===2"
+          v-show="item.result===1"
+          :isActive="item.isActive"
+          :w="35"
+          :h="35"
+          :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
+              v-if="item.imgPosition===null || item.imgPosition===1"
+              src="@/assets/kg_green_left.png"
+              @click="handleInfo(item)"
+              alt=""
+              width="30px"
+              height="30px">
+            <img
+              v-if="item.imgPosition===2"
+              src="@/assets/kg_green_top.png"
+              @click="handleInfo(item)"
+              alt=""
+              width="30px"
+              height="30px">
+            <img
+              v-if="item.imgPosition===3"
+              src="@/assets/kg_green_right.png"
+              @click="handleInfo(item)"
+              alt=""
+              width="30px"
+              height="30px">
+            <img
+              v-if="item.imgPosition===4"
+              src="@/assets/kg_green_down.png"
+              @click="handleInfo(item)"
+              alt=""
+              width="30px"
+              height="30px">
+          </a-tooltip>
+        </VueDragResize>
+        <VueDragResize
+          v-if="item.type===3"
+          v-show="item.result===1"
+          :isActive="item.isActive"
+          :w="35"
+          :h="35"
+          :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
+              style="z-index: 100"
+              @click="handleInfo(item)"
+              src="@/assets/green.png"
+              alt=""
+              width="30px"
+              height="30px">
+          </a-tooltip>
+        </VueDragResize>
+        <VueDragResize
+          v-if="item.type===4"
+          v-show="item.result===0"
+          :isActive="item.isActive"
+          :w="35"
+          :h="35"
+          :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
+              style="z-index: 100"
+              @click="handleInfo(item)"
+              src="@/assets/stop.png"
+              alt=""
+              width="30px"
+              height="30px">
+          </a-tooltip>
+        </VueDragResize>
+        <VueDragResize
+          v-if="item.type===5"
+          :isActive="item.isActive"
+          :w="item.imgWidth"
+          :h="item.imgHeight"
+          :minh="20"
+          :minw="20"
+          :x="item.imgXPosition"
+          :y="item.imgYPosition"
+          :isDraggable="item.isActive"
+          :isResizable="item.isActive"
+          :stickSize="5"
+        >
+          <a-tooltip>
+            <template slot="title">
+              {{ item.description }} <br />
+              液位： {{ item.result }}
+            </template>
+            <LiquidLevel :value="item" :width="item.imgWidth" :height="item.imgHeight"/>
+          </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> -->
+    <div class="btn">
+      <a-button-group>
+        <a-button @click="back()">返回主页</a-button>
+      </a-button-group>
+    </div>
+    <detail ref="detailModal" @ok="handleOk" />
+    <detail-log ref="detailLogModal" @ok="handleOk" />
+    <!--    <remote-opc-warn></remote-opc-warn>-->
+  </div>
+</template>
+
+<script>
+import VueDragResize from 'vue-drag-resize'
+import LiquidLevel from '@/components/LiquidLevel'
+
+import { getSbPositionTree, fetchSbPosition, querySbPosition } from '@/api/remote/remote-position'
+import {
+  updateRemoteOpc,
+  fetchRemoteOpc, queryRemoteOpc, queryRemoteOpcFromRedis
+} from '@/api/remote/opc'
+import Detail from '@/views/remote/opc/modules/Detail.vue'
+import DetailLog from '@/views/remote/opc-log/modules/Detail.vue'
+import RemoteOpcWarn from '@/views/socket/RemoteOpcWarn'
+import RemoteOpcList from '@/views/remote/opc/RemoteOpc'
+export default {
+  name: 'Opc',
+  components: {
+    RemoteOpcList,
+    VueDragResize,
+    LiquidLevel,
+    RemoteOpcWarn,
+    Detail,
+    DetailLog
+  },
+  data () {
+    return {
+      visibleRight: false,
+      positionId: '',
+      treeData: [],
+      parentId: '',
+      optDot: null,
+      imgUrl: '',
+      dotList: [],
+      timer: null,
+      columns: [
+        {
+          title: '位号',
+          dataIndex: 'positionNum',
+          key: 'positionNum'
+        },
+        {
+          title: '操作',
+          key: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
+    }
+  },
+  created () {
+    this.parentId = this.$route.query.parentId
+    this.positionId = this.$route.query.line
+    this.getOpcInfo(this.positionId)
+    this.getOpcInfoFromRedis(this.positionId)
+    this.getImg()
+    getSbPositionTree().then(res => {
+      this.treeData = res.data
+    })
+    this.timer = setInterval(() => {
+      this.getOpcInfoFromRedis(this.positionId)
+    }, 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
+    },
+    back () {
+      const a = document.createElement('a')
+      a.href = '/sb/position/opc/for/producerYushui'
+      a.click()
+    },
+    getOpcInfo (positionId) {
+      this.positionId = positionId
+      queryRemoteOpc({ line: this.positionId })
+        .then((res) => {
+          this.dotList = res.data
+          this.dotList.forEach(item => {
+            item.isActive = false
+            if (item.result == null) {
+              item.result = '-'
+            }
+          })
+        })
+      this.getImg()
+    },
+    getOpcInfoFromRedis (positionId) {
+      this.positionId = positionId
+      queryRemoteOpcFromRedis({ line: this.positionId })
+        .then((res) => {
+          this.dotList.forEach(item => {
+            item.isActive = false
+            res.data.forEach(data => {
+              if (item.positionNum === data.positionNum) {
+                item.result = data.result
+                item.time = data.time
+              }
+            })
+          })
+        })
+      this.getImg()
+    },
+    getImg () {
+      fetchSbPosition({ id: this.positionId }).then(res => {
+        this.imgUrl = res.data.opcImg
+      })
+    },
+    handleChange () {
+      this.getOpcInfo(this.positionId)
+      this.getImg()
+    },
+    /* handleInfo (remoteOpc) {
+      const model = this.$refs.detailLogModal
+      model.base(null, { positionNum: remoteOpc.positionNum })
+    }, */
+    handleInfo (remoteOpc) {
+      const model = this.$refs.detailLogModal
+      model.base(remoteOpc)
+    },
+    handleView (record) {
+      fetchRemoteOpc({ id: record.id }).then(res => {
+        const modal = this.$refs.detailModal
+        modal.base(res.data)
+      })
+    },
+    backParent () {
+      const a = document.createElement('a')
+      a.href = '/sb/position/opc/for/producer'
+      a.target = '_blank'
+      a.click()
+    },
+    handleOk () {
+
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.main{
+  position: relative;
+}
+.info{
+  font-size: 14px;
+  font-weight: bold;
+  color: black;
+  padding:0 2px;
+  // 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>