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 5 element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="#081138">
6 6 <!-- 标题 -->
7 7 <div class="big-view-container-title">
  8 + <!-- 标题 -->
  9 + <div class="big-view-container-box">
  10 + 青浦巴士岗前检查
  11 + </div>
8 12 <div class="big-view-container-time">
9 13 <text>
10 14 {{ timeTaskObject.titleNowDateObject }}
... ... @@ -16,7 +20,7 @@
16 20 <div v-for=" (item, index) in globalInfoBoxList" :key="index" class="global-info-box">
17 21 <div class="global-info-box-container">
18 22 <div class="global-info-box-container-left">
19   - <img :src="item.icon" />
  23 + <!-- <img :src="item.icon" /> -->
20 24 </div>
21 25 <div class="global-info-box-container-right">
22 26 <div class="global-info-box-container-right-title">
... ... @@ -59,54 +63,8 @@
59 63 <div class="fleet-top-title">{{ item.title }}</div>
60 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 68 </div>
111 69 </div>
112 70 </div>
... ... @@ -114,12 +72,11 @@
114 72 </template>
115 73  
116 74 <script setup name="Index">
117   -
118 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 77 import getWeek from "@/utils/dateUtils.js";
121 78 import moment from 'moment';
122   -import { nextTick, onMounted, reactive, watch } from 'vue';
  79 +import { nextTick, onMounted, reactive, ref, watch } from 'vue';
123 80 import { CountTo } from 'vue3-count-to';
124 81 // 图片信息 直接写路径会有问题 打包的时候vite构建会导出路径找不到
125 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 85 import icon5 from "../../assets/bigview/image-icon-4.png";
129 86 import icon6 from "../../assets/bigview/image-icon-5.png";
130 87 import icon1 from "../../assets/bigview/image-icon-6.png";
  88 +
131 89 const currentDateKey = ref();
132 90 const loading = ref(true);
133   -/** 签到信息 */
134   -const personSignInfo = reactive(
135   - {
136   - jobCode: null,
137   - date: null
138   - }
139   -);
  91 +
