guzijian / bsth-alcohol-sign-web · Commits

Commit 75499b0131150ce3bb2833e037aa0efe9654aa4f

Authored by guzijian
1 parent 95634eee

修改配置

Inline Side-by-side
Showing 7 changed files with 166 additions and 102 deletions
.env.development
  View file @75499b0
... ... @@ -5,6 +5,6 @@ VITE_APP_TITLE = 酒精测试一体机管理系统
5 5 VITE_APP_ENV = 'development'
6 6  
7 7 # 若依管理系统/开发环境
8   -VITE_APP_BASE_API = '/dev-api'
  8 +# VITE_APP_BASE_API = '/dev-api'
9 9  
10   -VITE_BIG_VIEW_URL = 'http://localhost:8081/'
  10 +VITE_APP_BASE_API = http://101.95.136.202:8100
... ...
src/components/ConstForm/index.vue
  View file @75499b0
1 1 <template>
2 2 <div v-loading="loading">
3   - <el-form :inline="true">
4   - <el-form-item label="工号" width="50px">
5   - <span>{{ info.jobCode }}</span>
6   - </el-form-item>
7   - <el-form-item label="姓名" width="50px">
8   - <span>{{ info.name }}</span>
9   - </el-form-item>
10   - <el-form-item label="路牌" width="50px">
11   - <span>{{ info.lpName }}</span>
12   - </el-form-item>
13   - <el-form-item label="车队" width="50px">
14   - <span>{{ info.fleetName }}</span>
15   - </el-form-item>
16   - </el-form>
17   - <span type="primary" style="text-align: center;" class="mx-1" size="large">打卡详情</span>
  3 + <div class="person-info">
  4 + <div class="font-box">
  5 + <span class="label">
  6 + 工号:
  7 + </span>
  8 + <div class="content-box">
  9 + <span class="content-text"> {{ info.jobCode }}</span>
  10 + </div>
  11 + </div>
  12 + <div class="font-box">
  13 + <span class="label">
  14 + 工号:
  15 + </span>
  16 + <div class="content-box">
  17 + <span class="content-text"> {{ info.jobCode }}</span>
  18 + </div>
  19 + </div>
  20 +
  21 + <div class="font-box">
  22 + <span class="label">
  23 + 工号:
  24 + </span>
  25 + <div class="content-box">
  26 + <span class="content-text"> {{ info.jobCode }}</span>
  27 + </div>
  28 + </div>
  29 +
  30 + <div class="font-box">
  31 + <span class="label">
  32 + 工号:
  33 + </span>
  34 + <div class="content-box">
  35 + <span class="content-text"> {{ info.jobCode }}</span>
  36 + </div>
  37 + </div>
  38 + </div>
  39 + <div style="display: flex;align-items: center;margin-bottom: 7px; color: #0CFCFC; font-size: 13px; margin-top: 15px;">
  40 + 打卡详情</div>
18 41 <el-table :data="tableData" style="width: 100%;background-color: aliceblue;">
19 42 <el-table-column prop="date" label="打卡时间" width="120" />
20 43 <el-table-column prop="address" label="打卡地点" />
... ... @@ -24,6 +47,7 @@
24 47 </template>
25 48  
26 49 <script setup>
  50 +
27 51 const loading = ref(false);
28 52 const props = defineProps({
29 53 // 请求参数
... ... @@ -98,3 +122,42 @@ watch(
98 122 }
99 123 )
100 124 </script>
  125 +<style scoped lang="scss">
  126 +.person-info {
  127 + width: 300px;
  128 + display: flex;
  129 + flex-wrap: wrap;
  130 + justify-content: space-between;
  131 +
  132 + .font-box {
  133 + width: 50%;
  134 + box-sizing: border-box;
  135 + margin-top: 4px;
  136 + font-size: 13px;
  137 + display: flex;
  138 + align-items: center;
  139 +
  140 + .label {
  141 + color: #0CFCFC;
  142 + font-family: "黑体", "圆体";
  143 + font-weight: 500;
  144 + width: 39px;
  145 + }
  146 +
  147 + .content-box {
  148 + color: white;
  149 + width: 80px;
  150 + box-sizing: border-box;
  151 + padding: 2px;
  152 + text-align: center;
  153 + background-color: #03113F;
  154 +
  155 + .content-text {
  156 + display: flex;
  157 + justify-content: center;
  158 + align-items: center;
  159 + }
  160 + }
  161 + }
  162 +}
  163 +</style>
... ...
src/components/Screenfull/index.vue
  View file @75499b0
1 1 <template>
2 2 <div>
3   - <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
  3 + <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="jumpBigView" />
4 4 </div>
5 5 </template>
6 6  
7 7 <script setup>
8   -import { useFullscreen } from '@vueuse/core'
  8 +import { useFullscreen } from '@vueuse/core';
9 9  
  10 +import { useRouter } from "vue-router";
  11 +const router = useRouter();
  12 +const jumpBigView = () => {
  13 + router.push({
  14 + path: '/home/index',
  15 + })
  16 +}
10 17 const { isFullscreen, enter, exit, toggle } = useFullscreen();
  18 +
  19 +// 可视化全屏
  20 +
11 21 </script>
12 22  
13 23 <style lang='scss' scoped>
... ... @@ -19,4 +29,4 @@ const { isFullscreen, enter, exit, toggle } = useFullscreen();
19 29 height: 20px;
20 30 vertical-align: 10px;
21 31 }
22   -</style>
23 32 \ No newline at end of file
  33 +</style>
