Merge branch 'master' of http://120.26.64.82:3000/BFFE/SZYGM1.0

src/router/routes/routes-file-six.ts

@@ -1,104 +1,104 @@
-import Layout from "@/layout";
+import Layout from '@/layout'
 
 const HomeRoutes = {
-  path: "/baggageManagement",
+  path: '/baggageManagement',
   component: Layout,
-  name: "baggageManagement",
-  redirect: "/baggageManagement/departure",
+  name: 'baggageManagement',
+  redirect: '/baggageManagement/departure',
   //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-  meta: { title: "综合可视化", elSvgIcon: "Fold" },
+  meta: { title: '综合可视化', elSvgIcon: 'Fold' },
   children: [
     {
-      path: "/baggageManagement/departure/station",
-      name: "InternalDeparture",
-      meta: { title: "国内出港", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/departure/index.vue"),
+      path: '/baggageManagement/departure/station',
+      name: 'InternalDeparture',
+      meta: { title: '国内出港', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/departure/index.vue'),
       children: [
         {
-          path: "/baggageManagement/departure/station",
-          name: "DepartureStation",
-          meta: { title: "国内出港航站视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/departure/station',
+          name: 'DepartureStation',
+          meta: { title: '国内出港航站视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/station/index.vue"),
+            import('@/views/baggageManagement/departure/station/index.vue'),
         },
         {
-          path: "/baggageManagement/departure/flight",
-          name: "DepartureFlight",
-          meta: { title: "国内出港航班视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/departure/flight',
+          name: 'DepartureFlight',
+          meta: { title: '国内出港航班视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/flight/index.vue"),
+            import('@/views/baggageManagement/departure/flight/index.vue'),
         },
         {
-          path: "/baggageManagement/departure/waybill",
-          name: "DepartureWaybill",
-          meta: { title: "国内出港运单视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/departure/waybill',
+          name: 'DepartureWaybill',
+          meta: { title: '国内出港运单视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/waybill/index.vue"),
+            import('@/views/baggageManagement/departure/waybill/index.vue'),
         },
         {
-          path: "/baggageManagement/departure/goods",
-          name: "DepartureGoods",
-          meta: { title: "国内出港行李视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/departure/goods',
+          name: 'DepartureGoods',
+          meta: { title: '国内出港行李视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/goods/index.vue"),
+            import('@/views/baggageManagement/departure/goods/index.vue'),
         },
       ],
     },
     {
-      path: "/baggageManagement/departure",
-      name: "DepartureC",
-      meta: { title: "国际出港", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/departure/index.vue"),
+      path: '/baggageManagement/departure',
+      name: 'DepartureC',
+      meta: { title: '国际出港', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/departure/index.vue'),
     },
     {
-      path: "/baggageManagement/Arrival/station",
-      name: "InternalArrival",
-      meta: { title: "国内进港", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/departure/index.vue"),
+      path: '/baggageManagement/Arrival/station',
+      name: 'InternalArrival',
+      meta: { title: '国内进港', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/departure/index.vue'),
       children: [
         {
-          path: "/baggageManagement/arrival/station",
-          name: "ArrivalStation",
-          meta: { title: "国内进港航站视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/arrival/station',
+          name: 'ArrivalStation',
+          meta: { title: '国内进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/station/index.vue"),
+            import('@/views/baggageManagement/departure/station/index.vue'),
         },
         {
-          path: "/baggageManagement/arrival/flight",
-          name: "ArrivalFlight",
-          meta: { title: "国内进港航班视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/arrival/flight',
+          name: 'ArrivalFlight',
+          meta: { title: '国内进港航班视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/flight/index.vue"),
+            import('@/views/baggageManagement/departure/flight/index.vue'),
         },
         {
-          path: "/baggageManagement/arrival/waybill",
-          name: "ArrivalWaybill",
-          meta: { title: "国内进港运单视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/arrival/waybill',
+          name: 'ArrivalWaybill',
+          meta: { title: '国内进港运单视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/waybill/index.vue"),
+            import('@/views/baggageManagement/arrival/waybill/index.vue'),
         },
         {
-          path: "/baggageManagement/arrival/goods",
-          name: "ArrivalGoods",
-          meta: { title: "国内进港行李视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/arrival/goods',
+          name: 'ArrivalGoods',
+          meta: { title: '国内进港行李视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/goods/index.vue"),
+            import('@/views/baggageManagement/departure/goods/index.vue'),
         },
       ],
     },
     {
-      path: "/baggageManagement/arrival",
-      name: "Arrival",
-      meta: { title: "国际进港", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/arrival/index.vue"),
+      path: '/baggageManagement/arrival',
+      name: 'Arrival',
+      meta: { title: '国际进港', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/arrival/index.vue'),
     },
     {
-      path: "/baggageManagement/trackMap",
-      name: "TrackMap",
-      meta: { title: "轨迹地图", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/trackMap/index.vue"),
+      path: '/baggageManagement/trackMap',
+      name: 'TrackMap',
+      meta: { title: '轨迹地图', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/trackMap/index.vue'),
     },
   ],
-};
+}
 
-export default [HomeRoutes];
+export default [HomeRoutes]

src/views/baggageManagement/arrival/waybill/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <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="datas1" />
+      </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="datas" />
+      </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="datas1" />
+      </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="datas" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
+</template>
+
+<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>
+.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;
+      flex: 1;
+      margin-right: 8px;
+    }
+    &-right {
+      width: 1090px;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>

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

@@ -26,7 +26,6 @@
       </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>
@@ -44,7 +43,6 @@
       </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>