140 92 /** 定时更新对象 */
141 93 const timeTaskObject = reactive(
142 94 {
... ... @@ -150,8 +102,7 @@ const timeTaskObject = reactive(
150 102 );
151 103 /** 定时任务 */
152 104 const timeTask = reactive(
153   - { /** 当前日期 */
154   - titleNowDateTimer: null,
  105 + {
155 106 /** 数据更新计时 5分钟 */
156 107 updateDateSchedulerTimer: null
157 108 }
... ... @@ -208,8 +159,8 @@ const signStyleColor = ref(
208 159 [
209 160 {
210 161 backgroundColor: "green",
211   - color: "white",
212   - label: "今日签到正常"
  162 + label: "今日签到正常",
  163 + color: "white"
213 164 },
214 165 {
215 166 border: "2px solid #d9e0e2",
... ... @@ -217,44 +168,25 @@ const signStyleColor = ref(
217 168 },
218 169 {
219 170 backgroundColor: "#ffa500",
220   - color: "white",
221   - label: "今日打卡迟到"
  171 + label: "今日打卡迟到",
  172 + color: "white"
222 173 },
223 174 {
224 175 backgroundColor: "#ff0000",
225   - color: "white",
226   - label: "今日酒测异常"
  176 + label: "今日酒测异常",
  177 + color: "white"
227 178 }
228 179 ]
229 180 )
230 181  
231 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 186 const scrollNumber = ref(null);
252   -// 计算宽度初始化数据
  187 +// 初始化数据
253 188 onMounted(() => {
254   -
255   - timeTask.titleNowDateTimer = startUpdateNowDateTimerTaskScheduler();
256 189 timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler();
257   -
258 190 const currentTime = moment().format('HH:mm');
259 191 let dateKey;
260 192 if (currentTime < '03:00') {
... ... @@ -262,32 +194,20 @@ onMounted(() =&gt; {
262 194 } else {
263 195 dateKey = moment().format("YYYY-MM-DD");
264 196 }
265   - console.log();
266 197 currentDateKey.value = dateKey;
267 198 handleUpdateDataRequest(currentDateKey.value);
  199 +
268 200 })
269 201  
270 202 /** 销毁之前触发 */
271 203 onDeactivated(() => {
272   - clearInterval(timeTask.titleNowDateTimer)
273 204 clearInterval(timeTask.updateDateSchedulerTimer)
274 205 })
275 206 /** 组件不挂载之前触发 */
276 207 onBeforeUnmount(() => {
277   - clearInterval(timeTask.titleNowDateTimer)
278 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 212 * @param {*} val
293 213 */
... ... @@ -313,20 +233,24 @@ const startUpdateDataTaskScheduler = () =&gt; {
313 233 seconds = seconds < 10 ? "0" + seconds : seconds;
314 234 // 格式化倒计时字符串
315 235 timeTaskObject.updateDateSchedulerObject = `${minutes}:${seconds}`;
  236 + timeTaskObject.titleNowDateObject = currentDate.format("yyyy-MM-DD ") + getWeek(currentDate) + currentDate.format(" HH:mm:ss");
316 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 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 254 handleUpdateDataRequest(currentDateKey.value);
331 255 })
332 256  
... ... @@ -363,40 +287,25 @@ const handleUpdateDataRequest = (dateKey) =&gt; {
363 287 //获取车队
364 288 queryLineInfo(dateKey).then(res => {
365 289 fleetInfoList.value = res.data
  290 +
366 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 305 const handleGlobalInfo = (data, num) => {
396 306 globalInfoBoxList[num].startNumber = globalInfoBoxList[num].endNumber;
397 307 globalInfoBoxList[num].endNumber = data.nowNumber;
398 308 globalInfoBoxList[num].allNumber = data.allNumber;
399   -
400 309 }
401 310 </script>
402 311  
... ... @@ -405,7 +314,7 @@ const handleGlobalInfo = (data, num) =&gt; {
405 314 .app-container {
406 315 width: 100%;
407 316 height: 100%;
408   - background-color: #ffffff;
  317 + background-color: white;
409 318 padding: 0 !important;
410 319 box-sizing: border-box;
411 320  
... ... @@ -415,15 +324,15 @@ const handleGlobalInfo = (data, num) =&gt; {
415 324 width: 100%;
416 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 331 color: black;
423 332 box-sizing: border-box;
424 333 padding: 0 1.5vw 1.5vw 1.5vw;
425 334  
426   - // background-size: 100% 100%;
  335 + background-size: 100% 100%;
427 336 // min-height: 900px;
428 337 // min-width: 1600px;
429 338  
... ... @@ -438,17 +347,23 @@ const handleGlobalInfo = (data, num) =&gt; {
438 347 width: 100%;
439 348 font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
440 349 display: flex;
441   - justify-content: flex-end;
  350 + justify-content: center;
442 351 align-items: center;
443 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 360 .big-view-container-time {
446 361 width: 100%;
447   - height: 100%;
  362 + height: 30%;
448 363 display: flex;
449 364 align-items: center;
450 365 justify-content: flex-end;
451   - margin-top: 2.9%;
  366 + // margin-top: 2.9%;
452 367 box-sizing: border-box;
453 368 }
454 369 }
... ... @@ -468,9 +383,12 @@ const handleGlobalInfo = (data, num) =&gt; {
468 383 height: 100%;
469 384 display: flex;
470 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 392 justify-content: center;
475 393 align-items: center;
476 394  
... ... @@ -514,7 +432,7 @@ const handleGlobalInfo = (data, num) =&gt; {
514 432  
515 433 .global-info-box-container-right-number {
516 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 452 height: 4.5%;
535 453 display: flex;
536 454 align-items: center;
  455 + padding-right: 1.5vw;
  456 + padding-left: 1.5vw;
537 457  
538 458 .prompt-info-left-box {
539 459 display: flex;
... ... @@ -543,7 +463,6 @@ const handleGlobalInfo = (data, num) =&gt; {
543 463 align-items: center;
544 464  
545 465 .zone-left-prompt-info {
546   -
547 466 .label-box {
548 467 height: 100%;
549 468 width: 3vw;
... ... @@ -595,11 +514,12 @@ const handleGlobalInfo = (data, num) =&gt; {
595 514 flex-grow: 1;
596 515 width: 33.3%;
597 516 height: 100%;
598   - // background-image: url("@/assets/bigview/bottom-box.png");
  517 + //background-image: url("@/assets/bigview/bottom-box.png");
599 518 margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
600   - // background-size: 100% 100%;
  519 + //background-size: 100% 100%;
601 520 box-sizing: border-box;
602 521 padding: clamp(0.6rem, 0.489rem + 1.05vw, 1rem);
  522 + background-color: white;
603 523  
604 524 .fleet-top-container {
605 525 display: flex;
... ... @@ -623,184 +543,12 @@ const handleGlobalInfo = (data, num) =&gt; {
623 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 548 .fleet-common-style:last-child {
778 549 margin-right: 0;
779 550 }
780 551 }
781   -
782 552 }
783 553 }
784 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>
... ...