This commit is contained in:
2022-03-16 19:14:00 +08:00
parent 8502f5d7d1
commit 6d4594b338
6 changed files with 557 additions and 407 deletions

View File

@@ -2,7 +2,7 @@
* @Author: gtz
* @Date: 2022-03-03 09:16:10
* @LastEditors: gtz
* @LastEditTime: 2022-03-15 16:47:57
* @LastEditTime: 2022-03-16 19:12:35
* @Description: file content
* @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue
-->
@@ -28,15 +28,15 @@
</el-select>
</div>
</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-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-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' }}
<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.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.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.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
</div>
</el-col>
</el-row>
@@ -48,22 +48,22 @@
</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-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-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' }}
<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((shelfVoList[0].rowVoList[0].portVoList.length - (current - 1) * 80) / 20)">
<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.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.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.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(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' }}
<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 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.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.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
</div>
</el-col>
</el-row>
@@ -75,24 +75,51 @@
</el-col>
</el-row>
</el-card>
<port-detail ref="addOrUpdate" />
</div>
</template>
<script>
import testdata from './testdata'
import { getPortList, getPortDetail } from '@/api/dashboard'
import portDetail from './components/PortDetail'
export default {
name: 'Dashboard',
components: { portDetail },
data() {
return testdata
},
created() {
console.log(this.shelfList)
this.totalPage = Math.ceil(this.shelfList[0].rowList[0].portList.length / 80)
this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80)
getPortList().then(res => {
console.log(res.data[0].shelfVoList)
this.shelfVoList = res.data[0].shelfVoList.map(item => {
item.rowVoList.map(i => {
i.portVoList.map(z => {
if (!(z.attribute)) {
z.attribute = 0
}
return z
})
return i
})
return item
})
this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80)
})
},
methods: {
handleChange(v) {
console.log(v)
},
handlePort(z, x) {
getPortDetail(z.portVoList[x].id).then(res => {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(res.data)
})
})
}
}
}