guzijian / bsth-alcohol-sign-web · Commits

Commit c26d1528de0601d1ce0effbe08f27f18aad92946

Authored by guzijian
1 parent 0e6f4240

修改背景 ，修改排班

Inline Side-by-side
Showing 7 changed files with 371 additions and 284 deletions
src/assets/bigview/back.png
View file @c26d152

948 KB | W: | H:

580 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/components/FleetContentBox/index.vue 0 → 100644
  View file @c26d152
  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 +
  7 + <div class="fleet-line-title">
  8 + {{ childItem.lineName }}
  9 + </div>
  10 + <div class="line-box" style="height: 1px; margin: 5px; background-color: #0761ba;"></div>
  11 + <div ref="fleetNbbmInfoContainer" class="fleet-nbbm-info-container">
  12 + <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunItem.nbbm" class="fleet-nbbm-info-item">
  13 + <div v-if="sunItem.saleInfoVo != null" class="fleet-nbbm-info-have-sale">
  14 + <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName" :width="320"
  15 + :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">
  16 + <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
  17 + :currentDateKey="currentDateKey" :jobCode="sunItem.driverInfoVo.jobCode" />
  18 + <template #reference>
  19 + <div class="fleet-nbbm-have-sale-driver" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">
  20 + </div>
  21 + </template>
  22 + </el-popover>
  23 + <div class="fleet-nbbm-have-sale-txt-box">
  24 + <span class="fleet-nbbm-have-sale-txt">{{ sunItem.nbbm }}</span>
  25 + </div>
  26 + <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName" :width="320"
  27 + :show-after="200" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">
  28 + <ConstForm :showFlag="personSignInfo.jobCode == sunItem.saleInfoVo.jobCode" :currentDateKey="currentDateKey"
  29 + :jobCode="sunItem.saleInfoVo.jobCode" />
  30 + <template #reference>
  31 + <div class="fleet-nbbm-have-sale-sale" :style="signStyleColor[sunItem.saleInfoVo.signStatus]">
  32 + </div>
  33 + </template>
  34 + </el-popover>
  35 + </div>
  36 + <el-popover v-else :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)"
  37 + placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="320">
  38 + <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode" :currentDateKey="currentDateKey"
  39 + :jobCode="sunItem.driverInfoVo.jobCode" />
  40 + <template #reference>
  41 + <div class="fleet-nbbm-info-no-sale" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">
  42 + <span class="fleet-nbbm-info-no-sale-text">
  43 + {{ sunItem.nbbm }}
  44 + </span>
  45 + </div>
  46 + </template>
  47 + </el-popover>
  48 + </div>
  49 + </div>
  50 + </div>
  51 + <!-- </vue3-seamless-scroll> -->
  52 + </div>
  53 +</template>
  54 +<script setup>
  55 +import ConstForm from '@/components/ConstForm/index.vue';
  56 +import { nextTick, onMounted, ref } from 'vue';
  57 +const props = defineProps({
  58 + item: {
  59 + type: Object,
  60 + required: true
  61 + },
  62 + currentDateKey: {
  63 + type: String,
  64 + required: true
  65 + },
  66 + handleLoadSuccess: {
  67 + type: Function,
  68 + required: true
  69 + },
  70 + signStyleColor: {
  71 + type: Object,
  72 + required: true
  73 + }
  74 +})
  75 +
  76 +/** 签到信息 */
  77 +const personSignInfo = reactive(
  78 + {
  79 + jobCode: null,
  80 + date: null
  81 + }
  82 +);
  83 +// 控制滚动
  84 +const isScrolling = ref(false);
  85 +// 元素信息
  86 +const fleetNbbmInfoContainer = ref();
  87 +const fleetContentBox = ref()
  88 +/**
  89 + * 显示弹窗
  90 + * @param {*} val 工号
  91 + */
  92 +const alterEnterHandler = (val) => {
  93 + personSignInfo.jobCode = val;
  94 +}
  95 +
  96 +/**
  97 + * 处理容器滚动回调函数
  98 + * @param container HTML parent element
  99 + */
  100 +const handleContainerScrollCallBack = (container) => {
  101 + if (container.scrollHeight > container.clientHeight) {
  102 + // 内容溢出
  103 + isScrolling.value = true;
  104 + } else {
  105 + // 内容未溢出
  106 + isScrolling.value = false;
  107 + }
  108 + props.handleLoadSuccess(false);
  109 +}
  110 +
  111 +/**
  112 + * 鼠标滚轮触发了
  113 + * @param {*} el
  114 + */
  115 +const handleWheel = (el) => {
  116 + const containerElement = fleetContentBox.value;
  117 + // 内容溢出
  118 + if (containerElement.scrollHeight > containerElement.clientHeight) {
  119 + // el.preventDefault();
  120 + // 根据滚轮滚动的距离来计算滚动量
  121 + const scrollAmount = el.deltaY > 0 ? 100 : -100;
  122 +
  123 + // 修改盒子的滚动位置
  124 + containerElement.scrollTop += scrollAmount;
  125 +
  126 + }
  127 +
  128 +}
  129 +
  130 +onMounted(() => {
  131 + // 处理容器滚动
  132 + // nextTick(() => {
  133 + // if (containerElement != null) {
  134 + // // containerElement.forEach((el) => {
  135 + // // const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;
  136 + // // if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {
  137 + // // const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;
  138 + // // // 有售票员
  139 + // // for (let index = 0; index < el.children.length; index++) {
  140 + // // const element = el.children[index];
  141 + // // element.style.width = `${textWidth}px`;
  142 + // // }
  143 + // // // 无售票员
  144 + // // } else {
  145 + // // const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;
  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 + // // })
  152 + // loading.value = false;
  153 + // } else {
  154 +
  155 + // }
  156 + // })
  157 + nextTick(() => {
  158 + const containerElement = fleetContentBox.value;
  159 + handleContainerScrollCallBack(containerElement);
  160 + })
  161 +})
  162 +
  163 +</script>
  164 +
  165 +<style lang="scss" scoped>
  166 +.fleet-content-box {
  167 + height: calc(100% - clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem));
  168 + width: auto;
  169 + // overflow-y: hidden;
  170 + // overflow-x: hidden;
  171 + overflow: hidden;
  172 +
  173 + .scrolling {
  174 + animation: scroll 5s linear infinite;
  175 + }
  176 +
  177 + @keyframes scroll {
  178 + 0% {
  179 + transform: translateY(0);
  180 + }
  181 +
  182 + 100% {
  183 + transform: translateY(-100%);
  184 + }
  185 + }
  186 +
  187 + // 线路信息
  188 + .fleet-line-info-container {
  189 + width: 100%;
  190 + height: auto;
  191 +
  192 + .fleet-line-title {
  193 + margin-top: clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem);
  194 + margin-bottom: calc(clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) - 0.4vw);
  195 + box-sizing: border-box;
  196 + font-weight: bold;
  197 + }
  198 +
  199 + .fleet-nbbm-info-container {
  200 + width: 100%;
  201 + height: auto;
  202 + box-sizing: border-box;
  203 + display: flex;
  204 + flex-wrap: wrap;
  205 + justify-content: space-between;
  206 + // justify-content: flex-start;
  207 + font-size: 0.8vw;
  208 +
  209 + .fleet-nbbm-info-item {
  210 + width: 6vw;
  211 + height: 2.4vh;
  212 + box-sizing: border-box;
  213 + margin-top: 0.4vw;
  214 + // margin-right: 0.4vw;
  215 + color: white;
  216 +
  217 + .fleet-nbbm-info-have-sale {
  218 + width: 100%;
  219 + height: 100%;
  220 + display: flex;
  221 +
  222 + .fleet-nbbm-have-sale-driver {
  223 + border-radius: 1 solid #0761ba;
  224 + height: 100%;
  225 + width: 100%;
  226 + margin-right: 0.2vw;
  227 + position: relative;
  228 + display: flex;
  229 + align-items: center;
  230 + }
  231 +
  232 + .fleet-nbbm-have-sale-sale {
  233 + border-radius: 1 solid #0761ba;
  234 + width: 100%;
  235 + height: 100%;
  236 + }
  237 +
  238 + .fleet-nbbm-have-sale-txt-box {
  239 + position: relative;
  240 + display: flex;
  241 + justify-content: center;
  242 + align-items: center;
  243 +
  244 + .fleet-nbbm-have-sale-txt {
  245 + position: absolute;
  246 + width: auto;
  247 + /* 防止文字换行 */
  248 + white-space: nowrap;
  249 +
  250 + padding-left: 0.5vw;
  251 + padding-right: 0.5vw;
  252 + /** 防止元素遮挡 */
  253 + pointer-events: none;
  254 + }
  255 + }
  256 + }
  257 +
  258 + .fleet-nbbm-info-no-sale {
  259 + width: 100%;
  260 + height: 100%;
  261 + border-radius: 1 solid #0761ba;
  262 + position: relative;
  263 + display: flex;
  264 + justify-content: center;
  265 + align-items: center;
  266 + box-sizing: border-box;
  267 +
  268 + /* 防止文字换行 */
  269 + .fleet-nbbm-info-no-sale-text {
  270 + position: absolute;
  271 + width: auto;
  272 + white-space: nowrap;
  273 + padding-left: 0.5vw;
  274 + padding-right: 0.5vw;
  275 + /* 防止文字换行 */
  276 + }
  277 + }
  278 + }
  279 + }
  280 +
  281 +
  282 +
  283 +
  284 + }
  285 +}
  286 +
  287 +
  288 +
  289 +/* 定义滚动条样式 */
  290 +.fleet-content-box::-webkit-scrollbar {
  291 + width: 6px;
  292 + height: 6px;
  293 +}
  294 +
  295 +/*定义滑块 内阴影+圆角*/
  296 +.fleet-content-box::-webkit-scrollbar-thumb {
  297 + border-radius: 6px;
  298 + // box-shadow: inset 0 0 0px rgba(237, 44, 37, .5);
  299 + background-color: #01366c;
  300 + background-image: url('../assets/bigview/scroll-box.png');
  301 +}
  302 +
  303 +/* 设置滚动条拖拽按钮的样式 */
  304 +.fleet-content-box::-webkit-scrollbar-thumb:vertical {
  305 + background-color: #0761ba;
  306 + /* 背景图片的尺寸适应滑块 */
  307 + background-size: cover;
  308 +}
  309 +
  310 +.fleet-content-box::-webkit-scrollbar-button {
  311 + display: none;
  312 +}
  313 +
  314 +/*定义滚动条轨道 内阴影+圆角*/
  315 +.fleet-content-box::-webkit-scrollbar-track {
  316 + box-shadow: inset 0 0 0px #01DEDD;
  317 + border-radius: 6px;
  318 + background-color: #121622;
  319 +}
  320 +</style>
  321 +<style>
  322 +.fleet-popover-style {
  323 + color: white !important;
  324 + margin: 10px 0 10px 0;
  325 + min-width: 100px;
  326 +}
  327 +
  328 +.el-popover.fleet-popover-style {
  329 + border-color: #146EBD;
  330 + background-color: #062a5ac5;
  331 +}
  332 +
  333 +.fleet-popover-style .el-popover__title {
  334 + color: #FFFFF0;
  335 + font-weight: bold;
  336 +}
  337 +
  338 +.el-popper[data-popper-placement^=top]>.el-popper__arrow::before {
  339 + border-top-color: #062a5ac5 !important;
  340 + background-color: #062a5ac5 !important;
  341 +}
  342 +</style>
