|
@@ -14,6 +14,16 @@ const tableData = ref<VxeGridProps<any>>({
|
|
|
round: true,
|
|
round: true,
|
|
|
columns: [],
|
|
columns: [],
|
|
|
data: [],
|
|
data: [],
|
|
|
|
|
+ cellConfig: {
|
|
|
|
|
+ height: 40
|
|
|
|
|
+ },
|
|
|
|
|
+ headerCellConfig: {
|
|
|
|
|
+ height: 40
|
|
|
|
|
+ },
|
|
|
|
|
+ expandConfig: {
|
|
|
|
|
+ expandAll: false,
|
|
|
|
|
+ expandRowKeys: []
|
|
|
|
|
+ },
|
|
|
scrollY: { enabled: true, oSize: 20, gt: 30 },
|
|
scrollY: { enabled: true, oSize: 20, gt: 30 },
|
|
|
emptyText: ' ',
|
|
emptyText: ' ',
|
|
|
showHeaderOverflow: true,
|
|
showHeaderOverflow: true,
|
|
@@ -48,7 +58,10 @@ const handleColumns = (columns: any) => {
|
|
|
}
|
|
}
|
|
|
return curColumn
|
|
return curColumn
|
|
|
})
|
|
})
|
|
|
- return newColumns
|
|
|
|
|
|
|
+ return [
|
|
|
|
|
+ { type: 'expand', width: 40, slots: { default: 'expand', content: 'expand_content' } },
|
|
|
|
|
+ ...newColumns
|
|
|
|
|
+ ]
|
|
|
}
|
|
}
|
|
|
watch(
|
|
watch(
|
|
|
() => props.data,
|
|
() => props.data,
|
|
@@ -57,9 +70,17 @@ watch(
|
|
|
if (containers && containers.container_column) {
|
|
if (containers && containers.container_column) {
|
|
|
tableData.value.columns = handleColumns(containers.container_column)
|
|
tableData.value.columns = handleColumns(containers.container_column)
|
|
|
tableData.value.data = containers.container_data
|
|
tableData.value.data = containers.container_data
|
|
|
- // nextTick(() => {
|
|
|
|
|
- // tableRef.value && autoWidth(tableData.value, tableRef.value)
|
|
|
|
|
- // })
|
|
|
|
|
|
|
+ tableRef.value?.reloadData(containers.container_data)
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ // tableRef.value && autoWidth(tableData.value, tableRef.value)
|
|
|
|
|
+ tableRef.value?.reloadData(containers.container_data)
|
|
|
|
|
+ if (
|
|
|
|
|
+ tableData.value.data?.length > 0 ||
|
|
|
|
|
+ tableData.value.data[0].containerStatusData.length > 0
|
|
|
|
|
+ ) {
|
|
|
|
|
+ tableRef.value?.toggleRowExpand(tableData.value.data[0])
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 100)
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
@@ -75,6 +96,30 @@ useRowClickStyle(tableRef)
|
|
|
<template>
|
|
<template>
|
|
|
<div class="containers">
|
|
<div class="containers">
|
|
|
<vxe-grid ref="tableRef" v-bind="tableData">
|
|
<vxe-grid ref="tableRef" v-bind="tableData">
|
|
|
|
|
+ <template #expand_content="{ row }">
|
|
|
|
|
+ <div class="container-table-status">
|
|
|
|
|
+ <div class="step-item" v-for="(item, index) in row.containerStatusData" :key="item.title">
|
|
|
|
|
+ <div class="step-data">
|
|
|
|
|
+ <div class="step-dot-icon"></div>
|
|
|
|
|
+ <div class="info">
|
|
|
|
|
+ <div class="left-info">
|
|
|
|
|
+ <div class="title">{{ item.title }}</div>
|
|
|
|
|
+ <div class="date value-color">{{ formatTimezone(item.date, item.timezone) }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="center-code">
|
|
|
|
|
+ <span>Location Code: </span>
|
|
|
|
|
+ <span class="value-color">{{ item.code }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="right-city">
|
|
|
|
|
+ <span>Location City: </span>
|
|
|
|
|
+ <span class="value-color">{{ item.uncity }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="line" v-if="index + 1 !== row.containerStatusData.length"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
<template #empty>
|
|
<template #empty>
|
|
|
<div class="empty">No data</div>
|
|
<div class="empty">No data</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -87,4 +132,131 @@ useRowClickStyle(tableRef)
|
|
|
padding: 8px 16px 16px;
|
|
padding: 8px 16px 16px;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
-<style lang="scss"></style>
|
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+.container-table-status {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+ .container {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding-bottom: 8px;
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ .empty-content {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 358px;
|
|
|
|
|
+ padding-top: 140px;
|
|
|
|
|
+
|
|
|
|
|
+ .empty-text {
|
|
|
|
|
+ margin-top: 8px;
|
|
|
|
|
+ color: #b5b9bf;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .footer {
|
|
|
|
|
+ // line-height: 38px;
|
|
|
|
|
+ padding: 12px 0;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ border-top: 1px solid var(--color-border);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .link {
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ color: var(--color-theme);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+.vxe-body--row-expanded-cell {
|
|
|
|
|
+ // height: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+.container-table-status {
|
|
|
|
|
+ max-height: 300px;
|
|
|
|
|
+ padding: 40px 20px;
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ .el-collapse {
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ border-bottom: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-collapse-item__content {
|
|
|
|
|
+ padding: 30px 16px 38px;
|
|
|
|
|
+ border-top: 1px solid var(--color-border);
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-collapse-item__header {
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ padding-left: 16px;
|
|
|
|
|
+ padding-right: 8px;
|
|
|
|
|
+ line-height: 50px;
|
|
|
|
|
+ & > .title {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ color: var(--color-neutral-2);
|
|
|
|
|
+ span {
|
|
|
|
|
+ margin-left: 4px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ color: var(--color-neutral-1);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .step-data {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ height: 8px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ .step-dot-icon {
|
|
|
|
|
+ height: 8px;
|
|
|
|
|
+ width: 8px;
|
|
|
|
|
+ background-color: var(--color-neutral-1);
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+ .info {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height: 57px;
|
|
|
|
|
+ margin-top: -22px;
|
|
|
|
|
+ background-color: var(--color-container-status-node-bg);
|
|
|
|
|
+ border: 1px solid var(--color-border);
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ color: var(--color-neutral-1);
|
|
|
|
|
+ .left-info {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ max-width: 320px;
|
|
|
|
|
+ padding: 10px 10px;
|
|
|
|
|
+ .title {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ }
|
|
|
|
|
+ .date {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .center-code {
|
|
|
|
|
+ width: 320px;
|
|
|
|
|
+ line-height: 57px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .right-city {
|
|
|
|
|
+ width: 320px;
|
|
|
|
|
+ line-height: 57px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .value-color {
|
|
|
|
|
+ color: var(--color-neutral-2);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .line {
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ margin-left: 3px;
|
|
|
|
|
+ border-left: 1px solid var(--color-neutral-1);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|