修改配置

guzijian
1 parent 95634eee
Showing 7 changed files with 166 additions and 102 deletions
.env.development
src/components/ConstForm/index.vue
src/components/Screenfull/index.vue
src/layout/components/AppMain.vue
src/layout/components/Navbar.vue
src/views/driver/driver/index.vue
src/views/home/index.vue
@@ -5,6 +5,6 @@ VITE_APP_TITLE = 酒精测试一体机管理系统
 VITE_APP_ENV = 'development'
 # 若依管理系统/开发环境
-VITE_APP_BASE_API = '/dev-api'
+# VITE_APP_BASE_API = '/dev-api'
-VITE_BIG_VIEW_URL = 'http://localhost:8081/'
+VITE_APP_BASE_API = http://101.95.136.202:8100
 <template>
   <div v-loading="loading">
-    <el-form :inline="true">
-      <el-form-item label="工号" width="50px">
-        <span>{{ info.jobCode }}</span>
-      </el-form-item>
-      <el-form-item label="姓名" width="50px">
-        <span>{{ info.name }}</span>
-      </el-form-item>
-      <el-form-item label="路牌" width="50px">
-        <span>{{ info.lpName }}</span>
-      </el-form-item>
-      <el-form-item label="车队" width="50px">
-        <span>{{ info.fleetName }}</span>
-      </el-form-item>
-    </el-form>
-    <span type="primary" style="text-align: center;" class="mx-1" size="large">打卡详情</span>
+    <div class="person-info">
+      <div class="font-box">
+        <span class="label">
+          工号:
+        </span>
+        <div class="content-box">
+          <span class="content-text"> {{ info.jobCode }}</span>
+        </div>
+      </div>
+      <div class="font-box">
+        <span class="label">
+          工号:
+        </span>
+        <div class="content-box">
+          <span class="content-text"> {{ info.jobCode }}</span>
+        </div>
+      </div>
+
+      <div class="font-box">
+        <span class="label">
+          工号:
+        </span>
+        <div class="content-box">
+          <span class="content-text"> {{ info.jobCode }}</span>
+        </div>
+      </div>
+
+      <div class="font-box">
+        <span class="label">
+          工号:
+        </span>
+        <div class="content-box">
+          <span class="content-text"> {{ info.jobCode }}</span>
+        </div>
+      </div>
+    </div>
+    <div style="display: flex;align-items: center;margin-bottom: 7px; color: #0CFCFC; font-size: 13px; margin-top: 15px;">
+      打卡详情</div>
     <el-table :data="tableData" style="width: 100%;background-color: aliceblue;">
       <el-table-column prop="date" label="打卡时间" width="120" />
       <el-table-column prop="address" label="打卡地点" />
@@ -24,6 +47,7 @@
 </template>
 <script setup>
+
 const loading = ref(false);
 const props = defineProps({
   // 请求参数
@@ -98,3 +122,42 @@ watch(
   }
 )
 </script>
+<style scoped lang="scss">
+.person-info {
+  width: 300px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .font-box {
+    width: 50%;
+    box-sizing: border-box;
+    margin-top: 4px;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+
+    .label {
+      color: #0CFCFC;
+      font-family: "黑体", "圆体";
+      font-weight: 500;
+      width: 39px;
+    }
+
+    .content-box {
+      color: white;
+      width: 80px;
+      box-sizing: border-box;
+      padding: 2px;
+      text-align: center;
+      background-color: #03113F;
+
+      .content-text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>
 <template>
   <div>
-    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
+    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="jumpBigView" />
   </div>
 </template>
 <script setup>
-import { useFullscreen } from '@vueuse/core'
+import { useFullscreen } from '@vueuse/core';
+import { useRouter } from "vue-router";
+const router = useRouter();
+const jumpBigView = () => {
+  router.push({
+    path: '/home/index',
+  })
+}
 const { isFullscreen, enter, exit, toggle } = useFullscreen();
+
+// 可视化全屏
+
 </script>
 <style lang='scss' scoped>
@@ -19,4 +29,4 @@ const { isFullscreen, enter, exit, toggle } = useFullscreen();
   height: 20px;
   vertical-align: 10px;
 }
-</style>
 \ No newline at end of file
+</style>
@@ -3,7 +3,7 @@
     <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
         <keep-alive :include="tagsViewStore.cachedViews">
-          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
+          <component v-if="!route.meta.link" :is="Component" :key="route.path" />
         </keep-alive>
       </transition>
     </router-view>
@@ -12,8 +12,8 @@
 </template>
 <script setup>
-import iframeToggle from "./IframeToggle/index"
-import useTagsViewStore from '@/store/modules/tagsView'
+import useTagsViewStore from '@/store/modules/tagsView';
+import iframeToggle from "./IframeToggle/index";
 const tagsViewStore = useTagsViewStore()
 </script>
@@ -27,7 +27,7 @@ const tagsViewStore = useTagsViewStore()
   overflow: hidden;
 }
-.fixed-header + .app-main {
+.fixed-header+.app-main {
   padding-top: 50px;
 }
@@ -35,9 +35,10 @@ const tagsViewStore = useTagsViewStore()
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 84px);
+    height: calc(100vh - 84px);
   }
-  .fixed-header + .app-main {
+  .fixed-header+.app-main {
     padding-top: 84px;
   }
 }
@@ -65,4 +66,3 @@ const tagsViewStore = useTagsViewStore()
   border-radius: 3px;
 }
 </style>
