From c80a7698101d3a27f5e40fe83ba1302758c55dd5 Mon Sep 17 00:00:00 2001 From: liukangdong <898885815@qq.com> Date: 星期三, 12 三月 2025 16:37:30 +0800 Subject: [PATCH] ll --- screen/src/views/TaskEfficiency.vue | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 104 insertions(+), 2 deletions(-) diff --git a/screen/src/views/TaskEfficiency.vue b/screen/src/views/TaskEfficiency.vue index f71d802..2069758 100644 --- a/screen/src/views/TaskEfficiency.vue +++ b/screen/src/views/TaskEfficiency.vue @@ -162,8 +162,27 @@ <div class="la">棰勮瀹屾垚锛�</div> <div class="val">{{ workModalParam.finishTimeStr }}</div> </div> + <div class="priview" @click="showJk = true">鏌ョ湅瀹炴椂鐢婚潰</div> </div> <div class="modal_bg" v-if="showWorkModal" @click="closeModal"></div> + <div v-show="showJk" class="camera_wrap"> + <img class="bg" src="@/assets/images/task/jiankong_bg2@2x.png" alt=""> + <div class="head"> + <div class="left"> + <img class="icon" src="@/assets/images/task/ic_yuetai@2x.png" alt=""> + <div class="name">{{ workModalParam.platformName }}</div> + <span v-if="workModalParam.carNo">{{ workModalParam.carNo }} | {{ workModalParam.workType == 0 ? '鍗歌揣' : '瑁呰揣' }}</span> + </div> + <div class="right"> + <span>{{ workModalParam.statusTemp }} <span v-if="workModalParam.status == 0"> | 棰勮瀹屾垚鏃堕棿锛歿{ workModalParam.finishTimeStr }}</span></span> + <img @click="closeVideo" class="icon" src="@/assets/images/task/ic_close@2x.png" alt=""> + </div> + </div> + <div class="content"> + <Video v-if="showJk && workModalParam && workModalParam.deviceId" :href="workModalParam.videoPluginUrl" + :indexCode="workModalParam.deviceId" /> + </div> + </div> </div> <div class="center_box_two"> <!-- <div v-if="data4.videoIndexCodes && data4.videoIndexCodes.length > 0" class="videos"> @@ -309,6 +328,7 @@ import 'swiper/css/swiper.min.css' import Swiper from 'swiper' import Videos from './videoUrl/Videos.vue' +import Video from './videoUrl/Video.vue' import { cnplatformGroupFinish, cnplatformDuration, @@ -791,6 +811,7 @@ } const showWorkModal = ref(false) +const showJk = ref(false) const workModalParam = ref({}) // point_icon const pointList = [ @@ -808,6 +829,10 @@ { left: 850, top: 60, left2: 520, top2: 190, name: '甯傚叕鍙告湀鍙�' }, ] +const closeVideo = () => { + workModalParam.value = {} + showJk.value = false +} const platformClick = (val) => { const index = pointList.findIndex(i => i.name == val.platformName) @@ -1130,6 +1155,74 @@ align-items: center; position: relative; + .camera_wrap { + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, 0); + width: 672px; + height: 568px; + z-index: 999; + font-size: 14px; + color: #D2E0FF; + display: flex; + flex-direction: column; + .content { + flex: 1; + /* height: calc( 100% - 30px ); */ + padding: 16px 20px 32px 20px; + + .video { + width: 100%; + height: 100%; + } + } + + .head { + height: 56px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 30px; + + .right { + display: flex; + align-items: center; + + .icon { + width: 24px; + margin-left: 20px; + cursor: pointer; + } + } + + .left { + display: flex; + align-items: center; + + .name { + font-weight: bold; + font-size: 16px; + color: #01D9FE; + margin-right: 20px; + } + + .icon { + width: 16px; + margin-right: 8px; + } + } + } + + .bg { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + } + } + .point_icon { position: absolute; left: 850px; @@ -1158,6 +1251,15 @@ left: 850px; top: 60px; z-index: 99999999; + + .priview { + position: absolute; + bottom: 24px; + right: 40px; + font-size: 12px; + color: #01D9FE; + cursor: pointer; + } .head { display: flex; @@ -1221,8 +1323,8 @@ position: fixed; left: 0; top: 0; - width: 100vw; - height: 100vh; + width: 100%; + height: 100%; /* background-color: rgba(0,0,0,.1); */ } } -- Gitblit v1.9.3