-添加破锁管理

ui/src/views/apply/lock/index.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="app-container" style="padding: 0 0 0 0">
+      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="EU" name="first">
+          <lock-eu item="1" typename="" v-if="isFirst"></lock-eu>
+        </el-tab-pane>
+        <el-tab-pane label="XX" name="second">
+          <lock-xx item="2" typename="" v-if="isSecond"></lock-xx>
+        </el-tab-pane>
+        <el-tab-pane label="XX" name="third">
+          <lock-xx item="3" typename="" v-if="isThird"></lock-xx>
+        </el-tab-pane>
+        <el-tab-pane label="XX" name="fourth">
+          <lock-xx item="4" typename="" v-if="isFourth"></lock-xx>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+</template>
+
+<script>
+import LockEu from "@/views/apply/lock/lock-eu";
+import LockXx from "@/views/apply/lock/lock-xx";
+export default {
+  name: "index",
+  components: {LockXx, LockEu},
+  data() {
+    return {
+      // 默认第一个Tab
+      activeName: 'first',
+      isFirst: true,
+      isSecond: false,
+      isThird: false,
+      isFourth: false,
+    }
+  },
+  methods: {
+    handleClick(tab) {
+      if (tab.name === 'first') {
+        this.isFirst = true
+        this.isSecond = false
+        this.isThird = false
+        this.isFourth = false
+      } else if (tab.name === 'second') {
+        this.isFirst = false
+        this.isSecond = true
+        this.isThird = false
+        this.isFourth = false
+      }else if (tab.name === 'third') {
+        this.isFirst = false
+        this.isSecond = false
+        this.isThird = true
+        this.isFourth = false
+      }else if (tab.name === 'fourth') {
+        this.isFirst = false
+        this.isSecond = false
+        this.isThird = false
+        this.isFourth = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/apply/lock/lock-eu.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="app-container" :style="`height:${height}px`">
+    <table>
+      <tr>
+        <th colspan="10">
+          <span style="font-size: 22px">蒸汽裂解装置锁开&锁关摆放看板（EU）</span><br/>
+          <span style="font-size: 18px">LO&LC display board of Steam Cracker plant(EU)</span>
+        </th>
+      </tr>
+      <tr>
+        <td v-for="(item,index) in data">
+          <el-popover
+            placement="top"
+            trigger="click">
+            <el-button type="info" round @click="changeColor(1)">状态1</el-button>
+            <el-button type="danger" round @click="changeColor(2)">状态2</el-button>
+            <el-button type="warning" round @click="changeColor(3)">状态3</el-button>
+            <el-button type="success" round @click="changeColor(4)">状态4</el-button>
+            <el-button slot="reference" type="text" size="100%" @click="openDialog(index)"
+                       :class="status1.includes(index) ? 'grey' : (status2.includes(index) ? 'red':(status3.includes(index) ? 'yellow':'green'))">
+              <i class="el-icon-timer" v-if="status1.includes(index)"/>
+              <i class="el-icon-lock" v-else-if="status2.includes(index)"/>
+              <i class="el-icon-circle-close" v-else-if="status3.includes(index)"/>
+              <i class="el-icon-unlock" v-else/>
+              <br/>
+              <span>{{ item.code }}</span>
+            </el-button>
+          </el-popover>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "lock-eu",
+  data() {
+    return {
+      clientHeight: 300,
+      data: [
+        {id: 1, code: '编号00001'},
+        {id: 2, code: '编号00002'},
+        {id: 3, code: '编号00003'},
+        {id: 4, code: '编号00004'},
+        {id: 5, code: '编号00005'},
+        {id: 6, code: '编号00006'},
+        {id: 7, code: '编号00007'},
+        {id: 8, code: '编号00008'},
+        {id: 9, code: '编号00009'},
+        {id: 10, code: '编号00010'}
+      ],
+      index: null,
+      status1: [1, 0],
+      status2: [4, 6],
+      status3: [3, 5],
+      status4: [2, 7, 8, 9],
+      visible: false,
+      height: document.body.clientHeight - 155,
+    }
+  },
+  created() {
+  },
+  mounted() {
+    window.onresize = () => {    //写在mounted中,onresize事件会在页面大小被调整时触发
+      return (() => {
+        window.screenHeight = document.body.clientHeight - 155;
+        this.height = window.screenHeight;
+      })();
+    };
+
+  },
+  watch: {
+    height(val) {        //在watch中监听height,浏览器窗口大小变动时自适应高度。
+      this.height = val;
+      console.log(this.height, "新的高度");
+    },
+  },
+  methods: {
+    openDialog(index) {
+      // this.visible = true;
+      this.index = index
+    },
+    changeColor(type) {
+      let index = this.index
+      let flag;
+      if (this.status1.includes(index))
+        this.status1.splice(this.status1.indexOf(index), 1);
+      if (this.status2.includes(index))
+        this.status2.splice(this.status2.indexOf(index), 1);
+      if (this.status3.includes(index))
+        this.status3.splice(this.status3.indexOf(index), 1);
+      if (this.status4.includes(index))
+        this.status4.splice(this.status4.indexOf(index), 1);
+      switch (type) {
+        case 1:
+          this.status1.push(index)
+          break;
+        case 2:
+          this.status2.push(index)
+          break;
+        case 3:
+          this.status3.push(index)
+          break;
+        case 4:
+          this.status4.push(index)
+          break;
+      }
+      this.visible = false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+table {
+  width: 100%;
+  border: 1px solid #d0d0d0;
+  border-collapse: collapse;
+}
+
+th {
+  height: 80px;
+  color: #4b4b4b;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+tr {
+  border: 1px solid #d0d0d0;
+  border-collapse: collapse;
+}
+
+td {
+  width: 10%;
+  height: 100px;
+  border: 1px solid #d0d0d0;
+  border-collapse: collapse;
+  vertical-align: middle;
+  text-align: center;
+}
+
+i {
+  font-size: 200%;
+  padding-bottom: 10px;
+}
+
+el-button {
+  width: 95%;
+  height: 95%;
+}
+
+.green {
+  color: #67C23A;
+}
+
+.red {
+  color: #F56C6C;
+}
+
+.yellow {
+  color: #E6A23C;
+}
+
+.grey {
+  color: #909399;
+}
+</style>

ui/src/views/apply/lock/lock-xx.vue

@@ -0,0 +1,15 @@
+<template>
+<div class="app-container">
+  <el-empty description="页面开发中..."></el-empty>
+</div>
+</template>
+
+<script>
+export default {
+  name: "lock-xx"
+}
+</script>
+
+<style scoped>
+
+</style>