车辆排班ui提交

components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCalendar: typeof import('element-plus/es')['ElCalendar']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']

src/stores/nowroute.ts

@@ -0,0 +1,14 @@
+//https://zhuanlan.zhihu.com/p/664785495
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const usenowrouteStore = defineStore('nowroute', () => {
+ let routename=ref('')
+ const setroute=(route)=>{
+    console.log(route)
+    routename.value=route
+    console.log(routename.value)
+ }
+
+  return { routename,setroute }
+})

src/views/HomeView.vue

@@ -1,7 +1,10 @@
 
 <script lang="ts" setup>
-import { RouterView } from 'vue-router'
-import {ref} from 'vue'
+import { RouterView,useRoute  } from 'vue-router'
+import {usenowrouteStore} from '../stores/nowroute.ts'
+const routerStore=usenowrouteStore()
+let {routename,setroute}=routerStore
+import {ref,watch } from 'vue'
 import {
   BellFilled,
   ArrowRightBold,
@@ -12,11 +15,20 @@ import {
 } from '@element-plus/icons-vue'
 let searchWord=ref('')
 const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
+  
+  //setroute(key.path)
 }
 const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
+ 
 }
+const route = useRoute();
+
+// 使用 watch 监听路由对象的变化
+watch(() => route, (newRoute, oldRoute) => {
+  console.log(newRoute)
+  setroute(newRoute.path)
+  // 在这里执行你想要的逻辑
+}, { deep: true });
 </script>
 
 
@@ -115,8 +127,8 @@ const handleClose = (key: string, keyPath: string[]) => {
           <div class="left-part">
             <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-            
-              <el-breadcrumb-item>用户管理</el-breadcrumb-item>
+           
+              <el-breadcrumb-item v-if="routerStore.routename">{{ routerStore.routename }}</el-breadcrumb-item>
              
             </el-breadcrumb>
           </div>

src/views/carplanman/index.vue

@@ -1,5 +1,281 @@
+<script setup lang="ts">
+
+
+import { ref,onMounted } from 'vue'
+let searchkey=ref('')
+let isauto=ref('')
+import {
+  Search
+} from '@element-plus/icons-vue'
+
+onMounted(()=>{
+  
+})
+
+
+</script>
 <template>
     <div>
-        carmanplan
+      
+        
+
+        <div class="chart-wrap">
+            <div class="chart-item" style="width:300px;margin-right:15px">
+                <el-card style="width: 97%">
+                    <div class="common-title">路线列表</div>
+                    <el-input
+                    v-model="searchkey"
+                    style="margin-bottom:10px"
+                    placeholder="搜索路线..."
+                    
+                    >
+
+                    <template #append>
+                        <el-button :icon="Search" />
+                    </template>
+                    </el-input>
+                    <div class="common-chart-wrap" id="order-wrap">
+                        <div class="lefttop-card-wrap">
+                            <div class="left-part">
+                                <div class="title">深圳-佛山</div>
+                                <div class="time">发车时间: 13:00</div>
+                            </div>
+                            <div class="right-part">
+
+                            </div>
+                        </div>
+                        <div class="lefttop-card-wrap">
+                            <div class="left-part">
+                                <div class="title">深圳-佛山</div>
+                                <div class="time">发车时间: 13:00</div>
+                            </div>
+                            <div class="right-part">
+
+                            </div>
+                        </div>
+                        <div class="lefttop-card-wrap">
+                            <div class="left-part">
+                                <div class="title">深圳-佛山</div>
+                                <div class="time">发车时间: 13:00</div>
+                            </div>
+                            <div class="right-part">
+
+                            </div>
+                        </div>
+                        <div class="lefttop-card-wrap">
+                            <div class="left-part">
+                                <div class="title">深圳-佛山</div>
+                                <div class="time">发车时间: 13:00</div>
+                            </div>
+                            <div class="right-part">
+
+                            </div>
+                        </div>
+                        <div class="lefttop-card-wrap">
+                            <div class="left-part">
+                                <div class="title">深圳-佛山</div>
+                                <div class="time">发车时间: 13:00</div>
+                            </div>
+                            <div class="right-part">
+
+                            </div>
+                        </div>
+                        <div class="lefttop-card-wrap">
+                            <div class="left-part">
+                                <div class="title">深圳-佛山</div>
+                                <div class="time">发车时间: 13:00</div>
+                            </div>
+                            <div class="right-part">
+
+                            </div>
+                        </div>
+                        <div class="lefttop-card-wrap">
+                            <div class="left-part">
+                                <div class="title">深圳-佛山</div>
+                                <div class="time">发车时间: 13:00</div>
+                            </div>
+                            <div class="right-part">
+
+                            </div>
+                        </div>
+                        <div class="lefttop-card-wrap">
+                            <div class="left-part">
+                                <div class="title">深圳-佛山</div>
+                                <div class="time">发车时间: 13:00</div>
+                            </div>
+                            <div class="right-part">
+
+                            </div>
+                        </div>
+                    </div>
+                </el-card>
+            </div>
+            <div class="chart-item planlist-wrap" style="flex:1">
+                <el-card style="width: 100%">
+                    <div class="common-title">
+                        <div class="title-left">
+                            <div>深圳湾线 - 排班表</div>
+                            <el-switch style="margin:0 6px" v-model="isauto" />
+                            <div style="color: #4B5563;font-size:14px;font-weight: 400;">自动续排</div>
+                        </div>
+                        <div class="title-right">
+                            <el-button>月视图 </el-button>
+                            <el-button>列表视图 </el-button>
+                        </div>
+                    </div>
+                    <div class="common-chart-wrap" id="caruse-wrap">
+                        <el-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]" />
+                    </div>
+
+                </el-card>
+            </div>
+           
+        </div>
+
+        <div class="card-bottom">
+            <div class="common-title">
+                排班统计
+            </div>
+            <div class="card-wrap">
+            <div class="card-item">
+                <div class="card-wrap-inner">
+                    <div class="left-icon">
+
+                    </div>
+                    <div class="right-desc">
+                        <div class="bold-title">本月已排班</div>
+                        <div class="num-wrap" style="color:#2563EB">
+                            2458
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-item">
+                <div class="card-wrap-inner">
+                    <div class="left-icon">
+
+                    </div>
+                    <div class="right-desc">
+                        <div class="bold-title">待排班</div>
+                        <div class="num-wrap" style="color:#16A34A">
+                            186
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-item">
+                <div class="card-wrap-inner">
+                        <div class="left-icon">
+
+                        </div>
+                        <div class="right-desc">
+                            <div class="bold-title">参与车辆</div>
+                            <div class="num-wrap" style="color:#9333EA">
+                                42
+                            </div>
+                        </div>
+                </div>
+            </div>
+            <div class="card-item">
+                <div class="card-wrap-inner">
+                        <div class="left-icon">
+
+                        </div>
+                        <div class="right-desc">
+                            <div class="bold-title">自动续排</div>
+                            <div class="num-wrap" style="color:#CA8A04">
+                                357
+                            </div>
+                        </div>
+                </div>
+            </div>
+        </div>
+        </div>
     </div>
