3D库房配置 主页面

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":"显示"
+  }
+]
+}

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>