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

1.放大盘点图片

Browse Source 
2.3d立体信息放开
just-order
LAPTOP-S9HJSOEB\昊天 2 years ago
parent 04ba1fee68
commit ce5b5da03e
4 changed files with 559 additions and 302 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape Escape View File

@ -14,6 +14,8 @@
"axios": "^0.19.2", "axios": "^0.19.2",
"bootstrap": "^5.1.3", "bootstrap": "^5.1.3",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"echarts": "^5.4.3",
"echarts-gl": "^2.0.9",
"element-ui": "^2.15.6", "element-ui": "^2.15.6",
"path-to-regexp": "^6.2.0", "path-to-regexp": "^6.2.0",
"style-loader": "^2.0.0", "style-loader": "^2.0.0",

7
src/api/http/http-api.js
Unescape Escape View File

@ -152,11 +152,10 @@ export default {
name: '分类列表', name: '分类列表',
method: 'POST' method: 'POST'
}, },
//盘点管理输入框搜索时联想用
getCategoryList: { getCategoryList: {
url: '/category/list', url: '/stock/getCategoryList',
name: '分类列表', name: '品规信息',
method: 'GET' method: 'POST'
}, },
addCategory: { addCategory: {
url: '/category', url: '/category',

153
src/views/3DPointCloud/pointCloud.vue
Unescape Escape View File

@ -0,0 +1,153 @@
<template>
<div
style="width: 1000px;height:800px;"
class="echar"
ref="charts"
id="main"
></div>
</template>
<script>
import * as echarts from "echarts/core";
import { DatasetComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import { Scatter3DChart } from "echarts-gl/charts";
import { Grid3DComponent } from "echarts-gl/components";
echarts.use([
DatasetComponent,
Grid3DComponent,
Scatter3DChart,
CanvasRenderer,
]);
export default {
props: ["src"],
name: "pointCloud",
watch: {
//监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
src: function (newVal) {
console.log(newVal);
this.srcPath = newVal; //newVal即是visible
// newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
},
},
data() {
return {
dat: [],
option: {},
myChart: {},
srcPath: "",
};
},
methods: {
getData(myChart, option) {
let file_url = this.src;
console.log(file_url);
let xhr = new XMLHttpRequest();
xhr.open("get", file_url, true);
xhr.onload = function () {
if (xhr.status == 200) {
// if (callback) {
// callback();
console.log(xhr.response);
var lines = xhr.response.split("\r\n").slice(12);
console.log(lines);
// 将每行以空格作为分隔符形成二维数组
var dataArray = lines.map(function (line) {
console.log();
var arry = line.trim()
.split(" ")
.map(function (value) {
return 1 * parseFloat(value);
});
if(arry[2]>3000){
console.log(arry);
return "";
}
if(arry[1]>1000 || arry[1]<-1000){
console.log(arry);
return "";
}
if(arry[0]>1000 ||arry[0]<-500){
console.log(arry);
return "";
}
arry[2] = arry[2]-1000;
return arry;
}).filter(item => item !== "");
option.dataset.source = dataArray;
console.log(option);
myChart.setOption(option);
}
};
xhr.send();
// 读取文件内容
},
myEcharts() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// x 轴的最小值和最大值
let minX = Math.min(...data.map(item => item[0]));
let maxX = Math.max(...data.map(item => item[0]));
// 定义颜色渐变范围
let colorMin = '#61dfff '; // 最小值的颜色
let colorMax = '#366fff'; // 最大值的颜色
var symbolSize = 1.5;
var option = {
grid3D: {
viewControl: {
beta: -90,
alpha: 15,
distance: 75,
},
},
xAxis3D: {
min: 0,
max: 2000,
},
yAxis3D: {
min: -1000,
max: 1000,
},
zAxis3D: {
min: -1000,
max: 1000,
},
dataset: {
dimensions: ["z", "y", "x"],
source: this.dat,
},
series: [
{
itemStyle: {
color: function (params) {
// 计算当前点在 x 轴上的位置比例
let ratio = (params.data[0] - minX) / (maxX - minX);
// 根据比例计算对应的颜色
let color = echarts.color.gradient(colorMin, colorMax)(ratio);
return color;
}
},
type: "scatter3D",
symbolSize: symbolSize,
encode: {
x: "x",
y: "y",
z: "z",
},
},
],
};
this.getData(myChart, option);
},
},
mounted() {
this.myEcharts();
},
};
</script>

699
src/views/checkManage/checkOperation.vue
Unescape Escape View File

@ -3,17 +3,20 @@
<div> <div>
<div class="carousel-page"> <div class="carousel-page">
<div class="carousel-page-content" > <div class="carousel-page-content">
<div class="img-box" style="width: 30%;"> <div
class="img-box"
style="width: 35%;"
>
<ul> <ul>
<li class="img-box-item"> <li class="img-box-item">
<span class="img-box-title"> <span class="img-box-title">
位置: 位置:
</span> </span>
<span class="img-box-value"> <span class="img-box-value">
{{streetName}}-{{direction==1?"左":"右"}}-{{side==1?"浅":"深"}}-{{checkObj.column}}列-{{checkObj.row}}层 {{streetName}}-{{direction==1?"左":"右"}}-{{side==1?"浅":"深"}}-{{checkObj.column}}列-{{checkObj.row}}层
</span> </span>
</li > </li>
<li class="img-box-item"> <li class="img-box-item">
<span class="img-box-title"> <span class="img-box-title">
核对状态: 核对状态:
@ -22,8 +25,50 @@
{{ statusMap[checkObj.status] }} {{ statusMap[checkObj.status] }}
</span> </span>
</li> </li>
<li class="img-box-item" v-for="item in params" :key="item.label"> <li class="img-box-item">
<span class="img-box-title">
品规:
</span>
<span class="img-box-value">
<a-select
ref="select"
style="width: 100%"
:placeholder="checkObj.category"
:defaultValue="checkObj.category"
@change="handleChangeVlue"
>
<a-select-option
v-for="i in categorys"
:key="i"
:value="i"
>
{{ i}}
</a-select-option>
</a-select>
</span>
</li>
<li class="img-box-item">
<span class="img-box-title">
个数:
</span>
<span class="img-box-value">
<a-input-number
id="inputNumber"
style="width: 100%"
v-model="checkObj.count"
:min="0"
:max="50"
/>
</span>
</li>
<li
class="img-box-item"
v-for="item in params"
:key="item.label"
>
<span class="img-box-title"> <span class="img-box-title">
{{ item.label }}: {{ item.label }}:
</span> </span>
@ -33,396 +78,454 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="img-box" style="width: 60%;"> <div
<a-carousel autoplay style="width: 100%;height: 100%;" class="carousel-box" dot-position="right"> class="img-box"
style="width: 100%;"
>
<div class="carousel-wrapper">
<div <div
v-for="ite in checkPics" v-for="ite in checkPics"
:key="ite" :key="ite"
style="float:left;" style="float:left;height:100%; width:100% ;display: flex; "
> >
<img style="height:100%; width:100% " :src="ite"> <img
style="height:100%; width:100% ;"
:src="ite"
>
</div> </div>
</a-carousel> </div>
<p>盘点图</p> <p>盘点图</p>
</div> </div>
</div> </div>
</div> </div>
<div class="bottom-btn" > <div class="bottom-btn">
<a-button class="btn" <a-button
type="primary" class="btn"
style="background:#29c12b;border-color:#29c12b;" type="primary"
@click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)" style="background:#29c12b;border-color:#29c12b;"
@click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
>核对正确 >核对正确
</a-button> </a-button>
<a-button class="btn" <a-button
type="primary" class="btn"
style="background:#ff0000;border-color:#ff0000;" type="primary"
@click="checkfalse(checkObj.row,checkObj.column,checkObj.shelveId,index)" style="background:#29c12b;border-color:#29c12b;"
>核对错误 @click="get3D()"
>
<a-modal
width="1005px"
v-model="visible"
title="Basic Modal"
@ok="handleOk"
>
<pointCloud :src="pcd"></pointCloud>
</a-modal>
3D图像
</a-button> </a-button>
<a-button class="btn" <a-button
type="primary" class="btn"
style="background:#29c12b;border-color:#29c12b;" type="primary"
@click="nextOne(checkObj.id)"> style="background:#29c12b;border-color:#29c12b;"
下一个盘点 @click="nextOne(checkObj.id)"
>
下一个盘点
</a-button> </a-button>
</div> </div>
</div> </div>
<Model
:visible.sync="visible"
:modelData.sync="modelData"
:index="index"
@sure="submit"
@close="closeModel"
/>
</div> </div>
</template> </template>
<script> <script>
import Model from "./model.vue" import Model from "./model.vue";
import {imgUrl} from "@/api/importExcel"; import { imgUrl } from "@/api/importExcel";
import { message } from 'ant-design-vue'; import { message } from "ant-design-vue";
import pointCloud from "../3DPointCloud/pointCloud.vue";
export default { export default {
data() { data() {
return { return {
checkPics:[], checkPics: [],
upUrl:"", upUrl: "",
checkObj: {}, checkObj: {},
row: 1, row: 1,
pcd:"http://127.0.0.1:9007/api/pointFile/3.pcd",
column: 1, column: 1,
streetName: '', streetName: "",
visible: false, visible: false,
category: '', category: "",
count: 0, count: 0,
modelData: {}, modelData: {},
index: 0, index: 0,
imgUrl: '', imgUrl: "",
params:[ categorys: ["3","2"],
params: [
// { // {
// label:'盘点批次号', // label:'盘点批次号',
// key: 'lotnum' // key: 'lotnum'
// }, // },
{
label:'盘点任务号',
key: 'checkNum'
},
{
label:'托盘码',
key: 'trayCode'
},
{ {
label:'品规', label: "盘点任务号",
key: 'category' key: "checkNum",
}, },
{ {
label:'个数', label: "托盘码",
key: 'count' key: "trayCode",
}, },
{ {
label:'盘点时间', label: "盘点时间",
key: 'exportTime' key: "exportTime",
}, },
], ],
statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确",3:"人工核对正确"} statusMap: {
0: "未盘点",
} 1: "盘点异常",
2: "核对正确",
3: "人工核对正确",
},
};
}, },
beforeRouteLeave(to ,form, next) { beforeRouteLeave(to, form, next) {
// 修复第二次进入界面不执行created // 修复第二次进入界面不执行created
this.$destroy(); this.$destroy();
if (to.name == 'checkManage') { if (to.name == "checkManage") {
to.meta.isUseCache = true; to.meta.isUseCache = true;
}else{ } else {
to.meta.isUseCache = false; to.meta.isUseCache = false;
} }
next(); next();
}, },
created() { created() {
this.imgUrl = imgUrl this.imgUrl = imgUrl;
//this.getStreetList(); //this.getStreetList();
if (this.$route.query.row && this.$route.query.column && this.$route.query.direction && this.$route.query.side && this.$route.query.streetId) { if (
this.id = this.$route.query.id this.$route.query.row &&
this.row = this.$route.query.row this.$route.query.column &&
this.column = this.$route.query.column this.$route.query.direction &&
this.direction = this.$route.query.direction this.$route.query.side &&
this.side = this.$route.query.side this.$route.query.streetId
this.streetId = this.$route.query.streetId ) {
this.streetName = this.$route.query.name this.id = this.$route.query.id;
this.row = this.$route.query.row;
this.column = this.$route.query.column;
this.direction = this.$route.query.direction;
this.side = this.$route.query.side;
this.streetId = this.$route.query.streetId;
this.streetName = this.$route.query.name;
this.getStockInfo(this.row, this.column); this.getStockInfo(this.row, this.column);
this.getCategoryList();
} }
}, },
mounted() { mounted() {},
destroyed() {},
},
destroyed () {
},
components: { components: {
Model Model,
pointCloud,
}, },
methods: { methods: {
handleChangeVlue(value){
this.checkObj.category = value
},
get3D() {
this.visible = true;
},
handleOk() {
this.visible = false;
},
//获取复核页面的核对信息 //获取复核页面的核对信息
getStockInfo(row, column) { getStockInfo(row, column) {
this.$api.httpApi.getStockInfo({ this.$api.httpApi
data: { .getStockInfo({
row: Number(row), data: {
column: Number(column), row: Number(row),
direction: this.direction, column: Number(column),
side: this.side, direction: this.direction,
streetId: this.streetId, side: this.side,
} streetId: this.streetId,
}).then(res => { },
if (res.data) { })
this.checkObj = res.data; .then((res) => {
var pic = this.checkObj.checkPic; if (res.data) {
this.checkPics = pic.toString().split(';') this.checkObj = res.data;
this.$forceUpdate() var pic = this.checkObj.checkPic;
//this.shelveId = res.data.shelveId; this.checkPics = pic.toString().split(";");
//this.getScanAndCheck(); this.pcd = res.data.pcd
} this.$forceUpdate();
}).catch(err => { }
console.log(err) })
}); .catch((err) => {
console.log(err);
});
},
//获取复核页面的核对信息
getCategoryList() {
this.$api.httpApi
.getCategoryList({
data: {},
})
.then((res) => {
if (res.data) {
this.categorys = res.data;
console.log(this.categorys);
//this.shelveId = res.data.shelveId;
//this.getScanAndCheck();
}
})
.catch((err) => {
console.log(err);
});
}, },
handleChange(value) { handleChange(value) {
this.select = value;
this.select = value this.id = value;
this.id = value this.row = 1;
this.row = 1 this.column = 1;
this.column = 1 this.getStockInfo(1, 1);
this.getStockInfo(1, 1)
}, },
checkSure(row, column, shelveId, index) {
this.$api.httpApi.stockCheckCorrect({
data: {
row: Number(row),
column: Number(column),
side: Number(this.side),
streetId: Number(this.streetId),
direction: Number(this.direction),
ok: 1
}
}).then(res => {
if (res.code == 200) {
this.$message.success('操作成功');
this.getStockInfo(this.row,this.column)
}
}).catch(err => { checkSure(row, column, shelveId, index) {
this.$api.httpApi
}); .stockCheckCorrect({
data: {
row: Number(row),
column: Number(column),
side: Number(this.side),
streetId: Number(this.streetId),
direction: Number(this.direction),
count: this.checkObj.count,
category: this.checkObj.category,
ok: 1,
},
})
.then((res) => {
if (res.code == 200) {
this.$message.success("操作成功");
this.getStockInfo(this.row, this.column);
}
})
.catch((err) => {});
}, },
checkfalse(row, column, shelveId, index) { checkfalse(row, column, shelveId, index) {
this.$api.httpApi.stockCheckCorrectErr({ this.$api.httpApi
data: { .stockCheckCorrectErr({
row: Number(row), data: {
column: Number(column), row: Number(row),
side: Number(this.side), column: Number(column),
streetId: Number(this.streetId), side: Number(this.side),
direction: Number(this.direction), streetId: Number(this.streetId),
ok: 0 direction: Number(this.direction),
} ok: 0,
}).then(res => { },
if (res.code == 200) { })
this.$message.success('操作成功'); .then((res) => {
this.getStockInfo(this.row,this.column) if (res.code == 200) {
} this.$message.success("操作成功");
this.getStockInfo(this.row, this.column);
}).catch(err => { }
})
}); .catch((err) => {});
}, },
showModel(checkObj, index) { showModel(checkObj, index) {
this.visible = true this.visible = true;
this.modelData = checkObj this.modelData = checkObj;
this.index = index; this.index = index;
}, },
submit(visible, index) { submit(visible, index) {
this.visible = visible;
this.visible = visible console.log(index);
console.log(index)
// this.next(index); // this.next(index);
this.checkObj.status = 1; this.checkObj.status = 1;
}, },
closeModel(visible, data) { closeModel(visible, data) {
this.visible = visible this.visible = visible;
this.modelData = data this.modelData = data;
}, },
nextOne(id){ nextOne(id) {
this.$api.httpApi.nextOne({ this.$api.httpApi
data: { .nextOne({
id:Number(id) data: {
} id: Number(id),
}).then(res => { },
if (res.data && res.data != null) { })
console.log(res.data) .then((res) => {
this.checkObj = res.data; if (res.data && res.data != null) {
this.id = res.data.id console.log(res.data);
this.row = res.data.row this.checkObj = res.data;
this.column = res.data.column this.id = res.data.id;
this.direction = res.data.direction this.row = res.data.row;
this.side = res.data.side this.column = res.data.column;
this.streetId = res.data.streetId this.direction = res.data.direction;
this.streetName = res.data.streetName this.side = res.data.side;
this.checkPics = this.checkObj.checkPic.slpit(';'); this.streetId = res.data.streetId;
this.streetName = res.data.streetName;
}else{ var pic = this.checkObj.checkPic;
message.info('全部盘点已完成') this.checkPics = pic.toString().split(";");
}
}).catch(err => { console.log(this.checkPics);
console.log(err) this.$forceUpdate();
}); } else {
} message.info("全部盘点已完成");
}
} })
} .catch((err) => {
console.log(err);
});
},
},
};
</script> </script>
<style lang="scss"> <style lang="scss">
/* For demo */ /* For demo */
.carousel-wrapper {
overflow: hidden;
width: 100%;
display: flex;
}
.checkOperation { .ant-carousel .slick-list {
.carousel-page { margin: 0 -8px;
width: 100%; }
/*border: solid 1px blue;*/
&-title {
color: #009FE3;
font-size: 16px;
margin: 0;
padding: 15px 0 10px 25px;
}
&-content { .ant-carousel .slick-slide {
display: flex; padding: 0 8px;
align-items: center; }
padding-left: 20px;
.img-box { .checkOperation {
display: flex; .carousel-page {
padding: 80px; width: 100%;
margin-right: 56px; /*border: solid 1px blue;*/
align-items: center; &-title {
justify-content: center; color: #009fe3;
flex-direction: column; font-size: 16px;
font-size: 17px; margin: 0;
height: 900px; padding: 15px 0 10px 25px;
margin-right: 10px; }
img {
height: 100% &-content {
} display: flex;
align-items: center;
padding-left: 20px;
.img-box {
display: flex;
padding: 50px;
margin-right: 56px;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 17px;
height: 900px;
margin-right: 10px;
img {
height: 100%;
}
p { p {
height: 25px; height: 25px;
}
ul {
width: 100%;
height: 100%;
margin-bottom: 0;
padding-inline-start: 0;
.img-box-item {
background-color: #ffaf11;
margin: 10px 0;
padding: 5px;
font-size: 16px;
font-weight: 600;
color: #494e52;
.img-box-title {
width: 30%;
display: inline-block;
} }
ul { .img-box-value {
width: 100% / 4; display: inline-block;
height: 100%; width: calc(100% - 130px);
margin-bottom: 0; overflow: hidden;
padding-inline-start: 0; width: 70%;
.img-box-item { position: relative;
background-color: #ffaf11; top: 5px;
margin: 10px 0;
padding: 5px;
font-size: 16px;
font-weight: 600;
color: #494e52;
.img-box-title {
width: 80px;
display: inline-block;
}
.img-box-value {
display: inline-block;
width: calc(100% - 130px);
overflow: hidden;
width: 130px;
position: relative;
top: 5px;
}
}
} }
} }
} }
}
}
&-footer { &-footer {
width: calc(100% - 380px); width: calc(100% - 380px);
.info-box { .info-box {
color: #000000; color: #000000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
p { p {
padding: 0 20px; padding: 0 20px;
font-size: 18px; font-size: 18px;
} }
} }
.status { .status {
text-align: center; text-align: center;
font-size: 21px; font-size: 21px;
} }
.status-btn { .status-btn {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
.btn { .btn {
padding: 50px; padding: 50px;
font-size: 20px; font-size: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 0; line-height: 0;
margin: 15px 45px; margin: 15px 45px;
}
}
} }
} }
}
}
.bottom-btn { .bottom-btn {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: right; align-items: right;
justify-content: center; justify-content: center;
p { p {
font-size: 18px; font-size: 18px;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.btn { .btn {
margin: 25px; margin: 25px;
}
} }
} }
.historyImg { }
width: 180px; .historyImg {
height:auto; width: 180px;
} height: auto;
}
.carousel-box{ .carousel-box {
text-align: center; text-align: center;
background: #364d79; background: #364d79;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
li{ li {
background-color: #ffffff; background-color: #ffffff;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save