feat:修改样式，修改路由方式

guzijian
1 parent 39e2ecc8
Showing 5 changed files with 59 additions and 26 deletions
src/components/ConstElPopover/index.vue
src/components/FleetContentBox/index.vue
src/router/index.js
src/views/email/email/index.vue
src/views/home/index.vue
@@ -75,7 +75,6 @@ const tableData = ref(
  
 /** 处理信息 */
 const handleInfo = (val) => {
-  console.log(val);
   loading.value = true
   setTimeout(() => {
     loading.value = false;
@@ -5,7 +5,7 @@
     <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childItem.lineName" class="fleet-line-info-container">
       <!-- <div class="line-box" style="height: 1px; margin: 5px; background-color: #0761ba;"></div> -->
  
-      <div class="fleet-line-title">
+      <div :id="childItem.lineName" class="fleet-line-title">
         {{ childItem.lineName }}
       </div>
       <div class="line-box" style="height: 2px; margin: 10px 0; background: #d9e0e2;"></div>
@@ -172,6 +172,7 @@ onMounted(() =&gt; {
 <style lang="scss" scoped>
 .fleet-content-box {
   height: calc(100% - clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem));
+  // height: auto;
   width: auto;
   // overflow-y: hidden;
   // overflow-x: hidden;
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 /* Layout */
 import Layout from '@/layout';
  
@@ -166,7 +166,7 @@ export const dynamicRoutes = [
 ]
  
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes: constantRoutes,
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
@@ -121,7 +121,6 @@ const data = reactive({
 });
  
 const changeSelect = (data) => {
-  console.log(data);
 }
  
 const { queryParams, form, rules } = toRefs(data);
@@ -135,7 +134,6 @@ function getList() {
     if (emailList.value.type == 0 && emailList.value.parentId != null) {
       emailList.value.parentId = emailList.value.parentId.split(',')
     }
-    console.log(emailList.value);
     total.value = response.total;
     loading.value = false;
   });
@@ -201,7 +199,6 @@ function handleUpdate(row) {
   });
   getEmail(_id).then(response => {
     form.value = response.data;
-    console.log(form.value.parentId);
     if (form.value.type == 0 && form.value.parentId) {
       form.value.parentId = form.value.parentId.split(',').map(item => Number(item));
     }
@@ -57,10 +57,21 @@
       <div class="big-view-container-main-content common-style">
         <!-- 车队信息 -->
         <div v-for="(item, index) in fleetInfoList" :key="item.title" class="fleet-common-style">
-          <!-- 车队title -->
-          <div class="fleet-top-container">
-            <div class="fleet-top-box"></div>
-            <div class="fleet-top-title">{{ item.title }}</div>
+          <div class="fleet-global-content-container">
+            <div class="fleet-top-container">
+              <div class="fleet-top-box"></div>
+              <!-- 车队title -->
+              <div class="fleet-top-title">{{ item.title }}</div>
+            </div>
+            <div class="fleet-line-info-container">
+              <el-tooltip v-for="todo in  item.fleetStates " effect="dark" class="fleet-lineName-tip"
+                :content="todo.lineName" placement="top">
+                <el-link :underline="false" :href="'#' + todo.lineName" type="primary">
+                  <div class="fleet-line-info-box" :style="signStyleColor[todo.state]"></div>
+                </el-link>
+              </el-tooltip>
+
+            </div>
           </div>
           <!-- 内容盒子 -->
           <FleetContentBox :handleLoadSuccess="handleLoadSuccess" :signStyleColor="signStyleColor"
@@ -220,7 +231,7 @@ const startUpdateDataTaskScheduler = () =&gt; {
   return setInterval(() => {
     currentDate = moment();
     if (timeTaskObject.updateDateSchedulerObject <= "0:00") {
-      const updateMinutes = 5
+      const updateMinutes = 1
       timeTaskObject.updateDateSchedulerObject = `${updateMinutes}:00`;
       targetDate = moment().add(updateMinutes, 'minutes');
       timeTaskObject.updateDateObject = currentDate.format("yyyy-MM-DD HH:mm:ss");
@@ -240,7 +251,7 @@ const startUpdateDataTaskScheduler = () =&gt; {
  
  
 /** 监听数据更新日期 */
-watch(timeTaskObject.updateDateObject, (val1, val2) => {
+watch(() => timeTaskObject.updateDateObject, (val1, val2) => {
   //  发送请求更新数据
   const currentTime = moment().format('HH:mm');
   let dateKey;
@@ -249,7 +260,6 @@ watch(timeTaskObject.updateDateObject, (val1, val2) =&gt; {
   } else {
     dateKey = moment().format("YYYY-MM-DD");
   }
-  console.log();
   currentDateKey.value = dateKey;
   handleUpdateDataRequest(currentDateKey.value);
 })
@@ -510,7 +520,7 @@ const handleGlobalInfo = (data, num) =&gt; {
       width: 100%;
       height: calc(85% - clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem) * 3);
       display: flex;
-      font-size: clamp(0.7rem, -0.907rem + 5.71vw, 1.1rem);
+      font-size: 1.2vw;
  
       // 通用样式
       .fleet-common-style {
@@ -524,26 +534,52 @@ const handleGlobalInfo = (data, num) =&gt; {
         padding: clamp(0.6rem, 0.489rem + 1.05vw, 1rem);
         background-color: white;
  
-        .fleet-top-container {
+        .fleet-global-content-container {
           display: flex;
           box-sizing: border-box;
           align-items: center;
  
-          .fleet-top-box {
-            height: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem);
-            width: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem);
+          .fleet-top-container {
+            width: 40%;
             display: flex;
-            justify-content: center;
+            box-sizing: border-box;
             align-items: center;
-            background-color: green;
-            margin-right: clamp(0.4rem, 0.489rem + 1.05vw, 0.7rem);
+            flex-wrap: nowrap;
+
+            .fleet-top-box {
+              height: 1vw;
+              width: 1vw;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background-color: orange;
+              margin-right: clamp(0.4rem, 0.489rem + 1.05vw, 0.7rem);
+            }
+
+            .fleet-top-title {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-size: 1.4vw;
+            }
           }
  
-          .fleet-top-title {
+          .fleet-line-info-container {
+            width: 60%;
+            height: 1.4vw;
             display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem);
+            // justify-content: center;
+            box-sizing: border-box;
+            flex-wrap: wrap;
+
+            .fleet-line-info-box {
+              height: 0.8vw;
+              width: 0.8vw;
+              box-sizing: border-box;
+              margin-right: 2px;
+              margin-top: 2px;
+              border: 1px solid #d9e0e2;
+            }
           }
         }
       }