`fix ui`

src/components/Public/timeLine.vue

@@ -1,38 +1,46 @@
 <template>
   <div>
-    <div style="display: flex;flex-direction: row;">
+    <div style="display: flex;flex-direction: row;margin-bottom:20px">
       <div v-for="(obj, index1) in list" style="width: 13vw;">
         <div style="display: flex;flex-direction: row;">
           <div style="height: 40px;">
-            <img v-if="getCurrentStation(obj.stationName, index1)" style="width: 40px;"
-              src="@/assets/images/icon/小货车.png" />
+            <img v-if="getCurrentStation(obj.stationName, index1)" style="width: 30px;" src="@/assets/images/icon/小货车.png" />
           </div>
           <!-- <div style="height: 40px;">
             <img v-if="getCurrentStation(obj.stationName, index1)" style="width: 40px;margin-left: 4vw;"
               src="@/assets/images/icon/小货车.png" />
           </div> -->
         </div>
-        <div
-          style="width:13vw;display: flex;flex-direction: row;  font-family: 思源黑体;font-size: 18px;font-weight: bold;color:#C0C4CC">
+        <!-- <div
+          style="width:13vw;display: flex;flex-direction: row;  font-family: 思源黑体;font-size: 12px;font-weight: bold;color:#C0C4CC">
           <div v-show="index1 != 0">{{ formatDate(obj.planInTime) }}</div>
           <div style="padding-left: 20px;">{{ formatDate(obj.planOutTime) }}</div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div style="display: flex;flex-direction: row;padding-left: 3%;">
       <div v-for="(item, index) in list" style="width: 13vw;">
         <div>
           <div style="display: flex;flex-direction: row;">
-            <div class="activitieyContent" v-if="item.rank == 1" style="background: #06D903;">
+            <div class="activitieyContent" v-if="index == 0" style="background: #06D903;">
               起
+              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{ formatDate(item.planOutTime)}}</div>
             </div>
-            <div class="activitieyContent" v-if="item.rank != 1" style="">
+            <div class="activitieyContent" v-if="index> 0 && index<list.length-1" style="">
               {{ index }}
+              <div style="position: absolute;top:-26px;left:-35px;color:#C0C4CC;font-weight:bold;width:100px;display:flex;justify-content: space-evenly;">
+                 <div>{{ formatDate(item.planInTime) }}</div> <div>{{ formatDate(item.planOutTime) }}</div>
+              </div>
+            </div>
+            <div class="activitieyContent" v-if="index == list.length-1" style="background: #ad012f;">
+              终
+              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{ formatDate(item.planInTime)}}</div>
             </div>
-            <div class="line" style="margin-top:17px;margin-left: 2px;" v-if="index != list.length - 1"></div>
+            <div class="line" style="margin: 2px 4px;margin-top:13px;" v-if="index != list.length - 1"></div>
           </div>
-          <div style="writing-mode:vertical-rl;width: 40px;line-height: 40px;font-family: 思源黑体;
-                    font-size: 23px;font-weight: bold;letter-spacing: 10px;margin-top: 10px;">
+          <div
+            style="writing-mode:vertical-rl;width: 35px;line-height: 40px;font-family: 思源黑体;text-align: left;font-size: 13px;font-weight: bold;letter-spacing: 4px;margin-top: 5px;"
+          >
             {{ item.stationName }}
           </div>
         </div>
@@ -132,23 +140,25 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .activitieyContent {
-  width: 40px;
-  height: 40px;
+  width: 30px;
+  height: 30px;
   opacity: 1;
   background-color: #6495ED;
   border-radius: 50%;
   text-align: center;
-  line-height: 40px;
+  line-height: 30px;
   font-family: 思源黑体;
-  font-size: 20px;
-  color: #ffffff
+  font-size: 12px;
+  color: #ffffff;
+  margin-left: 2px;
+  position: relative;
 }
 
 .line {
   width: 10vw;
-  height: 8px;
+  height: 3px;
   border-radius: 10px;
   opacity: 1;
   background: #D8D8D8;
 }
-</style>
+</style>

src/views/yunying/scheduling/index.vue

@@ -1,80 +1,96 @@
 <template>
