guzijian / bsth-alcohol-sign-web · Commits

Commit 175ed2be0b894b68836261882380d1176a2812c6

Authored by guzijian
1 parent b6c75379

feat: 新增可视化大屏

Inline Side-by-side
Showing 14 changed files with 564 additions and 54 deletions
.env.staging
  View file @175ed2b
@@ -5,7 +5,7 @@ VITE_APP_TITLE = 酒精测试一体机管理系统 @@ -5,7 +5,7 @@ VITE_APP_TITLE = 酒精测试一体机管理系统
5 VITE_APP_ENV = 'staging' 5 VITE_APP_ENV = 'staging'
6 6
7 # 签到机系统/生产环境 7 # 签到机系统/生产环境
8 -VITE_APP_BASE_API = 'http://127.0.0.1:8080' 8 +VITE_APP_BASE_API = 'http://192.168.20.88:8080'
9 # VITE_APP_BASE_API = 'http://101.95.136.202:8100' 9 # VITE_APP_BASE_API = 'http://101.95.136.202:8100'
10 10
11 # 是否在打包时开启压缩，支持 gzip 和 brotli 11 # 是否在打包时开启压缩，支持 gzip 和 brotli
src/App.vue
  View file @175ed2b
@@ -3,8 +3,8 @@ @@ -3,8 +3,8 @@
3 </template> 3 </template>
4 4
5 <script setup> 5 <script setup>
6 -import useSettingsStore from '@/store/modules/settings'  
7 -import { handleThemeStyle } from '@/utils/theme' 6 +import useSettingsStore from '@/store/modules/settings';
  7 +import { handleThemeStyle } from '@/utils/theme';
