封锁设备操作

src/jmapNew/theme/datie_02/menus/dialog/blockDevice.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="chengdou-03__systerm train-set-plan"
+    title="封锁操作对话框"
+    :visible.sync="show"
+    width="600px"
+    :before-close="doClose"
+    :z-index="3000"
+    :append-to-body="true"
+    :modal="true"
+  >
+    <div class="content">
+      <el-tree
+        style="height: 50%; overflow-y: scroll;"
+        :data="treeData"
+        node-key="id"
+        show-checkbox
+        :expand-on-click-node="true"
+        default-expand-all
+      >
+        <span class="custom-node" slot-scope="{ node, data }">
+          <span>{{ node.label }}</span>
+          <span v-if="data.id <= 2">封锁状态</span>
+          <span v-else>{{ getBlockState(data.id) ? '√' : '' }}</span>
+        </span>
+      </el-tree>
+      <div class="info">
+        <div class="item">14:36:18 操作成功</div>
+        <div class="item">14:36:18 操作成功</div>
+      </div>
+    </div>
+    <div class="btn-bar">
+      <el-button>设置封锁</el-button>
+      <el-button>解除封锁</el-button>
+      <el-button>保存</el-button>
+      <el-button @click="doClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'BlockDevice',
+  data() {
+    return {
+      show: false,
+      treeData: [
+        {
+          label: '沈阳',
+          id: 1,
+          children: [
+            {
+              id: 3,
+              label: '股道',
+              children: [
+                {
+                  id: 5,
+                  label: '11G',
+                },
+                {
+                  id: 6,
+                  label: '12G',
+                },
+                {
+                  id: 7,
+                  label: 'XIIIG',
+                },
+                {
+                  id: 8,
+                  label: '14G',
+                },
+                {
+                  id: 9,
+                  label: '15G',
+                },
+                {
+                  id: 10,
+                  label: 'XVIG',
+                },
+                {
+                  id: 11,
+                  label: 'XVIIG',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    }
+  },
+  methods: {
+    doShow() {
+      this.show = true
+    },
+    doClose() {
+      this.show = false
+    },
+    getBlockState(id) {
+      return true
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  height: 400px;
+  .custom-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 2rem;
+  }
+  .info {
+    background-color: #fff;
+    margin-top: 6px;
+    padding: 8px;
+    height: 50%;
+  }
+}
+.btn-bar {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+}
+</style>

src/jmapNew/theme/datie_02/menus/menuPanel.vue

@@ -32,6 +32,7 @@
     <BoardViewSetting ref="boardViewSetting" />
     <RailViewSetting ref="railViewSetting" />
     <PowerSupplyArmSetting ref="powerSupplyArmSetting" />
+    <BlockDevice ref="blockDevice" />
   </div>
 </template>
 
@@ -51,6 +52,7 @@ import SettingsMenu from './components/menu.vue'
 import BoardViewSetting from './dialog/boardViewSetting.vue'
 import RailViewSetting from './dialog/railViewSetting.vue'
 import PowerSupplyArmSetting from './dialog/powerSupplyArmSetting.vue'
+import BlockDevice from './dialog/blockDevice'
 
 export default {
   name: 'MenuPanel',
@@ -60,6 +62,7 @@ export default {
     BoardViewSetting,
     RailViewSetting,
     PowerSupplyArmSetting,
+    BlockDevice,
   },
   data() {
     return {
@@ -197,6 +200,9 @@ export default {
         case 'powerSupplyArm':
           this.$refs.powerSupplyArmSetting.doShow()
           break
+        case 'blockedDeviceOperation':
+          this.$refs.blockDevice.doShow()
+          break
       }
     },
     dragEvent() {