@@ -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, | |||
@@ -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') | |||
@@ -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> | |||
@@ -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 | |||
// 每页数 | |||
sizeChangeHandle (val) { | |||
this.pageSize = val | |||
this.pageIndex = 1 | |||
this.getDataList() | |||
}, | |||
activated () { | |||
// 当前页 | |||
currentChangeHandle (val) { | |||
this.pageIndex = val | |||
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 | |||
// 新增 / 修改 | |||
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 | |||
}) | |||
}, | |||
// 每页数 | |||
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) | |||
} 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() | |||
}) | |||
}, | |||
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> |
@@ -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> |