|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="center_box"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div class="left_box_top_znz"> | 
|---|
|  |  |  | <img src="@/assets/images/ic_compass@2x.png" alt="" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div class="center_box_one"> | 
|---|
|  |  |  | <div class="static_wrap"> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <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' | 
|---|
|  |  |  | 
|---|
|  |  |  | series: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | name: '分时作业量', | 
|---|
|  |  |  | type: 'line', | 
|---|
|  |  |  | smooth: true, | 
|---|
|  |  |  | showAllSymbol: true, | 
|---|
|  |  |  | symbol: 'circle', | 
|---|
|  |  |  | symbolSize: 0, | 
|---|
|  |  |  | lineStyle: { | 
|---|
|  |  |  | color: '#2355f5', | 
|---|
|  |  |  | borderColor: '#2355f5' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | type: 'bar', | 
|---|
|  |  |  | barWidth: 10, | 
|---|
|  |  |  | label: { | 
|---|
|  |  |  | show: false, | 
|---|
|  |  |  | position: 'top', | 
|---|
|  |  |  | color: '#fff', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | itemStyle: { | 
|---|
|  |  |  | color: "#2355f5", | 
|---|
|  |  |  | lineStyle: { | 
|---|
|  |  |  | width: 0, | 
|---|
|  |  |  | type: 'solid' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | areaStyle: { | 
|---|
|  |  |  | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | offset: 0, | 
|---|
|  |  |  | color: '#2355f5' | 
|---|
|  |  |  | color: 'rgba(0, 208, 221, 1)' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | offset: 1, | 
|---|
|  |  |  | color: 'rgba(14, 31, 65,0.1)' | 
|---|
|  |  |  | color: 'rgba(0, 194, 255, 0.20)' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ], false), | 
|---|
|  |  |  | shadowColor: 'rgba(124,248,255, 0)', | 
|---|
|  |  |  | shadowBlur: 20 | 
|---|
|  |  |  | lineStyle: { | 
|---|
|  |  |  | width: 1, | 
|---|
|  |  |  | type: 'solid' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | barBorderRadius: [30, 30, 0, 0], | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data: dataList3.value.map(i => i.workNum || 0) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | name: '累计作业量', | 
|---|
|  |  |  | type: 'bar', | 
|---|
|  |  |  | barWidth: 6, | 
|---|
|  |  |  | barWidth: 10, | 
|---|
|  |  |  | label: { | 
|---|
|  |  |  | show: false, | 
|---|
|  |  |  | position: 'top', | 
|---|
|  |  |  | 
|---|
|  |  |  | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | offset: 0, | 
|---|
|  |  |  | color: '#63d6fa' | 
|---|
|  |  |  | color: 'rgba(0, 86, 255, 1)' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | offset: 1, | 
|---|
|  |  |  | color: '#32718d' | 
|---|
|  |  |  | color: 'rgba(0, 86, 255, 0.20)' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ], false), | 
|---|
|  |  |  | lineStyle: { | 
|---|
|  |  |  | 
|---|
|  |  |  | cnplatformWorkData().then(res => { | 
|---|
|  |  |  | const result = res.data || [] | 
|---|
|  |  |  | dataList5.value = result.map(i => { | 
|---|
|  |  |  | i.statusTemp = i.status == 0 ? '作业中' : i.status == 1 ? '空闲中' : '作业超时' | 
|---|
|  |  |  | i.statusTemp = i.status == 0 ? '作业中' : i.status == 1 ? '空闲中' : i.status == 2 ? '作业超时' : '叫号中' | 
|---|
|  |  |  | if (i.workTime) { | 
|---|
|  |  |  | // i.workTime = dayjs.duration(i.workTime * 1000).format('HH小时mm分') | 
|---|
|  |  |  | i.workTime = (i.workTime / 60).toFixed(0) | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .left_box_top_znz { | 
|---|
|  |  |  | width: 68px; | 
|---|
|  |  |  | height: 68px; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | right: 30px; | 
|---|
|  |  |  | top: 150px; | 
|---|
|  |  |  | img { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .center_box_one { | 
|---|
|  |  |  | .static_wrap { | 
|---|
|  |  |  | 
|---|
|  |  |  | color: #D2E0FF; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .content { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | /* height: calc( 100% - 30px ); */ | 
|---|