src/views/equipment/equipment/index.vue
  View file @c26d152
@@ -44,7 +44,8 @@ @@ -44,7 +44,8 @@
44 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> 44 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
45 </el-row> 45 </el-row>
46 46
47 - <el-table border height="600" v-loading="loading" :data="equipmentList" @selection-change="handleSelectionChange"> 47 + <el-table border max-height="600px" v-loading="loading" :data="equipmentList"
  48 + @selection-change="handleSelectionChange">
48 <el-table-column label="序号" type="index" width="50" align="center"> 49 <el-table-column label="序号" type="index" width="50" align="center">
49 <template #default="scope"> 50 <template #default="scope">
50 {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }} 51 {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
src/views/expand/expand/index.vue
  View file @c26d152
@@ -28,7 +28,7 @@ @@ -28,7 +28,7 @@
28 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> 28 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
29 </el-row> 29 </el-row>
30 30
31 - <el-table v-loading="loading" border :data="expandList" @selection-change="handleSelectionChange"> 31 + <el-table max-height="600px" v-loading="loading" border :data="expandList" @selection-change="handleSelectionChange">
32 <el-table-column type="selection" width="55" align="center" /> 32 <el-table-column type="selection" width="55" align="center" />
33 <el-table-column label="驾驶员" align="center" prop="master" width="120" /> 33 <el-table-column label="驾驶员" align="center" prop="master" width="120" />
34 <el-table-column label="跟班人" align="center" prop="slave" width="120" /> 34 <el-table-column label="跟班人" align="center" prop="slave" width="120" />
src/views/home/index.vue
  View file @c26d152
@@ -59,56 +59,8 @@ @@ -59,56 +59,8 @@
59 <div class="fleet-top-title">{{ item.title }}</div> 59 <div class="fleet-top-title">{{ item.title }}</div>
60 </div> 60 </div>
61 <!-- 内容盒子 --> 61 <!-- 内容盒子 -->
62 - <div ref="fleetContentBox" class="fleet-content-box">  
63 - <!-- <vue3-seamless-scroll :list="item.fleetInfos" :step="1" :hoverStop="true" :hover="true"> -->  
64 - <!-- 线路信息 -->  
65 - <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childItem.lineName"  
66 - class="fleet-line-info-container">  
67 - <div class="fleet-line-title">  
68 - {{ childItem.lineName }}  
69 - </div>  
70 - <div ref="fleetNbbmInfoContainer" class="fleet-nbbm-info-container">  
71 - <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunItem.nbbm" class="fleet-nbbm-info-item">  
72 - <div v-if="sunItem.saleInfoVo != null" class="fleet-nbbm-info-have-sale">  
73 - <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"  
74 - :width="320" :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">  
75 - <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"  
76 - :currentDateKey="currentDateKey" :jobCode="sunItem.driverInfoVo.jobCode" />  
77 - <template #reference>  
78 - <div class="fleet-nbbm-have-sale-driver" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">  
79 - </div>  
80 - </template>  
81 - </el-popover>  
82 - <div class="fleet-nbbm-have-sale-txt-box">  
83 - <span class="fleet-nbbm-have-sale-txt">{{ sunItem.nbbm }}</span>  
84 - </div>  
85 - <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"  
86 - :width="320" :show-after="200" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">  
87 - <ConstForm :showFlag="personSignInfo.jobCode == sunItem.saleInfoVo.jobCode"  
88 - :currentDateKey="currentDateKey" :jobCode="sunItem.saleInfoVo.jobCode" />  
89 - <template #reference>  
90 - <div class="fleet-nbbm-have-sale-sale" :style="signStyleColor[sunItem.saleInfoVo.signStatus]">  
91 - </div>  
92 - </template>  
93 - </el-popover>  
94 - </div>  
95 - <el-popover v-else :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)"  
96 - placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="320">  
97 - <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"  
98 - :currentDateKey="currentDateKey" :jobCode="sunItem.driverInfoVo.jobCode" />  
99 - <template #reference>  
100 - <div class="fleet-nbbm-info-no-sale" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">  
101 - <span class="fleet-nbbm-info-no-sale-text">  
102 - {{ sunItem.nbbm }}  
103 - </span>  
104 - </div>  
105 - </template>  
106 - </el-popover>  
107 - </div>  
108 - </div>  
109 - </div>  
110 - <!-- </vue3-seamless-scroll> -->  
111 - </div> 62 + <FleetContentBox :handleLoadSuccess="handleLoadSuccess" :signStyleColor="signStyleColor"
  63 + :currentDateKey="currentDateKey" :item="item" />