... ...
src/layout/components/AppMain.vue
  View file @75499b0
... ... @@ -3,7 +3,7 @@
3 3 <router-view v-slot="{ Component, route }">
4 4 <transition name="fade-transform" mode="out-in">
5 5 <keep-alive :include="tagsViewStore.cachedViews">
6   - <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
  6 + <component v-if="!route.meta.link" :is="Component" :key="route.path" />
7 7 </keep-alive>
8 8 </transition>
9 9 </router-view>
... ... @@ -12,8 +12,8 @@
12 12 </template>
13 13  
14 14 <script setup>
15   -import iframeToggle from "./IframeToggle/index"
16   -import useTagsViewStore from '@/store/modules/tagsView'
  15 +import useTagsViewStore from '@/store/modules/tagsView';
  16 +import iframeToggle from "./IframeToggle/index";
17 17  
18 18 const tagsViewStore = useTagsViewStore()
19 19 </script>
... ... @@ -27,7 +27,7 @@ const tagsViewStore = useTagsViewStore()
27 27 overflow: hidden;
28 28 }
29 29  
30   -.fixed-header + .app-main {
  30 +.fixed-header+.app-main {
31 31 padding-top: 50px;
32 32 }
33 33  
... ... @@ -35,9 +35,10 @@ const tagsViewStore = useTagsViewStore()
35 35 .app-main {
36 36 /* 84 = navbar + tags-view = 50 + 34 */
37 37 min-height: calc(100vh - 84px);
  38 + height: calc(100vh - 84px);
38 39 }
39 40  
40   - .fixed-header + .app-main {
  41 + .fixed-header+.app-main {
41 42 padding-top: 84px;
42 43 }
43 44 }
... ... @@ -65,4 +66,3 @@ const tagsViewStore = useTagsViewStore()
65 66 border-radius: 3px;
66 67 }
67 68 </style>
68   -
... ...
src/layout/components/Navbar.vue
  View file @75499b0
... ... @@ -17,7 +17,9 @@
17 17 <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
18 18 </el-tooltip>
19 19  
20   - <screenfull id="screenfull" class="right-menu-item hover-effect" />
  20 + <el-tooltip content="可视化全屏" effect="dark" placement="bottom">
  21 + <screenfull id="screenfull" class="right-menu-item hover-effect" />
  22 + </el-tooltip>
21 23  
22 24 <el-tooltip content="布局大小" effect="dark" placement="bottom">
23 25 <size-select id="size-select" class="right-menu-item hover-effect" />
... ...
src/views/driver/driver/index.vue
  View file @75499b0
... ... @@ -48,8 +48,7 @@
48 48 <el-table-column type="selection" width="55" align="center" />
49 49 <el-table-column label="工号" align="center" prop="jobCode" />
50 50 <el-table-column label="姓名" align="center" prop="personnelName" />
51   -
52   -
  51 + <el-table-column label="部门" align="center" prop="fleetName" />
53 52 <el-table-column label="人脸注册" align="center" prop="faceSignIn" width="130">
54 53 <template #default="scope">
55 54 <dict-tag :options="face_sign_in" :value="scope.row.faceSignIn" />
... ... @@ -91,8 +90,8 @@
91 90 <el-form-item label="所属岗位/工种" prop="posts">
92 91 <el-input v-model="form.posts" placeholder="请输入所属岗位/工种" />
93 92 </el-form-item>
94   - <el-form-item label="身份证" prop="card">
95   - <el-input v-model="form.card" placeholder="请输入身份证" />
  93 + <el-form-item label="部门" prop="fleetName">
  94 + <el-input v-model="form.fleetName" placeholder="部门" />
