mt-ck-00a/mt-ck-wms-ui
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

首页对接以及库位详情 #69

Merged
gtz217 merged 2 commits from gtz into develop 2022-03-16 20:12:21 +08:00
Conversation 0 Commits 2 Files Changed 9 +959 -814
9 changed files with 959 additions and 814 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/api/dashboard.js Normal file
View File

@ -0,0 +1,27 @@
/*
* @Author: gtz
* @Date: 2022-03-16 16:08:06
* @LastEditors: gtz
* @LastEditTime: 2022-03-16 16:45:41
* @Description: file content
* @FilePath: \mt-ck-wms-ui\src\api\dashboard.js
*/
import request from '@/utils/request'
// 获取菜单列表
export function getPortList(data) {
return request({
url: '/api/wms/location/shelfList',
method: 'post',
data
})
}
// 获取菜单详情
export function getPortDetail(id) {
return request({
url: '/api/wms/storage/box/circ/info/getByLocationId',
method: 'post',
data: { id }
})
}

4
src/lang/i18n.js
View File

@ -115,6 +115,10 @@ export default {
design: { design: {
zh: '设计', zh: '设计',
en: 'Design' en: 'Design'
},
refresh: {
zh: '刷新',
en: 'Refresh'
} }
}, },
navbar: { navbar: {

13
src/lang/i18n/en/module/dashboard.js
View File

@ -1,8 +1,8 @@
/* /*
* @Author: gtz * @Author: gtz
* @Date: 2022-03-15 16:42:34 * @Date: 2022-03-15 16:42:34
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2022-03-16 08:57:49 * @LastEditTime: 2022-03-16 20:01:32
* @Description: file content * @Description: file content
* @FilePath: \mt-ck-wms-ui\src\lang\i18n\en\module\dashboard.js * @FilePath: \mt-ck-wms-ui\src\lang\i18n\en\module\dashboard.js
*/ */
@ -12,5 +12,12 @@ export default {
second: 'Second Row', second: 'Second Row',
title: 'WMS Inventory Information', title: 'WMS Inventory Information',
pageHeader: 'No.', pageHeader: 'No.',
pageFooter: ' Page' pageFooter: ' Page',
isEmpty: 'Is Empty',
status: 'Status',
storageBoxCode: 'Cassette Code',
name: 'Location Name',
attribute: 'Location Attribute',
cassetteStatus: 'Cassette Status',
workOrderNo: 'Work Order Number'
} }

11
src/lang/i18n/zh/module/dashboard.js
View File

@ -2,7 +2,7 @@
* @Author: gtz * @Author: gtz
* @Date: 2022-03-15 16:42:34 * @Date: 2022-03-15 16:42:34
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2022-03-15 16:58:30 * @LastEditTime: 2022-03-16 20:01:27
* @Description: file content * @Description: file content
* @FilePath: \mt-ck-wms-ui\src\lang\i18n\zh\module\dashboard.js * @FilePath: \mt-ck-wms-ui\src\lang\i18n\zh\module\dashboard.js
*/ */
@ -12,5 +12,12 @@ export default {
second: '第二排', second: '第二排',
title: 'WMS库存信息', title: 'WMS库存信息',
pageHeader: '第', pageHeader: '第',
pageFooter: '页' pageFooter: '页',
isEmpty: '是否为空',
status: '状态',
storageBoxCode: '存储箱编码',
name: '库位名',
attribute: '库位属性',
cassetteStatus: '存储箱状态',
workOrderNo: '工单号'
} }

78
src/views/basicData/Warehouse/components/processStorageLink.vue
View File