112 </div> 64 </div>
113 </div> 65 </div>
114 </div> 66 </div>
@@ -117,10 +69,10 @@ @@ -117,10 +69,10 @@
117 69
118 <script setup name="Index"> 70 <script setup name="Index">
119 import { queryLineInfo, querySignInfoByType } from '@/api/big_view/big_view.js'; 71 import { queryLineInfo, querySignInfoByType } from '@/api/big_view/big_view.js';
120 -import ConstForm from '@/components/ConstForm/index.vue'; 72 +import FleetContentBox from '@/components/FleetContentBox/index.vue';
121 import getWeek from "@/utils/dateUtils.js"; 73 import getWeek from "@/utils/dateUtils.js";
122 import moment from 'moment'; 74 import moment from 'moment';
123 -import { nextTick, onMounted, reactive, watch } from 'vue'; 75 +import { onMounted, reactive, ref, watch } from 'vue';
124 import { CountTo } from 'vue3-count-to'; 76 import { CountTo } from 'vue3-count-to';
125 // 图片信息 直接写路径会有问题 打包的时候vite构建会导出路径找不到 77 // 图片信息 直接写路径会有问题 打包的时候vite构建会导出路径找不到
126 import icon2 from "../../assets/bigview/image-icon-1.png"; 78 import icon2 from "../../assets/bigview/image-icon-1.png";
@@ -129,16 +81,10 @@ import icon4 from &quot;../../assets/bigview/image-icon-3.png&quot;; @@ -129,16 +81,10 @@ import icon4 from &quot;../../assets/bigview/image-icon-3.png&quot;;
129 import icon5 from "../../assets/bigview/image-icon-4.png"; 81 import icon5 from "../../assets/bigview/image-icon-4.png";
130 import icon6 from "../../assets/bigview/image-icon-5.png"; 82 import icon6 from "../../assets/bigview/image-icon-5.png";
131 import icon1 from "../../assets/bigview/image-icon-6.png"; 83 import icon1 from "../../assets/bigview/image-icon-6.png";
132 -const fleetContentBox = ref() 84 +
133 const currentDateKey = ref(); 85 const currentDateKey = ref();
134 const loading = ref(true); 86 const loading = ref(true);
135 -/** 签到信息 */  
136 -const personSignInfo = reactive(  
137 - {  
138 - jobCode: null,  
139 - date: null  
140 - }  
141 -); 87 +
142 /** 定时更新对象 */ 88 /** 定时更新对象 */
143 const timeTaskObject = reactive( 89 const timeTaskObject = reactive(
144 { 90 {
@@ -228,32 +174,14 @@ const signStyleColor = ref( @@ -228,32 +174,14 @@ const signStyleColor = ref(
228 ) 174 )
229 175
230 // 车队信息List 176 // 车队信息List
231 -const fleetInfoList = ref(  
232 - [  
233 - {  
234 - title: "一车队",  
235 - fleetInfos: []  
236 - },  
237 - {  
238 - title: "二车队",  
239 - fleetInfos: []  
240 - },  
241 - {  
242 - title: "三车队",  
243 - fleetInfos: []  
244 - }  
245 - ]  
246 -) 177 +const fleetInfoList = ref()
247 178
248 // 元素信息 179 // 元素信息
249 -const fleetNbbmInfoContainer = ref(null);  
250 const scrollNumber = ref(null); 180 const scrollNumber = ref(null);
251 -// 计算宽度初始化数据 181 +// 初始化数据
252 onMounted(() => { 182 onMounted(() => {
253 -  
254 timeTask.titleNowDateTimer = startUpdateNowDateTimerTaskScheduler(); 183 timeTask.titleNowDateTimer = startUpdateNowDateTimerTaskScheduler();
255 timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler(); 184 timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler();
256 -  
257 const currentTime = moment().format('HH:mm'); 185 const currentTime = moment().format('HH:mm');
258 let dateKey; 186 let dateKey;
259 if (currentTime < '03:00') { 187 if (currentTime < '03:00') {
@@ -261,7 +189,6 @@ onMounted(() =&gt; { @@ -261,7 +189,6 @@ onMounted(() =&gt; {
261 } else { 189 } else {
262 dateKey = moment().format("YYYY-MM-DD"); 190 dateKey = moment().format("YYYY-MM-DD");
263 } 191 }
264 - console.log();  
265 currentDateKey.value = dateKey; 192 currentDateKey.value = dateKey;
266 handleUpdateDataRequest(currentDateKey.value); 193 handleUpdateDataRequest(currentDateKey.value);
267 194
@@ -316,13 +243,7 @@ const startUpdateDataTaskScheduler = () =&gt; { @@ -316,13 +243,7 @@ const startUpdateDataTaskScheduler = () =&gt; {
316 }, 1000); 243 }, 1000);
317 } 244 }
318 245
319 -/**  
320 - * 显示弹窗  
321 - * @param {*} val 工号  
322 - */  
323 -const alterEnterHandler = (val, el) => {  
324 - personSignInfo.jobCode = val;  
325 -} 246 +
326 247
327 /** 监听数据更新日期 */ 248 /** 监听数据更新日期 */
328 watch(timeTaskObject.updateDateObject, (val1, val2) => { 249 watch(timeTaskObject.updateDateObject, (val1, val2) => {
@@ -372,40 +293,21 @@ const handleUpdateDataRequest = (dateKey) =&gt; { @@ -372,40 +293,21 @@ const handleUpdateDataRequest = (dateKey) =&gt; {
372 //获取车队 293 //获取车队
373 queryLineInfo(dateKey).then(res => { 294 queryLineInfo(dateKey).then(res => {
374 fleetInfoList.value = res.data 295 fleetInfoList.value = res.data
375 - nextTick(() => {  
376 - const containerElement = fleetNbbmInfoContainer.value;  
377 - if (containerElement != null) {  
378 - // containerElement.forEach((el) => {  
379 - // const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;  
380 - // if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {  
381 - // const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;  
382 - // // 有售票员  
383 - // for (let index = 0; index < el.children.length; index++) {  
384 - // const element = el.children[index];  
385 - // element.style.width = `${textWidth}px`;  
386 - // }  
387 - // // 无售票员  
388 - // } else {  
389 - // const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;  
390 - // for (let index = 0; index < el.children.length; index++) {  
391 - // const element = el.children[index];  
392 - // element.style.width = `${textWidth}px`;  
393 - // }  
394 - // }  
395 - // })  
396 - loading.value = false;  
397 - } else {  
398 - loading.value = false;  
399 - }  
400 - })  
401 }) 296 })
402 } 297 }
403 298
  299 +/**
  300 + * 处理加载过程 组件加载完成回调
  301 + * @param {*} val boolean
  302 + */
  303 +const handleLoadSuccess = (val) => {
  304 + loading.value = val;
  305 +}
  306 +
404 const handleGlobalInfo = (data, num) => { 307 const handleGlobalInfo = (data, num) => {
405 globalInfoBoxList[num].startNumber = globalInfoBoxList[num].endNumber; 308 globalInfoBoxList[num].startNumber = globalInfoBoxList[num].endNumber;
406 globalInfoBoxList[num].endNumber = data.nowNumber; 309 globalInfoBoxList[num].endNumber = data.nowNumber;
407 globalInfoBoxList[num].allNumber = data.allNumber; 310 globalInfoBoxList[num].allNumber = data.allNumber;
408 -  
409 } 311 }
410 </script> 312 </script>
411 313
@@ -633,141 +535,6 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -633,141 +535,6 @@ const handleGlobalInfo = (data, num) =&gt; {
633 } 535 }
634 } 536 }
635 537
636 - .fleet-content-box {  
637 - height: calc(100% - clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem));  
638 - width: 100%;  
639 - // overflow-y: hidden;  
640 - // overflow-x: hidden;  
641 - overflow: auto;  
642 -  
643 - // 线路信息  
644 - .fleet-line-info-container {  
645 - width: 100%;  
646 - height: auto;  
647 -  
648 - .fleet-line-title {  
649 - margin-top: clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem);  
650 - margin-bottom: calc(clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) - 0.4vw);  
651 - box-sizing: border-box;  
652 - font-weight: bold;  
653 - }  
654 -  
655 - .fleet-nbbm-info-container {  
656 - width: 100%;  
657 - height: auto;  
658 - box-sizing: border-box;  
659 - display: flex;  
660 - flex-wrap: wrap;  
661 - justify-content: space-between;  
662 - justify-content: flex-start;  
663 - font-size: 0.8vw;  
664 -  
665 - .fleet-nbbm-info-item {  
666 - width: 6vw;  
667 - height: 2.4vh;  
668 - box-sizing: border-box;  
669 - margin-top: 0.4vw;  
670 - margin-right: 0.4vw;  
671 - color: white;  
672 -  
673 - .fleet-nbbm-info-have-sale {  
674 - width: 100%;  
675 - height: 100%;  
676 - display: flex;  
677 -  
678 - .fleet-nbbm-have-sale-driver {  
679 - border-radius: 1 solid #0761ba;  
680 - height: 100%;  
681 - width: 100%;  
682 - margin-right: 0.2vw;  
683 - position: relative;  
684 - display: flex;  
685 - align-items: center;  
686 - }  
687 -  
688 - .fleet-nbbm-have-sale-sale {  
689 - border-radius: 1 solid #0761ba;  
690 - width: 100%;  
691 - height: 100%;  
692 - }  
693 -  
694 - .fleet-nbbm-have-sale-txt-box {  
695 - position: relative;  
696 - display: flex;  
697 - justify-content: center;  
698 - align-items: center;  
699 -  
700 - .fleet-nbbm-have-sale-txt {  
701 - position: absolute;  
702 - width: auto;  
703 - /* 防止文字换行 */  
704 - white-space: nowrap;  
705 -  
706 - padding-left: 0.5vw;  
707 - padding-right: 0.5vw;  
708 - /** 防止元素遮挡 */  
709 - pointer-events: none;  
710 - }  
711 - }  
712 - }  
713 -  
714 - .fleet-nbbm-info-no-sale {  
715 - width: 100%;  
716 - height: 100%;  
717 - border-radius: 1 solid #0761ba;  
718 - position: relative;  
719 - display: flex;  
720 - justify-content: center;  
721 - align-items: center;  
722 - box-sizing: border-box;  
723 -  
724 - /* 防止文字换行 */  
725 - .fleet-nbbm-info-no-sale-text {  
726 - position: absolute;  
727 - width: auto;  
728 - white-space: nowrap;  
729 - padding-left: 0.5vw;  
730 - padding-right: 0.5vw;  
731 - /* 防止文字换行 */  
732 - }  
733 - }  
734 - }  
735 - }  
736 - }  
737 - }  
738 -  
739 - /* 定义滚动条样式 */  
740 - .fleet-content-box::-webkit-scrollbar {  
741 - width: 6px;  
742 - height: 6px;  
743 - }  
744 -  
745 - /*定义滑块 内阴影+圆角*/  
746 - .fleet-content-box::-webkit-scrollbar-thumb {  
747 - border-radius: 6px;  
748 - // box-shadow: inset 0 0 0px rgba(237, 44, 37, .5);  
749 - background-color: #01366c;  
750 - background-image: url('../assets/bigview/scroll-box.png');  
751 - }  
752 -  
753 - /* 设置滚动条拖拽按钮的样式 */  
754 - .fleet-content-box::-webkit-scrollbar-thumb:vertical {  
755 - background-image: url('../assets/bigview/scroll-box.png');  
756 - background-color: #0761ba;  
757 - /* 背景图片的尺寸适应滑块 */  
758 - background-size: cover;  
759 - }  
760 -  
761 - .fleet-content-box::-webkit-scrollbar-button {  
762 - display: none;  
763 - }  
764 -  
765 - /*定义滚动条轨道 内阴影+圆角*/  
766 - .fleet-content-box::-webkit-scrollbar-track {  
767 - box-shadow: inset 0 0 0px #01DEDD;  
768 - border-radius: 6px;  
769 - background-color: #121622;  
770 - }  
771 538
772 539
773 } 540 }
@@ -776,29 +543,6 @@ const handleGlobalInfo = (data, num) =&gt; { @@ -776,29 +543,6 @@ const handleGlobalInfo = (data, num) =&gt; {
776 margin-right: 0; 543 margin-right: 0;
777 } 544 }
778 } 545 }
779 -  
780 } 546 }
781 } 547 }
782 </style> 548 </style>
783 -<style>  
784 -.fleet-popover-style {  
785 - color: white !important;  
786 - margin: 10px 0 10px 0;  
787 - min-width: 100px;  
788 -}  
789 -  
790 -.el-popover.fleet-popover-style {  
791 - border-color: #146EBD;  
792 - background-color: #062a5ac5;  
793 -}  
794 -  
795 -.fleet-popover-style .el-popover__title {  
796 - color: #FFFFF0;  
797 - font-weight: bold;  
798 -}  
799 -  
800 -.el-popper[data-popper-placement^=top]>.el-popper__arrow::before {  
801 - border-top-color: #062a5ac5 !important;  
802 - background-color: #062a5ac5 !important;  
803 -}  
804 -</style>  
src/views/main/main/index.vue
  View file @c26d152
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> 24 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
25 </el-row> 25 </el-row>
26 26
27 - <el-table border v-loading="loading" :data="mainList" @selection-change="handleSelectionChange"> 27 + <el-table max-height="600px" border v-loading="loading" :data="mainList" @selection-change="handleSelectionChange">
28 <el-table-column label="工号" align="center" prop="jobCode" /> 28 <el-table-column label="工号" align="center" prop="jobCode" />
29 <el-table-column label="姓名" align="center" prop="name" /> 29 <el-table-column label="姓名" align="center" prop="name" />
30 <el-table-column label="是否工作" align="center" prop="workFlag"> 30 <el-table-column label="是否工作" align="center" prop="workFlag">
src/views/num/num/index.vue
  View file @c26d152
