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 32 "vue": "3.2.45",
33 33 "vue-cropper": "1.0.3",
34 34 "vue-router": "4.1.4",
  35 + "vue3-count-to": "^1.1.2",
35 36 "vue3-seamless-scroll": "^2.0.1"
36 37 },
37 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 70 app.use(plugins)
71 71 app.use(elementIcons)
72 72 app.component('svg-icon', SvgIcon)
73   -
74 73 directive(app)
75 74  
76 75 // 使用element-plus 并且设置全局的大小
... ...
src/router/index.js
  View file @95634ee
... ... @@ -69,7 +69,7 @@ export const constantRoutes = [
69 69 children: [
70 70 {
71 71 path: '/index',
72   - component: () => import('@/views/index'),
  72 + component: () => import('@/views/home/index'),
73 73 name: 'Index',
74 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 6 <div class="big-view-container-title">
7 7 <div class="big-view-container-time">
8 8 <text>
9   - 2023-10-09 星期一 12:00:00
  9 + {{ timeTaskObject.titleNowDateObject }}
10 10 </text>
11 11 </div>
12 12 </div>
... ... @@ -22,7 +22,8 @@
22 22 {{ item.title }}
23 23 </div>
24 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 27 </div>
27 28 </div>
28 29 </div>
... ... @@ -31,65 +32,74 @@
31 32 <!-- 信息提示 -->
32 33 <div class="big-view-container-prompt-info common-style">
33 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 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 39 </div>
54 40 </div>
55 41 <div class="prompt-info-right-box">
56 42 <div class="first-right-prompt-info">
57   - 数据更新时间：2023-10-19 11:55:00
  43 + 数据更新时间：{{ timeTaskObject.updateDateObject }}
58 44 </div>
59 45 <div class="second-right-prompt-info">
60   - 更新倒计时：5:00
  46 + &nbsp;&nbsp;更新倒计时：{{ timeTaskObject.updateDateSchedulerObject }}
61 47 </div>
62 48 </div>
63 49 </div>
64 50 <!-- 主要内容 -->
65 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 55 <div class="fleet-top-container">
69 56 <div class="fleet-top-box"></div>
70 57 <div class="fleet-top-title">{{ item.title }}</div>
71 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 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 103 </div>
94 104 </div>
95 105 </div>
... ... @@ -101,112 +111,278 @@
101 111 </template>
102 112  
103 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 154 // 全局信息List
108   -const globalInfoBoxList = ref(
  155 +const globalInfoBoxList = reactive(
109 156 [
110 157 {
111 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 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 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 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 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 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 217 // 车队信息List
143 218 const fleetInfoList = ref(
144 219 [
145 220 {
146 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 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 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 236 const fleetNbbmInfoContainer = ref(null);
  237 +const scrollNumber = ref(null);
  238 +// 计算宽度初始化数据
189 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 386 </script>
211 387  
212 388 <style scoped lang="scss">
... ... @@ -317,8 +493,11 @@ onMounted(() =&gt; {
317 493 display: flex;
318 494 flex-direction: column;
319 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 502 .global-info-box-container-right-number {
324 503 font-weight: bold;
... ... @@ -336,7 +515,7 @@ onMounted(() =&gt; {
336 515  
337 516 // 提示信息
338 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 519 box-sizing: border-box;
341 520 width: 100%;
342 521 height: 4.5vh;
... ... @@ -351,38 +530,11 @@ onMounted(() =&gt; {
351 530 align-items: center;
352 531  
353 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 534 .label-box {
373 535 height: 100%;
374 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 547 justify-content: flex-start;
396 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 561 align-items: center;
407 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 587 background-size: 100% 100%;
429 588 box-sizing: border-box;
430 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 591 .fleet-top-container {
449 592 display: flex;
450 593 box-sizing: border-box;
451 594 align-items: center;
452 595  
453   -
454 596 .fleet-top-box {
455 597 height: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem);
456 598 width: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem);
... ... @@ -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 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 622 width: 100%;
484 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 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 648 width: 100%;
509   - margin-right: 0.2vw;
510   - position: relative;
  649 + height: 100%;
511 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 688 width: 100%;
519 689 height: 100%;
520   - }
521   -
522   - .fleet-nbbm-have-sale-txt-box {
  690 + border-radius: 1 solid #0761ba;
523 691 position: relative;
524 692 display: flex;
525 693 justify-content: center;
526 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 699 position: absolute;
530 700 width: auto;
531 701 white-space: nowrap;
... ... @@ -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 752 .fleet-common-style:last-child {
570 753 margin-right: 0;
571   -
572 754 }
573 755 }
574 756  
575 757 }
576 758 }
577 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>
... ...