From 9e67d23c2a8a920ae34ba13184fd941fda4613c2 Mon Sep 17 00:00:00 2001
From: x_ying <2438792676@qq.com>
Date: Fri, 1 Jul 2022 17:18:40 +0800
Subject: [PATCH] =?UTF-8?q?3D=E5=BA=93=E6=88=BF=E9=85=8D=E7=BD=AE=20?=
 =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../storeManage/warehouse3DConfig/data.json   | 284 ++++++++++++++++++
 .../storeManage/warehouse3DConfig/index.vue   | 144 +++++++++
 2 files changed, 428 insertions(+)
 create mode 100644 src/views/storeManage/warehouse3DConfig/data.json
 create mode 100644 src/views/storeManage/warehouse3DConfig/index.vue

diff --git a/src/views/storeManage/warehouse3DConfig/data.json b/src/views/storeManage/warehouse3DConfig/data.json
new file mode 100644
index 0000000..1304ab7
--- /dev/null
+++ b/src/views/storeManage/warehouse3DConfig/data.json
@@ -0,0 +1,284 @@
+{
+  "rows":[
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },{
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"未绑定",
+    "isShow":"隐藏"
+  },
+  {
+    "showPosition":"DIV_001",
+    "devName":"空气质量监测设备",
+    "paramName":"名称1，名称2",
+    "bindState":"已绑定",
+    "isShow":"显示"
+  }
+]
+}
\ No newline at end of file
diff --git a/src/views/storeManage/warehouse3DConfig/index.vue b/src/views/storeManage/warehouse3DConfig/index.vue
new file mode 100644
index 0000000..e402bcb
--- /dev/null
+++ b/src/views/storeManage/warehouse3DConfig/index.vue
@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <div class="head-container">
+      <div>
+        <el-select
+          v-model="room"
+          class="filter-item"
+          style="width:245px"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div>
+        <el-button type="primary" class="el-icon-more" size="mini" @click="handleBindParam">绑定参数</el-button>
+      </div>
+    </div>
+    <div class="app-container container-wrap">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <!--表格渲染-->
+      <el-table
+        ref="table"
+        :data="tableData"
+        style="width: 100%;"
+        height="calc(100vh - 245px)"
+        :cell-class-name="cell"
+        @selection-change="selectionChangeHandler"
+        @row-click="clickRowHandler"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="55" align="center" />
+        <el-table-column prop="showPosition" label="显示位置" align="center" />
+        <el-table-column prop="devName" label="设备名称" align="center" />
+        <el-table-column prop="paramName" label="参数名称" align="center" />
+        <el-table-column prop="bindState" label="绑定状态" align="center">
+          <template slot-scope="scope">
+            <span class="clear" style="width:76px">{{ scope.row.bindState }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="isShow" label="是否显示" align="center">
+          <template slot-scope="scope">
+            <span class="clear" style="width:76px">{{ scope.row.isShow }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 绑定参数对话框 -->
+    <el-dialog
+      title="绑定参数"
+      :visible.sync="dialogVisible"
+    >
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import data from './data.json'
+export default {
+  data() {
+    return {
+      room: '选项1',
+      options: [
+        { value: '选项1', label: '档案库' },
+        { value: '选项2', label: '阅览室' },
+        { value: '选项3', label: '整理室' },
+        { value: '选项4', label: '走廊' }
+      ],
+      tableData: [],
+      selections: [],
+      dialogVisible: false
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.tableData = data.rows
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    // 单元格样式
+    cell({ row, columnIndex }) {
+      if ((row.bindState === '已绑定' && columnIndex === 5) || (row.isShow === '显示' && columnIndex === 6)) {
+        return 'have-clear'
+      } else if ((row.bindState === '未绑定' && columnIndex === 5) || (row.isShow === '隐藏' && columnIndex === 6)) {
+        return 'fail-clear'
+      }
+    },
+    handleBindParam() {
+      if (this.selections.length === 1) {
+        this.dialogVisible = true
+      } else {
+        this.$message({
+          message: '只可以同时修改一个设备的参数',
+          type: 'warning'
+        })
+      }
+    },
+    clickRowHandler(row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row) // 单选选中
+    },
+    handleConfirm() {
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+
+.head-container{
+  display: flex;
+  justify-content: space-between;
+  .el-button{
+    width: 106px;
+    height: 32px;
+    background-color: #1AAE93;
+    border: none;
+  }
+}
+::v-deep .el-icon-more:before{
+      margin-right: 8px;
+    }
+.app-container{
+  margin-top: 0;
+  min-height: calc(100vh - 242px);
+}
+</style>