-</template>
+</template>
+
+<style lang="scss" scoped>
+    #caruse-wrap{
+        height:434px;
+    }
+    .planlist-wrap{
+        .common-title{
+            display:flex;
+            align-items: center;
+            justify-content: space-between;
+            .title-left{
+                display:flex;
+                align-items: center;
+            }
+        }
+    }
+    #order-wrap{
+        height:400px;
+        
+        overflow: auto;
+        .lefttop-card-wrap{
+            border: 1px solid #E5E7EB;
+            margin-bottom:8px;
+            padding:8px 6px 8px 8px;
+            border-radius: 12px;
+            .title{
+                color: #1F2937;
+                font-size: 16px;
+            }
+            .time{
+                color: #6B7280;
+                font-size: 14px;
+            }
+        }
+    }
+    .card-bottom{
+        background:#fff;
+        padding:0px 0 30px 20px;
+        margin:20px 0px 0 0;
+        .common-title{
+            font-weight: 600;
+            font-size: 18px;
+            padding:24px 0 16px 0px;
+        }
+        .card-wrap{
+            display:flex;
+            
+           
+            .card-item{
+                height:88px;
+                width:25%;
+                margin-right:20px;
+                background:#F9FAFB;
+                .card-wrap-inner{
+                    display:flex;
+                    align-items: center;
+                    padding:20px 0 0 20px;
+                    .num-wrap{
+                        font-size:24px;
+                        font-weight:600;
+                    }
+                    .bold-title{
+                        font-size:14px;
+                        color:#6B7280;
+                    }
+                }
+            }
+        }
+    }
+    
+   
+    .chart-wrap{
+        display:flex;
+        .chart-item{
+            
+            .common-title{
+                font-weight: 600;
+                font-size: 18px;
+                padding:5px 0 16px 0px;
+            }
+            .common-chart-wrap{
+                height:300px;
+            }
+        }
+    }
+</style>