guzijian / bsth-alcohol-sign-web · Commits

Commit 14888df1233b86a14dbc28ac8a1daa42bf22fd36

Authored by guzijian
1 parent 8dea9c0f

修改样式

Inline Side-by-side
Showing 3 changed files with 422 additions and 321 deletions
src/assets/bigview/back.png
View file @14888df

948 KB | W: | H:

580 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/components/FleetContentBox/index.vue 0 → 100644
  View file @14888df
  1 +<template>
  2 + <div @wheel="handleWheel" ref="fleetContentBox" :class="{ scrolling: isScrolling }" class="fleet-content-box">
  3 + <!-- <vue3-seamless-scroll :list="item.fleetInfos" :step="1" :hoverStop="true" :hover="true"> -->
  4 + <!-- 线路信息 -->
  5 + <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childItem.lineName" class="fleet-line-info-container">
  6 + <!-- <div class="line-box" style="height: 1px; margin: 5px; background-color: #0761ba;"></div> -->
  7 +
  8 + <div class="fleet-line-title">
  9 + {{ childItem.lineName }}
  10 + </div>
  11 + <div class="line-box" style="height: 2px; margin: 10px 0; background: #d9e0e2;"></div>
  12 + <div ref="fleetNbbmInfoContainer" class="fleet-nbbm-info-container">
  13 + <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunItem.nbbm" class="fleet-nbbm-info-item">
  14 + <div v-if="sunItem.saleInfoVo != null" class="fleet-nbbm-info-have-sale">
  15 + <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName" :width="320"
  16 + :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">
  17 + <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
  18 + :currentDateKey="currentDateKey" :jobCode="sunItem.driverInfoVo.jobCode" />
  19 + <template #reference>
  20 + <div class="fleet-nbbm-have-sale-driver" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">
  21 + </div>
  22 + </template>
  23 + </el-popover>
  24 + <div class="fleet-nbbm-have-sale-txt-box">
  25 + <span class="fleet-nbbm-have-sale-txt">
  26 + <span :style="{ color: sunItem.driverInfoVo.signStatus != 1 ? 'white' : 'black' }">
  27 + {{ sunItem.nbbm.substring(0, Math.floor(sunItem.nbbm.length / 2)) }}</span>
  28 + <span :style="{ color: sunItem.saleInfoVo.signStatus != 1 ? 'white' : 'black' }">
  29 + {{ sunItem.nbbm.substring(Math.floor(sunItem.nbbm.length / 2), sunItem.nbbm.length) }}
  30 + </span>
  31 + </span>
  32 + </div>
  33 + <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName" :width="320"
  34 + :show-after="200" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">
  35 + <ConstForm :showFlag="personSignInfo.jobCode == sunItem.saleInfoVo.jobCode" :currentDateKey="currentDateKey"
  36 + :jobCode="sunItem.saleInfoVo.jobCode" />
  37 + <template #reference>
  38 + <div class="fleet-nbbm-have-sale-sale" :style="signStyleColor[sunItem.saleInfoVo.signStatus]">
  39 + </div>
  40 + </template>
  41 + </el-popover>
  42 + </div>
  43 + <el-popover v-else :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)"
  44 + placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="320">
  45 + <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode" :currentDateKey="currentDateKey"
  46 + :jobCode="sunItem.driverInfoVo.jobCode" />
  47 + <template #reference>
  48 + <div class="fleet-nbbm-info-no-sale" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">
  49 + <span class="fleet-nbbm-info-no-sale-text">
  50 + {{ sunItem.nbbm }}
  51 + </span>
  52 + </div>
  53 + </template>
  54 + </el-popover>
  55 + </div>
  56 + </div>
  57 + </div>
  58 + <!-- </vue3-seamless-scroll> -->
  59 + </div>
  60 +</template>
  61 +<script setup>
  62 +import ConstForm from '@/components/ConstForm/index.vue';
  63 +import { nextTick, onMounted, ref } from 'vue';
  64 +const props = defineProps({
  65 + item: {
  66 + type: Object,
  67 + required: true
  68 + },
  69 + currentDateKey: {
  70 + type: String,
  71 + required: true
  72 + },
  73 + handleLoadSuccess: {
  74 + type: Function,
  75 + required: true
  76 + },
  77 + signStyleColor: {
  78 + type: Object,
  79 + required: true
  80 + }
  81 +})
  82 +
  83 +/** 签到信息 */
  84 +const personSignInfo = reactive(
  85 + {
  86 + jobCode: null,
  87 + date: null
  88 + }
  89 +);
  90 +// 控制滚动
  91 +const isScrolling = ref(false);
  92 +// 元素信息
  93 +const fleetNbbmInfoContainer = ref();
  94 +const fleetContentBox = ref()
  95 +/**
  96 + * 显示弹窗
  97 + * @param {*} val 工号
  98 + */
  99 +const alterEnterHandler = (val) => {
  100 + personSignInfo.jobCode = val;
  101 +}
  102 +
  103 +/**
  104 + * 处理容器滚动回调函数
  105 + * @param container HTML parent element
  106 + */
  107 +const handleContainerScrollCallBack = (container) => {
  108 + if (container.scrollHeight > container.clientHeight) {
  109 + // 内容溢出
  110 + isScrolling.value = true;
  111 + } else {
  112 + // 内容未溢出
  113 + isScrolling.value = false;
  114 + }
  115 + props.handleLoadSuccess(false);
  116 +}
  117 +
  118 +/**
  119 + * 鼠标滚轮触发了
  120 + * @param {*} el
  121 + */
  122 +const handleWheel = (el) => {
  123 + const containerElement = fleetContentBox.value;
  124 + // 内容溢出
  125 + if (containerElement.scrollHeight > containerElement.clientHeight) {
  126 + // el.preventDefault();
  127 + // 根据滚轮滚动的距离来计算滚动量
  128 + const scrollAmount = el.deltaY > 0 ? 100 : -100;
  129 +
  130 + // 修改盒子的滚动位置
  131 + containerElement.scrollTop += scrollAmount;
  132 +
  133 + }
  134 +
  135 +}
  136 +
  137 +onMounted(() => {
  138 + // 处理容器滚动
  139 + // nextTick(() => {
  140 + // if (containerElement != null) {
  141 + // // containerElement.forEach((el) => {
  142 + // // const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;
  143 + // // if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {
  144 + // // const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;
  145 + // // // 有售票员
  146 + // // for (let index = 0; index < el.children.length; index++) {
  147 + // // const element = el.children[index];
  148 + // // element.style.width = `${textWidth}px`;
  149 + // // }
  150 + // // // 无售票员
  151 + // // } else {
  152 + // // const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;
  153 + // // for (let index = 0; index < el.children.length; index++) {
  154 + // // const element = el.children[index];
  155 + // // element.style.width = `${textWidth}px`;
  156 + // // }
  157 + // // }
  158 + // // })
  159 + // loading.value = false;
  160 + // } else {
  161 +
  162 + // }
  163 + // })
  164 + nextTick(() => {
  165 + const containerElement = fleetContentBox.value;
  166 + handleContainerScrollCallBack(containerElement);
  167 + })
  168 +})
  169 +
  170 +</script>
  171 +
  172 +<style lang="scss" scoped>
  173 +.fleet-content-box {
  174 + height: calc(100% - clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem));
  175 + width: auto;
  176 + // overflow-y: hidden;
  177 + // overflow-x: hidden;
  178 + overflow: hidden;
  179 +
  180 + .scrolling {
  181 + animation: scroll 5s linear infinite;
  182 + }
  183 +
  184 + @keyframes scroll {
  185 + 0% {
  186 + transform: translateY(0);
  187 + }
  188 +
  189 + 100% {
  190 + transform: translateY(-100%);
  191 + }
  192 + }
  193 +
  194 + // 线路信息
  195 + .fleet-line-info-container {
  196 + width: 100%;
  197 + height: auto;
  198 +
  199 + .fleet-line-title {
  200 + margin-top: clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem);
  201 + margin-bottom: calc(clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) - 0.4vw);
  202 + box-sizing: border-box;
  203 + font-weight: bold;
  204 + }
  205 +
  206 + .fleet-nbbm-info-container {
  207 + width: 100%;
  208 + height: auto;
  209 + box-sizing: border-box;
  210 + display: flex;
  211 + flex-wrap: wrap;
  212 + justify-content: space-between;
  213 + // justify-content: flex-start;
  214 + font-size: 0.8vw;
  215 +
  216 + .fleet-nbbm-info-item {
  217 + width: 6vw;
  218 + height: 2.4vh;
  219 + box-sizing: border-box;
  220 + margin-top: 0.4vw;
  221 + // margin-right: 0.4vw;
  222 + color: black;
  223 +
  224 + .fleet-nbbm-info-have-sale {
  225 + width: 100%;
  226 + height: 100%;
  227 + display: flex;
  228 +
  229 + .fleet-nbbm-have-sale-driver {
  230 + border-radius: 1 solid #0761ba;
  231 + border-radius: 5px 0 0 5px;
  232 + height: 100%;
  233 + width: 100%;
  234 + margin-right: 0.2vw;
  235 + position: relative;
  236 + display: flex;
  237 + align-items: center;
  238 + }
  239 +
  240 + .fleet-nbbm-have-sale-sale {
  241 + width: 100%;
  242 + height: 100%;
  243 + border-radius: 0 5px 5px 0;
  244 + display: flex;
  245 + justify-content: center;
  246 + align-items: center;
  247 + }
  248 +
  249 + .fleet-nbbm-have-sale-txt-box {
  250 + position: relative;
  251 + display: flex;
  252 + justify-content: center;
  253 + align-items: center;
  254 +
  255 + .fleet-nbbm-have-sale-txt {
  256 + position: absolute;
  257 + width: auto;
  258 + /* 防止文字换行 */
  259 + white-space: nowrap;
  260 +
  261 + padding-left: 0.5vw;
  262 + padding-right: 0.5vw;
  263 + /** 防止元素遮挡 */
  264 + pointer-events: none;
  265 + }
  266 + }
  267 + }
  268 +
  269 + .fleet-nbbm-info-no-sale {
  270 + width: 100%;
  271 + height: 100%;
  272 + position: relative;
  273 + display: flex;
  274 + justify-content: center;
  275 + align-items: center;
  276 + box-sizing: border-box;
  277 + border-radius: 5px;
  278 +
  279 + /* 防止文字换行 */
  280 + .fleet-nbbm-info-no-sale-text {
  281 + position: absolute;
  282 + width: auto;
  283 + white-space: nowrap;
  284 + padding-left: 0.5vw;
  285 + padding-right: 0.5vw;
  286 + /* 防止文字换行 */
  287 + }
  288 + }
  289 + }
  290 + }
  291 +
  292 +
  293 +
  294 +
  295 + }
  296 +}
  297 +
  298 +
  299 +
  300 +/* 定义滚动条样式 */
  301 +.fleet-content-box::-webkit-scrollbar {
  302 + width: 6px;
  303 + height: 6px;
  304 +}
  305 +
  306 +/*定义滑块 内阴影+圆角*/
  307 +.fleet-content-box::-webkit-scrollbar-thumb {
  308 + border-radius: 6px;
  309 + // box-shadow: inset 0 0 0px rgba(237, 44, 37, .5);
  310 + background-color: #01366c;
  311 + background-image: url('../assets/bigview/scroll-box.png');
  312 +}
  313 +
  314 +/* 设置滚动条拖拽按钮的样式 */
  315 +.fleet-content-box::-webkit-scrollbar-thumb:vertical {
  316 + background-color: #0761ba;
  317 + /* 背景图片的尺寸适应滑块 */
  318 + background-size: cover;
  319 +}
  320 +
  321 +.fleet-content-box::-webkit-scrollbar-button {
  322 + display: none;
  323 +}
  324 +
  325 +/*定义滚动条轨道 内阴影+圆角*/
  326 +.fleet-content-box::-webkit-scrollbar-track {
  327 + box-shadow: inset 0 0 0px #01DEDD;
  328 + border-radius: 6px;
  329 + background-color: #121622;
  330 +}
  331 +</style>
  332 +<style>
  333 +.fleet-popover-style {
  334 + color: black !important;
  335 + margin: 10px 0 10px 0;
  336 + min-width: 100px;
  337 +}
  338 +
  339 +.el-popover.fleet-popover-style {
  340 + border-color: #146EBD;
  341 + background-color: #062a5ac5;
  342 +}
  343 +
  344 +.fleet-popover-style .el-popover__title {
  345 + color: black;
  346 + font-weight: bold;
  347 +}
  348 +
  349 +.el-popper[data-popper-placement^=top]>.el-popper__arrow::before {
  350 + border-top-color: #062a5ac5 !important;
  351 + background-color: #062a5ac5 !important;
  352 +}
  353 +</style>
