This commit is contained in:
parent
ff8adae814
commit
4876a48c39
@ -2,7 +2,7 @@
|
|||||||
* @Author: gtz
|
* @Author: gtz
|
||||||
* @Date: 2021-11-19 10:10:51
|
* @Date: 2021-11-19 10:10:51
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-06-30 11:11:45
|
* @LastEditTime: 2023-03-07 15:48:48
|
||||||
* @Description: file content
|
* @Description: file content
|
||||||
* @FilePath: \mt-qj-wms-ui\config\index.js
|
* @FilePath: \mt-qj-wms-ui\config\index.js
|
||||||
*/
|
*/
|
||||||
@ -22,8 +22,8 @@ module.exports = {
|
|||||||
// 代理列表, 是否开启代理通过[./dev.env.js]配置
|
// 代理列表, 是否开启代理通过[./dev.env.js]配置
|
||||||
proxyTable: devEnv.OPEN_PROXY === false ? {} : {
|
proxyTable: devEnv.OPEN_PROXY === false ? {} : {
|
||||||
'/proxyApi': {
|
'/proxyApi': {
|
||||||
// target: 'http://192.168.1.16:8089/wms-qy/',
|
target: 'http://192.168.1.12:8089/wms-qy/',
|
||||||
target: 'http://qy.wms.picaiba.com/wms-qy/',
|
// target: 'http://qy.wms.picaiba.com/wms-qy/',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
'^/proxyApi': '/'
|
'^/proxyApi': '/'
|
||||||
@ -32,7 +32,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// Various Dev Server settings
|
// 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
|
port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||||
autoOpenBrowser: true,
|
autoOpenBrowser: true,
|
||||||
errorOverlay: true,
|
errorOverlay: true,
|
||||||
|
@ -56,7 +56,8 @@
|
|||||||
{ path: '/mtwarehouspositionrelatlog', component: _import('modules/work/mtwarehouspositionrelatlog'), name: 'mtwarehouspositionrelatlog', meta: { title: '库位使用详情日志', isTab: true } },
|
{ 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: '/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: '/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) {
|
beforeEnter (to, from, next) {
|
||||||
let token = Vue.cookie.get('token')
|
let token = Vue.cookie.get('token')
|
||||||
|
@ -19,6 +19,10 @@
|
|||||||
<icon-svg name="zaijiagong" class="site-sidebar__menu-icon"></icon-svg>
|
<icon-svg name="zaijiagong" class="site-sidebar__menu-icon"></icon-svg>
|
||||||
<span slot="title">仓库监控</span>
|
<span slot="title">仓库监控</span>
|
||||||
</el-menu-item>
|
</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' })">
|
<el-menu-item index="instock" @click="$router.push({ name: 'instock' })">
|
||||||
<icon-svg name="sousuo" class="site-sidebar__menu-icon"></icon-svg>
|
<icon-svg name="sousuo" class="site-sidebar__menu-icon"></icon-svg>
|
||||||
|
@ -1,8 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mod-config">
|
<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-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-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -12,22 +20,29 @@
|
|||||||
<el-table
|
<el-table
|
||||||
:data="dataList"
|
:data="dataList"
|
||||||
:stripe="true"
|
:stripe="true"
|
||||||
:header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
|
:header-cell-style="{
|
||||||
|
background: '#eef1f6',
|
||||||
|
color: '#606266',
|
||||||
|
height: '56px'
|
||||||
|
}"
|
||||||
border
|
border
|
||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
style="width: 100%;">
|
style="width: 100%;"
|
||||||
|
>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
type="index"
|
type="index"
|
||||||
label="序号"
|
label="序号"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="50">
|
width="50"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="createTime"
|
prop="createTime"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="添加时间">
|
label="添加时间"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<!-- <el-table-column
|
<!-- <el-table-column
|
||||||
prop="userName"
|
prop="userName"
|
||||||
@ -45,22 +60,29 @@
|
|||||||
prop="taskType"
|
prop="taskType"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="任务类型">
|
label="任务类型"
|
||||||
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{scope.row.taskType === 0?'出库' :scope.row.taskType === 1?'入库': '移库'}}</span>
|
<span>{{ taskType[scope.row.taskType - 1] }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="status"
|
prop="status"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="状态">
|
label="状态"
|
||||||
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{
|
<span>{{
|
||||||
scope.row.status === 0?'未执行'
|
scope.row.status === 0
|
||||||
:scope.row.status === 1?'执行中'
|
? "未执行"
|
||||||
:scope.row.status === 2?'执行完成'
|
: scope.row.status === 1
|
||||||
:scope.row.status === 3?'送达滚筒':'执行失败'
|
? "执行中"
|
||||||
|
: scope.row.status === 2
|
||||||
|
? "执行完成"
|
||||||
|
: scope.row.status === 3
|
||||||
|
? "送达滚筒"
|
||||||
|
: "执行失败"
|
||||||
}}</span>
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
@ -68,13 +90,15 @@
|
|||||||
prop="taskCode"
|
prop="taskCode"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="任务编码">
|
label="任务编码"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="productCode"
|
prop="productCode"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="产品编码">
|
label="产品编码"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<!-- <el-table-column
|
<!-- <el-table-column
|
||||||
prop="specModel"
|
prop="specModel"
|
||||||
@ -86,7 +110,8 @@
|
|||||||
prop="num"
|
prop="num"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="数量">
|
label="数量"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<!-- <el-table-column
|
<!-- <el-table-column
|
||||||
prop="unit"
|
prop="unit"
|
||||||
@ -98,19 +123,41 @@
|
|||||||
prop="remarks"
|
prop="remarks"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="备注"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="200"
|
width="220"
|
||||||
label="操作">
|
label="操作"
|
||||||
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<!-- <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button> -->
|
<!-- <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
|
||||||
<el-button type="text" size="small" @click="runtask(scope.row.id)">执行</el-button>
|
type="text"
|
||||||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
|
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>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -121,27 +168,77 @@
|
|||||||
:page-sizes="[10, 20, 50, 100]"
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
:total="totalPage"
|
:total="totalPage"
|
||||||
layout="total, sizes, prev, pager, next, jumper">
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
>
|
||||||
</el-pagination>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AddOrUpdate from './mttaskinfo-add-or-update'
|
import AddOrUpdate from './mttaskinfo-add-or-update'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dataForm: {
|
dataForm: {
|
||||||
key: ''
|
key: ''
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
taskType: [
|
||||||
|
'A线出库到电子锯',
|
||||||
|
'B线出库到电子锯',
|
||||||
|
'A线扫码入库',
|
||||||
|
'B线扫码入库',
|
||||||
|
'A线退料',
|
||||||
|
'B线退料',
|
||||||
|
'A线人为出库',
|
||||||
|
'B线人为出库'
|
||||||
|
],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
dataListLoading: false,
|
dataListLoading: false,
|
||||||
addOrUpdateVisible: false
|
addOrUpdateVisible: false,
|
||||||
|
dialogVisible: false,
|
||||||
|
resetid: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
@ -158,11 +255,11 @@
|
|||||||
url: this.$http.adornUrl('/work/mttaskinfo/list'),
|
url: this.$http.adornUrl('/work/mttaskinfo/list'),
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: this.$http.adornParams({
|
params: this.$http.adornParams({
|
||||||
'page': this.pageIndex,
|
page: this.pageIndex,
|
||||||
'limit': this.pageSize,
|
limit: this.pageSize,
|
||||||
'key': this.dataForm.key
|
key: this.dataForm.key
|
||||||
})
|
})
|
||||||
}).then(({data}) => {
|
}).then(({ data }) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
this.dataList = data.page.list
|
this.dataList = data.page.list
|
||||||
this.totalPage = data.page.totalCount
|
this.totalPage = data.page.totalCount
|
||||||
@ -192,12 +289,11 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
runtask (id) {
|
runtask (id) {
|
||||||
console.log(id)
|
|
||||||
this.$http({
|
this.$http({
|
||||||
url: this.$http.adornUrl('/work/mttaskinfo/runtask'),
|
url: this.$http.adornUrl('/work/mttaskinfo/runtask'),
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: this.$http.adornData(id, false)
|
data: this.$http.adornData(id, false)
|
||||||
}).then(({data}) => {
|
}).then(({ data }) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: '操作成功',
|
message: '操作成功',
|
||||||
@ -212,6 +308,37 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
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()
|
||||||
|
})
|
||||||
|
.catch(_ => {})
|
||||||
|
},
|
||||||
// 删除
|
// 删除
|
||||||
deleteHandle (id) {
|
deleteHandle (id) {
|
||||||
this.$confirm(`确定对[id=${id}]进行删除操作?`, '提示', {
|
this.$confirm(`确定对[id=${id}]进行删除操作?`, '提示', {
|
||||||
@ -223,7 +350,7 @@
|
|||||||
url: this.$http.adornUrl('/work/mttaskinfo/delete'),
|
url: this.$http.adornUrl('/work/mttaskinfo/delete'),
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: this.$http.adornData(id, false)
|
data: this.$http.adornData(id, false)
|
||||||
}).then(({data}) => {
|
}).then(({ data }) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: '操作成功',
|
message: '操作成功',
|
||||||
@ -240,5 +367,5 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
2608
src/views/modules/work/testdata.js
Normal file
2608
src/views/modules/work/testdata.js
Normal file
File diff suppressed because it is too large
Load Diff
192
src/views/modules/work/wareMonitor.vue
Normal file
192
src/views/modules/work/wareMonitor.vue
Normal file
@ -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>
|
Loading…
Reference in New Issue
Block a user