添加国内出港航站视图

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Search: typeof import('./src/components/search/index.vue')['default']
+    Steps: typeof import('./src/components/steps/index.vue')['default']
     Table: typeof import('./src/components/table/index.vue')['default']
     Table2: typeof import('./src/components/table2/index.vue')['default']
     TableTemp: typeof import('./src/components/tableTemp/index.vue')['default']

src/components/steps/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="steps flex">
+    <div v-for="(item,index) in datas" :key="index" class="node">
+      <div v-if="item.flag" class="node-status-success">
+        <span class="icon"></span>
+      </div>
+      <div v-else class="node-status-default"></div>
+      <div v-if="item.flag && datas.length != index+1" class="node-status-success-line"></div>
+      <div v-if="!item.flag && datas.length != index+1" class="node-status-default-line"></div>
+      <div :style="{width:item.labelWidth ? item.labelWidth + 'px' : 80 + 'px',transform:`translateX(-${Math.floor(item.labelWidth ? item.labelWidth / 3 : 80 / 3)+3}px)`}" class="node-cap">
+        <div class="node-name">{{item.name}}</div>
+        <div class="node-info">
+          <div class="node-info-list" v-for="(p,i) in item.children" :key="i">{{p}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  datas: {
+    type: Array,
+    default: () => [],
+  },
+});
+const { datas } = props;
+</script>
+
+<style lang="scss" scoped>
+.steps {
+  padding: 0 13px;
+  .node {
+    position: relative;
+    width: 100%;
+    &:last-child {
+      width: 2%;
+    }
+    &-name {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+    }
+    &-cap {
+      text-align: center;
+      margin-top: 15px;
+      .node-info-list {
+        font-size: 12px;
+        font-family: Helvetica;
+        font-weight: 400;
+        color: #101116;
+        margin-top: 3px;
+      }
+    }
+  }
+  .node-status-success {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    background: #ffffff;
+    border: 2px solid #d5327b;
+    border-radius: 50%;
+    z-index: 2;
+    .icon {
+      width: 14px;
+      height: 14px;
+      background: #d5327b;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -7px;
+      margin-left: -7px;
+    }
+  }
+  .node-status-default {
+    width: 24px;
+    height: 24px;
+    background: #ffffff;
+    border: 2px solid #b7b1b4;
+    border-radius: 50%;
+    z-index: 2;
+    position: relative;
+  }
+  .node-status-success-line {
+    height: 6px;
+    background: #d5327b;
+    position: absolute;
+    width: 100%;
+    top: 9px;
+    left: 0;
+    z-index: 1;
+  }
+  .node-status-default-line {
+    height: 6px;
+    background: #b7b1b4;
+    position: absolute;
+    width: 100%;
+    top: 9px;
+    left: 0;
+    z-index: 1;
+  }
+}
+</style>

src/views/baggageManagement/departure/station/index.vue

@@ -1,11 +1,276 @@
 <template>
-  <div></div>
+  <div class="station">
+    <div class="station-head">
+      <div class="station-head-title">运单基本信息</div>
+      <div class="station-head-content flex">
+        <div 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">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </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">航班号CA1001</div>
+          <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: "FA56888829",
+  },
+  {
+    id: 2,
+    name: "货代公司",
+    value: "深圳市联运通货有限公司",
+  },
+  {
+    id: 3,
+    name: "品名",
+    value: "电路板、手机外壳",
+  },
+  {
+    id: 4,
+    name: "特货信息",
+    value: "特",
+  },
+  {
+    id: 5,
+    name: "始发机场",
+    value: "SZX",
+  },
+  {
+    id: 6,
+    name: "目的机场",
+    value: "CTU",
+  },
+  {
+    id: 7,
+    name: "货物数量",
+    value: "7件",
+  },
+  {
+    id: 8,
+    name: "货物总重",
+    value: "82KG",
+  },
+];
+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: "appName" },
+  { label: "账号组描述", key: "appDesc", lableClass: "scoreColumn" },
+  { label: "appId", key: "appId" },
+];
+const tableData = [
+  {
+    id: 1,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+  {
+    id: 2,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+  {
+    id: 3,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+  {
+    id: 4,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+];
+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;
+    }
+  }
+  &-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 {
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>