-
@@ -17,7 +17,9 @@
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
         </el-tooltip>
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+        <el-tooltip content="可视化全屏" effect="dark" placement="bottom">
+          <screenfull id="screenfull" class="right-menu-item hover-effect" />
+        </el-tooltip>
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
@@ -48,8 +48,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="工号" align="center" prop="jobCode" />
       <el-table-column label="姓名" align="center" prop="personnelName" />
-
-
+      <el-table-column label="部门" align="center" prop="fleetName" />
       <el-table-column label="人脸注册" align="center" prop="faceSignIn" width="130">
         <template #default="scope">
           <dict-tag :options="face_sign_in" :value="scope.row.faceSignIn" />
@@ -91,8 +90,8 @@
         <el-form-item label="所属岗位/工种" prop="posts">
           <el-input v-model="form.posts" placeholder="请输入所属岗位/工种" />
         </el-form-item>
-        <el-form-item label="身份证" prop="card">
-          <el-input v-model="form.card" placeholder="请输入身份证" />
+        <el-form-item label="部门" prop="fleetName">
+          <el-input v-model="form.fleetName" placeholder="部门" />
         </el-form-item>
         <el-form-item label="人脸注册" prop="faceSignIn">
           <el-radio-group v-model="form.faceSignIn">
@@ -119,11 +118,11 @@
 <script setup name="Driver">
 import {
-addDriver,
-delDriver,
-getDriver,
-listDriver,
-updateDriver,
+  addDriver,
+  delDriver,
+  getDriver,
+  listDriver,
+  updateDriver,
 } from "@/api/driver/driver";
 const { proxy } = getCurrentInstance();
 <template>
   <div class="app-container">
     <!-- 可视化大屏 -->
-    <div class="box-view">
+    <div class="box-view" v-loading="loading">
       <!-- 标题 -->
       <div class="big-view-container-title">
         <div class="big-view-container-time">
@@ -59,15 +59,16 @@
           <!-- 内容盒子 -->
           <div class="fleet-content-box">
             <!-- 线路信息 -->
-            <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childIndex" class="fleet-line-info-container">
+            <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childItem.lineName"
+              class="fleet-line-info-container">
               <div class="fleet-line-title">
                 {{ childItem.lineName }}
               </div>
               <div ref="fleetNbbmInfoContainer" class="fleet-nbbm-info-container">
-                <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunIndex" class="fleet-nbbm-info-item">
-                  <div v-if="childItem.saleInfoVo" class="fleet-nbbm-info-have-sale">
+                <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunItem.nbbm" class="fleet-nbbm-info-item">
+                  <div v-if="sunItem.saleInfoVo != null" class="fleet-nbbm-info-have-sale">
                     <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"
-                      :width="350" :show-after="300" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">
+                      :width="300" :show-after="300" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">
                       <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
                         :jobCode="sunItem.driverInfoVo.jobCode" />
                       <template #reference>
@@ -79,7 +80,7 @@
                       <span class="fleet-nbbm-have-sale-txt">{{ sunItem.nbbm }}</span>
                     </div>
                     <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"
-                      :width="350" :show-after="300" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">
+                      :width="300" :show-after="300" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">
                       <ConstForm :showFlag="personSignInfo.jobCode == sunItem.saleInfoVo.jobCode"
                         :jobCode="sunItem.saleInfoVo.jobCode" />
                       <template #reference>
