| | |
| | | <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: 15, |
| | | 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: '#63d6fa' |
| | | }, |
| | | { |
| | | offset: 1, |
| | | color: 'rgba(14, 31, 65,0.1)' |
| | | color: '#32718d' |
| | | } |
| | | ], 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: 15, |
| | | label: { |
| | | show: false, |
| | | position: 'top', |
| | |
| | | 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 ); */ |