upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

实时盘点查看界面

Browse Source
feature/nanjing-wuliu
yiming 3 years ago
parent f60437be42
commit bc50a5b0a5
7 changed files with 377 additions and 79 deletions
Show Stats Download Patch File Download Diff File

4
public/index.html
Unescape Escape View File

@ -10,12 +10,12 @@
<!-- <script src="/video_play_plugins/video.js"></script> -->
<script src="/video_play_plugins/webrtcplayer.js"></script>
<title>罗博泰克智能视觉</title>
<title>易高智能视觉</title>
</head>
<body>
<noscript>
<strong>We're sorry but 罗博泰克智能视觉 doesn't work properly without JavaScript enabled. Please enable it to
<strong>We're sorry but 易高智能视觉 doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>

2
src/plugins/antd.js
Unescape Escape View File

@ -16,7 +16,7 @@ import {
Icon,
Tree,
message,
result,
Modal,
Popover,
Row,

93
src/router/index.js
Unescape Escape View File

@ -58,15 +58,15 @@ const routes = [{
},
component: () => import('@/views/historyMonitoring/index')
},
{
path: 'alarmLog',
name: 'alarmLog',
meta: {
icon: 'eye',
name: '告警日志'
},
component: () => import('@/views/alarmVideos/alarmLog')
},
// {
// path: 'alarmLog',
// name: 'alarmLog',
// meta: {
// icon: 'eye',
// name: '告警日志'
// },
// component: () => import('@/views/alarmVideos/alarmLog')
// },
{
path: 'checkSummary',
name: 'checkSummary',
@ -102,23 +102,23 @@ const routes = [{
},
component: () => import('@/views/historyCheck/index'),
},
{
path: 'stockHistory',
name: 'stockHistory',
meta: {
icon: 'file-excel',
name: '库位历史',
},
component: () => import('@/views/stockLog/index'),
},
{
path: 'stockLogDetail',
name: 'stockLogDetail',
meta: {
name: '库位历史详情',
},
component: () => import('@/views/stockLog/logPage'),
},
// {
// path: 'stockHistory',
// name: 'stockHistory',
// meta: {
// icon: 'file-excel',
// name: '库位历史',
// },
// component: () => import('@/views/stockLog/index'),
// },
// {
// path: 'stockLogDetail',
// name: 'stockLogDetail',
// meta: {
// name: '库位历史详情',
// },
// component: () => import('@/views/stockLog/logPage'),
// },
{
path: 'roadwayManage',
name: 'roadwayManage',
@ -146,23 +146,32 @@ const routes = [{
component: () => import('@/views/cameraManage/model')
},
{
path: 'productSpecManage',
name: 'productSpecManage',
path: 'checkMonitoring',
name: 'checkMonitoring',
meta: {
icon: 'pushpin',
name: '品规管理'
},
component: () => import('@/views/productSpecManage/index')
},
{
path: 'repertoryManage',
name: 'repertoryManage',
meta: {
icon: 'wallet',
name: '库存管理'
},
component: () => import('@/views/repertoryManage/index')
},
icon: "eye",
name: '实时盘点监控'
},
component: () => import('@/views/checkMonitoring/index')
},
// {
// path: 'productSpecManage',
// name: 'productSpecManage',
// meta: {
// icon: 'pushpin',
// name: '品规管理'
// },
// component: () => import('@/views/productSpecManage/index')
// },
// {
// path: 'repertoryManage',
// name: 'repertoryManage',
// meta: {
// icon: 'wallet',
// name: '库存管理'
// },
// component: () => import('@/views/repertoryManage/index')
// },
{
path: 'cameraManage/ioTable',

2
src/store/modules/styles.js
Unescape Escape View File

@ -11,7 +11,7 @@ const store = {
"primary-color":"rgba(184, 68, 13, 1)"
},
"title":{
"text":"昆船垛机智能视觉系统",
"text":"易高智能视觉系统",
"style":{
"color":"rgba(255, 255, 255, 1)",
"background-color":"rgba(163, 60, 12, 1)",

190
src/views/checkMonitoring/index.vue
Unescape Escape View File

@ -0,0 +1,190 @@
<template>
<div class="history">
<div style="margin-top: 10px">
<a-select @change="handleChange" style="width:200px" v-model="street.id">
<a-select-option v-for="i in streets" :key="i.name" :value="i.id">
{{i.name}}
</a-select-option>
</a-select>
</div>
<div style="display:flex">
<div style="margin-left: 10px,width:100/4,height:200,float:left">
<ul style="width:400,line-height:40">
<li>
<span class="img-box-title">
{{street.name}}-{{this.direction == 1?"左":"右"}}-{{this.side == 1?"浅":"深"}}-{{row}}层-{{column}}列
</span>
</li>
<li>
<span class="img-box-title">
核对状态:
</span>
</li>
<li>
<span class="img-box-title">
系统条码:
</span>
</li>
<li>
<span class="img-box-title">
盘点结果条码:
</span>
</li>
<li>
<span class="img-box-title">
系统数量:
</span>
</li>
<li>
<span class="img-box-title">
盘点结果数量:
</span>
</li>
</ul>
</div>
<div >
<a-row type="flex" justify="space-around" style="height:300,margin-left:400">
<a-col :span="4">
<p>顶部图片1</p>
<viewer >
<img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
</viewer>
</a-col>
<a-col :span="4">
<p>顶部图片2</p>
<viewer >
<img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
</viewer>
</a-col>
</a-row>
<a-row type="flex" justify="space-around" align="middle" style="height:300">
<a-col :span="4">
<p>侧面图片1</p>
<viewer >
<img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
</viewer>
</a-col>
<a-col :span="4">
<p>侧面图片2</p>
<viewer >
<img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
</viewer>
</a-col>
</a-row>
<a-row type="flex" justify="space-around" align="middle" style="height:300">
<a-col :span="4">
<p>侧面图片3</p>
<viewer >
<img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
</viewer>
</a-col>
<a-col :span="4">
<p>侧面图片4</p>
<viewer >
<img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
</viewer>
</a-col>
</a-row>
</div>
</div>
</div>
</template>
<script>
import Model from "./model.vue"
export default {
name: "checkMonitoring",
data() {
return {
queryParam: {
orderNum: ''
},
street: '',
side:1,
direction:1,
column:1,
row:1,
streets:[],
}
},
mounted() {
this.request();
},
methods: {
request() {
this.$api.httpApi.getAllStreet({
}).then(res => {
console.log("update data")
this.streets = res.data
this.street = res.data[0]
}).catch(err => {
});
},
handleChange(value) {
this.street = value
},
},
components: {
Model
}
};
</script>
<style lang="scss" scoped>
.history {
padding: 24px;
}
.ant-drawer-content-wrapper {
height: auto !important;
}
.ant-drawer-body {
text-align: center;
}
.ant-advanced-search-form .ant-form-item {
display: flex;
width: 100%;
}
.historyImg {
width: 900px;
height:auto;
margin: 5px;
}
ul {
height: 100%;
margin-bottom: 0;
padding-inline-start: 0;
li {
background-color: #ffaf11;
margin: 10px 0;
padding: 5px;
font-size: 16px;
font-weight: 600;
color: #494e52;
.img-box-title {
width: 130px;
display: inline-block;
}
}
}
</style>

122
src/views/checkMonitoring/model.vue
Unescape Escape View File

@ -0,0 +1,122 @@
<template>
<div v-if="isShow">
<a-modal
v-model="isShow"
@cancel="handleCancel"
:footer="null"
:maskClosable="false"
:bodyStyle="{padding:0}"
:centered="true"
class="video-model"
>
<div slot="closeIcon">
<div class="video-close">
╳
</div>
</div>
<div class="test_two_box">
<video
class="video-js"
:autoplay="true"
controls
>
<source
:src="video1"
type="video/mp4"
>
</video>
<video
class="video-js"
:autoplay="true"
controls
>
<source
:src="video2"
type="video/mp4"
>
</video>
</div>
</a-modal>
</div>
</template>
<style lang="scss" scoped>
.video-model {
.across-layout {
display: flex;
}
}
.ant-btn {
white-space: inherit;
text-align: left;
}
.video-js {
width: 100%;
height: 300px;
}
.video-close {
position: absolute;
right: 10px;
top: 10px;
color: #ffffff;
font-size: 18px;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
</style>
<script>
export default {
props: ['visible', 'vid1','vid2'],
watch: {
//监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
visible: function (newVal) {
this.isShow = newVal; //newVal即是visible
// newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
},
vid1: function (newVal) {
this.video1 = newVal
console.log(this.video1)
this.$nextTick(() => { //this.$nextTick解决不能在表单渲染之前赋值的报错问题
})
},
vid2: function (newVal) {
this.video2 = newVal
console.log(this.video2)
this.$nextTick(() => { //this.$nextTick解决不能在表单渲染之前赋值的报错问题
})
},
},
data() {
return {
isShow: false,
confirmLoading: false,
video1: '',
video2: '',
};
},
mounted() {
},
methods: {
handleCancel() {
this.$emit('close', false, '')
},
},
};
</script>

45
src/views/historyMonitoring/index.vue
Unescape Escape View File

@ -58,25 +58,7 @@
</template>
</span>
<span slot="status" slot-scope="text">
<span :style="text.status == 1 ?' color:red': ''">
{{ text.status == null ? ' ' : text.status == 0 ? '正常' : '告警' }}
</span>
</span>
<span slot="videoPath1" slot-scope="text">
<a-button type="link" @click="showModel(text)">
查看视频
</a-button>
</span>
<!-- <span slot="videoPath2" slot-scope="text">
<a-button type="link" v-if="text.videoPath2" @click="showModel(text.videoPath2)">
查看视频
</a-button>
<span v-else>
--
</span>
</span> -->
</a-table>
<Model
:visible.sync="visible"
@ -131,30 +113,25 @@ export default {
dataIndex: "goodsLocation",
},
{
title: "时间",
dataIndex: "startTime",
title: "入库照片",
dataIndex: "pic",
width:320,
},
{
title: "入库时间",
dataIndex: "intoStockTime",
},
{
title: "照片",
title: "入库完成照片",
// dataIndex: "pic",
scopedSlots: {customRender: 'pics'},
width:320,
},
{
title: "视频状态",
// dataIndex: "status",
scopedSlots: {customRender: 'status'},
width: 90
title: "入库完成时间",
dataIndex: "intoStockOverTime",
},
{
title: "工单时长",
dataIndex: "timeLength",
},
{
title: "视频录像",
// dataIndex: "videoPath1",
scopedSlots: {customRender: 'videoPath1'}
}
],
visible: false,

Write Preview
Loading…
Cancel
Save