@ -1,10 +1,10 @@
<!-- <!--
* @Author: gtz * @Author: gtz
* @Date: 2022-03-03 09:16:10 * @Date: 2022-03-03 09:16:10
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2022-03-16 10:11:10 * @LastEditTime: 2022-03-16 19:25:19
* @Description: file content * @Description: file content
* @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue * @FilePath: \mt-ck-wms-ui\src\views\basicData\Warehouse\components\processStorageLink.vue
--> -->
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
@ -45,14 +45,13 @@
<el-select <el-select
v-model="current" v-model="current"
size="mini" size="mini"
placeholder="请选择库存范围"
@change="handleChange" @change="handleChange"
><el-option v-for="item in totalPage" :key="'select' + item" :label="$t('module.dashboard.pageHeader') + item + $t('module.dashboard.pageFooter')" :value="item" /> ><el-option v-for="item in totalPage" :key="'select' + item" :label="$t('module.dashboard.pageHeader') + item + $t('module.dashboard.pageFooter')" :value="item" />
</el-select> </el-select>
</div> </div>
</el-row> </el-row>
<el-row <el-row
v-if="current * 80 < shelfList[0].rowList[0].portList.length" v-if="current * 80 < shelfVoList[0].rowVoList[0].portVoList.length"
class="dashboard-layout" class="dashboard-layout"
:gutter="12" :gutter="12"
> >
@ -64,14 +63,14 @@
> >
<el-row> <el-row>
<el-col <el-col
v-for="(i, index) in shelfList" v-for="(i, index) in shelfVoList"
:key="item + 'shelf' + i.id" :key="item + 'shelf' + i.id"
:span="12" :span="12"
class="dashboard-layout-shelf" class="dashboard-layout-shelf"
> >
<el-row> <el-row>
<el-col <el-col
v-for="z in i.rowList" v-for="z in i.rowVoList"
:key="item + 'shelf' + i + 'row' + z.id" :key="item + 'shelf' + i + 'row' + z.id"
:span="12" :span="12"
class="dashboard-layout-row" class="dashboard-layout-row"
@ -83,36 +82,36 @@
:style="{ :style="{
background: background:
portAttributeObj[ portAttributeObj[
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
].attribute ].attribute
], ],
cursor: cursor:
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
].attribute === 3 ].attribute === 3
? 'not-allowed' ? 'not-allowed'
: 'pointer', : 'pointer',
color: color:
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
].attribute === 3 ].attribute === 3
? '#A2A8B5' ? '#A2A8B5'
: '', : '',
border: border:
selectStorageList.some(StorageItem=>StorageItem.locationId===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) selectStorageList.some(StorageItem=>StorageItem.locationId===z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id)
? '1px solid red' : '' ? '1px solid red' : ''
}" }"
@click=" @click="
setType( setType(
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
] ]
) )
" "
> >
<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] : ''}" /> <div v-if="z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0] ? cassetteStatusObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[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' }} {{ z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -126,7 +125,7 @@
<el-row v-else class="dashboard-layout" :gutter="12"> <el-row v-else class="dashboard-layout" :gutter="12">
<el-col <el-col
v-for="item in Math.ceil( v-for="item in Math.ceil(
(shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20 (shelfVoList[0].rowVoList[0].portVoList.length - (current - 1) * 80) / 20
)" )"
:key="'shelfbox' + item" :key="'shelfbox' + item"
class="dashboard-layout-shelf-box" class="dashboard-layout-shelf-box"
@ -134,7 +133,7 @@
> >
<el-row> <el-row>
<el-col <el-col
v-for="(i, index) in shelfList" v-for="(i, index) in shelfVoList"
:key="item + 'shelf' + i.id" :key="item + 'shelf' + i.id"
:span="12" :span="12"
class="dashboard-layout-shelf" class="dashboard-layout-shelf"
@ -143,14 +142,14 @@
v-if=" v-if="
item < item <
Math.ceil( Math.ceil(
(shelfList[0].rowList[0].portList.length - (shelfVoList[0].rowVoList[0].portVoList.length -
(current - 1) * 80) / (current - 1) * 80) /
20 20
) )
" "
> >
<el-col <el-col
v-for="z in i.rowList" v-for="z in i.rowVoList"
:key="item + 'shelf' + i + 'row' + z.id" :key="item + 'shelf' + i + 'row' + z.id"
:span="12" :span="12"
class="dashboard-layout-row" class="dashboard-layout-row"
@ -162,48 +161,48 @@
:style="{ :style="{
background: background:
portAttributeObj[ portAttributeObj[
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
].attribute ].attribute
], ],
cursor: cursor:
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
].attribute === 3 ].attribute === 3
? 'not-allowed' ? 'not-allowed'
: 'pointer', : 'pointer',
color: color:
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
].attribute === 3 ].attribute === 3
? '#A2A8B5' ? '#A2A8B5'
: '', : '',
border: border:
selectStorageList.some(StorageItem=>StorageItem.locationId===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) selectStorageList.some(StorageItem=>StorageItem.locationId===z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id)
? '1px solid red' : '' ? '1px solid red' : ''
}" }"
@click=" @click="
setType( setType(
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
] ]
) )
" "
> >
<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] : ''}" /> <div v-if="z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0] ? cassetteStatusObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[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' }} {{ z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-else> <el-row v-else>
<el-col <el-col
v-for="z in i.rowList" v-for="z in i.rowVoList"
:key="item + 'shelf' + i + 'row' + z.id" :key="item + 'shelf' + i + 'row' + z.id"
:span="12" :span="12"
class="dashboard-layout-row" class="dashboard-layout-row"
> >
<div <div
v-for="x in shelfList[0].rowList[0].portList.length - v-for="x in shelfVoList[0].rowVoList[0].portVoList.length -
(item - 1) * 20 - (item - 1) * 20 -
(current - 1) * 80" (current - 1) * 80"
:key="item + 'shelf' + i + 'row' + z + 'item' + x" :key="item + 'shelf' + i + 'row' + z + 'item' + x"
@ -211,36 +210,36 @@
:style="{ :style="{
background: background:
portAttributeObj[ portAttributeObj[
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
].attribute ].attribute
], ],
cursor: cursor:
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
].attribute === 3 ].attribute === 3
? 'not-allowed' ? 'not-allowed'
: 'pointer', : 'pointer',
color: color:
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
].attribute === 3 ].attribute === 3
? '#A2A8B5' ? '#A2A8B5'
: '', : '',
border: border:
selectStorageList.some(StorageItem=>StorageItem.locationId===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) selectStorageList.some(StorageItem=>StorageItem.locationId===z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id)
? '1px solid red' : '' ? '1px solid red' : ''
}" }"
@click=" @click="
setType( setType(
z.portList[ z.portVoList[
(current - 1) * 80 + (item - 1) * 20 + (x - 1) (current - 1) * 80 + (item - 1) * 20 + (x - 1)
] ]
) )
" "
> >
<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] : ''}" /> <div v-if="z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0] ? cassetteStatusObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[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' }} {{ z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -261,6 +260,7 @@
</template> </template>
<script> <script>
import { getPortList } from '@/api/dashboard'
import { batchListAdd } from '@/api/basicData/Warehouse/StorageBoxInfo' import { batchListAdd } from '@/api/basicData/Warehouse/StorageBoxInfo'
import testdata from './testdata' import testdata from './testdata'
import processStorageType from './processStorageType' import processStorageType from './processStorageType'
@ -273,13 +273,15 @@ export default {
}, },
created() { created() {
this.id = this.$route.query.id this.id = this.$route.query.id
this.totalPage = Math.ceil( this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80)
this.shelfList[0].rowList[0].portList.length / 80
)
this.init() this.init()
}, },
methods: { methods: {
init() { init() {
getPortList().then(res => {
this.shelfVoList = res.data[0].shelfVoList
this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80)
})
this.selectStorageList.splice(0, this.selectStorageList.length) this.selectStorageList.splice(0, this.selectStorageList.length)
}, },
setType(item) { setType(item) {
@ -321,7 +323,7 @@ export default {
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.selectStorageList.splice(0, this.selectStorageList.length) this.init()
} }
}) })
}) })