-    <div class="p-2">
-        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-            :leave-active-class="proxy?.animate.searchAnimate.leave">
-            <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
-                <div style="width: 85%;">
-                    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-                        <el-form-item label="车牌" prop="carNum">
-                            <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
-                                @keyup.enter="handleQuery" />
-                        </el-form-item>
-                        <el-form-item label="状态" prop="carNum">
-                            <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
-                                @keyup.enter="handleQuery" />
-                        </el-form-item>
-                        <el-form-item label="站点" prop="carNum">
-                            <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
-                                @keyup.enter="handleQuery" />
-                        </el-form-item>
-                        <el-form-item label="司机" prop="carNum">
-                            <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
-                                @keyup.enter="handleQuery" />
-                        </el-form-item>
-                        <el-form-item label="时间" prop="carNum">
-                            <el-date-picker v-model="value2" type="datetimerange" :shortcuts="shortcuts"
-                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
-                        </el-form-item>
-                    </el-form>
-                </div>
-                <div style="width: 15%;">
-                    <el-form-item>
-                        <el-button type="primary" @click="goadd">新增</el-button>
-                        <el-button type="primary" @click="resetQuery">查询</el-button>
-                    </el-form-item>
-                </div>
-            </div>
-        </transition>
-        <div v-for="(item, index) in carScheduleList">
-            <el-card shadow="never">
-                <div class="carDiv">
-                    <div
-                        style="width: 18%;background: #7BC932;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items:center;">
-                        <div class="carDetail">{{ item.carNum }}</div>
-                        <div class="carFont">{{ getTimeFormat(item.pathInfo) }}</div>
-                        <div class="carFont">{{ getAddr(item.pathInfo) }}</div>
-                        <!-- <div class="carFont">{{ JSON.parse(item.pathInfo).driver_info.nickName }}</div> -->
-                        <div class="carFont">{{ getUserName(JSON.parse(item.pathInfo).driverInfo) }}</div>
-                        <div class="carFont">{{ getCatInfo(item.carNum) }}</div>
-                    </div>
-                    <div style="width: 80%;">
-                        <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
-                            <timeLineDiv :list="JSON.parse(item.pathInfo).pathLine" :stationInfo="JSON.parse(item.stationInfo)"></timeLineDiv>
-                        </el-scrollbar>
-                    </div>
-                    <div style="padding-top:1%">
-                        <div style="width: 30px;height: 30px;border: 1px solid #000000;border-radius: 20%;"
-                            @click="dialogMap.visible = true">
-                            <img style="width: 28px;height: 28px;" src='@/assets/images/icon/map.png' />
-                        </div>
-                        <div style="width: 30px;height: 30px;border: 1px solid #000000;border-radius: 20%;margin-top: 5px"
-                            @click="dialog.visible = true">
-                            <img style="width: 28px;height: 28px;" src='@/assets/images/icon/video.png' />
-                        </div>
-                    </div>
-                </div>
-            </el-card>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
+        <div style="width: 85%;">
+          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+            <el-form-item label="车牌" prop="carNum">
+              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="状态" prop="carNum">
+              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="站点" prop="carNum">
+              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="司机" prop="carNum">
+              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="时间" prop="carNum">
+              <el-date-picker
+                v-model="value2"
+                type="datetimerange"
+                :shortcuts="shortcuts"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              />
+            </el-form-item>
+          </el-form>
         </div>
+        <div style="width: 15%;">
+          <el-form-item>
+            <el-button type="primary" @click="goadd">新增</el-button>
+            <el-button type="primary" @click="resetQuery">查询</el-button>
+          </el-form-item>
+        </div>
+      </div>
+    </transition>
+    <div style="text-align: center;margin-bottom:10px">
+      <el-tag type="success" effect="dark" round>正常作业</el-tag>
+      <el-tag style="margin-left: 40px;" type="danger" effect="dark" round>异常作业</el-tag>
+    </div>
 
-        <el-dialog :title="dialogMap.title" v-model="dialogMap.visible" width="40vw" append-to-body>
-            <mapDiv style="width:40vw;height:40vh;"></mapDiv>
-        </el-dialog>
-
-        <el-dialog :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body>
-            <video v-for="item in 1" style="width: 99%;margin-left:0.5%" controls="controls" :autoplay="false"
-                muted="muted" :ref="`videoref${item}`"></video>
-        </el-dialog>
+    <div v-for="(item, index) in carScheduleList">
+      <el-card shadow="never">
+        <div class="carDiv" style="position: relative;">
+          <div
+            style="width: 18%;background: #7BC932;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items:center;"
+          >
+            <div class="carDetail">{{ item.carNum }}</div>
+            <div class="carFont" style="font-size: 12px;">{{ getTimeFormat(item.pathInfo) }}</div>
+            <div class="carFont" style="font-size: 12px;margin-top:8px;">{{ getAddr(item.pathInfo) }}</div>
+            <!-- <div class="carFont">{{ JSON.parse(item.pathInfo).driver_info.nickName }}</div> -->
+            <div class="carFont" style="font-size: 12px;margin-top:8px;color:rgba(255,255,255,0.9)">
+              司机：{{ getUserName(JSON.parse(item.pathInfo).driverInfo) }}
+            </div>
+            <div class="carFont" style="font-size: 12px;margin-top:8px">{{ getCatInfo(item.carNum) }}</div>
+          </div>
+          <div style="width: 80%;">
+            <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
+              <timeLineDiv :list="JSON.parse(item.pathInfo).pathLine" :stationInfo="JSON.parse(item.stationInfo)"></timeLineDiv>
+            </el-scrollbar>
+          </div>
+          <div style="position:absolute;top:10px;right:6px">
+            <div style="width: 30px;height: 30px; cursor: pointer;" @click="dialogMap.visible = true">
+              <img style="width: 28px;height: 28px;" src="@/assets/images/icon/map1.png" />
+            </div>
+            <div style="width: 30px;height: 20px; cursor: pointer;" @click="dialog.visible = true">
+              <img style="width: 28px;height: 28px;" src="@/assets/images/icon/cam.png" />
+            </div>
+          </div>
+          <div style="position:absolute;bottom:10px;right:6px;font-size:10px">
+            <span>乘客：11人 </span> <span style="margin-left: 10px;">货物：11个</span>
+          </div>
+        </div>
+      </el-card>
     </div>
+
+    <el-dialog :title="dialogMap.title" v-model="dialogMap.visible" width="40vw" append-to-body>
+      <mapDiv style="width:40vw;height:40vh;"></mapDiv>
+    </el-dialog>
+
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body>
+      <video
+        v-for="item in 1"
+        style="width: 99%;margin-left:0.5%"
+        controls="controls"
+        :autoplay="false"
+        muted="muted"
+        :ref="`videoref${item}`"
+      ></video>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup name="CarInfo" lang="ts">
@@ -418,14 +434,14 @@ onMounted(() => {
 
 .carDetail {
     width: 135px;
-    height: 35px;
+    padding: 5px 10px;
     border-radius: 22px;
     opacity: 1;
     background: #FFFFFF;
     font-family: 思源黑体;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: bold;
-    line-height: normal;
+    margin-bottom: 6px;
     color: #7BC932;
 }
 
@@ -439,4 +455,4 @@ onMounted(() => {
     font-feature-settings: "kern" on;
     color: #FFFFFF;
 }
-</style>
+</style>