guzijian / bsth-alcohol-sign-web · Commits

Commit 95634eeecebb5da1cee9e3fb129535227b08833f

Authored by guzijian
1 parent 175ed2be

feat: 可视化大屏

Inline Side-by-side
Showing 8 changed files with 699 additions and 223 deletions
package.json
  View file @95634ee
@@ -32,6 +32,7 @@ @@ -32,6 +32,7 @@
32 "vue": "3.2.45", 32 "vue": "3.2.45",
33 "vue-cropper": "1.0.3", 33 "vue-cropper": "1.0.3",
34 "vue-router": "4.1.4", 34 "vue-router": "4.1.4",
  35 + "vue3-count-to": "^1.1.2",
35 "vue3-seamless-scroll": "^2.0.1" 36 "vue3-seamless-scroll": "^2.0.1"
36 }, 37 },
37 "devDependencies": { 38 "devDependencies": {
src/api/big_view/big_view.js 0 → 100644
  View file @95634ee
  1 +import request from '@/utils/request'
  2 +
  3 +export function querySignInfoByType(type) {
  4 + return request({
  5 + url: `/big/view/queryNumberByType/${type}`,
  6 + method: 'GET'
  7 + })
  8 +}
  9 +
  10 +export function queryLineInfo() {
  11 + return request({
  12 + url: `/big/view/queryLineInfo`,
  13 + method: 'GET'
  14 + })
  15 +}
src/components/ConstElPopover/index.vue 0 → 100644
  View file @95634ee
  1 +<template>
  2 + <div>
  3 + <el-popover popper-class="fleet-popover-style" placement="top" :title="lineName" :width="300" :show-after="300"
  4 + @after-enter="alterEnterHandler">
  5 + <div v-loading="loading">
  6 + <el-form :inline="true">
  7 + <el-form-item label="工号" width="50px">
  8 + <el-text type="primary" class="mx-1" size="large">{{ info.jobCode }}</el-text>
  9 + </el-form-item>
  10 + <el-form-item label="姓名" width="50px">
  11 + <el-text type="primary" class="mx-1" size="large">{{ info.name }}</el-text>
  12 + </el-form-item>
  13 + <el-form-item label="路牌" width="50px">
  14 + <el-text type="primary" class="mx-1" size="large">{{ info.lpName }}</el-text>
  15 + </el-form-item>
  16 + <el-form-item label="车队" width="50px">
  17 + <el-text type="primary" class="mx-1" size="large">{{ info.fleetName }}</el-text>
  18 + </el-form-item>
  19 + </el-form>
  20 + <el-divider></el-divider>
  21 + <el-text type="primary" style="text-align: center;" class="mx-1" size="large">打卡详情</el-text>
  22 + <el-table :data="tableData" style="width: 100%;background-color: aliceblue;">
  23 + <el-table-column prop="date" label="Date" width="180" />
  24 + <el-table-column prop="name" label="Name" width="180" />
  25 + <el-table-column prop="address" label="Address" />
  26 + </el-table>
  27 + </div>
  28 + <template #reference>
  29 + <slot></slot>
  30 + </template>
  31 + </el-popover>
  32 + </div>
  33 +</template>
  34 +
  35 +<script setup>
  36 +const props = defineProps({
  37 + jobCode: {
  38 + type: String,
  39 + required: true
  40 + },
  41 + lineName: {
  42 + type: String,
  43 + required: true
  44 + }
  45 +})
  46 +
  47 +/** 签到信息 */
  48 +const info = ref()
  49 +info.value = {
  50 + name: "",
  51 + lpName: "",
  52 + jobCode: "",
  53 + fleetName: ""
  54 +}
  55 +
  56 +const tableData = ref(
  57 + [
  58 + {
  59 + date: "2023-10-13",
  60 + name: "张三",
  61 + address: "背景"
  62 + },
  63 + {
  64 + date: "2023-10-13",
  65 + name: "张三",
  66 + address: "背景"
  67 + },
  68 + {
  69 + date: "2023-10-13",
  70 + name: "张三",
  71 + address: "背景"
  72 + }
  73 + ]
  74 +)
  75 +
  76 +/** 处理信息 */
  77 +const handleInfo = (val) => {
  78 + console.log(val);
  79 + loading.value = true
  80 + setTimeout(() => {
  81 + loading.value = false;
  82 + info.value = {
  83 + name: "张三",
  84 + lpName: "路牌",
  85 + jobCode: val,
  86 + fleetName: "三车队"
  87 + }
  88 + }, 1000);
  89 +}
  90 +
  91 +/**
  92 + * 显示弹窗
  93 + * @param {*} val 工号
  94 + */
  95 +const alterEnterHandler = () => {
  96 + handleInfo(props.jobCode)
  97 +}
  98 +</script>
  99 +<style lang="scss">
  100 +.fleet-popover-style {
  101 + color: white !important;
  102 + margin: 10px 0 10px 0;
  103 + min-width: 100px;
  104 +}
  105 +
  106 +.el-popover.fleet-popover-style {
  107 + border-color: #146ebd;
  108 + background-color: #05417585;
  109 + /* background:
  110 + -webkit-linear-gradient(top, transparent 14px, blue 15px),
  111 + -webkit-linear-gradient(left, transparent 14px, blue 15px);
  112 + background-size: 15px 15px; */
  113 +}
  114 +
  115 +.fleet-popover-style .el-popover__title {
  116 + color: #FFFFF0;
  117 + font-weight: bold;
  118 +}
  119 +
  120 +.el-popper[data-popper-placement^=top]>.el-popper__arrow::before {
  121 + border-top-color: #001bea21 !important;
  122 + background-color: #001bea21 !important;
  123 +}
  124 +
  125 +.el-form-item__label {
  126 + color: white;
  127 +}
  128 +</style>
src/components/ConstForm/index.vue 0 → 100644
  View file @95634ee
  1 +<template>
  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>
  18 + <el-table :data="tableData" style="width: 100%;background-color: aliceblue;">
  19 + <el-table-column prop="date" label="打卡时间" width="120" />
  20 + <el-table-column prop="address" label="打卡地点" />
  21 + <el-table-column prop="result" label="打卡结果" />
  22 + </el-table>
  23 + </div>
  24 +</template>
  25 +
  26 +<script setup>
  27 +const loading = ref(false);
  28 +const props = defineProps({
  29 + // 请求参数
  30 + jobCode: {
  31 + type: String,
  32 + required: true,
  33 + },
  34 + showFlag: {
  35 + type: Boolean,
  36 + required: true
  37 + }
  38 +})
  39 +/** 签到信息 */
  40 +const info = ref()
  41 +info.value = {
  42 + name: "",
  43 + lpName: "",
  44 + jobCode: "",
  45 + fleetName: ""
  46 +}
  47 +
  48 +const tableData = ref(
  49 + [
  50 + {
  51 + date: "今天 10:33:33",
  52 + result: "正常",
  53 + address: "背景"
  54 + },
  55 + {
  56 + date: "今天 10:33:33",
  57 + result: "正常",
  58 + address: "背景"
  59 + },
  60 + {
  61 + date: "今天 10:33:33",
  62 + result: "正常",
  63 + address: "背景"
  64 + }
  65 + ]
  66 +)
  67 +/** 处理信息 */
  68 +const handleInfo = (val) => {
  69 + loading.value = true
  70 + setTimeout(() => {
  71 + loading.value = false;
  72 + info.value = {
  73 + name: "张三",
  74 + lpName: "路牌",
  75 + jobCode: val,
  76 + fleetName: "三车队"
  77 + }
  78 + }, 1000);
  79 +}
  80 +
  81 +const reset = () => {
  82 + info.value = {
  83 + name: "",
  84 + lpName: "",
  85 + jobCode: "",
  86 + fleetName: ""
  87 + }
  88 +}
  89 +
  90 +watch(
  91 + () => props.showFlag,
  92 + (count, prevCount) => {
  93 + if (props.showFlag) {
  94 + handleInfo(props.jobCode);
  95 + } else {
  96 + reset()
  97 + }
  98 + }
  99 +)
  100 +</script>
src/main.js
  View file @95634ee
@@ -70,7 +70,6 @@ app.use(store) @@ -70,7 +70,6 @@ app.use(store)
70 app.use(plugins) 70 app.use(plugins)
71 app.use(elementIcons) 71 app.use(elementIcons)
72 app.component('svg-icon', SvgIcon) 72 app.component('svg-icon', SvgIcon)
73 -  
74 directive(app) 73 directive(app)
75 74
76 // 使用element-plus 并且设置全局的大小 75 // 使用element-plus 并且设置全局的大小
src/router/index.js
  View file @95634ee
@@ -69,7 +69,7 @@ export const constantRoutes = [ @@ -69,7 +69,7 @@ export const constantRoutes = [
69 children: [ 69 children: [
70 { 70 {
71 path: '/index', 71 path: '/index',
72 - component: () => import('@/views/index'), 72 + component: () => import('@/views/home/index'),
73 name: 'Index', 73 name: 'Index',
74 meta: { title: '首页', icon: 'dashboard', affix: true } 74 meta: { title: '首页', icon: 'dashboard', affix: true }
75 } 75 }
src/utils/dateUtils.js 0 → 100644
  View file @95634ee
  1 +/**
  2 + * 根据日期获取星期
  3 + * @param {*} week
  4 + */
  5 +function transWeek(week) {
  6 + switch (week) {
  7 + case 1:
  8 + return '星期一'
  9 + case 2:
  10 + return '星期二'
  11 + case 3:
  12 + return '星期三'
  13 + case 4:
  14 + return '星期四'
  15 + case 5:
  16 + return '星期五'
  17 + case 6:
  18 + return '星期六'
  19 + case 0:
  20 + return '星期日'
  21 + }
  22 +}
  23 +export default function getWeek(currentDay) {
  24 + return transWeek(currentDay.day());
  25 +}
src/views/index.vue renamed to src/views/home/index.vue
  View file @95634ee
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <div class="big-view-container-title"> 6 <div class="big-view-container-title">
7 <div class="big-view-container-time"> 7 <div class="big-view-container-time">
8 <text> 8 <text>
9 - 2023-10-09 星期一 12:00:00 9 + {{ timeTaskObject.titleNowDateObject }}
10 </text> 10 </text>
11 </div> 11 </div>
12 </div> 12 </div>
@@ -22,7 +22,8 @@ @@ -22,7 +22,8 @@
22 {{ item.title }} 22 {{ item.title }}
23 </div> 23 </div>
24 <div class="global-info-box-container-right-number"> 24 <div class="global-info-box-container-right-number">
25 - {{ item.number }} 25 + <count-to ref="scrollNumber" :start-val="item.startNumber" :end-val="item.endNumber" :duration="8000"
  26 + :decimals="0" />
26 </div> 27 </div>
27 </div> 28 </div>
28 </div> 29 </div>
@@ -31,65 +32,74 @@ @@ -31,65 +32,74 @@
31 <!-- 信息提示 --> 32 <!-- 信息提示 -->
32 <div class="big-view-container-prompt-info common-style"> 33 <div class="big-view-container-prompt-info common-style">
33 <div class="prompt-info-left-box"> 34 <div class="prompt-info-left-box">
34 - <div class="zone-left-prompt-info small-box">  
35 - <div class="label-box"> 35 + <div v-for="(item, index) in signStyleColor" :key="index" class="zone-left-prompt-info small-box">
  36 + <div class="label-box" :style="item">
36 </div> 37 </div>
37 - <div class="label-txt">正常签到</div>  
38 - </div>  
39 - <div class="first-left-prompt-info small-box">  
40 - <div class="label-box">  
41 - </div>  
42 - <div class="label-txt">今日未签</div>  
43 - </div>  
44 - <div class="second-left-prompt-info small-box">  
45 - <div class="label-box">  
46 - </div>  
47 - <div class="label-txt">今日迟到</div>  
48 - </div>  
49 - <div class="three-left-prompt-info small-box">  
50 - <div class="label-box">  
51 - </div>  
52 - <div class="label-txt">今日酒驾</div> 38 + <div class="label-txt">{{ item.label }}</div>
53 </div> 39 </div>
54 </div> 40 </div>
55 <div class="prompt-info-right-box"> 41 <div class="prompt-info-right-box">
56 <div class="first-right-prompt-info"> 42 <div class="first-right-prompt-info">
57 - 数据更新时间：2023-10-19 11:55:00 43 + 数据更新时间：{{ timeTaskObject.updateDateObject }}
58 </div> 44 </div>
59 <div class="second-right-prompt-info"> 45 <div class="second-right-prompt-info">
60 - 更新倒计时：5:00 46 + &nbsp;&nbsp;更新倒计时：{{ timeTaskObject.updateDateSchedulerObject }}
61 </div> 47 </div>
62 </div> 48 </div>
63 </div> 49 </div>
64 <!-- 主要内容 --> 50 <!-- 主要内容 -->
65 <div class="big-view-container-main-content common-style"> 51 <div class="big-view-container-main-content common-style">
66 <!-- 车队信息 --> 52 <!-- 车队信息 -->
67 - <div v-for="(item, index) in fleetInfoList" :key="index" class="fleet-common-style"> 53 + <div v-for="(item, index) in fleetInfoList" :key="item.title" class="fleet-common-style">
  54 + <!-- 车队title -->
68 <div class="fleet-top-container"> 55 <div class="fleet-top-container">
69 <div class="fleet-top-box"></div> 56 <div class="fleet-top-box"></div>
70 <div class="fleet-top-title">{{ item.title }}</div> 57 <div class="fleet-top-title">{{ item.title }}</div>
71 </div> 58 </div>
72 - <!-- 线路信息 -->  
73 - <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childIndex" class="fleet-line-info-container">  
74 - <div class="fleet-line-title">  
75 - {{ childItem.lineName }}  
76 - </div>  
77 - <div ref="fleetNbbmInfoContainer" class="fleet-nbbm-info-container">  
78 - <div v-for="(sunItem, sunIndex) in childItem.lineInfo" :key="sunIndex" class="fleet-nbbm-info-item">  
79 - <div v-if="childItem.saleFlag" class="fleet-nbbm-info-have-sale">  
80 - <div class="fleet-nbbm-have-sale-driver">  
81 - </div>  
82 - <div class="fleet-nbbm-have-sale-txt-box">  
83 - <span class="fleet-nbbm-have-sale-txt">{{ sunItem.nbbm }}</span>  
84 - </div>  
85 - <div class="fleet-nbbm-have-sale-sale"> 59 + <!-- 内容盒子 -->
  60 + <div class="fleet-content-box">
  61 + <!-- 线路信息 -->
  62 + <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childIndex" class="fleet-line-info-container">
  63 + <div class="fleet-line-title">
  64 + {{ childItem.lineName }}
  65 + </div>
  66 + <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">
  69 + <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 + <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
  72 + :jobCode="sunItem.driverInfoVo.jobCode" />
  73 + <template #reference>
  74 + <div class="fleet-nbbm-have-sale-driver" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">
  75 + </div>
  76 + </template>
  77 + </el-popover>
  78 + <div class="fleet-nbbm-have-sale-txt-box">
  79 + <span class="fleet-nbbm-have-sale-txt">{{ sunItem.nbbm }}</span>
  80 + </div>
  81 + <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 + <ConstForm :showFlag="personSignInfo.jobCode == sunItem.saleInfoVo.jobCode"
  84 + :jobCode="sunItem.saleInfoVo.jobCode" />
  85 + <template #reference>
  86 + <div class="fleet-nbbm-have-sale-sale" :style="signStyleColor[sunItem.saleInfoVo.signStatus]">
  87 + </div>
  88 + </template>
  89 + </el-popover>
86 </div> 90 </div>
87 - </div>  
88 - <div v-else class="fleet-nbbm-info-no-sale">  
89 -  
90 - <span class="fleet-nbbm-info-no-sale-text">  
91 - {{ sunItem.nbbm }}  
92 - </span> 91 + <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 + <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
  94 + :jobCode="sunItem.driverInfoVo.jobCode" />
  95 + <template #reference>
  96 + <div class="fleet-nbbm-info-no-sale" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">
  97 + <span class="fleet-nbbm-info-no-sale-text">
  98 + {{ sunItem.nbbm }}
  99 + </span>
  100 + </div>
  101 + </template>
  102 + </el-popover>
93 </div> 103 </div>
94 </div> 104 </div>
95 </div> 105 </div>
@@ -101,112 +111,278 @@ @@ -101,112 +111,278 @@
101 </template> 111 </template>
102 112
103 <script setup name="Index"> 113 <script setup name="Index">
104 -import { onMounted } from 'vue';  
105 -  
106 - 114 +import { queryLineInfo, querySignInfoByType } from '@/api/big_view/big_view.js';
  115 +import ConstForm from '@/components/ConstForm/index.vue';
  116 +import getWeek from "@/utils/dateUtils.js";
  117 +import moment from 'moment';
  118 +import { nextTick, onMounted, reactive, watch } from 'vue';
  119 +import { CountTo } from 'vue3-count-to';
  120 +// 图片信息 直接写路径会有问题 打包的时候vite构建会导出路径找不到
  121 +import icon2 from "../../assets/bigview/image-icon-1.png";
  122 +import icon3 from "../../assets/bigview/image-icon-2.png";
  123 +import icon4 from "../../assets/bigview/image-icon-3.png";
  124 +import icon5 from "../../assets/bigview/image-icon-4.png";
  125 +import icon6 from "../../assets/bigview/image-icon-5.png";
  126 +import icon1 from "../../assets/bigview/image-icon-6.png";
  127 +
  128 +/** 签到信息 */
  129 +const personSignInfo = reactive(
  130 + {
  131 + jobCode: null,
  132 + date: null
  133 + }
  134 +);
  135 +/** 定时更新对象 */
  136 +const timeTaskObject = reactive(
  137 + {
  138 + /** 当前日期 */
  139 + titleNowDateObject: "0000-00-00 星期日 00:00:00",
  140 + /** 数据更新日期 */
  141 + updateDateObject: "0000-00-00 00:00:00",
  142 + /** 数据更新计时 5分钟 */
  143 + updateDateSchedulerObject: "0:00"
  144 + }
  145 +);
  146 +/** 定时任务 */
  147 +const timeTask = reactive(
  148 + { /** 当前日期 */
  149 + titleNowDateTimer: null,
  150 + /** 数据更新计时 5分钟 */
  151 + updateDateSchedulerTimer: null
  152 + }
  153 +)
107 // 全局信息List 154 // 全局信息List
108 -const globalInfoBoxList = ref( 155 +const globalInfoBoxList = reactive(
109 [ 156 [
110 { 157 {
111 title: "设备数", 158 title: "设备数",
112 - icon: "/src/assets/bigview/image-icon-6.png",  
113 - number: 562 159 + icon: icon1,
  160 + startNumber: 0,
  161 + endNumber: 562
114 }, 162 },
115 { 163 {
116 title: "线路数", 164 title: "线路数",
117 - icon: "/src/assets/bigview/image-icon-1.png",  
118 - number: 562 165 + icon: icon2,
  166 + startNumber: 0,
  167 + endNumber: 562
119 }, 168 },
120 { 169 {
121 title: "车辆数", 170 title: "车辆数",
122 - icon: "/src/assets/bigview/image-icon-2.png",  
123 - number: 562 171 + icon: icon3,
  172 + startNumber: 0,
  173 + endNumber: 562
124 }, 174 },
125 { 175 {
126 title: "售票员签到", 176 title: "售票员签到",
127 - icon: "/src/assets/bigview/image-icon-3.png",  
128 - number: 562 177 + icon: icon4,
  178 + startNumber: 0,
  179 + endNumber: 562
129 }, 180 },
130 { 181 {
131 title: "驾驶员签到", 182 title: "驾驶员签到",
132 - icon: "/src/assets/bigview/image-icon-4.png",  
133 - number: 562 183 + icon: icon5,
  184 + startNumber: 0,
  185 + endNumber: 562
134 }, 186 },
135 { 187 {
136 title: "辅助人员签到", 188 title: "辅助人员签到",
137 - icon: "/src/assets/bigview/image-icon-5.png",  
138 - number: 562 189 + icon: icon6,
  190 + startNumber: 0,
  191 + endNumber: 562
139 }, 192 },
140 ] 193 ]
141 ) 194 )
  195 +// 提示信息样式对照表
  196 +const signStyleColor = ref(
  197 + [
  198 + {
  199 + backgroundColor: "#10A0DD",
  200 + label: "今日签到正常"
  201 + },
  202 + {
  203 + border: "2px solid #0761ba",
  204 + label: "今日打卡未签"
  205 + },
  206 + {
  207 + backgroundColor: "#ffa500",
  208 + label: "今日打卡迟到"
  209 + },
  210 + {
  211 + backgroundColor: "#ff0000",
  212 + label: "今日酒测异常"
  213 + }
  214 + ]
  215 +)
  216 +
142 // 车队信息List 217 // 车队信息List
143 const fleetInfoList = ref( 218 const fleetInfoList = ref(
144 [ 219 [
145 { 220 {
146 title: "一车队", 221 title: "一车队",
147 - fleetInfos: [  
148 - { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
149 - { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
150 - // { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
151 - // { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "ZBH012", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] }  
152 - ] 222 + lineInfos: []
153 }, 223 },
154 { 224 {
155 title: "二车队", 225 title: "二车队",
156 - fleetInfos: [  
157 - { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
158 - { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
159 - // { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
160 - // { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
161 - { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
162 - { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
163 - { lineName: "青浦1路", saleFlag: true, lineInfo: [{ nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1032", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] }  
164 - ] 226 + lineInfos: []
165 }, 227 },
166 { 228 {
167 title: "三车队", 229 title: "三车队",
168 - fleetInfos: [  
169 - { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
170 - { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
171 - { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
172 - { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
173 - // { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
174 - // { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
175 - // { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
176 - // { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
177 - // { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
178 - // { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
179 - // { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
180 - // { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] },  
181 - // { lineName: "青浦1路", saleFlag: false, lineInfo: [{ nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba-1033", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }, { nbbm: "cba", driverSignStatus: 0, saleSignStatus: 0, driverName: "驾驶员", saleName: "售票员" }] }  
182 - ] 230 + lineInfos: []
183 } 231 }
184 ] 232 ]
185 ) 233 )
186 -const lineBoxStyle = ref([{}]) 234 +
187 // 元素信息 235 // 元素信息
188 const fleetNbbmInfoContainer = ref(null); 236 const fleetNbbmInfoContainer = ref(null);
  237 +const scrollNumber = ref(null);
  238 +// 计算宽度初始化数据
189 onMounted(() => { 239 onMounted(() => {
190 - const containerElement = fleetNbbmInfoContainer.value;  
191 - containerElement.forEach((el) => {  
192 - const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;  
193 - if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {  
194 - const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;  
195 - // 有售票员  
196 - for (let index = 0; index < el.children.length; index++) {  
197 - const element = el.children[index];  
198 - element.style.width = `${textWidth}px`;  
199 - }  
200 - // 无售票员  
201 - } else {  
202 - const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;  
203 - for (let index = 0; index < el.children.length; index++) {  
204 - const element = el.children[index];  
205 - element.style.width = `${textWidth}px`;  
206 - } 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 + handleUpdateDataRequest();
  256 + timeTask.titleNowDateTimer = startUpdateNowDateTimerTaskScheduler();
  257 + timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler();
  258 +})
  259 +
  260 +/** 销毁之前触发 */
  261 +onDeactivated(() => {
  262 + clearInterval(timeTask.titleNowDateTimer)
  263 + clearInterval(timeTask.updateDateSchedulerTimer)
  264 +})
  265 +/** 组件不挂载之前触发 */
  266 +onBeforeUnmount(() => {
  267 + clearInterval(timeTask.titleNowDateTimer)
  268 + clearInterval(timeTask.updateDateSchedulerTimer)
  269 +})
  270 +/**
  271 + * 开启当前日期更新
  272 + * @param {*} val
  273 + */
  274 +const startUpdateNowDateTimerTaskScheduler = () => {
  275 + return setInterval(() => {
  276 + const currentDay = moment(new Date());
  277 + timeTaskObject.titleNowDateObject = currentDay.format("yyyy-MM-DD ") + getWeek(currentDay) + currentDay.format(" HH:mm:ss");
  278 + }, 1000);
  279 +}
  280 +/**
  281 + * 数据更新日期
  282 + * @param {*} val
  283 + */
  284 +const startUpdateDataTaskScheduler = () => {
  285 + let duration;
  286 + // 目标日期时间
  287 + let targetDate;
  288 + // 当前日期时间
  289 + let currentDate;
  290 + return setInterval(() => {
  291 + currentDate = moment();
  292 + if (timeTaskObject.updateDateSchedulerObject <= "0:00") {
  293 + const updateMinutes = 5
  294 + timeTaskObject.updateDateSchedulerObject = `${updateMinutes}:00`;
  295 + targetDate = moment().add(updateMinutes, 'minutes');
  296 + timeTaskObject.updateDateObject = currentDate.format("yyyy-MM-DD HH:mm:ss");
207 } 297 }
208 - }) 298 + // 计算剩余时间
  299 + duration = moment.duration(targetDate.diff(currentDate));
  300 + // 获取剩余的分钟数和秒数
  301 + const minutes = Math.floor(duration.asMinutes()) % 60;
  302 + let seconds = Math.floor(duration.asSeconds()) % 60;
  303 + seconds = seconds < 10 ? "0" + seconds : seconds;
  304 + // 格式化倒计时字符串
  305 + timeTaskObject.updateDateSchedulerObject = `${minutes}:${seconds}`;
  306 + }, 1000);
  307 +}
  308 +
  309 +/**
  310 + * 显示弹窗
  311 + * @param {*} val 工号
  312 + */
  313 +const alterEnterHandler = (val, el) => {
  314 + personSignInfo.jobCode = val;
  315 +}
  316 +
  317 +/** 监听数据更新日期 */
  318 +watch(timeTaskObject.updateDateObject, (val1, val2) => {
  319 + // TODO 发送请求更新数据
  320 + handleUpdateDataRequest();
  321 + console.log("时间到了，需要更新数据---");
209 }) 322 })
  323 +
  324 +/**
  325 + * 类型 device 设备数量 line 线路数 car 车辆数
  326 + * sale 售票员签到数量 driver 驾驶员签到 auxiliary 辅助人员签到数量
  327 + */
  328 +const handleUpdateDataRequest = () => {
  329 + // 获取设备数量
  330 + querySignInfoByType("device").then(res => {
  331 + handleGlobalInfo(res.data, 0)
  332 + })
  333 + // 获取线路数
  334 + querySignInfoByType("line").then(res => {
  335 + handleGlobalInfo(res.data, 1)
  336 + })
  337 + // 获取车辆数
  338 + querySignInfoByType("car").then(res => {
  339 + handleGlobalInfo(res.data, 2)
  340 + })
  341 + // 售票员签到
  342 + querySignInfoByType("sale").then(res => {
  343 + handleGlobalInfo(res.data, 3)
  344 + })
  345 + // 驾驶员签到
  346 + querySignInfoByType("driver").then(res => {
  347 + handleGlobalInfo(res.data, 4)
  348 + })
  349 + // 辅助人员签到
  350 + querySignInfoByType("auxiliary").then(res => {
  351 + handleGlobalInfo(res.data, 5)
  352 + })
  353 +
  354 + //获取车队
  355 + queryLineInfo().then(res => {
  356 + fleetInfoList.value = res.data
  357 + nextTick(() => {
  358 + 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`;
  375 + }
  376 + }
  377 + })
  378 + })
  379 + })
  380 +}
  381 +
  382 +const handleGlobalInfo = (data, num) => {
  383 + globalInfoBoxList[num].startNumber = globalInfoBoxList[num].endNumber;
  384 + globalInfoBoxList[num].endNumber = data;
  385 +}
210 </script> 386 </script>
211 387
212 <style scoped lang="scss"> 388 <style scoped lang="scss">
@@ -317,8 +493,11 @@ onMounted(() =&gt; { @@ -317,8 +493,11 @@ onMounted(() =&gt; {
317 display: flex; 493 display: flex;
318 flex-direction: column; 494 flex-direction: column;
319 justify-content: space-between; 495 justify-content: space-between;
  496 + overflow-x: visible;
320 497
321 - .global-info-box-container-right-title {} 498 + .global-info-box-container-right-title {
  499 + white-space: nowrap;
  500 + }
322 501
323 .global-info-box-container-right-number { 502 .global-info-box-container-right-number {
324 font-weight: bold; 503 font-weight: bold;
@@ -336,7 +515,7 @@ onMounted(() =&gt; { @@ -336,7 +515,7 @@ onMounted(() =&gt; {
336 515
337 // 提示信息 516 // 提示信息
338 .big-view-container-prompt-info { 517 .big-view-container-prompt-info {
339 - font-size: clamp(0.55rem, -0.425rem + 13vw, 1.2rem); 518 + font-size: clamp(0.5rem, -2.5rem + 30vw, 1.1rem);
340 box-sizing: border-box; 519 box-sizing: border-box;
341 width: 100%; 520 width: 100%;
342 height: 4.5vh; 521 height: 4.5vh;
@@ -351,38 +530,11 @@ onMounted(() =&gt; { @@ -351,38 +530,11 @@ onMounted(() =&gt; {
351 align-items: center; 530 align-items: center;
352 531
353 .zone-left-prompt-info { 532 .zone-left-prompt-info {
354 - .label-box {  
355 - height: 100%;  
356 - width: 3vw;  
357 - background-color: #10A0DD;  
358 - margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);  
359 - }  
360 - }  
361 -  
362 - .first-left-prompt-info {  
363 - .label-box {  
364 - height: 100%;  
365 - width: 3vw;  
366 - border: 2px solid #0761ba;  
367 - margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);  
368 - }  
369 - }  
370 533
371 - .second-left-prompt-info {  
372 .label-box { 534 .label-box {
373 height: 100%; 535 height: 100%;
374 width: 3vw; 536 width: 3vw;
375 - background-color: orange;  
376 - margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);  
377 - }  
378 - }  
379 -  
380 - .three-left-prompt-info {  
381 - .label-box {  
382 - height: 100%;  
383 - width: 3vw;  
384 - background-color: red;  
385 - margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem); 537 + margin-right: clamp(0.5rem, -2.5rem + 30vw, 1.1rem);
386 } 538 }
387 } 539 }
388 540
@@ -395,7 +547,10 @@ onMounted(() =&gt; { @@ -395,7 +547,10 @@ onMounted(() =&gt; {
395 justify-content: flex-start; 547 justify-content: flex-start;
396 align-items: center; 548 align-items: center;
397 549
398 - .label-txt {} 550 + .label-txt {
  551 +
  552 + white-space: nowrap;
  553 + }
399 } 554 }
400 } 555 }
401 556
@@ -406,9 +561,13 @@ onMounted(() =&gt; { @@ -406,9 +561,13 @@ onMounted(() =&gt; {
406 align-items: center; 561 align-items: center;
407 justify-content: flex-end; 562 justify-content: flex-end;
408 563
409 - .first-right-prompt-info {} 564 + .first-right-prompt-info {
  565 + white-space: nowrap;
  566 + }
410 567
411 - .second-right-prompt-info {} 568 + .second-right-prompt-info {
  569 + white-space: nowrap;
  570 + }
412 } 571 }
413 } 572 }
414 573
@@ -428,29 +587,12 @@ onMounted(() =&gt; { @@ -428,29 +587,12 @@ onMounted(() =&gt; {
428 background-size: 100% 100%; 587 background-size: 100% 100%;
429 box-sizing: border-box; 588 box-sizing: border-box;
430 padding: clamp(0.6rem, 0.489rem + 1.05vw, 1rem); 589 padding: clamp(0.6rem, 0.489rem + 1.05vw, 1rem);
431 - overflow: auto;  
432 -  
433 - .fleet-common-style::-webkit-scrollbar {  
434 - width: 4px;  
435 - height: 4px;  
436 - border-radius: 4px;  
437 - overflow-y: scroll;  
438 - }  
439 -  
440 - .fleet-common-style::-webkit-scrollbar-thumb {  
441 - background: red;  
442 - }  
443 -  
444 - .fleet-common-style::-webkit-scrollbar-track {  
445 - background: blue;  
446 - }  
447 590
448 .fleet-top-container { 591 .fleet-top-container {
449 display: flex; 592 display: flex;
450 box-sizing: border-box; 593 box-sizing: border-box;
451 align-items: center; 594 align-items: center;
452 595
453 -  
454 .fleet-top-box { 596 .fleet-top-box {
455 height: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem); 597 height: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem);
456 width: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem); 598 width: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem);
@@ -468,64 +610,92 @@ onMounted(() =&gt; { @@ -468,64 +610,92 @@ onMounted(() =&gt; {
468 } 610 }
469 } 611 }
470 612
471 - // 线路信息  
472 - .fleet-line-info-container { 613 + .fleet-content-box {
  614 + height: calc(100% - clamp(0.6rem, -0.907rem + 5.71vw, 1.2rem));
473 width: 100%; 615 width: 100%;
474 - height: auto; 616 + overflow-y: scroll;
  617 + overflow-x: hidden;
475 618
476 - .fleet-line-title {  
477 - margin: clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) 0 clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) 0;  
478 - box-sizing: border-box;  
479 - font-weight: bold;  
480 - }  
481 619
482 - .fleet-nbbm-info-container { 620 + // 线路信息
  621 + .fleet-line-info-container {
483 width: 100%; 622 width: 100%;
484 height: auto; 623 height: auto;
485 - box-sizing: border-box;  
486 - display: flex;  
487 - flex-wrap: wrap;  
488 - font-size: clamp(0.7rem, -0.8rem + 24vw, 1rem);  
489 624
490 - .fleet-nbbm-info-item {  
491 - // width: 6vw;  
492 - height: 2.4vh;  
493 - margin-right: 0.4vw; 625 + .fleet-line-title {
  626 + margin: clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) 0 clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) 0;
494 box-sizing: border-box; 627 box-sizing: border-box;
495 - margin-top: 0.4vw; 628 + font-weight: bold;
  629 + }
496 630
497 - .fleet-nbbm-info-have-sale {  
498 - width: 100%;  
499 - height: 100%;  
500 - display: flex;  
501 - // justify-content: center;  
502 - // align-items: center; 631 + .fleet-nbbm-info-container {
  632 + width: 100%;
  633 + height: auto;
  634 + box-sizing: border-box;
  635 + display: flex;
  636 + flex-wrap: wrap;
  637 + font-size: clamp(0.7rem, -0.8rem + 24vw, 1rem);
  638 +
  639 + .fleet-nbbm-info-item {
  640 + // width: 6vw;
  641 + height: 2.4vh;
  642 + margin-right: 0.4vw;
  643 + box-sizing: border-box;
  644 + margin-top: 0.4vw;
  645 + color: white;
503 646
504 - .fleet-nbbm-have-sale-driver {  
505 - background-color: #10A0DD;  
506 - border-radius: 1 solid #0761ba;  
507 - height: 100%; 647 + .fleet-nbbm-info-have-sale {
508 width: 100%; 648 width: 100%;
509 - margin-right: 0.2vw;  
510 - position: relative; 649 + height: 100%;
511 display: flex; 650 display: flex;
512 - align-items: center; 651 +
  652 + .fleet-nbbm-have-sale-driver {
  653 + border-radius: 1 solid #0761ba;
  654 + height: 100%;
  655 + width: 100%;
  656 + margin-right: 0.2vw;
  657 + position: relative;
  658 + display: flex;
  659 + align-items: center;
  660 + }
  661 +
  662 + .fleet-nbbm-have-sale-sale {
  663 + border-radius: 1 solid #0761ba;
  664 + width: 100%;
  665 + height: 100%;
  666 + }
  667 +
  668 + .fleet-nbbm-have-sale-txt-box {
  669 + position: relative;
  670 + display: flex;
  671 + justify-content: center;
  672 + align-items: center;
  673 +
  674 + .fleet-nbbm-have-sale-txt {
  675 + position: absolute;
  676 + width: auto;
  677 + /* 防止文字换行 */
  678 + white-space: nowrap;
  679 + padding-left: 0.5vw;
  680 + padding-right: 0.5vw;
  681 + /** 防止元素遮挡 */
  682 + pointer-events: none;
  683 + }
  684 + }
513 } 685 }
514 686
515 - .fleet-nbbm-have-sale-sale {  
516 - background-color: #10A0DD;  
517 - border-radius: 1 solid #0761ba; 687 + .fleet-nbbm-info-no-sale {
518 width: 100%; 688 width: 100%;
519 height: 100%; 689 height: 100%;
520 - }  
521 -  
522 - .fleet-nbbm-have-sale-txt-box { 690 + border-radius: 1 solid #0761ba;
523 position: relative; 691 position: relative;
524 display: flex; 692 display: flex;
525 justify-content: center; 693 justify-content: center;
526 align-items: center; 694 align-items: center;
  695 + box-sizing: border-box;
527 696
528 - .fleet-nbbm-have-sale-txt { 697 + /* 防止文字换行 */
  698 + .fleet-nbbm-info-no-sale-text {
529 position: absolute; 699 position: absolute;
530 width: auto; 700 width: auto;
531 white-space: nowrap; 701 white-space: nowrap;
@@ -536,42 +706,80 @@ onMounted(() =&gt; { @@ -536,42 +706,80 @@ onMounted(() =&gt; {
536 } 706 }
537 } 707 }
538 708
539 - .fleet-nbbm-info-no-sale {  
540 - width: 100%;  
541 - height: 100%;  
542 - background-color: #10A0DD;  
543 - border-radius: 1 solid #0761ba;  
544 - position: relative;  
545 - display: flex;  
546 - justify-content: center;  
547 - align-items: center;  
548 - box-sizing: border-box;  
549 -  
550 - /* 防止文字换行 */  
551 - .fleet-nbbm-info-no-sale-text {  
552 - position: absolute;  
553 - width: auto;  
554 - white-space: nowrap;  
555 - padding-left: 0.5vw;  
556 - padding-right: 0.5vw;  
557 - /* 防止文字换行 */  
558 - } 709 + .fleet-nbbm-info-item:last-child {
  710 + margin-right: 0;
559 } 711 }
560 } 712 }
561 -  
562 - .fleet-nbbm-info-item:last-child {  
563 - margin-right: 0;  
564 - }  
565 } 713 }
566 } 714 }
  715 +
  716 + /* 定义滚动条样式 */
  717 + .fleet-content-box::-webkit-scrollbar {
  718 + width: 6px;
  719 + height: 6px;
  720 + }
  721 +
  722 + /*定义滑块 内阴影+圆角*/
  723 + .fleet-content-box::-webkit-scrollbar-thumb {
  724 + border-radius: 6px;
  725 + // box-shadow: inset 0 0 0px rgba(237, 44, 37, .5);
  726 + background-color: #01366c;
  727 + background-image: url('../assets/bigview/scroll-box.png');
  728 + }
  729 +
  730 + /* 设置滚动条拖拽按钮的样式 */
  731 + .fleet-content-box::-webkit-scrollbar-thumb:vertical {
  732 + background-image: url('../assets/bigview/scroll-box.png');
  733 + background-color: #0761ba;
  734 + /* 背景图片的尺寸适应滑块 */
  735 + background-size: cover;
  736 + }
  737 +
  738 + .fleet-content-box::-webkit-scrollbar-button {
  739 + display: none;
  740 + }
  741 +
  742 + /*定义滚动条轨道 内阴影+圆角*/
  743 + .fleet-content-box::-webkit-scrollbar-track {
  744 + box-shadow: inset 0 0 0px #01DEDD;
  745 + border-radius: 6px;
  746 + background-color: #121622;
  747 + }
  748 +
  749 +
567 } 750 }
568 751
569 .fleet-common-style:last-child { 752 .fleet-common-style:last-child {
570 margin-right: 0; 753 margin-right: 0;
571 -  
572 } 754 }
573 } 755 }
574 756
575 } 757 }
576 } 758 }
577 </style> 759 </style>
  760 +<style>
  761 +.fleet-popover-style {
  762 + color: white !important;
  763 + margin: 10px 0 10px 0;
  764 + min-width: 100px;
  765 +}
  766 +
  767 +.el-popover.fleet-popover-style {
  768 + border-color: #146ebd;
  769 + background-color: #05417585;
  770 + /* background:
  771 + -webkit-linear-gradient(top, transparent 14px, blue 15px),
  772 + -webkit-linear-gradient(left, transparent 14px, blue 15px);
  773 + background-size: 15px 15px; */
  774 +}
  775 +
  776 +.fleet-popover-style .el-popover__title {
  777 + color: #FFFFF0;
  778 + font-weight: bold;
  779 +}
  780 +
  781 +.el-popper[data-popper-placement^=top]>.el-popper__arrow::before {
  782 + border-top-color: #001bea21 !important;
  783 + background-color: #001bea21 !important;
  784 +}
  785 +</style>