734
src/views/basicData/Warehouse/components/testdata.js
View File

File diff suppressed because it is too large Load Diff

75
src/views/dashboard/components/PortDetail.vue Normal file
View File

@ -0,0 +1,75 @@
<!--
* @Author: zwq
* @Date: 2020-12-29 16:37:56
* @LastEditors: gtz
* @LastEditTime: 2022-03-16 20:06:20
* @Description:
-->
<template>
<el-dialog
:title="'btn.detail' | i18nFilter"
:visible.sync="visible"
>
<el-form ref="dataForm" :model="dataForm" label-width="150px">
<el-form-item :label="$t('module.dashboard.name')" prop="name">
{{ dataForm.name }}
</el-form-item>
<el-form-item :label="$t('module.dashboard.attribute')" prop="attribute">
{{ dataForm.attribute ? portAttributeObj[dataForm.attribute] : '' }}
</el-form-item>
<el-form-item :label="$t('module.dashboard.cassetteStatus')" prop="cassetteVoList">
{{ dataForm.cassetteVoList.length && dataForm.cassetteVoList[0].status ? cassetteStatusObj[dataForm.cassetteVoList[0].status] : '' }}
</el-form-item>
<el-form-item :label="$t('module.dashboard.workOrderNo')" prop="workOrderNo">
{{ dataForm.workOrderNo }}
</el-form-item>
<el-form-item :label="$t('module.dashboard.storageBoxCode')" prop="storageBoxCode">
{{ dataForm.storageBoxCode }}
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false,
dataForm: {
code: null,
createTime: null,
currLocation: null,
currLocationId: null,
id: null,
isEmpty: null,
status: null,
storageBoxCode: null,
storageBoxId: null,
updateTime: null
},
cassetteStatusObj: {
'1': 'Empty Cassette',
'2': 'Dummy Cassette',
'3': 'OK Cassette',
'4': 'NOK Cassette'
},
portAttributeObj: {
1: 'Working Port',
2: 'Buffer Port',
3: 'Exception Port'
}
}
},
methods: {
init(data) {
console.log(data)
this.visible = true
this.dataForm = data
}
}
}
</script>

