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 44 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
45 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 49 <el-table-column label="序号" type="index" width="50" align="center">
49 50 <template #default="scope">
50 51 {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
... ...
src/views/expand/expand/index.vue
  View file @c26d152
... ... @@ -28,7 +28,7 @@
28 28 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
29 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 32 <el-table-column type="selection" width="55" align="center" />
33 33 <el-table-column label="驾驶员" align="center" prop="master" width="120" />
34 34 <el-table-column label="跟班人" align="center" prop="slave" width="120" />
... ...
src/views/home/index.vue
  View file @c26d152
... ... @@ -59,56 +59,8 @@
59 59 <div class="fleet-top-title">{{ item.title }}</div>
60 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 64 </div>
113 65 </div>
114 66 </div>
... ... @@ -117,10 +69,10 @@
117 69  
118 70 <script setup name="Index">
119 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 73 import getWeek from "@/utils/dateUtils.js";
122 74 import moment from 'moment';
123   -import { nextTick, onMounted, reactive, watch } from 'vue';
  75 +import { onMounted, reactive, ref, watch } from 'vue';
124 76 import { CountTo } from 'vue3-count-to';
125 77 // 图片信息 直接写路径会有问题 打包的时候vite构建会导出路径找不到
126 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 81 import icon5 from "../../assets/bigview/image-icon-4.png";
130 82 import icon6 from "../../assets/bigview/image-icon-5.png";
131 83 import icon1 from "../../assets/bigview/image-icon-6.png";
132   -const fleetContentBox = ref()
  84 +
133 85 const currentDateKey = ref();
134 86 const loading = ref(true);
135   -/** 签到信息 */
136   -const personSignInfo = reactive(
137   - {
138   - jobCode: null,
139   - date: null
140   - }
141   -);
  87 +
142 88 /** 定时更新对象 */
143 89 const timeTaskObject = reactive(
144 90 {
... ... @@ -228,32 +174,14 @@ const signStyleColor = ref(
228 174 )
229 175  
230 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 180 const scrollNumber = ref(null);
251   -// 计算宽度初始化数据
  181 +// 初始化数据
252 182 onMounted(() => {
253   -
254 183 timeTask.titleNowDateTimer = startUpdateNowDateTimerTaskScheduler();
255 184 timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler();
256   -
257 185 const currentTime = moment().format('HH:mm');
258 186 let dateKey;
259 187 if (currentTime < '03:00') {
... ... @@ -261,7 +189,6 @@ onMounted(() =&gt; {
261 189 } else {
262 190 dateKey = moment().format("YYYY-MM-DD");
263 191 }
264   - console.log();
265 192 currentDateKey.value = dateKey;
266 193 handleUpdateDataRequest(currentDateKey.value);
267 194  
... ... @@ -316,13 +243,7 @@ const startUpdateDataTaskScheduler = () =&gt; {
316 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 249 watch(timeTaskObject.updateDateObject, (val1, val2) => {
... ... @@ -372,40 +293,21 @@ const handleUpdateDataRequest = (dateKey) =&gt; {
372 293 //获取车队
373 294 queryLineInfo(dateKey).then(res => {
374 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 307 const handleGlobalInfo = (data, num) => {
405 308 globalInfoBoxList[num].startNumber = globalInfoBoxList[num].endNumber;
406 309 globalInfoBoxList[num].endNumber = data.nowNumber;
407 310 globalInfoBoxList[num].allNumber = data.allNumber;
408   -
409 311 }
410 312 </script>
411 313  
... ... @@ -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 543 margin-right: 0;
777 544 }
778 545 }
779   -
780 546 }
781 547 }
782 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 24 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
25 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 28 <el-table-column label="工号" align="center" prop="jobCode" />
29 29 <el-table-column label="姓名" align="center" prop="name" />
30 30 <el-table-column label="是否工作" align="center" prop="workFlag">
... ...
src/views/num/num/index.vue
  View file @c26d152
... ... @@ -40,7 +40,7 @@
40 40 <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
41 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 44 <el-table-column type="selection" width="55" align="center" />
45 45 <el-table-column label="班型名称" align="center" prop="ruleDictName" />
46 46 <el-table-column label="班次类型" align="center" prop="ruleType">
... ... @@ -232,14 +232,14 @@ function handleDelete(row) {
232 232  
233 233 proxy.$modal.msgSuccess("班型删除功能暂时禁用");
234 234 let result = false;
235   - if (result){
  235 + if (result) {
236 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 }
... ...