src/views/home/index.vue
  View file @14888df
@@ -5,6 +5,10 @@ @@ -5,6 +5,10 @@
5 element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="#081138"> 5 element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="#081138">
6 <!-- 标题 --> 6 <!-- 标题 -->
7 <div class="big-view-container-title"> 7 <div class="big-view-container-title">
  8 + <!-- 标题 -->
  9 + <div class="big-view-container-box">
  10 + 青浦巴士岗前检查
  11 + </div>
8 <div class="big-view-container-time"> 12 <div class="big-view-container-time">
9 <text> 13 <text>
10 {{ timeTaskObject.titleNowDateObject }} 14 {{ timeTaskObject.titleNowDateObject }}
@@ -16,7 +20,7 @@ @@ -16,7 +20,7 @@
16 <div v-for=" (item, index) in globalInfoBoxList" :key="index" class="global-info-box"> 20 <div v-for=" (item, index) in globalInfoBoxList" :key="index" class="global-info-box">
17 <div class="global-info-box-container"> 21 <div class="global-info-box-container">
18 <div class="global-info-box-container-left"> 22 <div class="global-info-box-container-left">
19 - <img :src="item.icon" /> 23 + <!-- <img :src="item.icon" /> -->
20 </div> 24 </div>
21 <div class="global-info-box-container-right"> 25 <div class="global-info-box-container-right">
22 <div class="global-info-box-container-right-title"> 26 <div class="global-info-box-container-right-title">
@@ -59,54 +63,8 @@ @@ -59,54 +63,8 @@
59 <div class="fleet-top-title">{{ item.title }}</div> 63 <div class="fleet-top-title">{{ item.title }}</div>
60 </div> 64 </div>
61 <!-- 内容盒子 --> 65 <!-- 内容盒子 -->
62 - <div class="fleet-content-box">  
63 - <!-- 线路信息 -->  
64 - <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childItem.lineName"  
65 - class="fleet-line-info-container">  
66 - <div class="fleet-line-title">  
67 - {{ childItem.lineName }}  
68 - </div>  
69 - <div ref="fleetNbbmInfoContainer" class="fleet-nbbm-info-container">  
70 - <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunItem.nbbm" class="fleet-nbbm-info-item">  
71 - <div v-if="sunItem.saleInfoVo != null" class="fleet-nbbm-info-have-sale">  
72 - <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"  
73 - :width="320" :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">  
74 - <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"  
75 - :currentDateKey="currentDateKey" :jobCode="sunItem.driverInfoVo.jobCode" />  
76 - <template #reference>  
77 - <div class="fleet-nbbm-have-sale-driver" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">  
78 - </div>  
79 - </template>  
80 - </el-popover>  
81 - <div class="fleet-nbbm-have-sale-txt-box">  
82 - <span class="fleet-nbbm-have-sale-txt">{{ sunItem.nbbm }}</span>  
83 - </div>  
84 - <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"  
85 - :width="320" :show-after="200" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">  
86 - <ConstForm :showFlag="personSignInfo.jobCode == sunItem.saleInfoVo.jobCode"  
87 - :currentDateKey="currentDateKey" :jobCode="sunItem.saleInfoVo.jobCode" />  
88 - <template #reference>  
89 - <div class="fleet-nbbm-have-sale-sale" :style="signStyleColor[sunItem.saleInfoVo.signStatus]">  
90 - </div>  
91 - </template>  
92 - </el-popover>  
93 - </div>  
94 - <el-popover v-else :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)"  
95 - placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="320">  
96 - <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"  
97 - :currentDateKey="currentDateKey" :jobCode="sunItem.driverInfoVo.jobCode" />  
98 - <template #reference>  
99 - <div class="fleet-nbbm-info-no-sale" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">  
100 - <span class="fleet-nbbm-info-no-sale-text">  
101 - {{ sunItem.nbbm }}  
102 - </span>  
103 - </div>  
104 - </template>  
105 - </el-popover>  
106 - </div>  
107 - </div>  
108 - </div>  
109 - </div> 66 + <FleetContentBox :handleLoadSuccess="handleLoadSuccess" :signStyleColor="signStyleColor"
  67 + :currentDateKey="currentDateKey" :item="item" />