64
src/views/dashboard/index.vue
View File

@ -2,7 +2,7 @@
* @Author: gtz * @Author: gtz
* @Date: 2022-03-03 09:16:10 * @Date: 2022-03-03 09:16:10
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2022-03-15 16:47:57 * @LastEditTime: 2022-03-16 20:07:40
* @Description: file content * @Description: file content
* @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue * @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue
--> -->
@ -23,20 +23,21 @@
{{ item.name }} {{ item.name }}
</div> </div>
<div class="dashboard-legend-search"> <div class="dashboard-legend-search">
<el-select v-model="current" size="mini" placeholder="请选择库存范围" @change="handleChange"> <el-select v-model="current" size="mini" @change="handleChange">
<el-option v-for="item in totalPage" :key="'select' + item" :label="$t('module.dashboard.pageHeader') + item + $t('module.dashboard.pageFooter')" :value="item" /> <el-option v-for="item in totalPage" :key="'select' + item" :label="$t('module.dashboard.pageHeader') + item + $t('module.dashboard.pageFooter')" :value="item" />
</el-select> </el-select>
<el-button type="primary" @click="refresh">{{ 'btn.refresh' | i18nFilter }}</el-button>
</div> </div>
</el-row> </el-row>
<el-row v-if="current * 80 < shelfList[0].rowList[0].portList.length" class="dashboard-layout" :gutter="12"> <el-row v-if="current * 80 < shelfVoList[0].rowVoList[0].portVoList.length" class="dashboard-layout" :gutter="12">
<el-col v-for="item in 4" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6"> <el-col v-for="item in 4" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6">
<el-row> <el-row>
<el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf"> <el-col v-for="(i, index) in shelfVoList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf">
<el-row> <el-row>
<el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row"> <el-col v-for="z in i.rowVoList" :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-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}" @click="handlePort(z, x)">
<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] : ''}" /> <div v-if="z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0] ? cassetteStatusObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[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' }} {{ z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -48,22 +49,22 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row v-else class="dashboard-layout" :gutter="12"> <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-col v-for="item in Math.ceil((shelfVoList[0].rowVoList[0].portVoList.length - (current - 1) * 80) / 20)" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6">
<el-row> <el-row>
<el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf"> <el-col v-for="(i, index) in shelfVoList" :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-row v-if="item < Math.ceil((shelfVoList[0].rowVoList[0].portVoList.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"> <el-col v-for="z in i.rowVoList" :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-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}" @click="handlePort(z, x)">
<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] : ''}" /> <div v-if="z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0] ? cassetteStatusObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[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' }} {{ z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-else> <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"> <el-col v-for="z in i.rowVoList" :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-for="x in shelfVoList[0].rowVoList[0].portVoList.length - (item - 1) * 20 - (current - 1) * 80" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}" @click="handlePort(z, x)">
<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] : ''}" /> <div v-if="z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0] ? cassetteStatusObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[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' }} {{ z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -75,24 +76,45 @@
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<port-detail ref="addOrUpdate" />
</div> </div>
</template> </template>
<script> <script>
import testdata from './testdata' import testdata from './testdata'
import { getPortList, getPortDetail } from '@/api/dashboard'
import portDetail from './components/PortDetail'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: { portDetail },
data() { data() {
return testdata return testdata
}, },
created() { created() {
console.log(this.shelfList) this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80)
this.totalPage = Math.ceil(this.shelfList[0].rowList[0].portList.length / 80) this.init()
}, },
methods: { methods: {
init() {
getPortList().then(res => {
this.shelfVoList = res.data[0].shelfVoList
this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80)
})
},
handleChange(v) { handleChange(v) {
console.log(v) console.log(v)
},
handlePort(z, x) {
getPortDetail(z.portVoList[x - 1].id).then(res => {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init({ ...(res.data), ...z.portVoList[x - 1] })
})
})
},
refresh() {
this.init()
} }
} }
} }

767
src/views/dashboard/testdata.js
View File

File diff suppressed because it is too large Load Diff