From 4876a48c393cb2aedaa434dc87fbe852ec8be1d1 Mon Sep 17 00:00:00 2001
From: zwq <zwq229436@163.com>
Date: Fri, 7 Jul 2023 17:00:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.js                        |    8 +-
 src/router/index.js                    |    3 +-
 src/views/main-sidebar.vue             |    4 +
 src/views/modules/work/mttaskinfo.vue  |  357 ++--
 src/views/modules/work/testdata.js     | 2608 ++++++++++++++++++++++++
 src/views/modules/work/wareMonitor.vue |  192 ++
 6 files changed, 3052 insertions(+), 120 deletions(-)
 create mode 100644 src/views/modules/work/testdata.js
 create mode 100644 src/views/modules/work/wareMonitor.vue

diff --git a/config/index.js b/config/index.js
index aabb667..9d656d8 100644
--- a/config/index.js
+++ b/config/index.js
@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2021-11-19 10:10:51
  * @LastEditors: zwq
- * @LastEditTime: 2022-06-30 11:11:45
+ * @LastEditTime: 2023-03-07 15:48:48
  * @Description: file content
  * @FilePath: \mt-qj-wms-ui\config\index.js
  */
@@ -22,8 +22,8 @@ module.exports = {
     // 代理列表, 是否开启代理通过[./dev.env.js]配置
     proxyTable: devEnv.OPEN_PROXY === false ? {} : {
       '/proxyApi': {
-        // target: 'http://192.168.1.16:8089/wms-qy/',
-        target: 'http://qy.wms.picaiba.com/wms-qy/',
+        target: 'http://192.168.1.12:8089/wms-qy/',
+        // target: 'http://qy.wms.picaiba.com/wms-qy/',
         changeOrigin: true,
         pathRewrite: {
           '^/proxyApi': '/'
@@ -32,7 +32,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '192.168.1.59', // can be overwritten by process.env.HOST
     port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/router/index.js b/src/router/index.js
index 09ff72b..04d5865 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,7 +56,8 @@
      { path: '/mtwarehouspositionrelatlog', component: _import('modules/work/mtwarehouspositionrelatlog'), name: 'mtwarehouspositionrelatlog', meta: { title: '库位使用详情日志', isTab: true } },
      { path: '/mtwarehousrank', component: _import('modules/work/mtwarehousrank'), name: 'mtwarehousrank', meta: { title: '库位基础信息', isTab: true } },
      { path: '/mtwarehousregion', component: _import('modules/work/mtwarehousregion'), name: 'mtwarehousregion', meta: { title: '仓库区域基础信息', isTab: true } },
-     { path: '/OperationMonitor', component: _import('modules/work/OperationMonitor'), name: 'OperationMonitor', meta: { title: '仓库监控', isTab: true } }
+     { path: '/OperationMonitor', component: _import('modules/work/OperationMonitor'), name: 'OperationMonitor', meta: { title: '仓库监控', isTab: true } },
+     { path: '/wareMonitor', component: _import('modules/work/wareMonitor'), name: 'wareMonitor', meta: { title: '库位监控', isTab: true } }
    ],
    beforeEnter (to, from, next) {
      let token = Vue.cookie.get('token')
diff --git a/src/views/main-sidebar.vue b/src/views/main-sidebar.vue
index 302aadd..5fe020c 100644
--- a/src/views/main-sidebar.vue
+++ b/src/views/main-sidebar.vue
@@ -19,6 +19,10 @@
           <icon-svg name="zaijiagong" class="site-sidebar__menu-icon"></icon-svg>
           <span slot="title">仓库监控</span>
         </el-menu-item>
+        <el-menu-item index="wareMonitor" @click="$router.push({ name: 'wareMonitor' })">
+          <icon-svg name="zaijiagong" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">库位监控</span>
+        </el-menu-item>
 
         <el-menu-item index="instock" @click="$router.push({ name: 'instock' })">
           <icon-svg name="sousuo" class="site-sidebar__menu-icon"></icon-svg>
diff --git a/src/views/modules/work/mttaskinfo.vue b/src/views/modules/work/mttaskinfo.vue
index 99114d9..05797a4 100644
--- a/src/views/modules/work/mttaskinfo.vue
+++ b/src/views/modules/work/mttaskinfo.vue
@@ -1,8 +1,16 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
       <el-form-item>
-        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
+        <el-input
+          v-model="dataForm.key"
+          placeholder="参数名"
+          clearable
+        ></el-input>
       </el-form-item>
       <el-form-item>
         <el-button @click="getDataList()">查询</el-button>
@@ -11,23 +19,30 @@
     </el-form>
     <el-table
       :data="dataList"
-        :stripe="true"
-        :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+      :stripe="true"
+      :header-cell-style="{
+        background: '#eef1f6',
+        color: '#606266',
+        height: '56px'
+      }"
       border
       v-loading="dataListLoading"
-      style="width: 100%;">
+      style="width: 100%;"
+    >
       <el-table-column
         type="index"
         label="序号"
         header-align="center"
         align="center"
-        width="50">
+        width="50"
+      >
       </el-table-column>
       <el-table-column
         prop="createTime"
         header-align="center"
         align="center"
-        label="添加时间">
+        label="添加时间"
+      >
       </el-table-column>
       <!-- <el-table-column
         prop="userName"
@@ -45,36 +60,45 @@
         prop="taskType"
         header-align="center"
         align="center"
-        label="任务类型">
+        label="任务类型"
+      >
         <template slot-scope="scope">
-          <span>{{scope.row.taskType === 0?'出库' :scope.row.taskType === 1?'入库': '移库'}}</span>
+          <span>{{ taskType[scope.row.taskType - 1] }}</span>
         </template>
       </el-table-column>
       <el-table-column
         prop="status"
         header-align="center"
         align="center"
-        label="状态">
+        label="状态"
+      >
         <template slot-scope="scope">
           <span>{{
-             scope.row.status === 0?'未执行' 
-            :scope.row.status === 1?'执行中'
-            :scope.row.status === 2?'执行完成'
-            :scope.row.status === 3?'送达滚筒':'执行失败'
-            }}</span>
+            scope.row.status === 0
+              ? "未执行"
+              : scope.row.status === 1
+              ? "执行中"
+              : scope.row.status === 2
+              ? "执行完成"
+              : scope.row.status === 3
+              ? "送达滚筒"
+              : "执行失败"
+          }}</span>
         </template>
       </el-table-column>
       <el-table-column
         prop="taskCode"
         header-align="center"
         align="center"
-        label="任务编码">
+        label="任务编码"
+      >
       </el-table-column>
       <el-table-column
         prop="productCode"
         header-align="center"
         align="center"
-        label="产品编码">
+        label="产品编码"
+      >
       </el-table-column>
       <!-- <el-table-column
         prop="specModel"
@@ -86,7 +110,8 @@
         prop="num"
         header-align="center"
         align="center"
-        label="数量">
+        label="数量"
+      >
       </el-table-column>
       <!-- <el-table-column
         prop="unit"
@@ -98,19 +123,41 @@
         prop="remarks"
         header-align="center"
         align="center"
-        label="备注">
+        label="备注"
+      >
       </el-table-column>
       <el-table-column
         fixed="right"
         header-align="center"
         align="center"
-        width="200"
-        label="操作">
+        width="220"
+        label="操作"
+      >
         <template slot-scope="scope">
           <!-- <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button> -->
-          <el-button type="text" size="small" @click="$router.push({ name: 'mttaskinfodet', params: { id: scope.row.id } })">子任务</el-button>
-          <el-button type="text" size="small" @click="runtask(scope.row.id)">执行</el-button>
-          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+          <el-button
+            type="text"
+            size="small"
+            @click="
+              $router.push({
+                name: 'mttaskinfodet',
+                params: { id: scope.row.id }
+              })
+            "
+            >子任务</el-button
+          >
+          <el-button type="text" size="small" @click="runtask(scope.row.id)"
+            >执行</el-button
+          >
+          <el-button type="text" size="small" @click="reset(scope.row.id)"
+            >重置信号</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click="deleteHandle(scope.row.id)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -121,83 +168,189 @@
       :page-sizes="[10, 20, 50, 100]"
       :page-size="pageSize"
       :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper">
+      layout="total, sizes, prev, pager, next, jumper"
+    >
     </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></add-or-update>
+    <el-dialog
+      title="重置信号提示"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <span>
+        <h3>出库:</h3>
+        <h4>出库到叉车放货台:<br/>
+        无需重置信号,卡住时直接清除辊筒信号,<br/>
+        手动操作辊筒运到叉车放货台
+        出库到RGV转运车:</h4>
+        1-清除对应辊筒信号(如果已经和RGV在通讯,需要清除掉RGV通讯)<br/>
+        2-手动操作移动板垛到旋转台并旋转至垂直状态<br/>
+        3-电控面板点击[旋转台发任务]按钮<br/>
+        4-操作电脑页面点击对应任务的[重置信号]按钮<br/>
+        <h3>入库: </h3>
+        <h4>退料入库:</h4>
+        1-清除对应辊筒信号<br/>
+        2-手动操作移动板垛到叉车放货台<br/>
+        3-操作电脑页面点击对应任务的[重置信号]按钮<br/>
+        4-绿灯亮起,按下,板垛即可入库<br/>
+        <h4>扫码入库:</h4>
+        1-清除对应辊筒信号<br/>
+        2-手动操作移动板垛到叉车放货台<br/>
+        3-重新扫原来的二维码<br/>
+        4-绿灯亮起,按下,板垛即可入库<br/>
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="resetSub">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  import AddOrUpdate from './mttaskinfo-add-or-update'
-  export default {
-    data () {
-      return {
-        dataForm: {
-          key: ''
-        },
-        dataList: [],
-        pageIndex: 1,
-        pageSize: 10,
-        totalPage: 0,
-        dataListLoading: false,
-        addOrUpdateVisible: false
-      }
+import AddOrUpdate from './mttaskinfo-add-or-update'
+export default {
+  data () {
+    return {
+      dataForm: {
+        key: ''
+      },
+      dataList: [],
+      taskType: [
+        'A线出库到电子锯',
+        'B线出库到电子锯',
+        'A线扫码入库',
+        'B线扫码入库',
+        'A线退料',
+        'B线退料',
+        'A线人为出库',
+        'B线人为出库'
+      ],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      addOrUpdateVisible: false,
+      dialogVisible: false,
+      resetid: ''
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  activated () {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/work/mttaskinfo/list'),
+        method: 'get',
+        params: this.$http.adornParams({
+          page: this.pageIndex,
+          limit: this.pageSize,
+          key: this.dataForm.key
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list
+          this.totalPage = data.page.totalCount
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
     },
-    components: {
-      AddOrUpdate
-    },
-    activated () {
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
       this.getDataList()
     },
-    methods: {
-      // 获取数据列表
-      getDataList () {
-        this.dataListLoading = true
-        this.$http({
-          url: this.$http.adornUrl('/work/mttaskinfo/list'),
-          method: 'get',
-          params: this.$http.adornParams({
-            'page': this.pageIndex,
-            'limit': this.pageSize,
-            'key': this.dataForm.key
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    runtask (id) {
+      this.$http({
+        url: this.$http.adornUrl('/work/mttaskinfo/runtask'),
+        method: 'post',
+        data: this.$http.adornData(id, false)
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList()
+            }
           })
-        }).then(({data}) => {
-          if (data && data.code === 0) {
-            this.dataList = data.page.list
-            this.totalPage = data.page.totalCount
-          } else {
-            this.dataList = []
-            this.totalPage = 0
-          }
-          this.dataListLoading = false
+        } else {
+          this.$message.error(data.msg)
+        }
+      })
+    },
+    resetSub () {
+      this.$http({
+        url: this.$http.adornUrl(`/work/mttaskinfo/reset/${this.resetid}`),
+        method: 'get'
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.dialogVisible = false
+              this.getDataList()
+            }
+          })
+        }
+        this.dialogVisible = false
+      })
+    },
+    // 重置信号
+    reset (id) {
+      this.resetid = id
+      this.dialogVisible = true
+    },
+    handleClose (done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done()
         })
-      },
-      // 每页数
-      sizeChangeHandle (val) {
-        this.pageSize = val
-        this.pageIndex = 1
-        this.getDataList()
-      },
-      // 当前页
-      currentChangeHandle (val) {
-        this.pageIndex = val
-        this.getDataList()
-      },
-      // 新增 / 修改
-      addOrUpdateHandle (id) {
-        this.addOrUpdateVisible = true
-        this.$nextTick(() => {
-          this.$refs.addOrUpdate.init(id)
-        })
-      },
-      runtask (id) {
-        console.log(id)
+        .catch(_ => {})
+    },
+    // 删除
+    deleteHandle (id) {
+      this.$confirm(`确定对[id=${id}]进行删除操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
         this.$http({
-          url: this.$http.adornUrl('/work/mttaskinfo/runtask'),
+          url: this.$http.adornUrl('/work/mttaskinfo/delete'),
           method: 'post',
           data: this.$http.adornData(id, false)
-        }).then(({data}) => {
+        }).then(({ data }) => {
           if (data && data.code === 0) {
             this.$message({
               message: '操作成功',
@@ -211,34 +364,8 @@
             this.$message.error(data.msg)
           }
         })
-      },
-      // 删除
-      deleteHandle (id) {
-        this.$confirm(`确定对[id=${id}]进行删除操作?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl('/work/mttaskinfo/delete'),
-            method: 'post',
-            data: this.$http.adornData(id, false)
-          }).then(({data}) => {
-            if (data && data.code === 0) {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.getDataList()
-                }
-              })
-            } else {
-              this.$message.error(data.msg)
-            }
-          })
-        })
-      }
+      })
     }
   }