110 </div> 68 </div>
111 </div> 69 </div>
112 </div> 70 </div>
@@ -114,12 +72,11 @@ @@ -114,12 +72,11 @@
114 </template> 72 </template>
115 73
116 <script setup name="Index"> 74 <script setup name="Index">
117 -  
118 import { queryLineInfo, querySignInfoByType } from '@/api/big_view/big_view.js'; 75 import { queryLineInfo, querySignInfoByType } from '@/api/big_view/big_view.js';
119 -import ConstForm from '@/components/ConstForm/index.vue'; 76 +import FleetContentBox from '@/components/FleetContentBox/index.vue';
120 import getWeek from "@/utils/dateUtils.js"; 77 import getWeek from "@/utils/dateUtils.js";
121 import moment from 'moment'; 78 import moment from 'moment';
122 -import { nextTick, onMounted, reactive, watch } from 'vue'; 79 +import { nextTick, onMounted, reactive, ref, watch } from 'vue';
123 import { CountTo } from 'vue3-count-to'; 80 import { CountTo } from 'vue3-count-to';
124 // 图片信息 直接写路径会有问题 打包的时候vite构建会导出路径找不到 81 // 图片信息 直接写路径会有问题 打包的时候vite构建会导出路径找不到
125 import icon2 from "../../assets/bigview/image-icon-1.png"; 82 import icon2 from "../../assets/bigview/image-icon-1.png";
@@ -128,15 +85,10 @@ import icon4 from &quot;../../assets/bigview/image-icon-3.png&quot;; @@ -128,15 +85,10 @@ import icon4 from &quot;../../assets/bigview/image-icon-3.png&quot;;
128 import icon5 from "../../assets/bigview/image-icon-4.png"; 85 import icon5 from "../../assets/bigview/image-icon-4.png";
129 import icon6 from "../../assets/bigview/image-icon-5.png"; 86 import icon6 from "../../assets/bigview/image-icon-5.png";
130 import icon1 from "../../assets/bigview/image-icon-6.png"; 87 import icon1 from "../../assets/bigview/image-icon-6.png";
  88 +
