运营云-物流模块重做

main/src/micro/app.js

@@ -13,7 +13,7 @@ export const leftApps = [
   {
     name: 'sub-operation-admin',
     entry: VITE_APP_SUB_OA,
-    activeRule: '/sub-operation-admin',
+    activeRule: `${VITE_APP_VIST_URL}:82/login`,
     title: '管理后台',
     icon: 'images/platform/icon-admin.png',
   },
@@ -44,7 +44,7 @@ export const rightApps = [
   {
     name: 'sub-government-admin',
     entry: VITE_APP_SUB_GAS,
-    activeRule: '/sub-government-admin',
+    activeRule: `${VITE_APP_VIST_URL}:81/login`,
     title: '管理后台',
     icon: 'images/platform/icon-admin.png',
   },

sub-operation-service/src/router/index.js

@@ -533,6 +533,12 @@ export const constantRoutes = [
         name: 'logistics-match',
         meta: { title: '匹配' },
       },
+      {
+        path: '/sub-operation-service/logistics-dispatch',
+        component: () => import('@/views/warehouseLogistics/logistics/dispatch.vue'),
+        name: 'logistics-dispatch',
+        meta: { title: '用车派单' },
+      },
     ],
   },
   {

sub-operation-service/src/views/warehouseLogistics/logistics/dispatch.vue

@@ -0,0 +1,222 @@
+<template>
+  <section>
+    <common>
+      <template #main>
+        <div class="warehouse-detail">
+          <div class="go-back" @click="toBack(-1)">
+            <img :src="getAssetsFile('images/back.png')" alt="map" />
+          </div>
+          <!-- 地图容器 -->
+          <div class="map-content">
+            <img :src="getAssetsFile('images/warehouseLogistics/logistics-map.png')" alt="map" draggable="false" />
+          </div>
+          <div v-show="dialogType == 1" class="left-content">
+            <div class="left-content-item">
+              <el-icon color="#FF4975" size="18"><Promotion /></el-icon>
+              <span style="color: #ff4975; font-size: 16px; margin: 0 20px 0 5px">运输中</span>
+              <img :src="getAssetsFile('images/warehouseLogistics/switch.png')" alt="map" draggable="false" @click="dialogType = 2" />
+            </div>
+          </div>
+          <div v-show="dialogType == 2" class="left-content-dialog">
+            <div class="dialog-title">
+              在线运输单
+              <img class="icon" :src="getAssetsFile('images/warehouseLogistics/switch.png')" alt="map" draggable="false" @click="dialogType = 1" />
+            </div>
+            <div class="dialog-content">
+              <div style="display: flex">
+                <div class="left-content-item" style="flex: 1">
+                  <el-icon color="#FF4975" size="18"><Promotion /></el-icon>
+                  <span style="color: #ff4975; font-size: 16px; margin: 0 20px 0 5px">运输中</span>
+                </div>
+                <div class="flex-item">
+                  <p class="dialog-escribe">运输物品</p>
+                  <p class="dialog-text">西红柿</p>
+                </div>
+                <div class="flex-item">
+                  <p class="dialog-escribe">运输物品</p>
+                  <p class="dialog-text">5吨</p>
+                </div>
+              </div>
+              <el-divider style="margin: 10px auto; width: 96%" />
+              <div style="display: flex; align-items: center">
+                <div class="flex-item" style="padding-right: 0; margin-right: 16px">
+                  <p class="dialog-escribe" style="font-size: 16px">运输距离</p>
+                  <p class="dialog-text" style="font-size: 18px">188Km</p>
+                  <div style="height: 20px"></div>
+                </div>
+                <div class="flex-item" style="padding-right: 0">
+                  <el-timeline style="max-width: 600px">
+                    <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
+                      {{ activity.content }}
+                    </el-timeline-item>
+                  </el-timeline>
+                </div>
+              </div>
+            </div>
+            <div class="order-info">订单编号：489942025460411456 <span class="copy-text">复制</span></div>
+            <div class="order-info">联系方式：18714454247</div>
+            <div class="order-info">提交时间：2025.01.0409:45:25</div>
+          </div>
+          <div class="right-center-card">
+            <img class="icon" :src="getAssetsFile('images/warehouseLogistics/right-center.png')" alt="map" draggable="false" />
+          </div>
+          <div class="right-bottom-card">
+            <img class="icon" :src="getAssetsFile('images/warehouseLogistics/right-bottom.png')" alt="map" draggable="false" />
+          </div>
+        </div>
+      </template>
+    </common>
+  </section>
+</template>
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue';
+import { getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import Common from '../components/common.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const dialogType = ref(1);
+const activities = [
+  {
+    content: '发车时间',
+    timestamp: '2025.01.01 10:00:00',
+  },
+  {
+    content: '到达时间',
+    timestamp: '2025.01.01 17:30:00',
+  },
+];
+
+const toBack = (level) => {
+  router.go(level);
+};
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.warehouse-detail {
+  border-radius: 14px;
+  background-color: #fff;
+  height: 100%;
+  position: relative;
+}
+.go-back {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 10;
+  cursor: pointer;
+  img {
+    width: 100%;
+  }
+}
+.map-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  border-radius: 14px;
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+  }
+}
+.left-content {
+  position: absolute;
+  left: 20px;
+  bottom: 20px;
+  z-index: 10;
+  padding: 10px 16px;
+  border-radius: 14px;
+  background-color: #fff;
+  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
+}
+.left-content-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 14px;
+    cursor: pointer;
+  }
+}
+.left-content-dialog {
+  position: absolute;
+  top: 100px;
+  left: 20px;
+  width: 300px;
+  min-height: 300px;
+  padding-bottom: 16px;
+  background-color: #fff;
+  border-radius: 14px;
+  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
+  .dialog-title {
+    font-size: 20px;
+    text-align: center;
+    padding: 16px;
+    font-weight: bold;
+    position: relative;
+    .icon {
+      position: absolute;
+      top: 20px;
+      right: 12px;
+      width: 18px;
+      cursor: pointer;
+    }
+  }
+  .dialog-content {
+    margin: 0 10px 10px 10px;
+    padding: 10px 10px 0 10px;
+    background-color: #f5f5f5;
+    border-radius: 14px;
+    .flex-item {
+      text-align: left;
+      padding: 0 10px;
+    }
+    .dialog-escribe {
+      color: #999;
+      line-height: 20px;
+    }
+    .dialog-text {
+      color: #333;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+
+  .order-info {
+    color: #333;
+    font-size: 14px;
+    text-align: left;
+    padding-left: 12px;
+    line-height: 26px;
+  }
+  .copy-text {
+    color: #25bf82;
+    cursor: pointer;
+    float: right;
+    margin-right: 12px;
+  }
+}
+.right-center-card {
+  position: absolute;
+  top: 120px;
+  right: 160px;
+  border-radius: 14px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.right-bottom-card {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  overflow: hidden;
+}
+</style>