96 95 </el-form-item>
97 96 <el-form-item label="人脸注册" prop="faceSignIn">
98 97 <el-radio-group v-model="form.faceSignIn">
... ... @@ -119,11 +118,11 @@
119 118  
120 119 <script setup name="Driver">
121 120 import {
122   -addDriver,
123   -delDriver,
124   -getDriver,
125   -listDriver,
126   -updateDriver,
  121 + addDriver,
  122 + delDriver,
  123 + getDriver,
  124 + listDriver,
  125 + updateDriver,
127 126 } from "@/api/driver/driver";
128 127  
129 128 const { proxy } = getCurrentInstance();
... ...
src/views/home/index.vue
  View file @75499b0
1 1 <template>
2 2 <div class="app-container">
3 3 <!-- 可视化大屏 -->
4   - <div class="box-view">
  4 + <div class="box-view" v-loading="loading">
5 5 <!-- 标题 -->
6 6 <div class="big-view-container-title">
7 7 <div class="big-view-container-time">
... ... @@ -59,15 +59,16 @@
59 59 <!-- 内容盒子 -->
60 60 <div class="fleet-content-box">
61 61 <!-- 线路信息 -->
62   - <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childIndex" class="fleet-line-info-container">
  62 + <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childItem.lineName"
  63 + class="fleet-line-info-container">
63 64 <div class="fleet-line-title">
64 65 {{ childItem.lineName }}
65 66 </div>
66 67 <div ref="fleetNbbmInfoContainer" class="fleet-nbbm-info-container">
67   - <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunIndex" class="fleet-nbbm-info-item">
68   - <div v-if="childItem.saleInfoVo" class="fleet-nbbm-info-have-sale">
  68 + <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunItem.nbbm" class="fleet-nbbm-info-item">
  69 + <div v-if="sunItem.saleInfoVo != null" class="fleet-nbbm-info-have-sale">
69 70 <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"
70   - :width="350" :show-after="300" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">
  71 + :width="300" :show-after="300" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">
71 72 <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
72 73 :jobCode="sunItem.driverInfoVo.jobCode" />
73 74 <template #reference>
... ... @@ -79,7 +80,7 @@
79 80 <span class="fleet-nbbm-have-sale-txt">{{ sunItem.nbbm }}</span>
80 81 </div>
81 82 <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"
82   - :width="350" :show-after="300" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">
  83 + :width="300" :show-after="300" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">
83 84 <ConstForm :showFlag="personSignInfo.jobCode == sunItem.saleInfoVo.jobCode"
84 85 :jobCode="sunItem.saleInfoVo.jobCode" />
85 86 <template #reference>
... ... @@ -89,7 +90,7 @@
89 90 </el-popover>
90 91 </div>
91 92 <el-popover v-else :show-after="300" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)"
92   - placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="350">
  93 + placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="300">
93 94 <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
94 95 :jobCode="sunItem.driverInfoVo.jobCode" />
95 96 <template #reference>
... ... @@ -124,7 +125,7 @@ import icon4 from &quot;../../assets/bigview/image-icon-3.png&quot;;
124 125 import icon5 from "../../assets/bigview/image-icon-4.png";
125 126 import icon6 from "../../assets/bigview/image-icon-5.png";
126 127 import icon1 from "../../assets/bigview/image-icon-6.png";
127   -
  128 +const loading = ref(true);