131 const currentDateKey = ref(); 89 const currentDateKey = ref();
132 const loading = ref(true); 90 const loading = ref(true);
133 -/** 签到信息 */  
134 -const personSignInfo = reactive(  
135 - {  
136 - jobCode: null,  
137 - date: null  
138 - }  
139 -); 91 +
140 /** 定时更新对象 */ 92 /** 定时更新对象 */
141 const timeTaskObject = reactive( 93 const timeTaskObject = reactive(
142 { 94 {
@@ -150,8 +102,7 @@ const timeTaskObject = reactive( @@ -150,8 +102,7 @@ const timeTaskObject = reactive(
150 ); 102 );
151 /** 定时任务 */ 103 /** 定时任务 */
152 const timeTask = reactive( 104 const timeTask = reactive(
153 - { /** 当前日期 */  
154 - titleNowDateTimer: null, 105 + {
155 /** 数据更新计时 5分钟 */ 106 /** 数据更新计时 5分钟 */
156 updateDateSchedulerTimer: null 107 updateDateSchedulerTimer: null
157 } 108 }
@@ -208,8 +159,8 @@ const signStyleColor = ref( @@ -208,8 +159,8 @@ const signStyleColor = ref(
208 [ 159 [
209 { 160 {
210 backgroundColor: "green", 161 backgroundColor: "green",
211 - color: "white",  
212 - label: "今日签到正常" 162 + label: "今日签到正常",
  163 + color: "white"
213 }, 164 },
214 { 165 {
215 border: "2px solid #d9e0e2", 166 border: "2px solid #d9e0e2",
@@ -217,44 +168,25 @@ const signStyleColor = ref( @@ -217,44 +168,25 @@ const signStyleColor = ref(
217 }, 168 },
218 { 169 {
219 backgroundColor: "#ffa500", 170 backgroundColor: "#ffa500",
220 - color: "white",  
221 - label: "今日打卡迟到" 171 + label: "今日打卡迟到",
  172 + color: "white"
222 }, 173 },
223 { 174 {
224 backgroundColor: "#ff0000", 175 backgroundColor: "#ff0000",
225 - color: "white",  
226 - label: "今日酒测异常" 176 + label: "今日酒测异常",
  177 + color: "white"
227 } 178 }
228 ] 179 ]
229 ) 180 )
230 181
231 // 车队信息List 182 // 车队信息List
232 -const fleetInfoList = ref(  
233 - [  
234 - {  
235 - title: "一车队",  
236 - fleetInfos: []  
237 - },  
238 - {  
239 - title: "二车队",  
240 - fleetInfos: []  
241 - },  
242 - {  
243 - title: "三车队",  
244 - fleetInfos: []  
245 - }  
246 - ]  
247 -) 183 +const fleetInfoList = ref()
248 184
249 // 元素信息 185 // 元素信息
250 -const fleetNbbmInfoContainer = ref(null);  
251 const scrollNumber = ref(null); 186 const scrollNumber = ref(null);
252 -// 计算宽度初始化数据 187 +// 初始化数据
253 onMounted(() => { 188 onMounted(() => {
254 -  
255 - timeTask.titleNowDateTimer = startUpdateNowDateTimerTaskScheduler();  
256 timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler(); 189 timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler();
257 -  
258 const currentTime = moment().format('HH:mm'); 190 const currentTime = moment().format('HH:mm');
259 let dateKey; 191 let dateKey;
260 if (currentTime < '03:00') { 192 if (currentTime < '03:00') {
@@ -262,32 +194,20 @@ onMounted(() =&gt; { @@ -262,32 +194,20 @@ onMounted(() =&gt; {
262 } else { 194 } else {
263 dateKey = moment().format("YYYY-MM-DD"); 195 dateKey = moment().format("YYYY-MM-DD");
264 } 196 }
265 - console.log();  
266 currentDateKey.value = dateKey; 197 currentDateKey.value = dateKey;
267 handleUpdateDataRequest(currentDateKey.value); 198 handleUpdateDataRequest(currentDateKey.value);
  199 +
268 }) 200 })
269 201
270 /** 销毁之前触发 */ 202 /** 销毁之前触发 */
271 onDeactivated(() => { 203 onDeactivated(() => {
272 - clearInterval(timeTask.titleNowDateTimer)  
273 clearInterval(timeTask.updateDateSchedulerTimer) 204 clearInterval(timeTask.updateDateSchedulerTimer)
274 }) 205 })
275 /** 组件不挂载之前触发 */ 206 /** 组件不挂载之前触发 */
276 onBeforeUnmount(() => { 207 onBeforeUnmount(() => {
277 - clearInterval(timeTask.titleNowDateTimer)  
278 clearInterval(timeTask.updateDateSchedulerTimer) 208 clearInterval(timeTask.updateDateSchedulerTimer)
279 }) 209 })
280 /** 210 /**
281 - * 开启当前日期更新  
282 - * @param {*} val  
283 - */  
284 -const startUpdateNowDateTimerTaskScheduler = () => {  
285 - return setInterval(() => {  
286 - const currentDay = moment(new Date());  
287 - timeTaskObject.titleNowDateObject = currentDay.format("yyyy-MM-DD ") + getWeek(currentDay) + currentDay.format(" HH:mm:ss");  
288 - }, 1000);  
289 -}  
290 -/**  
291 * 数据更新日期 211 * 数据更新日期
292 * @param {*} val 212 * @param {*} val
293 */ 213 */
@@ -313,20 +233,24 @@ const startUpdateDataTaskScheduler = () =&gt; { @@ -313,20 +233,24 @@ const startUpdateDataTaskScheduler = () =&gt; {
313 seconds = seconds < 10 ? "0" + seconds : seconds; 233 seconds = seconds < 10 ? "0" + seconds : seconds;
314 // 格式化倒计时字符串 234 // 格式化倒计时字符串
315 timeTaskObject.updateDateSchedulerObject = `${minutes}:${seconds}`; 235 timeTaskObject.updateDateSchedulerObject = `${minutes}:${seconds}`;
  236 + timeTaskObject.titleNowDateObject = currentDate.format("yyyy-MM-DD ") + getWeek(currentDate) + currentDate.format(" HH:mm:ss");
316 }, 1000); 237 }, 1000);
317 } 238 }
318 239
319 -/**  
320 - * 显示弹窗  
321 - * @param {*} val 工号  
322 - */  
323 -const alterEnterHandler = (val, el) => {  
324 - personSignInfo.jobCode = val;  
325 -} 240 +
326 241
327 /** 监听数据更新日期 */ 242 /** 监听数据更新日期 */
328 watch(timeTaskObject.updateDateObject, (val1, val2) => { 243 watch(timeTaskObject.updateDateObject, (val1, val2) => {
329 // 发送请求更新数据 244 // 发送请求更新数据
  245 + const currentTime = moment().format('HH:mm');
  246 + let dateKey;
  247 + if (currentTime < '03:00') {
  248 + dateKey = moment().subtract(1, 'day').format('YYYY-MM-DD');
  249 + } else {
  250 + dateKey = moment().format("YYYY-MM-DD");
  251 + }
  252 + console.log();
  253 + currentDateKey.value = dateKey;
330 handleUpdateDataRequest(currentDateKey.value); 254 handleUpdateDataRequest(currentDateKey.value);
331 }) 255 })
332 256
@@ -363,40 +287,25 @@ const handleUpdateDataRequest = (dateKey) =&gt; { @@ -363,40 +287,25 @@ const handleUpdateDataRequest = (dateKey) =&gt; {
363 //获取车队 287 //获取车队
364 queryLineInfo(dateKey).then(res => { 288 queryLineInfo(dateKey).then(res => {
365 fleetInfoList.value = res.data 289 fleetInfoList.value = res.data
  290 +
366 nextTick(() => { 291 nextTick(() => {
367 - const containerElement = fleetNbbmInfoContainer.value;  
368 - if (containerElement != null) {  
369 - // containerElement.forEach((el) => {  
370 - // const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;  
371 - // if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {  
372 - // const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;  
373 - // // 有售票员  
374 - // for (let index = 0; index < el.children.length; index++) {  
375 - // const element = el.children[index];  
376 - // element.style.width = `${textWidth}px`;  
377 - // }  
378 - // // 无售票员  
379 - // } else {  
380 - // const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;  
381 - // for (let index = 0; index < el.children.length; index++) {  
382 - // const element = el.children[index];  
383 - // element.style.width = `${textWidth}px`;  
384 - // }  
385 - // }  
386 - // })  
387 - loading.value = false;  
388 - } else {  
389 - loading.value = false;  
390 - } 292 + loading.value = false;
391 }) 293 })
392 }) 294 })
393 } 295 }
394 296
  297 +/**
  298 + * 处理加载过程 组件加载完成回调
  299 + * @param {*} val boolean
  300 + */
  301 +const handleLoadSuccess = (val) => {
  302 + loading.value = val;
  303 +}
  304 +
395 const handleGlobalInfo = (data, num) => { 305 const handleGlobalInfo = (data, num) => {
396 globalInfoBoxList[num].startNumber = globalInfoBoxList[num].endNumber; 306 globalInfoBoxList[num].startNumber = globalInfoBoxList[num].endNumber;
397 globalInfoBoxList[num].endNumber = data.nowNumber; 307 globalInfoBoxList[num].endNumber = data.nowNumber;
398 globalInfoBoxList[num].allNumber = data.allNumber; 308 globalInfoBoxList[num].allNumber = data.allNumber;
399 -  
400 } 309 }
401 </script> 310 </script>
402 311
@@ -405,7 +314,7 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -405,7 +314,7 @@ const handleGlobalInfo = (data, num) =&gt; {
405 .app-container { 314 .app-container {
406 width: 100%; 315 width: 100%;
407 height: 100%; 316 height: 100%;
408 - background-color: #ffffff; 317 + background-color: white;
409 padding: 0 !important; 318 padding: 0 !important;
410 box-sizing: border-box; 319 box-sizing: border-box;
411 320
@@ -415,15 +324,15 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -415,15 +324,15 @@ const handleGlobalInfo = (data, num) =&gt; {
415 width: 100%; 324 width: 100%;
416 height: 100%; 325 height: 100%;
417 // 整体蓝色背景 326 // 整体蓝色背景
418 - // background-image: url("@/assets/bigview/back.png");  
419 - // background-size: cover;  
420 - // background-repeat: no-repeat;  
421 - // background-position: cover; 327 + //background-image: url("@/assets/bigview/back.png");
  328 + //background-size: cover;
  329 + //background-repeat: no-repeat;
  330 + //background-position: cover;
422 color: black; 331 color: black;
423 box-sizing: border-box; 332 box-sizing: border-box;
424 padding: 0 1.5vw 1.5vw 1.5vw; 333 padding: 0 1.5vw 1.5vw 1.5vw;
425 334
426 - // background-size: 100% 100%; 335 + background-size: 100% 100%;
427 // min-height: 900px; 336 // min-height: 900px;
428 // min-width: 1600px; 337 // min-width: 1600px;
429 338
@@ -438,17 +347,23 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -438,17 +347,23 @@ const handleGlobalInfo = (data, num) =&gt; {
438 width: 100%; 347 width: 100%;
439 font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem); 348 font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
440 display: flex; 349 display: flex;
441 - justify-content: flex-end; 350 + justify-content: center;
442 align-items: center; 351 align-items: center;
443 box-sizing: border-box; 352 box-sizing: border-box;
  353 + flex-direction: column;
  354 +
  355 + .big-view-container-box {
  356 + height: 70%;
  357 + width: 100%;
  358 + }
444 359
445 .big-view-container-time { 360 .big-view-container-time {
446 width: 100%; 361 width: 100%;
447 - height: 100%; 362 + height: 30%;
448 display: flex; 363 display: flex;
449 align-items: center; 364 align-items: center;
450 justify-content: flex-end; 365 justify-content: flex-end;
451 - margin-top: 2.9%; 366 + // margin-top: 2.9%;
452 box-sizing: border-box; 367 box-sizing: border-box;
453 } 368 }
454 } 369 }
@@ -468,9 +383,12 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -468,9 +383,12 @@ const handleGlobalInfo = (data, num) =&gt; {
468 height: 100%; 383 height: 100%;
469 display: flex; 384 display: flex;
470 margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem); 385 margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
471 - // background-image: url('@/assets/bigview/bottom-box-small.png');  
472 - // background-repeat: no-repeat;  
473 - // background-size: 100% 100%; 386 + //background-image: url('@/assets/bigview/bottom-box-small.png');
  387 + //background-repeat: no-repeat;
  388 + //background-size: 100% 100%;
  389 + border: 2px solid #d9e0e2;
  390 + border-radius: 10px;
  391 +
474 justify-content: center; 392 justify-content: center;
475 align-items: center; 393 align-items: center;
476 394
@@ -514,7 +432,7 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -514,7 +432,7 @@ const handleGlobalInfo = (data, num) =&gt; {
514 432
515 .global-info-box-container-right-number { 433 .global-info-box-container-right-number {
516 font-weight: bold; 434 font-weight: bold;
517 - color: green; 435 + color: black;
518 } 436 }
519 } 437 }
520 } 438 }
@@ -534,6 +452,8 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -534,6 +452,8 @@ const handleGlobalInfo = (data, num) =&gt; {
534 height: 4.5%; 452 height: 4.5%;
535 display: flex; 453 display: flex;
536 align-items: center; 454 align-items: center;
  455 + padding-right: 1.5vw;
  456 + padding-left: 1.5vw;
537 457
538 .prompt-info-left-box { 458 .prompt-info-left-box {
539 display: flex; 459 display: flex;
@@ -543,7 +463,6 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -543,7 +463,6 @@ const handleGlobalInfo = (data, num) =&gt; {
543 align-items: center; 463 align-items: center;
544 464
545 .zone-left-prompt-info { 465 .zone-left-prompt-info {
546 -  
547 .label-box { 466 .label-box {
548 height: 100%; 467 height: 100%;
549 width: 3vw; 468 width: 3vw;
@@ -595,11 +514,12 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -595,11 +514,12 @@ const handleGlobalInfo = (data, num) =&gt; {
595 flex-grow: 1; 514 flex-grow: 1;
596 width: 33.3%; 515 width: 33.3%;
597 height: 100%; 516 height: 100%;
598 - // background-image: url("@/assets/bigview/bottom-box.png"); 517 + //background-image: url("@/assets/bigview/bottom-box.png");
599 margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem); 518 margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
600 - // background-size: 100% 100%; 519 + //background-size: 100% 100%;
601 box-sizing: border-box; 520 box-sizing: border-box;
602 padding: clamp(0.6rem, 0.489rem + 1.05vw, 1rem); 521 padding: clamp(0.6rem, 0.489rem + 1.05vw, 1rem);
  522 + background-color: white;
603 523
604 .fleet-top-container { 524 .fleet-top-container {
605 display: flex; 525 display: flex;
@@ -623,184 +543,12 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -623,184 +543,12 @@ const handleGlobalInfo = (data, num) =&gt; {
623 font-size: clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem); 543 font-size: clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem);
624 } 544 }
625 } 545 }
626 -  
627 - .fleet-content-box {  
628 - height: calc(100% - clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem));  
629 - width: 100%;  
630 - overflow-y: hidden;  
631 - // overflow-y: scroll;  
632 - overflow-x: hidden;  
633 -  
634 - // 线路信息  
635 - .fleet-line-info-container {  
636 - width: 100%;  
637 - height: auto;  
638 -  
639 - .fleet-line-title {  
640 - margin-top: clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem);  
641 - margin-bottom: calc(clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) - 0.4vw);  
642 - box-sizing: border-box;  
643 - font-weight: bold;  
644 - }  
645 -  
646 - .fleet-nbbm-info-container {  
647 - width: 100%;  
648 - height: auto;  
649 - box-sizing: border-box;  
650 - display: flex;  
651 - flex-wrap: wrap;  
652 - font-size: 0.8vw;  
653 -  
654 - .fleet-nbbm-info-item {  
655 - width: 6vw;  
656 - height: 2.4vh;  
657 - margin-right: 0.4vw;  
658 - box-sizing: border-box;  
659 - margin-top: 0.4vw;  
660 - color: black;  
661 -  
662 - .fleet-nbbm-info-have-sale {  
663 - width: 100%;  
664 - height: 100%;  
665 - display: flex;  
666 -  
667 - .fleet-nbbm-have-sale-driver {  
668 - border-radius: 1 solid #0761ba;  
669 - height: 100%;  
670 - width: 100%;  
671 - margin-right: 0.2vw;  
672 - position: relative;  
673 - display: flex;  
674 - align-items: center;  
675 - }  
676 -  
677 - .fleet-nbbm-have-sale-sale {  
678 - border-radius: 1 solid #0761ba;  
679 - width: 100%;  
680 - height: 100%;  
681 - }  
682 -  
683 - .fleet-nbbm-have-sale-txt-box {  
684 - position: relative;  
685 - display: flex;  
686 - justify-content: center;  
687 - align-items: center;  
688 -  
689 - .fleet-nbbm-have-sale-txt {  
690 - position: absolute;  
691 - width: auto;  
692 - /* 防止文字换行 */  
693 - white-space: nowrap;  
694 -  
695 - padding-left: 0.5vw;  
696 - padding-right: 0.5vw;  
697 - /** 防止元素遮挡 */  
698 - pointer-events: none;  
699 - background: linear-gradient(to right, rgb(0, 0, 0), rgb(255, 255, 255));  
700 - /* 设置线性渐变背景 */  
701 - -webkit-background-clip: text;  
702 - /* Safari/Chrome 浏览器支持 */  
703 - -moz-background-clip: text;  
704 - /* Firefox 浏览器支持 */  
705 - background-clip: text;  
706 - /* 设置背景裁剪为文本 */  
707 - // mix-blend-mode: difference;  
708 - }  
709 - }  
710 - }  
711 -  
712 - .fleet-nbbm-info-no-sale {  
713 - width: 100%;  
714 - height: 100%;  
715 - border-radius: 1 solid #0761ba;  
716 - position: relative;  
717 - display: flex;  
718 - justify-content: center;  
719 - align-items: center;  
720 - box-sizing: border-box;  
721 -  
722 - /* 防止文字换行 */  
723 - .fleet-nbbm-info-no-sale-text {  
724 - position: absolute;  
725 - width: auto;  
726 - white-space: nowrap;  
727 - padding-left: 0.5vw;  
728 - padding-right: 0.5vw;  
729 - /* 防止文字换行 */  
730 - }  
731 - }  
732 - }  
733 -  
734 - .fleet-nbbm-info-item:last-child {  
735 - margin-right: 0;  
736 - }  
737 - }  
738 - }  
739 - }  
740 -  
741 - /* 定义滚动条样式 */  
742 - .fleet-content-box::-webkit-scrollbar {  
743 - width: 6px;  
744 - height: 6px;  
745 - }  
746 -  
747 - /*定义滑块 内阴影+圆角*/  
748 - .fleet-content-box::-webkit-scrollbar-thumb {  
749 - border-radius: 6px;  
750 - // box-shadow: inset 0 0 0px rgba(237, 44, 37, .5);  
751 - background-color: #01366c;  
752 - background-image: url('../assets/bigview/scroll-box.png');  
753 - }  
754 -  
755 - /* 设置滚动条拖拽按钮的样式 */  
756 - .fleet-content-box::-webkit-scrollbar-thumb:vertical {  
757 - background-image: url('../assets/bigview/scroll-box.png');  
758 - background-color: #0761ba;  
759 - /* 背景图片的尺寸适应滑块 */  
760 - background-size: cover;  
761 - }  
762 -  
763 - .fleet-content-box::-webkit-scrollbar-button {  
764 - display: none;  
765 - }  
766 -  
767 - /*定义滚动条轨道 内阴影+圆角*/  
768 - .fleet-content-box::-webkit-scrollbar-track {  
769 - box-shadow: inset 0 0 0px #01DEDD;  
770 - border-radius: 6px;  
771 - background-color: #121622;  
772 - }  
773 -  
774 -  
775 } 546 }
776 547
777 .fleet-common-style:last-child { 548 .fleet-common-style:last-child {
778 margin-right: 0; 549 margin-right: 0;
779 } 550 }
780 } 551 }
781 -  
782 } 552 }
783 } 553 }
784 </style> 554 </style>
785 -<style>  
786 -.fleet-popover-style {  
787 - color: black !important;  
788 - margin: 10px 0 10px 0;  
789 - min-width: 100px;  
790 -}  
791 -  
792 -.el-popover.fleet-popover-style {  
793 - border-color: #3d3e3f;  
794 - background-color: #12d76bc5;  
795 -}  
796 -  
797 -.fleet-popover-style .el-popover__title {  
798 - color: black;  
799 - font-weight: bold;  
800 -}  
801 -  
802 -.el-popper[data-popper-placement^=top]>.el-popper__arrow::before {  
803 - background-color: #12d76bc5 !important;  
804 - background-color: #12d76bc5 !important;  
805 -}  
806 -</style>