| | |
| | | <v-scale-screen width="1920" height="960"> |
| | | <div class="main_app"> |
| | | <img src="@/assets/images/task/bg@2x.png" class="main_bg" alt="" /> |
| | | <img class="point_icon" src="@/assets/ani/apngb-animated.png" alt=""> |
| | | <div class="main_header"> |
| | | <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> |
| | | <div class="title">安泰智慧物流园区-作业效能统筹</div> |
| | |
| | | </div> |
| | | <div class="two-swiper"> |
| | | <div class="swiper-wrapper"> |
| | | <div @click="platformClick(item)" class="line one-swiper-slide swiper-slide" |
| | | v-for="item, i in dataList5" :key="i"> |
| | | <div @click="platformClick(item)" :class="{ lined: workModalParam.platformId == item.platformId }" |
| | | class="line one-swiper-slide swiper-slide" v-for="item, i in dataList5" :key="i"> |
| | | <img v-if="workModalParam.platformId == item.platformId" class="icon" src="@/assets/ani/2.png" |
| | | alt=""> |
| | | <div>{{ item.platformName }}</div> |
| | | <div>{{ item.carNo || '-' }}</div> |
| | | <div>{{ item.workNum ? item.workNum + '万支' : '-' }}</div> |
| | |
| | | show: true, |
| | | position: 'outside', |
| | | formatter: (params) => { |
| | | const index = params.dataIndex; |
| | | const index = params.dataIndex |
| | | return `{color${index}|${params.data.name} ${params.data.rate}%}` |
| | | // return `<div>${params.data.name}</div>` |
| | | }, |
| | |
| | | const workModalParam = ref({}) |
| | | const platformClick = (val) => { |
| | | workModalParam.value = val |
| | | console.log(val) |
| | | |
| | | showWorkModal.value = !showWorkModal.value |
| | | } |
| | | const loopFn2 = () => { |
| | |
| | | justify-content: space-evenly; |
| | | align-items: center; |
| | | height: 218px; |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | |
| | | .echart_wrap { |
| | | position: relative; |
| | |
| | | |
| | | .left_box_two { |
| | | margin-bottom: 20px; |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | |
| | | .list { |
| | | padding: 0px 24px 0px; |
| | |
| | | } |
| | | |
| | | .left_box_three { |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | |
| | | .echart_wrap { |
| | | width: 450px; |
| | | height: 212px; |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | .no { |
| | | width: 28px; |
| | | height: 28px; |
| | |
| | | |
| | | .center_box_two { |
| | | width: 100%; |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | |
| | | .videos { |
| | | width: 100%; |
| | |
| | | .line { |
| | | display: flex; |
| | | height: 30px; |
| | | position: relative; |
| | | cursor: pointer; |
| | | |
| | | &:nth-of-type(2n + 1) { |
| | | background: rgba(12, 153, 236, 0.2); |
| | | .icon { |
| | | position: absolute; |
| | | left: 0px; |
| | | top: 0px; |
| | | } |
| | | |
| | | &:nth-of-type(2n) { |
| | | background: rgba(1, 15, 35, 0.61); |
| | | box-shadow: inset 0px 0px 40px 0px rgba(23, 51, 108, 0.66); |
| | | } |
| | | |
| | | div { |
| | | flex: 1; |
| | |
| | | font-size: 14px; |
| | | color: #D2E0FF; |
| | | } |
| | | } |
| | | |
| | | .lined { |
| | | background: rgba(0,160,255,0.6) !important; |
| | | font-weight: 600 !important; |
| | | } |
| | | |
| | | .header { |
| | |
| | | width: 450px; |
| | | |
| | | .right_box_one { |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | .static_wrap { |
| | | display: flex; |
| | | padding: 20px 0 15px; |
| | |
| | | |
| | | .right_box_two { |
| | | padding: 20px 20px 0; |
| | | |
| | | margin-top: 20px; |
| | | .list { |
| | | height: 220px; |
| | | overflow: hidden; |
| | | margin-top: 15px; |
| | | scrollbar-width: none; |
| | | |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | padding-top: 15px; |
| | | .item { |
| | | display: flex; |
| | | font-size: 13px; |
| | |
| | | z-index: -2; |
| | | font-size: 14px; |
| | | |
| | | .point_icon { |
| | | position: absolute; |
| | | left: 800px; |
| | | top: 420px; |
| | | } |
| | | |
| | | .main_bg { |
| | | position: absolute; |
| | | left: 0; |