update dashboard
This commit is contained in:
parent
1ed431e10a
commit
ba3983e085
@ -2,7 +2,7 @@
|
||||
* @Author: gtz
|
||||
* @Date: 2022-03-03 09:16:10
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-03-07 19:47:15
|
||||
* @LastEditTime: 2022-03-07 20:14:55
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue
|
||||
-->
|
||||
@ -28,13 +28,13 @@
|
||||
</el-select>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row v-if="current * 80 < shelfList[0].rowList[0].portList.length" class="dashboard-layout" :gutter="20">
|
||||
<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 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'}">
|
||||
<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: cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status]}" />
|
||||
{{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name }}
|
||||
</div>
|
||||
@ -44,13 +44,13 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-else class="dashboard-layout" :gutter="20">
|
||||
<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 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'}">
|
||||
<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: cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status]}" />
|
||||
{{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name }}
|
||||
</div>
|
||||
@ -58,7 +58,7 @@
|
||||
</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'}">
|
||||
<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: cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status]}" />
|
||||
{{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name }}
|
||||
</div>
|
||||
@ -99,6 +99,7 @@ export default {
|
||||
overflow-x: scroll;
|
||||
padding: 0 16px;
|
||||
padding-top: 24px;
|
||||
font-size: 14px;
|
||||
.dashboard-main {
|
||||
width: 100%;
|
||||
min-width: 1380px;
|
||||
@ -160,15 +161,18 @@ export default {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
line-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
* @Author: gtz
|
||||
* @Date: 2022-03-03 15:47:47
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-03-07 19:08:57
|
||||
* @LastEditTime: 2022-03-07 20:41:47
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-ck-wms-ui\src\views\dashboard\testdata.js
|
||||
*/
|
||||
@ -2927,12 +2927,12 @@ export default {
|
||||
}
|
||||
],
|
||||
portAttributeList: [
|
||||
{ id: 1, name: 'Working Port', color: '#D8E5FF' },
|
||||
{ id: 1, name: 'Working Port', color: '#E1EBFF' },
|
||||
{ id: 2, name: 'Buffer Port', color: '#FFF8E8' },
|
||||
{ id: 3, name: 'Exception Port', color: '#F6F6F6' }
|
||||
],
|
||||
portAttributeObj: {
|
||||
1: '#D8E5FF',
|
||||
1: '#E1EBFF',
|
||||
2: '#FFF8E8',
|
||||
3: '#F6F6F6'
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user