| | |
| | | <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="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' |
| | |
| | | <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> |
| | | </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; |
| | |
| | | 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; |