@@ -89,7 +90,7 @@
                     </el-popover>
                   </div>
                   <el-popover v-else :show-after="300" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)"
-                    placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="350">
+                    placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="300">
                     <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
                       :jobCode="sunItem.driverInfoVo.jobCode" />
                     <template #reference>
@@ -124,7 +125,7 @@ import icon4 from &quot;../../assets/bigview/image-icon-3.png&quot;;
 import icon5 from "../../assets/bigview/image-icon-4.png";
 import icon6 from "../../assets/bigview/image-icon-5.png";
 import icon1 from "../../assets/bigview/image-icon-6.png";
-
+const loading = ref(true);
 /** 签到信息 */
 const personSignInfo = reactive(
   {
@@ -158,37 +159,37 @@ const globalInfoBoxList = reactive(
       title: "设备数",
       icon: icon1,
       startNumber: 0,
-      endNumber: 562
+      endNumber: 0
     },
     {
       title: "线路数",
       icon: icon2,
       startNumber: 0,
-      endNumber: 562
+      endNumber: 0
     },
     {
       title: "车辆数",
       icon: icon3,
       startNumber: 0,
-      endNumber: 562
+      endNumber: 0
     },
     {
       title: "售票员签到",
       icon: icon4,
       startNumber: 0,
-      endNumber: 562
+      endNumber: 0
     },
     {
       title: "驾驶员签到",
       icon: icon5,
       startNumber: 0,
-      endNumber: 562
+      endNumber: 0
     },
     {
       title: "辅助人员签到",
       icon: icon6,
       startNumber: 0,
-      endNumber: 562
+      endNumber: 0
     },
   ]
 )
@@ -219,15 +220,15 @@ const fleetInfoList = ref(
   [
     {
       title: "一车队",
-      lineInfos: []
+      fleetInfos: []
     },
     {
       title: "二车队",
-      lineInfos: []
+      fleetInfos: []
     },
     {
       title: "三车队",
-      lineInfos: []
+      fleetInfos: []
     }
   ]
 )
