|  |  | 
 |  |  |               <div class="line"> | 
 |  |  |                 <div class="dian"></div> | 
 |  |  |                 <div class="la">作业类型:</div> | 
 |  |  |                 <div class="val">{{ workModalParam.workType == 0 ? '卸货' : '装货' }}</div> | 
 |  |  |                 <div class="val">{{ workModalParam.workType == 0 ? '卸货' : workModalParam.workType == 1 ? '装货' : ''}}</div> | 
 |  |  |               </div> | 
 |  |  |               <div class="line"> | 
 |  |  |                 <div class="dian"></div> | 
 |  |  | 
 |  |  |                 <div class="la">预计完成:</div> | 
 |  |  |                 <div class="val">{{ workModalParam.finishTimeStr }}</div> | 
 |  |  |               </div> | 
 |  |  |               <div class="priview" @click="showJk = true">查看实时画面</div> | 
 |  |  |               <div class="priview" @click="videoPri">查看实时画面</div> | 
 |  |  |             </div> | 
 |  |  |             <div class="modal_bg" v-if="showWorkModal" @click="closeModal"></div> | 
 |  |  |             <div v-show="showJk" class="camera_wrap"> | 
 |  |  | 
 |  |  |                 <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> | 
 |  |  |                   <span v-if="workModalParam.carNo">{{ workModalParam.carNo }} | {{ workModalParam.workType == 0 ? '卸货' | 
 |  |  |                     : workModalParam.workType == 1 ? '装货' : '' }}</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="right"> | 
 |  |  |                   <span>{{ workModalParam.statusTemp }} <span v-if="workModalParam.status == 0"> | 预计完成时间:{{ workModalParam.finishTimeStr }}</span></span> | 
 |  |  |                   <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" /> | 
 |  |  |                 <Video v-if="showJk && videoParam && videoParam.deviceId" :href="videoParam.videoPluginUrl" | 
 |  |  |                   :indexCode="videoParam.deviceId" /> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script setup> | 
 |  |  | import { ref, onMounted } from 'vue' | 
 |  |  | import { ref, onMounted, nextTick } from 'vue' | 
 |  |  | import VScaleScreen from 'v-scale-screen' | 
 |  |  | import Percent from '@/components/percent.vue' | 
 |  |  | import dayjs from 'dayjs' | 
 |  |  | 
 |  |  | const showWorkModal = ref(false) | 
 |  |  | const showJk = ref(false) | 
 |  |  | const workModalParam = ref({}) | 
 |  |  | const videoParam = ref({}) | 
 |  |  | // point_icon | 
 |  |  | const pointList = [ | 
 |  |  |   { left: 230, top: 190, left2: 290, top2: 190, name: '出库月台3' }, | 
 |  |  | 
 |  |  |   { left: 590, top: 75, left2: 650, top2: 190, name: '1095整托盘入库' }, | 
 |  |  |   { left: 600, top: 80, left2: 660, top2: 190, name: '1099整托盘入库' }, | 
 |  |  |   { left: 850, top: 60, left2: 520, top2: 190, name: '市公司月台' }, | 
 |  |  |   { left: 540, top: 136, left2: 600, top2: 136, name: '老库入库' }, | 
 |  |  |   { left: 560, top: 132, left2: 620, top2: 132, name: '老库出库' }, | 
 |  |  |  | 
 |  |  | ] | 
 |  |  | const videoPri = () => { | 
 |  |  |   showJk.value = true | 
 |  |  |   nextTick(() => { | 
 |  |  |     videoParam.value = { ...workModalParam.value } | 
 |  |  |     // console.log('workModalParam', videoParam.value) | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | const closeVideo = () => { | 
 |  |  |   workModalParam.value = {} | 
 |  |  |   videoParam.value = {} | 
 |  |  |   showJk.value = false | 
 |  |  | } | 
 |  |  |  | 
 |  |  | 
 |  |  |         color: #D2E0FF; | 
 |  |  |         display: flex; | 
 |  |  |         flex-direction: column; | 
 |  |  |  | 
 |  |  |         .content { | 
 |  |  |           flex: 1; | 
 |  |  |           /* height: calc( 100% - 30px ); */ |