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

update dashboard #41

Merged
gtz217 merged 3 commits from gtz into develop 2022-03-08 14:35:41 +08:00
Conversation 0 Commits 3 Files Changed 3 +28 -14
3 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
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-07 19:47:15 * @LastEditTime: 2022-03-08 14:34:24
* @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
--> -->
@ -28,29 +28,32 @@
</el-select> </el-select>
</div> </div>
</el-row> </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-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 in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf"> <el-col v-for="(i, index) in shelfList" :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.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]}" /> <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 }} {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<div class="dashboard-layout-footer">
{{ '第' + (index + 1) + '排(' + ((current - 1) * 4 + item) + ')' }}
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </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-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-row>
<el-col v-for="i in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf"> <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-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"> <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]}" /> <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 }} {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name }}
</div> </div>
@ -58,12 +61,15 @@
</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.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]}" /> <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 }} {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<div class="dashboard-layout-footer">
{{ '第' + (index + 1) + '排(' + ((current - 1) * 4 + item) + ')' }}
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
@ -99,6 +105,7 @@ export default {
overflow-x: scroll; overflow-x: scroll;
padding: 0 16px; padding: 0 16px;
padding-top: 24px; padding-top: 24px;
font-size: 14px;
.dashboard-main { .dashboard-main {
width: 100%; width: 100%;
min-width: 1380px; min-width: 1380px;
@ -152,6 +159,10 @@ export default {
.dashboard-layout { .dashboard-layout {
margin: 20px 0; margin: 20px 0;
.dashboard-layout-shelf-box { .dashboard-layout-shelf-box {
.dashboard-layout-footer {
text-align: center;
margin-top: 12px;
}
.dashboard-layout-shelf { .dashboard-layout-shelf {
padding: 0 8px; padding: 0 8px;
.dashboard-layout-row { .dashboard-layout-row {
@ -160,15 +171,18 @@ export default {
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 32px; height: 32px;
line-height: 32px;
box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8); box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
border-radius: 2px 4px 4px 2px; border-radius: 2px 4px 4px 2px;
margin-bottom: 8px; margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
.dashboard-layout-item-cricle{ .dashboard-layout-item-cricle{
display: inline-block; display: inline-block;
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 6px; border-radius: 6px;
margin-right: 6px;
} }
} }
} }

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

@ -2,7 +2,7 @@
* @Author: gtz * @Author: gtz
* @Date: 2022-03-03 15:47:47 * @Date: 2022-03-03 15:47:47
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2022-03-07 19:08:57 * @LastEditTime: 2022-03-07 20:41:47
* @Description: file content * @Description: file content
* @FilePath: \mt-ck-wms-ui\src\views\dashboard\testdata.js * @FilePath: \mt-ck-wms-ui\src\views\dashboard\testdata.js
*/ */
@ -2927,12 +2927,12 @@ export default {
} }
], ],
portAttributeList: [ portAttributeList: [
{ id: 1, name: 'Working Port', color: '#D8E5FF' }, { id: 1, name: 'Working Port', color: '#E1EBFF' },
{ id: 2, name: 'Buffer Port', color: '#FFF8E8' }, { id: 2, name: 'Buffer Port', color: '#FFF8E8' },
{ id: 3, name: 'Exception Port', color: '#F6F6F6' } { id: 3, name: 'Exception Port', color: '#F6F6F6' }
], ],
portAttributeObj: { portAttributeObj: {
1: '#D8E5FF', 1: '#E1EBFF',
2: '#FFF8E8', 2: '#FFF8E8',
3: '#F6F6F6' 3: '#F6F6F6'
}, },

4
vue.config.js
View File

@ -46,9 +46,9 @@ module.exports = {
// 这里写入需要代理的api和对应的目标地址 // 这里写入需要代理的api和对应的目标地址
proxy: { proxy: {
'/api': { '/api': {
target: 'http://localhost:8080', // target: 'http://localhost:8080',
// target: 'http://192.168.0.148:8080', // target: 'http://192.168.0.148:8080',
// target: 'http://a.wms.picaiba.com/api', target: 'http://a.wms.picaiba.com/api',
// target: 'http://192.168.0.127:8080', // target: 'http://192.168.0.127:8080',
// target: 'http://192.168.0.165:8080', // target: 'http://192.168.0.165:8080',
// target: 'http://192.168.43.105:8080', // target: 'http://192.168.43.105:8080',