+}
 </script>
diff --git a/src/views/modules/work/testdata.js b/src/views/modules/work/testdata.js
new file mode 100644
index 0000000..542a0ba
--- /dev/null
+++ b/src/views/modules/work/testdata.js
@@ -0,0 +1,2608 @@
+/*
+ * @Author: gtz
+ * @Date: 2022-03-03 15:47:47
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-04-11 09:35:41
+ * @Description: file content
+ * @FilePath: \mt-ck-wms-ui\src\views\dashboard\testdata.js
+ */
+
+export default {
+  shelfList: [
+    {
+      id: 1,
+      name: 'shelf1',
+      rowList: [
+        {
+          id: 1,
+          name: 'row1',
+          portList: [
+            {
+              id: 1,
+              name: '12001',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 2,
+              name: '12002',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 3,
+              name: '12003',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 4,
+              name: '12004',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 5,
+              name: '12005',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 6,
+              name: '12006',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 7,
+              name: '12007',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 8,
+              name: '12008',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 9,
+              name: '12009',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 10,
+              name: '12010',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 11,
+              name: '12011',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 12,
+              name: '12012',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 13,
+              name: '12013',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 14,
+              name: '12014',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 15,
+              name: '12015',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 16,
+              name: '12016',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 17,
+              name: '12017',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 18,
+              name: '12018',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 19,
+              name: '12019',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 20,
+              name: '12020',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 21,
+              name: '12021',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 22,
+              name: '12022',
+              attribute: 1,
+              cassetteList: [
+                { id: 2, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 23,
+              name: '12023',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 24,
+              name: '12024',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 25,
+              name: '12025',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 26,
+              name: '12026',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 27,
+              name: '12027',
+              attribute: 1,
+              cassetteList: [
+                { id: 2, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 28,
+              name: '12028',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 29,
+              name: '12029',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 30,
+              name: '12030',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 31,
+              name: '12031',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 32,
+              name: '12032',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 33,
+              name: '12033',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 34,
+              name: '12034',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 35,
+              name: '12035',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 36,
+              name: '12036',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 37,
+              name: '12037',
+              attribute: 1,
+              cassetteList: [
+                { id: 2, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 38,
+              name: '12038',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 39,
+              name: '12039',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 40,
+              name: '12040',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 41,
+              name: '12041',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 42,
+              name: '12042',
+              attribute: 1,
+              cassetteList: [
+                { id: 2, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 43,
+              name: '12043',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 44,
+              name: '12044',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 45,
+              name: '12045',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 46,
+              name: '12046',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 47,
+              name: '12047',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 48,
+              name: '12048',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 49,
+              name: '12049',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 50,
+              name: '12050',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 51,
+              name: '12051',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 52,
+              name: '12052',
+              attribute: 1,
+              cassetteList: [
+                { id: 2, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 53,
+              name: '12053',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 54,
+              name: '12054',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 55,
+              name: '12055',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 56,
+              name: '12056',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 57,
+              name: '12057',
+              attribute: 1,
+              cassetteList: [
+                { id: 2, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 58,
+              name: '12058',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 59,
+              name: '12059',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 60,
+              name: '12060',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 61,
+              name: '12061',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 62,
+              name: '12062',
+              attribute: 1,
+              cassetteList: [
+                { id: 2, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 63,
+              name: '12063',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 64,
+              name: '12064',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 65,
+              name: '12065',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 66,
+              name: '12066',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 67,
+              name: '12067',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 68,
+              name: '12068',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 69,
+              name: '12069',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 70,
+              name: '12070',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 71,
+              name: '12071',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 72,
+              name: '12072',
+              attribute: 1,
+              cassetteList: [
+                { id: 2, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 73,
+              name: '12073',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 74,
+              name: '12074',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 75,
+              name: '12075',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 76,
+              name: '12076',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 77,
+              name: '12077',
+              attribute: 1,
+              cassetteList: [
+                { id: 2, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 78,
+              name: '12078',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 79,
+              name: '12079',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 80,
+              name: '12080',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 81,
+              name: '12081',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 82,
+              name: '12082',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 83,
+              name: '12083',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 84,
+              name: '12084',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 85,
+              name: '12085',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 86,
+              name: '12086',
+              attribute: 2,
+              cassetteList: [
+                { id: 1, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 87,
+              name: '12087',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 88,
+              name: '12088',
+              attribute: 2,
+              cassetteList: [
+                { id: 3, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 89,
+              name: '12089',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 90,
+              name: '12090',
+              attribute: 1,
+              cassetteList: [
+                { id: 5, name: 'cassette', status: 3 }
+              ]
+            }
+          ]
+        },
+        {
+          id: 2,
+          name: 'row2',
+          portList: [
+            {
+              id: 101,
+              name: '11001',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 102,
+              name: '11002',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 103,
+              name: '11003',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 104,
+              name: '11004',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 105,
+              name: '11005',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 106,
+              name: '11006',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 107,
+              name: '11007',
+              attribute: 1,
+              cassetteList: [
+                { id: 102, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 108,
+              name: '11008',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 109,
+              name: '11009',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 110,
+              name: '11010',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 111,
+              name: '11011',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 112,
+              name: '11012',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 113,
+              name: '11013',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 114,
+              name: '11014',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 115,
+              name: '11015',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 116,
+              name: '11016',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 117,
+              name: '11017',
+              attribute: 1,
+              cassetteList: [
+                { id: 102, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 118,
+              name: '11018',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 119,
+              name: '11019',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 120,
+              name: '11020',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 121,
+              name: '11021',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 122,
+              name: '11022',
+              attribute: 1,
+              cassetteList: [
+                { id: 102, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 123,
+              name: '11023',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 124,
+              name: '11024',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 125,
+              name: '11025',
+              attribute: 2,
+              cassetteList: [
+                { id: 105, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 126,
+              name: '11026',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 127,
+              name: '11027',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 128,
+              name: '11028',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 129,
+              name: '11029',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 130,
+              name: '11030',
+              attribute: 2,
+              cassetteList: [
+                { id: 105, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 131,
+              name: '11031',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 132,
+              name: '11032',
+              attribute: 1,
+              cassetteList: [
+                { id: 102, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 133,
+              name: '11033',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 134,
+              name: '11034',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 135,
+              name: '11035',
+              attribute: 2,
+              cassetteList: [
+                { id: 105, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 136,
+              name: '11036',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 137,
+              name: '11037',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 138,
+              name: '11038',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 139,
+              name: '11039',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 140,
+              name: '11040',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 141,
+              name: '11041',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 142,
+              name: '11042',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 143,
+              name: '11043',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 144,
+              name: '11044',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 145,
+              name: '11045',
+              attribute: 2,
+              cassetteList: [
+                { id: 105, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 146,
+              name: '11046',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 147,
+              name: '11047',
+              attribute: 1,
+              cassetteList: [
+                { id: 102, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 148,
+              name: '11048',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 149,
+              name: '11049',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 150,
+              name: '11050',
+              attribute: 2,
+              cassetteList: [
+                { id: 105, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 151,
+              name: '11051',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 152,
+              name: '11052',
+              attribute: 1,
+              cassetteList: [
+                { id: 102, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 153,
+              name: '11053',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 154,
+              name: '11054',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 155,
+              name: '11055',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 156,
+              name: '11056',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 157,
+              name: '11057',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 158,
+              name: '11058',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 159,
+              name: '11059',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 160,
+              name: '11060',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 161,
+              name: '11061',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 162,
+              name: '11062',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 163,
+              name: '11063',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 164,
+              name: '11064',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 165,
+              name: '11065',
+              attribute: 2,
+              cassetteList: [
+                { id: 105, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 166,
+              name: '11066',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 167,
+              name: '11067',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 168,
+              name: '11068',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 169,
+              name: '11069',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 170,
+              name: '11070',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 171,
+              name: '11071',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 172,
+              name: '11072',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 173,
+              name: '11073',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 174,
+              name: '11074',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 175,
+              name: '11075',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 176,
+              name: '11076',
+              attribute: 2,
+              cassetteList: [
+                { id: 101, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 177,
+              name: '11077',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 178,
+              name: '11078',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 179,
+              name: '11079',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 180,
+              name: '11080',
+              attribute: 2,
+              cassetteList: [
+                { id: 105, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 181,
+              name: '11081',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 182,
+              name: '11082',
+              attribute: 1,
+              cassetteList: [
+                { id: 102, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 183,
+              name: '11083',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 184,
+              name: '11084',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 185,
+              name: '11085',
+              attribute: 2,
+              cassetteList: [
+                { id: 105, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 186,
+              name: '11086',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 187,
+              name: '11087',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 188,
+              name: '11088',
+              attribute: 2,
+              cassetteList: [
+                { id: 103, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 189,
+              name: '11089',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 190,
+              name: '11090',
+              attribute: 2,
+              cassetteList: [
+                { id: 105, name: 'cassette', status: 4 }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      id: 2,
+      name: 'shelf2',
+      rowList: [
+        {
+          id: 3,
+          name: 'row1',
+          portList: [
+            {
+              id: 201,
+              name: '21001',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 202,
+              name: '21002',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 203,
+              name: '21003',
+              attribute: 2,
+              cassetteList: [
+                { id: 203, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 204,
+              name: '21004',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 205,
+              name: '21005',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 206,
+              name: '21006',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 207,
+              name: '21007',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 208,
+              name: '21008',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 209,
+              name: '21009',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 210,
+              name: '21010',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 211,
+              name: '21011',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 212,
+              name: '21012',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 213,
+              name: '21013',
+              attribute: 2,
+              cassetteList: [
+                { id: 203, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 214,
+              name: '21014',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 215,
+              name: '21015',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 216,
+              name: '21016',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 217,
+              name: '21017',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 218,
+              name: '21018',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 219,
+              name: '21019',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 220,
+              name: '21020',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 221,
+              name: '21021',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 222,
+              name: '21022',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 223,
+              name: '21023',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 224,
+              name: '21024',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 225,
+              name: '21025',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 226,
+              name: '21026',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 227,
+              name: '21027',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 228,
+              name: '21028',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 229,
+              name: '21029',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 230,
+              name: '21030',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 231,
+              name: '21031',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 232,
+              name: '21032',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 233,
+              name: '21033',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 234,
+              name: '21034',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 235,
+              name: '21035',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 236,
+              name: '21036',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 237,
+              name: '21037',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 238,
+              name: '21038',
+              attribute: 2,
+              cassetteList: [
+                { id: 203, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 239,
+              name: '21039',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 240,
+              name: '21040',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 241,
+              name: '21041',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 242,
+              name: '21042',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 243,
+              name: '21043',
+              attribute: 2,
+              cassetteList: [
+                { id: 203, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 244,
+              name: '21044',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 245,
+              name: '21045',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 246,
+              name: '21046',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 247,
+              name: '21047',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 248,
+              name: '21048',
+              attribute: 2,
+              cassetteList: [
+                { id: 203, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 249,
+              name: '21049',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 250,
+              name: '21050',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 251,
+              name: '21051',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 252,
+              name: '21052',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 253,
+              name: '21053',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 254,
+              name: '21054',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 255,
+              name: '21055',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 256,
+              name: '21056',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 257,
+              name: '21057',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 258,
+              name: '21058',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 259,
+              name: '21059',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 260,
+              name: '21060',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 261,
+              name: '21061',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 262,
+              name: '21062',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 263,
+              name: '21063',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 264,
+              name: '21064',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 265,
+              name: '21065',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 266,
+              name: '21066',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 267,
+              name: '21067',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 268,
+              name: '21068',
+              attribute: 2,
+              cassetteList: [
+                { id: 203, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 269,
+              name: '21069',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 270,
+              name: '21070',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 271,
+              name: '21071',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 272,
+              name: '21072',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 273,
+              name: '21073',
+              attribute: 2,
+              cassetteList: [
+                { id: 203, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 274,
+              name: '21074',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 275,
+              name: '21075',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 276,
+              name: '21076',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 277,
+              name: '21077',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 278,
+              name: '21078',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 279,
+              name: '21079',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 280,
+              name: '21080',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 281,
+              name: '21081',
+              attribute: 2,
+              cassetteList: [
+                { id: 201, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 282,
+              name: '21082',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 283,
+              name: '21083',
+              attribute: 2,
+              cassetteList: [
+                { id: 203, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 284,
+              name: '21084',
+              attribute: 1,
+              cassetteList: [
+                { id: 204, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 285,
+              name: '21085',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 286,
+              name: '21086',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 287,
+              name: '21087',
+              attribute: 1,
+              cassetteList: [
+                { id: 202, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 288,
+              name: '21088',
+              attribute: 2,
+              cassetteList: [
+                { id: 203, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 289,
+              name: '21089',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 290,
+              name: '21090',
+              attribute: 3,
+              cassetteList: []
+            }
+          ]
+        },
+        {
+          id: 4,
+          name: 'row2',
+          portList: [
+            {
+              id: 301,
+              name: '22001',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 302,
+              name: '22002',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 303,
+              name: '22003',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 304,
+              name: '22004',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 305,
+              name: '22005',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 306,
+              name: '22006',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 307,
+              name: '22007',
+              attribute: 1,
+              cassetteList: [
+                { id: 302, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 308,
+              name: '22008',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 309,
+              name: '22009',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 310,
+              name: '22010',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 311,
+              name: '22011',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 312,
+              name: '22012',
+              attribute: 1,
+              cassetteList: [
+                { id: 302, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 313,
+              name: '22013',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 314,
+              name: '22014',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 315,
+              name: '22015',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 316,
+              name: '22016',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 317,
+              name: '22017',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 318,
+              name: '22018',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 319,
+              name: '22019',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 320,
+              name: '22020',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 321,
+              name: '22021',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 322,
+              name: '22022',
+              attribute: 1,
+              cassetteList: [
+                { id: 302, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 323,
+              name: '22023',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 324,
+              name: '22024',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 325,
+              name: '22025',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 326,
+              name: '22026',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 327,
+              name: '22027',
+              attribute: 1,
+              cassetteList: [
+                { id: 302, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 328,
+              name: '22028',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 329,
+              name: '22029',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 330,
+              name: '22030',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 331,
+              name: '22031',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 332,
+              name: '22032',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 333,
+              name: '22033',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 334,
+              name: '22034',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 335,
+              name: '22035',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 336,
+              name: '22036',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 337,
+              name: '22037',
+              attribute: 1,
+              cassetteList: [
+                { id: 302, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 338,
+              name: '22038',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 339,
+              name: '22039',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 340,
+              name: '22040',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 341,
+              name: '22041',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 342,
+              name: '22042',
+              attribute: 1,
+              cassetteList: [
+                { id: 302, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 343,
+              name: '22043',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 344,
+              name: '22044',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 345,
+              name: '22045',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 346,
+              name: '22046',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 347,
+              name: '22047',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 348,
+              name: '22048',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 349,
+              name: '22049',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 350,
+              name: '22050',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 351,
+              name: '22051',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 352,
+              name: '22052',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 353,
+              name: '22053',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 354,
+              name: '22054',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 355,
+              name: '22055',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 356,
+              name: '22056',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 357,
+              name: '22057',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 358,
+              name: '22058',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 359,
+              name: '22059',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 360,
+              name: '22060',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 361,
+              name: '22061',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 362,
+              name: '22062',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 363,
+              name: '22063',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 364,
+              name: '22064',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 365,
+              name: '22065',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 366,
+              name: '22066',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 367,
+              name: '22067',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 368,
+              name: '22068',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 369,
+              name: '22069',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 370,
+              name: '22070',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 371,
+              name: '22071',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 372,
+              name: '22072',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 373,
+              name: '22073',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 374,
+              name: '22074',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 4 }
+              ]
+            },
+            {
+              id: 375,
+              name: '22075',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 376,
+              name: '22076',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 377,
+              name: '22077',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 378,
+              name: '22078',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 379,
+              name: '22079',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 380,
+              name: '22080',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 381,
+              name: '22081',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 382,
+              name: '22082',
+              attribute: 1,
+              cassetteList: []
+            },
+            {
+              id: 383,
+              name: '22083',
+              attribute: 2,
+              cassetteList: [
+                { id: 303, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 384,
+              name: '22084',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 1 }
+              ]
+            },
+            {
+              id: 385,
+              name: '22085',
+              attribute: 3,
+              cassetteList: []
+            },
+            {
+              id: 386,
+              name: '22086',
+              attribute: 2,
+              cassetteList: [
+                { id: 301, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 387,
+              name: '22087',
+              attribute: 1,
+              cassetteList: [
+                { id: 302, name: 'cassette', status: 3 }
+              ]
+            },
+            {
+              id: 388,
+              name: '22088',
+              attribute: 2,
+              cassetteList: []
+            },
+            {
+              id: 389,
+              name: '22089',
+              attribute: 2,
+              cassetteList: [
+                { id: 304, name: 'cassette', status: 2 }
+              ]
+            },
+            {
+              id: 390,
+              name: '22090',
+              attribute: 3,
+              cassetteList: []
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  portAttributeList: [
+    { id: 1, name: '工作', color: '#E1EBFF' },
+    { id: 2, name: '缓冲', color: '#FFF8E8' },
+    { id: 3, name: '异常', color: '#F6F6F6' }
+  ],
+  portAttributeObj: {
+    1: '#E1EBFF',
+    2: '#FFF8E8',
+    3: '#F6F6F6'
+  },
+  cassetteStatusList: [
+    { id: 1, name: '空', color: '#7362F3' },
+    { id: 2, name: '有货', color: '#FFD781' },
+    { id: 3, name: '正常', color: '#16DC09' },
+    { id: 4, name: '异常', color: '#FFA08F' }
+  ],
+  cassetteStatusObj: {
+    1: '#7362F3',
+    2: '#FFD781',
+    3: '#16DC09',
+    4: '#FFA08F'
+  },
+  current: 1,
+  totalPage: 1,
+  rowIndex: ['一', '二']
+}
diff --git a/src/views/modules/work/wareMonitor.vue b/src/views/modules/work/wareMonitor.vue
new file mode 100644
index 0000000..2f736de
--- /dev/null
+++ b/src/views/modules/work/wareMonitor.vue
@@ -0,0 +1,192 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-03-03 09:16:10
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-04-11 09:10:11
+ * @Description: file content
+ * @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue
+-->
+<template>
+  <div class="dashboard-container">
+    <el-card class="dashboard-main">
+      <el-row class="dashboard-title">
+        <div class="dashboard-header-line" />
+        <div class="dashboard-header-title">WMS库存信息</div>
+      </el-row>
+      <el-row class="dashboard-legend">
+        <div v-for="item in cassetteStatusList" :key="'cassette' + item.id" class="dashboard-legend-cassette">
+          <div class="dashboard-legend-cassette-cricle" :style="{background: item.color}" />
+          {{ item.name }}
+        </div>
+        |
+        <div v-for="item in portAttributeList" :key="'port' + item.id" class="dashboard-legend-port" :style="{background: item.color}">
+          {{ item.name }}
+        </div>
+        <div class="dashboard-legend-search">
+          <el-select v-model="current" size="mini" placeholder="请选择库存范围" @change="handleChange">
+            <el-option v-for="item in totalPage" :key="'select' + item" :label="'第' + item + '页'" :value="item" />
+          </el-select>
+        </div>
+      </el-row>
+      <el-row v-if="current * 80 < shelfList[0].rowList[0].portList.length" class="dashboard-layout" :gutter="12">
+        <el-col v-for="item in 4" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6">
+          <el-row>
+            <el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf">
+              <el-row>
+                <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row">
+                  <div v-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}">
+                    <div v-if="z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
+                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                  </div>
+                </el-col>
+              </el-row>
+              <div class="dashboard-layout-footer">
+                {{ '第' + rowIndex[index] + '排(' + ((current - 1) * 4 + item) + ')' }}
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+      <el-row v-else class="dashboard-layout" :gutter="12">
+        <el-col v-for="item in Math.ceil((shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20)" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6">
+          <el-row>
+            <el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf">
+              <el-row v-if="item < Math.ceil((shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20)">
+                <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row">
+                  <div v-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}">
+                    <div v-if="z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
+                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row v-else>
+                <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row">
+                  <div v-for="x in shelfList[0].rowList[0].portList.length - (item - 1) * 20 - (current - 1) * 80" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}">
+                    <div v-if="z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
+                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                  </div>
+                </el-col>
+              </el-row>
+              <div class="dashboard-layout-footer">
+                {{ '第' + rowIndex[index] + '排(' + ((current - 1) * 4 + item) + ')' }}
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import testdata from './testdata'
+
+export default {
+  name: 'Dashboard',
+  data () {
+    return testdata
+  },
+  created () {
+    console.log(this.shelfList)
+    this.totalPage = Math.ceil(this.shelfList[0].rowList[0].portList.length / 80)
+  },
+  methods: {
+    handleChange (v) {
+      console.log(v)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-container {
+  background: #F2F4F9;
+  min-height: calc(100vh - 134px);
+  overflow-x: scroll;
+  font-size: 14px;
+  .dashboard-main {
+    width: 100%;
+    min-width: 1380px;
+    background-color: #fff;
+    border-radius: 8px;
+    min-height: calc(100vh - 186px);
+    .dashboard-title {
+      .dashboard-header-line{
+        display: inline-block;
+        width: 4px;
+        height: 16px;
+        background: #0B58FF;
+        border-radius: 1px;
+        position: relative;
+        top: 2px;
+        margin-right: 4px;
+      }
+      .dashboard-header-title{
+        display: inline-block;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        line-height: 16px;
+      }
+    }
+    .dashboard-legend {
+      margin-top: 20px;
+      .dashboard-legend-cassette {
+        display: inline-block;
+        margin-right: 24px;
+        .dashboard-legend-cassette-cricle {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          border-radius: 6px;
+        }
+      }
+      .dashboard-legend-port {
+        display: inline-block;
+        height: 24px;
+        line-height: 24px;
+        border-radius: 4px;
+        padding: 0 16px;
+        margin-left: 24px;
+      }
+      .dashboard-legend-search {
+        float: right;
+      }
+    }
+    .dashboard-layout {
+      margin: 20px 0;
+      .dashboard-layout-shelf-box {
+        .dashboard-layout-footer {
+          text-align: center;
+          margin-top: 12px;
+        }
+        .dashboard-layout-shelf {
+          padding: 0 8px;
+          .dashboard-layout-row {
+            padding: 0 1px;
+            .dashboard-layout-item {
+              width: 100%;
+              text-align: center;
+              height: 32px;
+              box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
+              border-radius: 2px 4px 4px 2px;
+              margin-bottom: 8px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              .dashboard-layout-item-cricle{
+                display: inline-block;
+                width: 12px;
+                height: 12px;
+                border-radius: 6px;
+                margin-right: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>