128 129 /** 签到信息 */
129 130 const personSignInfo = reactive(
130 131 {
... ... @@ -158,37 +159,37 @@ const globalInfoBoxList = reactive(
158 159 title: "设备数",
159 160 icon: icon1,
160 161 startNumber: 0,
161   - endNumber: 562
  162 + endNumber: 0
162 163 },
163 164 {
164 165 title: "线路数",
165 166 icon: icon2,
166 167 startNumber: 0,
167   - endNumber: 562
  168 + endNumber: 0
168 169 },
169 170 {
170 171 title: "车辆数",
171 172 icon: icon3,
172 173 startNumber: 0,
173   - endNumber: 562
  174 + endNumber: 0
174 175 },
175 176 {
176 177 title: "售票员签到",
177 178 icon: icon4,
178 179 startNumber: 0,
179   - endNumber: 562
  180 + endNumber: 0
180 181 },
181 182 {
182 183 title: "驾驶员签到",
183 184 icon: icon5,
184 185 startNumber: 0,
185   - endNumber: 562
  186 + endNumber: 0
186 187 },
187 188 {
188 189 title: "辅助人员签到",
189 190 icon: icon6,
190 191 startNumber: 0,
191   - endNumber: 562
  192 + endNumber: 0
192 193 },
193 194 ]
194 195 )
... ... @@ -219,15 +220,15 @@ const fleetInfoList = ref(
219 220 [
220 221 {
221 222 title: "一车队",
222   - lineInfos: []
  223 + fleetInfos: []
223 224 },
224 225 {
225 226 title: "二车队",
226   - lineInfos: []
  227 + fleetInfos: []
227 228 },
228 229 {
229 230 title: "三车队",
230   - lineInfos: []
  231 + fleetInfos: []
231 232 }
232 233 ]
233 234 )
... ... @@ -237,21 +238,6 @@ const fleetNbbmInfoContainer = ref(null);
237 238 const scrollNumber = ref(null);
238 239 // 计算宽度初始化数据
239 240 onMounted(() => {
240   -
241   - // // TODO
242   - // setInterval(() => {
243   - // for (let index = 0; index < fleetInfoList.value.length; index++) {
244   - // const element = fleetInfoList.value[index].lineInfos;
245   - // for (let childrenIndex = 0; childrenIndex < element.length; childrenIndex++) {
246   - // const childrenElement = element[childrenIndex].lineInfo;
247   - // for (let sunIndex = 0; sunIndex < childrenElement.length; sunIndex++) {
248   - // const sunItem = childrenElement[sunIndex];
249   - // sunItem.driverSignStatus = Math.floor(Math.random() * 4);
250   - // }
251   - // }
252   - // }
253   - // }, 5000);
254   - // TODO
255 241 handleUpdateDataRequest();
256 242 timeTask.titleNowDateTimer = startUpdateNowDateTimerTaskScheduler();
257 243 timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler();
... ... @@ -356,25 +342,29 @@ const handleUpdateDataRequest = () =&gt; {
356 342 fleetInfoList.value = res.data
357 343 nextTick(() => {
358 344 const containerElement = fleetNbbmInfoContainer.value;
359   - console.log(containerElement);
360   - containerElement.forEach((el) => {
361   - const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;
362   - if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {
363   - const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;
364   - // 有售票员
365   - for (let index = 0; index < el.children.length; index++) {
366   - const element = el.children[index];
367   - element.style.width = `${textWidth}px`;
368   - }
369   - // 无售票员
370   - } else {
371   - const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;
372   - for (let index = 0; index < el.children.length; index++) {
373   - const element = el.children[index];
374   - element.style.width = `${textWidth}px`;
  345 + if (containerElement != null) {
  346 + containerElement.forEach((el) => {
  347 + const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;
  348 + if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {
  349 + const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;
  350 + // 有售票员
  351 + for (let index = 0; index < el.children.length; index++) {
  352 + const element = el.children[index];
  353 + element.style.width = `${textWidth}px`;
  354 + }
  355 + // 无售票员
  356 + } else {
  357 + const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;
  358 + for (let index = 0; index < el.children.length; index++) {
  359 + const element = el.children[index];
  360 + element.style.width = `${textWidth}px`;
  361 + }
375 362 }
376   - }
377   - })
  363 + })
  364 + loading.value = false;
  365 + } else {
  366 + loading.value = false;
  367 + }
378 368 })
379 369 })
380 370 }
... ... @@ -389,7 +379,7 @@ const handleGlobalInfo = (data, num) =&gt; {
389 379 // 可视化大屏
390 380 .app-container {
391 381 width: 100%;
392   - height: 91vh;
  382 + height: 100%;
393 383 background-color: #081138;
394 384 padding: 0 !important;
395 385 box-sizing: border-box;
... ... @@ -398,7 +388,7 @@ const handleGlobalInfo = (data, num) =&gt; {
398 388 // min-width: 1600px;
399 389 .box-view {
400 390 width: 100%;
401   - height: 91vh;
  391 + height: 100%;
402 392 // 整体蓝色背景
403 393 background-image: url("@/assets/bigview/back.png");
404 394 background-size: cover;
... ... @@ -413,13 +403,13 @@ const handleGlobalInfo = (data, num) =&gt; {
413 403 // min-width: 1600px;
414 404  
415 405 .common-style {
416   - padding-top: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
  406 + padding-top: clamp(1rem, -1.5rem + 2.5vh, 2rem);
417 407 box-sizing: border-box;
418 408 }
419 409  
420 410 // 标题
421 411 .big-view-container-title {
422   - height: 6.5vh;
  412 + height: 7%;
423 413 width: 100%;
424 414 font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
425 415 display: flex;
... ... @@ -433,14 +423,14 @@ const handleGlobalInfo = (data, num) =&gt; {
433 423 display: flex;
434 424 align-items: center;
435 425 justify-content: flex-end;
436   - margin-top: 4vh;
  426 + margin-top: 3%;
437 427 box-sizing: border-box;
438 428 }
439 429 }
440 430  
441 431 // 全局信息
442 432 .big-view-container-global-info {
443   - height: 11vh;
  433 + height: 11%;
444 434 width: 100%;
445 435 font-size: clamp(0.3rem, -2.531rem + 19.69vw, 1.1rem);
446 436 display: flex;
... ... @@ -515,10 +505,10 @@ const handleGlobalInfo = (data, num) =&gt; {
515 505  
516 506 // 提示信息
517 507 .big-view-container-prompt-info {
518   - font-size: clamp(0.5rem, -2.5rem + 30vw, 1.1rem);
  508 + font-size: 1vw;
519 509 box-sizing: border-box;
520 510 width: 100%;
521   - height: 4.5vh;
  511 + height: 4.5%;
522 512 display: flex;
523 513 align-items: center;
524 514  
... ... @@ -548,7 +538,6 @@ const handleGlobalInfo = (data, num) =&gt; {
548 538 align-items: center;
549 539  
550 540 .label-txt {
551   -
552 541 white-space: nowrap;
553 542 }
554 543 }
... ... @@ -574,7 +563,7 @@ const handleGlobalInfo = (data, num) =&gt; {
574 563 // 主要内容
575 564 .big-view-container-main-content {
576 565 width: 100%;
577   - height: calc(69vh - clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem) * 3);
  566 + height: calc(85% - clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem) * 3);
578 567 display: flex;
579 568 font-size: clamp(0.6rem, -0.907rem + 5.71vw, 1.2rem);
580 569  
... ... @@ -582,6 +571,7 @@ const handleGlobalInfo = (data, num) =&gt; {
582 571 .fleet-common-style {
583 572 flex-grow: 1;
584 573 width: 33.3%;
  574 + height: 100%;
585 575 background-image: url("@/assets/bigview/bottom-box.png");
586 576 margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
587 577 background-size: 100% 100%;
... ... @@ -616,7 +606,6 @@ const handleGlobalInfo = (data, num) =&gt; {
616 606 overflow-y: scroll;
617 607 overflow-x: hidden;
618 608  
619   -
620 609 // 线路信息
621 610 .fleet-line-info-container {
622 611 width: 100%;
... ... @@ -634,7 +623,7 @@ const handleGlobalInfo = (data, num) =&gt; {
634 623 box-sizing: border-box;
635 624 display: flex;
636 625 flex-wrap: wrap;
637   - font-size: clamp(0.7rem, -0.8rem + 24vw, 1rem);
  626 + font-size: 0.8vw;
638 627  
639 628 .fleet-nbbm-info-item {
640 629 // width: 6vw;
... ... @@ -676,6 +665,7 @@ const handleGlobalInfo = (data, num) =&gt; {
676 665 width: auto;
677 666 /* 防止文字换行 */
678 667 white-space: nowrap;
  668 +
679 669 padding-left: 0.5vw;
680 670 padding-right: 0.5vw;
681 671 /** 防止元素遮挡 */
... ... @@ -765,8 +755,8 @@ const handleGlobalInfo = (data, num) =&gt; {
765 755 }
766 756  
767 757 .el-popover.fleet-popover-style {
768   - border-color: #146ebd;
769   - background-color: #05417585;
  758 + border-color: #146EBD;
  759 + background-color: #062a5ac5;
770 760 /* background:
771 761 -webkit-linear-gradient(top, transparent 14px, blue 15px),
772 762 -webkit-linear-gradient(left, transparent 14px, blue 15px);
... ... @@ -779,7 +769,7 @@ const handleGlobalInfo = (data, num) =&gt; {
779 769 }
780 770  
781 771 .el-popper[data-popper-placement^=top]>.el-popper__arrow::before {
782   - border-top-color: #001bea21 !important;
783   - background-color: #001bea21 !important;
  772 + border-top-color: #062B5A !important;
  773 + background-color: #062B5A !important;
784 774 }
785 775 </style>
... ...