@@ -237,21 +238,6 @@ const fleetNbbmInfoContainer = ref(null);
 const scrollNumber = ref(null);
 // 计算宽度初始化数据
 onMounted(() => {
-
-  // // TODO
-  // setInterval(() => {
-  //   for (let index = 0; index < fleetInfoList.value.length; index++) {
-  //     const element = fleetInfoList.value[index].lineInfos;
-  //     for (let childrenIndex = 0; childrenIndex < element.length; childrenIndex++) {
-  //       const childrenElement = element[childrenIndex].lineInfo;
-  //       for (let sunIndex = 0; sunIndex < childrenElement.length; sunIndex++) {
-  //         const sunItem = childrenElement[sunIndex];
-  //         sunItem.driverSignStatus = Math.floor(Math.random() * 4);
-  //       }
-  //     }
-  //   }
-  // }, 5000);
-  // TODO
   handleUpdateDataRequest();
   timeTask.titleNowDateTimer = startUpdateNowDateTimerTaskScheduler();
   timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler();
@@ -356,25 +342,29 @@ const handleUpdateDataRequest = () =&gt; {
     fleetInfoList.value = res.data
     nextTick(() => {
       const containerElement = fleetNbbmInfoContainer.value;
-      console.log(containerElement);
-      containerElement.forEach((el) => {
-        const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;
-        if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {
-          const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;
-          // 有售票员
-          for (let index = 0; index < el.children.length; index++) {
-            const element = el.children[index];
-            element.style.width = `${textWidth}px`;
-          }
-          // 无售票员
-        } else {
-          const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;
-          for (let index = 0; index < el.children.length; index++) {
-            const element = el.children[index];
-            element.style.width = `${textWidth}px`;
+      if (containerElement != null) {
+        containerElement.forEach((el) => {
+          const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;
+          if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {
+            const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;
+            // 有售票员
+            for (let index = 0; index < el.children.length; index++) {
+              const element = el.children[index];
+              element.style.width = `${textWidth}px`;
+            }
+            // 无售票员
+          } else {
+            const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;
+            for (let index = 0; index < el.children.length; index++) {
+              const element = el.children[index];
+              element.style.width = `${textWidth}px`;
+            }
           }
-        }
-      })
+        })
+        loading.value = false;
+      } else {
+        loading.value = false;
+      }
     })
   })
 }
@@ -389,7 +379,7 @@ const handleGlobalInfo = (data, num) =&gt; {
 // 可视化大屏
 .app-container {
   width: 100%;
-  height: 91vh;
+  height: 100%;
   background-color: #081138;
   padding: 0 !important;
   box-sizing: border-box;
@@ -398,7 +388,7 @@ const handleGlobalInfo = (data, num) =&gt; {
   // min-width: 1600px;
   .box-view {
     width: 100%;
-    height: 91vh;
+    height: 100%;
     // 整体蓝色背景
     background-image: url("@/assets/bigview/back.png");
     background-size: cover;
@@ -413,13 +403,13 @@ const handleGlobalInfo = (data, num) =&gt; {
     // min-width: 1600px;
     .common-style {
-      padding-top: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
+      padding-top: clamp(1rem, -1.5rem + 2.5vh, 2rem);
       box-sizing: border-box;
     }
     // 标题
     .big-view-container-title {
-      height: 6.5vh;
+      height: 7%;
       width: 100%;
       font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
       display: flex;
@@ -433,14 +423,14 @@ const handleGlobalInfo = (data, num) =&gt; {
         display: flex;
         align-items: center;
         justify-content: flex-end;
-        margin-top: 4vh;
+        margin-top: 3%;
         box-sizing: border-box;
       }
     }
     // 全局信息
     .big-view-container-global-info {
-      height: 11vh;
+      height: 11%;
       width: 100%;
       font-size: clamp(0.3rem, -2.531rem + 19.69vw, 1.1rem);
       display: flex;
@@ -515,10 +505,10 @@ const handleGlobalInfo = (data, num) =&gt; {
     // 提示信息
     .big-view-container-prompt-info {
-      font-size: clamp(0.5rem, -2.5rem + 30vw, 1.1rem);
+      font-size: 1vw;
       box-sizing: border-box;
       width: 100%;
-      height: 4.5vh;
+      height: 4.5%;
       display: flex;
       align-items: center;
@@ -548,7 +538,6 @@ const handleGlobalInfo = (data, num) =&gt; {
           align-items: center;
           .label-txt {
-
             white-space: nowrap;
           }
         }
@@ -574,7 +563,7 @@ const handleGlobalInfo = (data, num) =&gt; {
     // 主要内容
     .big-view-container-main-content {
       width: 100%;
-      height: calc(69vh - clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem) * 3);
+      height: calc(85% - clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem) * 3);
       display: flex;
       font-size: clamp(0.6rem, -0.907rem + 5.71vw, 1.2rem);
@@ -582,6 +571,7 @@ const handleGlobalInfo = (data, num) =&gt; {
       .fleet-common-style {
         flex-grow: 1;
         width: 33.3%;
+        height: 100%;
         background-image: url("@/assets/bigview/bottom-box.png");
         margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
         background-size: 100% 100%;
@@ -616,7 +606,6 @@ const handleGlobalInfo = (data, num) =&gt; {
           overflow-y: scroll;
           overflow-x: hidden;
-
           // 线路信息
           .fleet-line-info-container {
             width: 100%;
@@ -634,7 +623,7 @@ const handleGlobalInfo = (data, num) =&gt; {
               box-sizing: border-box;
               display: flex;
               flex-wrap: wrap;
-              font-size: clamp(0.7rem, -0.8rem + 24vw, 1rem);
+              font-size: 0.8vw;
               .fleet-nbbm-info-item {
                 // width: 6vw;
@@ -676,6 +665,7 @@ const handleGlobalInfo = (data, num) =&gt; {
                       width: auto;
                       /* 防止文字换行 */
                       white-space: nowrap;
+
                       padding-left: 0.5vw;
                       padding-right: 0.5vw;
                       /** 防止元素遮挡 */
@@ -765,8 +755,8 @@ const handleGlobalInfo = (data, num) =&gt; {
 }
 .el-popover.fleet-popover-style {
-  border-color: #146ebd;
-  background-color: #05417585;
+  border-color: #146EBD;
+  background-color: #062a5ac5;
   /* background:
     -webkit-linear-gradient(top, transparent 14px, blue 15px),
     -webkit-linear-gradient(left, transparent 14px, blue 15px);
@@ -779,7 +769,7 @@ const handleGlobalInfo = (data, num) =&gt; {
 }
 .el-popper[data-popper-placement^=top]>.el-popper__arrow::before {
-  border-top-color: #001bea21 !important;
-  background-color: #001bea21 !important;
+  border-top-color: #062B5A !important;
+  background-color: #062B5A !important;
 }
 </style>