@@ -40,7 +40,7 @@ @@ -40,7 +40,7 @@
40 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> 40 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
41 </el-row> 41 </el-row>
42 42
43 - <el-table border v-loading="loading" :data="numList" @selection-change="handleSelectionChange"> 43 + <el-table max-height="600px" border v-loading="loading" :data="numList" @selection-change="handleSelectionChange">
44 <el-table-column type="selection" width="55" align="center" /> 44 <el-table-column type="selection" width="55" align="center" />
45 <el-table-column label="班型名称" align="center" prop="ruleDictName" /> 45 <el-table-column label="班型名称" align="center" prop="ruleDictName" />
46 <el-table-column label="班次类型" align="center" prop="ruleType"> 46 <el-table-column label="班次类型" align="center" prop="ruleType">
@@ -232,14 +232,14 @@ function handleDelete(row) { @@ -232,14 +232,14 @@ function handleDelete(row) {
232 232
233 proxy.$modal.msgSuccess("班型删除功能暂时禁用"); 233 proxy.$modal.msgSuccess("班型删除功能暂时禁用");
234 let result = false; 234 let result = false;
235 - if (result){ 235 + if (result) {
236 const _ids = row.id || ids.value; 236 const _ids = row.id || ids.value;
237 - proxy.$modal.confirm('是否确认删除班次管理编号为"' + _ids + '"的数据项？').then(function () {  
238 - return delNum(_ids);  
239 - }).then(() => {  
240 - getList();  
241 - proxy.$modal.msgSuccess("删除成功");  
242 - }).catch(() => { }); 237 + proxy.$modal.confirm('是否确认删除班次管理编号为"' + _ids + '"的数据项？').then(function () {
  238 + return delNum(_ids);
  239 + }).then(() => {
  240 + getList();
  241 + proxy.$modal.msgSuccess("删除成功");
  242 + }).catch(() => { });
243 } 243 }
244 244
245 } 245 }