|  |  |  | 
|---|
|  |  |  | <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 class="list one-swiper"> | 
|---|
|  |  |  | <div class="swiper-wrapper"> | 
|---|
|  |  |  | <div class="line one-swiper-slide swiper-slide" v-for="item, i in dataList2" :key="i"> | 
|---|
|  |  |  | <div class="top"><span v-if="i < 3">top</span>{{ i }}</div> | 
|---|
|  |  |  | <div class="top"><span v-if="i < 3">top</span>{{ i + 1 }}</div> | 
|---|
|  |  |  | <div class="id_card">{{ item.platformName }}</div> | 
|---|
|  |  |  | <div class="wrap"> | 
|---|
|  |  |  | <ChargeRate :rate="item.rate" /> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="center_box_bg"> | 
|---|
|  |  |  | <!-- <div class="no no1" @click="workModalClick">1</div> | 
|---|
|  |  |  | <div class="no no2" @click="workModalClick">2</div> | 
|---|
|  |  |  | <div class="no no3" @click="workModalClick">3</div> --> | 
|---|
|  |  |  | <img class="point_icon" src="@/assets/ani/apngb-animated.png" alt=""> | 
|---|
|  |  |  | <div class="work_modal" @click="showWorkModal = false" v-if="showWorkModal"> | 
|---|
|  |  |  | <img class="bg" src="@/assets/images/LogisticsCenter/bg_yuetai@2x.png" alt=""> | 
|---|
|  |  |  | <div class="head"> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="center_box_two"> | 
|---|
|  |  |  | <!-- <div class="videos"> | 
|---|
|  |  |  | <div class="video" v-for="i in 4"></div> | 
|---|
|  |  |  | </div> --> | 
|---|
|  |  |  | <div v-if="data4.videoIndexCodes && data4.videoIndexCodes.length > 0" class="videos"> | 
|---|
|  |  |  | <div class="video" v-for="indexCode in data4.videoIndexCodes"> | 
|---|
|  |  |  | <Video v-if="indexCode" :href="data4.videoPluginUrl" :indexCode="indexCode" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="list"> | 
|---|
|  |  |  | <div class="line header"> | 
|---|
|  |  |  | <div>月台名称</div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="echart_wrap"> | 
|---|
|  |  |  | <div class="echart3" id="echart3"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="list"> | 
|---|
|  |  |  | <div class="line" v-for="item, i in data6?.platformLogList"> | 
|---|
|  |  |  | <div class="time_wrap"> | 
|---|
|  |  |  | <div class="time" :style="{ | 
|---|
|  |  |  | backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f' | 
|---|
|  |  |  | }" v-if="item.createDate">{{ item.createDate.slice(11, 16) }}</div> | 
|---|
|  |  |  | <div class="sp" :style="{ | 
|---|
|  |  |  | backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f' | 
|---|
|  |  |  | }"></div> | 
|---|
|  |  |  | <div class="dian" :style="{ | 
|---|
|  |  |  | backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f' | 
|---|
|  |  |  | }"></div> | 
|---|
|  |  |  | <div class="list four-swiper"> | 
|---|
|  |  |  | <div class="swiper-wrapper"> | 
|---|
|  |  |  | <div class="line four-swiper-slide swiper-slide" v-for="item, i in data6?.platformLogList"> | 
|---|
|  |  |  | <div class="time_wrap"> | 
|---|
|  |  |  | <div class="time" :style="{ | 
|---|
|  |  |  | backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f' | 
|---|
|  |  |  | }" v-if="item.createDate">{{ item.createDate.slice(11, 16) }}</div> | 
|---|
|  |  |  | <div class="sp" :style="{ | 
|---|
|  |  |  | backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f' | 
|---|
|  |  |  | }"></div> | 
|---|
|  |  |  | <div class="dian" :style="{ | 
|---|
|  |  |  | backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f' | 
|---|
|  |  |  | }"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="id_card">{{ item.carCodeFront || item.param4 }}</div> | 
|---|
|  |  |  | <div class="status">{{ statusMap[item.objType] }}</div> | 
|---|
|  |  |  | <div class="desc">{{ item.content }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="id_card">{{ item.carCodeFront || item.param4 }}</div> | 
|---|
|  |  |  | <div class="status">{{ statusMap[item.objType] }}</div> | 
|---|
|  |  |  | <div class="desc">{{ item.content }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <span>告警:{{ item.eventContent }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="wrap"> | 
|---|
|  |  |  | <!-- <span style="margin-right: 30px;">状态:待处理</span> --> | 
|---|
|  |  |  | <span style="margin-right: 50px;">{{ item.platformName }}</span> | 
|---|
|  |  |  | <span>已发生:{{ item.haveTime }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | dayjs.extend(duration) | 
|---|
|  |  |  | import 'swiper/css/swiper.min.css' | 
|---|
|  |  |  | import Swiper from 'swiper' | 
|---|
|  |  |  | import Video from './videoUrl/Video.vue' | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | cnplatformGroupFinish, | 
|---|
|  |  |  | cnplatformDuration, | 
|---|
|  |  |  | 
|---|
|  |  |  | }]), | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | const temp = [] | 
|---|
|  |  |  | temp.push({ name: '签到数', value: data4.value?.signedNum || 0, rate: data4.value?.signedNum ? '100.0' : 0 }) | 
|---|
|  |  |  | temp.push({ name: '签到数', value: data4.value?.signedNum || 0, rate: data4.value?.signedNum ? '100' : 0 }) | 
|---|
|  |  |  | temp.push({ name: '已叫号', value: data4.value?.calledNum || 0, rate: data4.value?.signedNum ? (data4.value.calledNum / data4.value?.signedNum * 100).toFixed(1) : 0 }) | 
|---|
|  |  |  | temp.push({ name: '已作业', value: data4.value?.workedNum || 0, rate: data4.value?.signedNum ? (data4.value.workedNum / data4.value?.signedNum * 100).toFixed(1) : 0 }) | 
|---|
|  |  |  | temp.push({ name: '已完成', value: data4.value?.doneNum || 0, rate: data4.value?.signedNum ? (data4.value.doneNum / data4.value?.signedNum * 100).toFixed(1) : 0 }) | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const data6 = ref({}) | 
|---|
|  |  |  | const getData6 = () => { | 
|---|
|  |  |  | cncarWorkSituation({ size: 7 }).then(res => { | 
|---|
|  |  |  | cncarWorkSituation({ size: 30 }).then(res => { | 
|---|
|  |  |  | const result = res.data | 
|---|
|  |  |  | data6.value = result | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const showWorkModal = ref(false) | 
|---|
|  |  |  | const workModalParam = ref({}) | 
|---|
|  |  |  | // point_icon | 
|---|
|  |  |  | const pointList = ref([ | 
|---|
|  |  |  | { left: 230, top: 190 }, | 
|---|
|  |  |  | { left: 265, top: 180 }, | 
|---|
|  |  |  | { left: 300, top: 170 }, | 
|---|
|  |  |  | { left: 335, top: 160 }, | 
|---|
|  |  |  | { left: 370, top: 150 }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | { left: 530, top: 50  }, | 
|---|
|  |  |  | { left: 550, top: 65 }, | 
|---|
|  |  |  | { left: 570, top: 75 }, | 
|---|
|  |  |  | { left: 590, top: 75 }, | 
|---|
|  |  |  | { left: 600, top: 80 }, | 
|---|
|  |  |  | { left: 850, top: 60 }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | ]) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const platformClick = (val) => { | 
|---|
|  |  |  | workModalParam.value = val | 
|---|
|  |  |  | console.log(val) | 
|---|
|  |  |  | 
|---|
|  |  |  | observer: true, //修改swiper自己或子元素时,自动初始化swiper | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const loopFn6 = () => { | 
|---|
|  |  |  | var newSwiper1 = new Swiper('.four-swiper', { | 
|---|
|  |  |  | initialSlide: 0, | 
|---|
|  |  |  | direction: 'vertical', //竖直方向 | 
|---|
|  |  |  | slidesPerView: 7, | 
|---|
|  |  |  | autoplay: autoplayFlag(data6.value.platformLogList, 7, 4000), | 
|---|
|  |  |  | observer: true, //修改swiper自己或子元素时,自动初始化swiper | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const autoplayFlag = (list = [], leng = 4, time = 2000) => { | 
|---|
|  |  |  | if (list.length > leng) { | 
|---|
|  |  |  | return { delay: time, disableOnInteraction: false } | 
|---|
|  |  |  | 
|---|
|  |  |  | loopFn2() | 
|---|
|  |  |  | loopFn5() | 
|---|
|  |  |  | loopFn7() | 
|---|
|  |  |  | loopFn6() | 
|---|
|  |  |  | }, 12000) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | .point_icon { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | left: 850px; | 
|---|
|  |  |  | top: 60px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .no { | 
|---|
|  |  |  | width: 28px; | 
|---|
|  |  |  | height: 28px; | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .center_box_two { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | background: rgba(0, 86, 255, 0.05); | 
|---|
|  |  |  | backdrop-filter: blur(5px); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .videos { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 210px; | 
|---|
|  |  |  | overflow-y: auto; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | background: rgba(0, 86, 255, 0.05); | 
|---|
|  |  |  | backdrop-filter: blur(5px); | 
|---|
|  |  |  | .two-swiper { | 
|---|
|  |  |  | height: 180px; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .lined { | 
|---|
|  |  |  | background: rgba(0,160,255,0.6) !important; | 
|---|
|  |  |  | background: rgba(0, 160, 255, 0.6) !important; | 
|---|
|  |  |  | font-weight: 600 !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | backdrop-filter: blur(5px); | 
|---|
|  |  |  | background: rgba(0, 86, 255, 0.05); | 
|---|
|  |  |  | backdrop-filter: blur(5px); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .static_wrap { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | padding: 20px 0 15px; | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | margin: 0 20px 0; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 222px; | 
|---|
|  |  |  | width: 430px; | 
|---|
|  |  |  | height: 231px; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | scrollbar-width: none; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | font-size: 12px; | 
|---|
|  |  |  | height: 33px; | 
|---|
|  |  |  | height: 33px !important; | 
|---|
|  |  |  | color: #D2E0FF; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | .right_box_two { | 
|---|
|  |  |  | padding: 20px 20px 0; | 
|---|
|  |  |  | margin-top: 20px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | height: 220px; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | 
|---|
|  |  |  | background: rgba(0, 86, 255, 0.05); | 
|---|
|  |  |  | backdrop-filter: blur(5px); | 
|---|
|  |  |  | padding-top: 15px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | z-index: -2; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .point_icon { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | left: 800px; | 
|---|
|  |  |  | top: 420px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .main_bg { | 
|---|
|  |  |  | position: absolute; | 
|---|