|
|
@@ -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) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|