|
|
@@ -1,11 +1,286 @@
|
|
|
<template>
|
|
|
- <div>bbb</div>
|
|
|
+ <div class="station">
|
|
|
+ <div class="station-head">
|
|
|
+ <div class="station-head-title">货物基本信息</div>
|
|
|
+ <div class="station-head-content flex-wrap">
|
|
|
+ <div class="station-head-content-list" v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="station-status flex">
|
|
|
+ <div class="station-status-info flex-wrap">
|
|
|
+ <div class="manageTitle">货物跟踪信息</div>
|
|
|
+ <div class="status">正常</div>
|
|
|
+ </div>
|
|
|
+ <div class="station-status-search">
|
|
|
+ <Search @clear="clear" @search="search" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="station-list flex-wrap">
|
|
|
+ <div class="station-list-left">
|
|
|
+ <div class="title flex-wrap">
|
|
|
+ <div class="title-list">航班号CA1001</div>
|
|
|
+ <div class="title-list">出港: 深圳机场</div>
|
|
|
+ <div class="title-list">日期：2022/09/10</div>
|
|
|
+ </div>
|
|
|
+ <Steps :datas="datas" />
|
|
|
+ </div>
|
|
|
+ <div class="station-list-right">
|
|
|
+ <div class="title flex-wrap">
|
|
|
+ <div class="title-list">出港: 深圳机场</div>
|
|
|
+ <div class="title-list">日期：2022/09/10</div>
|
|
|
+ </div>
|
|
|
+ <Steps :datas="datas1" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="station-table">
|
|
|
+ <Table :tableHeader="tableHeader" :tableData="tableData" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-<script lang="ts">
|
|
|
-import { defineComponent } from "vue";
|
|
|
|
|
|
-export default defineComponent({
|
|
|
- setup() {},
|
|
|
-});
|
|
|
+<script setup lang="ts">
|
|
|
+import Search from "@/components/search/index.vue";
|
|
|
+import Steps from "@/components/steps/index.vue";
|
|
|
+import Table from "@/components/tableTemp/index.vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+const dataInfo = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "货物编码",
|
|
|
+ value: "56888829",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "运单",
|
|
|
+ value: "FA56888829",
|
|
|
+ },
|
|
|
+];
|
|
|
+const datas = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "收货核单",
|
|
|
+ flag: true,
|
|
|
+ labelWidth: 100,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "安检",
|
|
|
+ flag: true,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "安检",
|
|
|
+ flag: true,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "安检",
|
|
|
+ flag: true,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: "安检",
|
|
|
+ flag: true,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ name: "安检",
|
|
|
+ flag: false,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ name: "安检安检",
|
|
|
+ flag: false,
|
|
|
+ labelWidth: 100,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+];
|
|
|
+const datas1 = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "收货核单",
|
|
|
+ flag: true,
|
|
|
+ labelWidth: 100,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "安检",
|
|
|
+ flag: true,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "安检",
|
|
|
+ flag: true,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "安检",
|
|
|
+ flag: false,
|
|
|
+ children: ["A32", "534件", "通过", "10:25"],
|
|
|
+ },
|
|
|
+];
|
|
|
+const tableHeader = [
|
|
|
+ { label: "航班号", key: "fightNo" },
|
|
|
+ { label: "集装器编号", key: "containerNo" },
|
|
|
+ { label: "货物编码", key: "goodsNo" },
|
|
|
+ { label: "拉下", key: "dwon1" },
|
|
|
+ { label: "退运", key: "return" },
|
|
|
+ { label: "收货核单", key: "receipt", lableClass: "scoreColumn" },
|
|
|
+ { label: "安检", key: "securityCheck" },
|
|
|
+ { label: "理货", key: "tally" },
|
|
|
+ { label: "拉下", key: "dwon2" },
|
|
|
+ { label: "待运区", key: "waitingArea" },
|
|
|
+ { label: "货站交接", key: "goodSstation1" },
|
|
|
+ { label: "机下交接", key: "offBoard1" },
|
|
|
+ { label: "装机", key: "installEquipment" },
|
|
|
+ { label: "卸机", key: "unloading", lableClass: "scoreColumn" },
|
|
|
+ { label: "机下交接", key: "offBoard2" },
|
|
|
+ { label: "货站交接", key: "goodSstation2" },
|
|
|
+ { label: "提取", key: "extract" },
|
|
|
+];
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ fightNo: "CA1001",
|
|
|
+ containerNo: "DOU2424U2",
|
|
|
+ goodsNo: "56888829",
|
|
|
+ dwon1: "Y",
|
|
|
+ return: "Y",
|
|
|
+ receipt: "66",
|
|
|
+ securityCheck: "77",
|
|
|
+ tally: "88",
|
|
|
+ dwon2: "99",
|
|
|
+ waitingArea: "100",
|
|
|
+ goodSstation1: "101",
|
|
|
+ offBoard1: "102",
|
|
|
+ installEquipment: "103",
|
|
|
+ unloading: "104",
|
|
|
+ offBoard2: "105",
|
|
|
+ goodSstation2: "106",
|
|
|
+ extract: "107",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ fightNo: "CA1001",
|
|
|
+ containerNo: "DOU2424U2",
|
|
|
+ goodsNo: "56888829",
|
|
|
+ dwon1: "Y",
|
|
|
+ return: "Y",
|
|
|
+ receipt: "66",
|
|
|
+ securityCheck: "77",
|
|
|
+ tally: "88",
|
|
|
+ dwon2: "99",
|
|
|
+ waitingArea: "100",
|
|
|
+ goodSstation1: "101",
|
|
|
+ offBoard1: "102",
|
|
|
+ installEquipment: "103",
|
|
|
+ unloading: "104",
|
|
|
+ offBoard2: "105",
|
|
|
+ goodSstation2: "106",
|
|
|
+ extract: "107",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ fightNo: "CA1001",
|
|
|
+ containerNo: "DOU2424U2",
|
|
|
+ goodsNo: "56888829",
|
|
|
+ dwon1: "Y",
|
|
|
+ return: "Y",
|
|
|
+ receipt: "66",
|
|
|
+ securityCheck: "77",
|
|
|
+ tally: "88",
|
|
|
+ dwon2: "99",
|
|
|
+ waitingArea: "100",
|
|
|
+ goodSstation1: "101",
|
|
|
+ offBoard1: "102",
|
|
|
+ installEquipment: "103",
|
|
|
+ unloading: "104",
|
|
|
+ offBoard2: "105",
|
|
|
+ goodSstation2: "106",
|
|
|
+ extract: "107",
|
|
|
+ },
|
|
|
+];
|
|
|
+const search = (val) => {
|
|
|
+ ElMessage.success(`搜索成功：${val}`);
|
|
|
+};
|
|
|
+const clear = () => {
|
|
|
+ ElMessage.success(`清除`);
|
|
|
+};
|
|
|
</script>
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.station {
|
|
|
+ &-head {
|
|
|
+ height: 144px;
|
|
|
+ background: #410425;
|
|
|
+ padding: 24px 30px;
|
|
|
+ color: #ffffff;
|
|
|
+ &-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+ &-content {
|
|
|
+ &-list {
|
|
|
+ margin-right: 100px;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-status {
|
|
|
+ margin: 24px 0;
|
|
|
+ line-height: 32px;
|
|
|
+ .status {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #519f6b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-list {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101116;
|
|
|
+ margin-bottom: 28px;
|
|
|
+ &-list {
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-left {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 24px 24px 12px 24px;
|
|
|
+ width: 1090px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ &-right {
|
|
|
+ flex: 1;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 24px 24px 12px 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep &-table {
|
|
|
+ margin-top: 16px;
|
|
|
+ .scoreColumn {
|
|
|
+ background: #eef3d6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