8 8
9 onMounted(() => { 9 onMounted(() => {
10 nextTick(() => { 10 nextTick(() => {
src/assets/bigview/back.png 0 → 100644
View file @175ed2b

948 KB
src/assets/bigview/bottom-box-small.png 0 → 100644
View file @175ed2b

9.4 KB
src/assets/bigview/bottom-box.png 0 → 100644
View file @175ed2b

24.2 KB
src/assets/bigview/image-icon-1.png 0 → 100644
View file @175ed2b

6.68 KB
src/assets/bigview/image-icon-2.png 0 → 100644
View file @175ed2b

6.03 KB
src/assets/bigview/image-icon-3.png 0 → 100644
View file @175ed2b

6.06 KB
src/assets/bigview/image-icon-4.png 0 → 100644
View file @175ed2b

6.77 KB
src/assets/bigview/image-icon-5.png 0 → 100644
View file @175ed2b

6.3 KB
src/assets/bigview/image-icon-6.png 0 → 100644
View file @175ed2b

6.96 KB
src/assets/bigview/scroll-box.png 0 → 100644
View file @175ed2b

565 Bytes
src/assets/bigview/scroll-line.png 0 → 100644
View file @175ed2b

1.16 KB
src/views/index.vue
  View file @175ed2b
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <iframe :src="iframeUrl" width="90%" height="90%"></iframe>  
4 - <!-- 可视化大屏暂未开放 --> 3 + <!-- 可视化大屏 -->
  4 + <div class="box-view">
  5 + <!-- 标题 -->
  6 + <div class="big-view-container-title">
  7 + <div class="big-view-container-time">
  8 + <text>
  9 + 2023-10-09 星期一 12:00:00
  10 + </text>
  11 + </div>
  12 + </div>
  13 + <!-- 签到信息 -->
  14 + <div class="big-view-container-global-info common-style">
  15 + <div v-for=" (item, index) in globalInfoBoxList" :key="index" class="global-info-box">
  16 + <div class="global-info-box-container">
  17 + <div class="global-info-box-container-left">
  18 + <img :src="item.icon" />
  19 + </div>
  20 + <div class="global-info-box-container-right">
  21 + <div class="global-info-box-container-right-title">
  22 + {{ item.title }}
  23 + </div>
  24 + <div class="global-info-box-container-right-number">
  25 + {{ item.number }}
  26 + </div>
  27 + </div>
  28 + </div>
  29 + </div>
  30 + </div>
  31 + <!-- 信息提示 -->
  32 + <div class="big-view-container-prompt-info common-style">
  33 + <div class="prompt-info-left-box">
  34 + <div class="zone-left-prompt-info small-box">
  35 + <div class="label-box">
  36 + </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>
  53 + </div>
  54 + </div>
  55 + <div class="prompt-info-right-box">
  56 + <div class="first-right-prompt-info">
  57 + 数据更新时间：2023-10-19 11:55:00
  58 + </div>
  59 + <div class="second-right-prompt-info">
  60 + 更新倒计时：5:00
  61 + </div>
  62 + </div>
  63 + </div>
  64 + <!-- 主要内容 -->
  65 + <div class="big-view-container-main-content common-style">
  66 + <!-- 车队信息 -->
  67 + <div v-for="(item, index) in fleetInfoList" :key="index" class="fleet-common-style">
  68 + <div class="fleet-top-container">
  69 + <div class="fleet-top-box"></div>
  70 + <div class="fleet-top-title">{{ item.title }}</div>
  71 + </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">
  86 + </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>
  93 + </div>
  94 + </div>
  95 + </div>
  96 + </div>
  97 + </div>
  98 + </div>
  99 + </div>
5 </div> 100 </div>
6 </template> 101 </template>
7 102
8 <script setup name="Index"> 103 <script setup name="Index">
9 -import { getBigViewDataList } from "@/api/report/report.js";  
10 -import moment from "moment";  
11 -import { onMounted, ref } from "vue";  
12 -const iframeUrl = ref(import.meta.env.VITE_BIG_VIEW_URL)  
13 -// 创建一个对象保存日期  
14 -const date = ref("");  
15 -const qinpuMapDiv = ref(null);  
16 -const stakedLine = ref(null);  
17 -const loading = ref(false);  
18 -// 字体颜色为红色  
19 -const textColor = ref(["greenyellow", "red"]);  
20 -// 获取签到表单  
21 -const tableList = ref([]);  
22 -// 创建一个对象保存表单数据  
23 -const fromParams = ref({  
24 - lineCode: "",  
25 - jobCode: "",  
26 - dateRange: ""  
27 -});  
28 -  
29 -// 获取数据  
30 -const getData = () => {  
31 - loading.value = true;  
32 - getBigViewDataList({  
33 - jobCode: fromParams.value.jobCode,  
34 - date: fromParams.value.date ? fromParams.value.date : ""  
35 - }).then((res) => {  
36 - tableList.value = res.data  
37 - loading.value = false;  
38 - });  
39 -};  
40 -  
41 -// 创建一个方法  
42 -const handleDateChange = () => {  
43 -};  
44 -// 查询  
45 -const onQuery = () => {  
46 - getData();  
47 -}; 104 +import { onMounted } from 'vue';
  105 +
48 106
  107 +// 全局信息List
  108 +const globalInfoBoxList = ref(
  109 + [
  110 + {
  111 + title: "设备数",
  112 + icon: "/src/assets/bigview/image-icon-6.png",
  113 + number: 562
  114 + },
  115 + {
  116 + title: "线路数",
  117 + icon: "/src/assets/bigview/image-icon-1.png",
  118 + number: 562
  119 + },
  120 + {
  121 + title: "车辆数",
  122 + icon: "/src/assets/bigview/image-icon-2.png",
  123 + number: 562
  124 + },
  125 + {
  126 + title: "售票员签到",
  127 + icon: "/src/assets/bigview/image-icon-3.png",
  128 + number: 562
  129 + },
  130 + {
  131 + title: "驾驶员签到",
  132 + icon: "/src/assets/bigview/image-icon-4.png",
  133 + number: 562
  134 + },
  135 + {
  136 + title: "辅助人员签到",
  137 + icon: "/src/assets/bigview/image-icon-5.png",
  138 + number: 562
  139 + },
  140 + ]
  141 +)
  142 +// 车队信息List
  143 +const fleetInfoList = ref(
  144 + [
  145 + {
  146 + 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 + ]
  153 + },
  154 + {
  155 + 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 + ]
  165 + },
  166 + {
  167 + 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 + ]
  183 + }
  184 + ]
  185 +)
  186 +const lineBoxStyle = ref([{}])
  187 +// 元素信息
  188 +const fleetNbbmInfoContainer = ref(null);
49 onMounted(() => { 189 onMounted(() => {
50 - // 初始化折线图  
51 - // initLineChart();  
52 - // 初始化地图  
53 - // initQinPuMapData();  
54 - fromParams.value.date = moment().format("YYYY-MM-DD");  
55 - getData(); 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 + }
  207 + }
  208 + })
56 }) 209 })
57 </script> 210 </script>
58 211
59 <style scoped lang="scss"> 212 <style scoped lang="scss">
60 // 可视化大屏 213 // 可视化大屏
61 .app-container { 214 .app-container {
62 - width: 100vw;  
63 - height: 100vh;  
64 - // 整体蓝色背景  
65 - // background-image: url("@/assets/indexbg/page-bg.png"); 215 + width: 100%;
  216 + height: 91vh;
  217 + background-color: #081138;
  218 + padding: 0 !important;
  219 + box-sizing: border-box;
  220 +
  221 + // min-height: 900px;
  222 + // min-width: 1600px;
  223 + .box-view {
  224 + width: 100%;
  225 + height: 91vh;
  226 + // 整体蓝色背景
  227 + background-image: url("@/assets/bigview/back.png");
  228 + background-size: cover;
  229 + background-repeat: no-repeat;
  230 + background-position: cover;
  231 + color: whitesmoke;
  232 + box-sizing: border-box;
  233 + padding: 0 1.5vw 1.5vw 1.5vw;
  234 +
  235 + background-size: 100% 100%;
  236 + // min-height: 900px;
  237 + // min-width: 1600px;
  238 +
  239 + .common-style {
  240 + padding-top: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
  241 + box-sizing: border-box;
  242 + }
  243 +
  244 + // 标题
  245 + .big-view-container-title {
  246 + height: 6.5vh;
  247 + width: 100%;
  248 + font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
  249 + display: flex;
  250 + justify-content: flex-end;
  251 + align-items: center;
  252 + box-sizing: border-box;
  253 +
  254 + .big-view-container-time {
  255 + width: 100%;
  256 + height: 100%;
  257 + display: flex;
  258 + align-items: center;
  259 + justify-content: flex-end;
  260 + margin-top: 4vh;
  261 + box-sizing: border-box;
  262 + }
  263 + }
  264 +
  265 + // 全局信息
  266 + .big-view-container-global-info {
  267 + height: 11vh;
  268 + width: 100%;
  269 + font-size: clamp(0.3rem, -2.531rem + 19.69vw, 1.1rem);
  270 + display: flex;
  271 +
  272 + justify-content: center;
  273 + align-items: center;
  274 +
  275 + .global-info-box {
  276 + flex-grow: 1;
  277 + width: 100%;
  278 + height: 100%;
  279 + display: flex;
  280 + margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
  281 + background-image: url('@/assets/bigview/bottom-box-small.png');
  282 + background-repeat: no-repeat;
  283 + background-size: 100% 100%;
  284 + justify-content: center;
  285 + align-items: center;
  286 +
  287 + .global-info-box-container {
  288 + width: 100%;
  289 + height: 100%;
  290 + padding: clamp(0.3rem, 0.2rem + 0.5vw, 0.6rem);
  291 + display: flex;
  292 + justify-content: center;
  293 + align-items: center;
  294 +
  295 + .global-info-box-container-left {
  296 + // icon
  297 + flex-grow: 1;
  298 + width: 100%;
  299 + height: 100%;
  300 + display: flex;
  301 + align-items: center;
  302 + justify-content: flex-end;
  303 + box-sizing: border-box;
  304 + margin-right: clamp(0.3rem, 0.2rem + 0.5vw, 0.6rem);
  305 + }
  306 +
  307 + .global-info-box-container-left img {
  308 + height: clamp(4rem, 3.713rem + 2vw, 4.1rem);
  309 + width: clamp(4rem, 3.713rem + 2vw, 4.1rem);
  310 + }
  311 +
  312 + .global-info-box-container-right {
  313 + // icon
  314 + flex-grow: 1;
  315 + width: 100%;
  316 + height: clamp(4rem, 3.713rem + 2vw, 4.1rem);
  317 + display: flex;
  318 + flex-direction: column;
  319 + justify-content: space-between;
  320 +
  321 + .global-info-box-container-right-title {}
  322 +
  323 + .global-info-box-container-right-number {
  324 + font-weight: bold;
  325 + color: aqua;
  326 + }
  327 + }
  328 + }
  329 + }
  330 +
  331 + /* 取消最后一个盒子的右侧间距 */
  332 + .global-info-box:last-child {
  333 + margin-right: 0;
  334 + }
  335 + }
  336 +
  337 + // 提示信息
  338 + .big-view-container-prompt-info {
  339 + font-size: clamp(0.55rem, -0.425rem + 13vw, 1.2rem);
  340 + box-sizing: border-box;
  341 + width: 100%;
  342 + height: 4.5vh;
  343 + display: flex;
  344 + align-items: center;
  345 +
  346 + .prompt-info-left-box {
  347 + display: flex;
  348 + height: 100%;
  349 + width: 100%;
  350 + justify-content: flex-start;
  351 + align-items: center;
  352 +
  353 + .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 +
  371 + .second-left-prompt-info {
  372 + .label-box {
  373 + height: 100%;
  374 + 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);
  386 + }
  387 + }
  388 +
  389 + .small-box {
  390 + margin-right: 3vw;
  391 + width: 10vw;
  392 + height: 2vh;
  393 + box-sizing: border-box;
  394 + display: flex;
  395 + justify-content: flex-start;
  396 + align-items: center;
  397 +
  398 + .label-txt {}
  399 + }
  400 + }
  401 +
  402 + .prompt-info-right-box {
  403 + height: 100%;
  404 + width: 100%;
  405 + display: flex;
  406 + align-items: center;
  407 + justify-content: flex-end;
  408 +
  409 + .first-right-prompt-info {}
  410 +
  411 + .second-right-prompt-info {}
  412 + }
  413 + }
  414 +
  415 + // 主要内容
  416 + .big-view-container-main-content {
  417 + width: 100%;
  418 + height: calc(69vh - clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem) * 3);
  419 + display: flex;
  420 + font-size: clamp(0.6rem, -0.907rem + 5.71vw, 1.2rem);
  421 +
  422 + // 通用样式
  423 + .fleet-common-style {
  424 + flex-grow: 1;
  425 + width: 33.3%;
  426 + background-image: url("@/assets/bigview/bottom-box.png");
  427 + margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
  428 + background-size: 100% 100%;
  429 + box-sizing: border-box;
  430 + 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 +
  448 + .fleet-top-container {
  449 + display: flex;
  450 + box-sizing: border-box;
  451 + align-items: center;
  452 +
  453 +
  454 + .fleet-top-box {
  455 + height: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem);
  456 + width: clamp(0.5rem, -0.907rem + 5.71vw, 0.8rem);
  457 + display: flex;
  458 + justify-content: center;
  459 + align-items: center;
  460 + background-color: aqua;
  461 + margin-right: clamp(0.4rem, 0.489rem + 1.05vw, 0.7rem);
  462 + }
  463 +
  464 + .fleet-top-title {
  465 + display: flex;
  466 + justify-content: center;
  467 + align-items: center;
  468 + }
  469 + }
  470 +
  471 + // 线路信息
  472 + .fleet-line-info-container {
  473 + width: 100%;
  474 + height: auto;
  475 +
  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 +
  482 + .fleet-nbbm-info-container {
  483 + width: 100%;
  484 + 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 +
  490 + .fleet-nbbm-info-item {
  491 + // width: 6vw;
  492 + height: 2.4vh;
  493 + margin-right: 0.4vw;
  494 + box-sizing: border-box;
  495 + margin-top: 0.4vw;
  496 +
  497 + .fleet-nbbm-info-have-sale {
  498 + width: 100%;
  499 + height: 100%;
  500 + display: flex;
  501 + // justify-content: center;
  502 + // align-items: center;
  503 +
  504 + .fleet-nbbm-have-sale-driver {
  505 + background-color: #10A0DD;
  506 + border-radius: 1 solid #0761ba;
  507 + height: 100%;
  508 + width: 100%;
  509 + margin-right: 0.2vw;
  510 + position: relative;
  511 + display: flex;
  512 + align-items: center;
  513 + }
  514 +
  515 + .fleet-nbbm-have-sale-sale {
  516 + background-color: #10A0DD;
  517 + border-radius: 1 solid #0761ba;
  518 + width: 100%;
  519 + height: 100%;
  520 + }
  521 +
  522 + .fleet-nbbm-have-sale-txt-box {
  523 + position: relative;
  524 + display: flex;
  525 + justify-content: center;
  526 + align-items: center;
  527 +
  528 + .fleet-nbbm-have-sale-txt {
  529 + position: absolute;
  530 + width: auto;
  531 + white-space: nowrap;
  532 + padding-left: 0.5vw;
  533 + padding-right: 0.5vw;
  534 + /* 防止文字换行 */
  535 + }
  536 + }
  537 + }
  538 +
  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 + }
  559 + }
  560 + }
  561 +
  562 + .fleet-nbbm-info-item:last-child {
  563 + margin-right: 0;
  564 + }
  565 + }
  566 + }
  567 + }
  568 +
  569 + .fleet-common-style:last-child {
  570 + margin-right: 0;
  571 +
  572 + }
  573 + }
  574 +
  575 + }
66 } 576 }
67 </style> 577 </style>