Merge branch 'demo_' of http://124.71.196.186:8888/hfxc226/hitch-antd into demo_

src/router/generator-platform-routers.js

@@ -388,6 +388,7 @@ const constantRouterComponents = {
   'OpcPosition': () => import('@/views/remote/opc/OpcPosition'), // opc车间
   'OpcPositionNot': () => import('@/views/remote/opc/OpcPositionNot'), // opc车间未配置
   'OpcPositionForProducer': () => import('@/views/remote/opc/OpcPositionForProducer'), // opc车间生产入口
+  'OpcPositionForProducerYushui': () => import('@/views/remote/opc/OpcPositionForProducerYushui'), // opc车间生产入口-雨水入口
   'RemotePosition': () => import('@/views/remote/position/RemotePosition'), // opc车间配置
   // 初始化导入
   'ImportExcel': () => import('@/views/excel/ImportExcel'),
@@ -505,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>

src/views/remote/opc/OpcPositionForProducerYushui.vue

@@ -0,0 +1,71 @@
+<template>
+  <a-card :bordered="false"  class="card" :title="modalTitle">
+    <h1 style="margin:20px auto; text-align: center"> 生产过程工艺流程画面 </h1>
+    <a-card v-show="visible">
+      <a-card-grid v-for="position in treeData" v-if="position.type==1 && position.title == '动力车间'" :key="position.key" style="cursor: pointer;width:25%;text-align:center" @click="showChild(position)">
+        {{ position.title }}
+      </a-card-grid>
+    </a-card>
+
+    <a-card v-show="visible2">
+      <a-row :gutter="48" slot="extra">
+        <a-col :md="48" :sm="48">
+        <span class="table-page-search-submitButtons" style="float: right">
+          <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
+        </span>
+        </a-col>
+      </a-row>
+      <a-card-grid v-for="child in childData" v-if="child.type==2 && child.title == '雨水管网'" :key="child.key" style="cursor: pointer;width:25%;text-align:center" @click="showScreen(child)">
+        {{ child.title }}
+      </a-card-grid>
+    </a-card>
+  </a-card>
+</template>
+
+<script>
+
+import { getSbPositionTree } from '@/api/remote/remote-position'
+
+export default {
+  name: 'OpcPosition',
+  components: {
+  },
+  data () {
+    return {
+      confirmLoading: false,
+      modalTitle: null,
+      treeData: [],
+      childData: [],
+      visible: true,
+      visible2: false
+    }
+  },
+  props: {
+  },
+  created () {
+    getSbPositionTree({ opcFlag: 1 }).then(res => {
+      this.treeData = res.data
+    })
+  },
+  methods: {
+    showChild (position) {
+      this.visible = false
+      this.visible2 = true
+      this.childData = position.children
+    },
+    showScreen (position) {
+      const a = document.createElement('a')
+      const select = position.children[0]
+      a.href = '/opc/info?line=' + select.id + '&parentId=' + position.id
+      a.target = '_blank'
+      a.click()
+    },
+    handleCancel () {
+      this.visible = true
+      this.visible2 = false
+      this.childData = []
+      this.confirmLoading = false
+    }
+  }
+}
+</script>