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",
"bootstrap": "^5.1.3",
"core-js": "^3.6.5",
"echarts": "^5.4.3",
"echarts-gl": "^2.0.9",
"element-ui": "^2.15.6",
"path-to-regexp": "^6.2.0",
"style-loader": "^2.0.0",

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

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

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

@ -4,7 +4,10 @@
<div>
<div class="carousel-page">
<div class="carousel-page-content">
<div class="img-box" style="width: 30%;">
<div
class="img-box"
style="width: 35%;"
>
<ul>
<li class="img-box-item">
<span class="img-box-title">
@ -22,7 +25,49 @@
{{ statusMap[checkObj.status] }}
</span>
</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">
{{ item.label }}:
@ -33,20 +78,23 @@
</li>
</ul>
</div>
<div class="img-box" style="width: 60%;">
<a-carousel autoplay style="width: 100%;height: 100%;" class="carousel-box" dot-position="right">
<div
class="img-box"
style="width: 100%;"
>
<div class="carousel-wrapper">
<div
v-for="ite in checkPics"
: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>
</a-carousel>
</div>
<p>盘点图</p>
</div>
@ -54,42 +102,50 @@
</div>
</div>
<div class="bottom-btn">
<a-button class="btn"
<a-button
class="btn"
type="primary"
style="background:#29c12b;border-color:#29c12b;"
@click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
>核对正确
</a-button>
<a-button class="btn"
<a-button
class="btn"
type="primary"
style="background:#ff0000;border-color:#ff0000;"
@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 class="btn"
<a-button
class="btn"
type="primary"
style="background:#29c12b;border-color:#29c12b;"
@click="nextOne(checkObj.id)">
@click="nextOne(checkObj.id)"
>
下一个盘点
</a-button>
</div>
</div>
<Model
:visible.sync="visible"
:modelData.sync="modelData"
:index="index"
@sure="submit"
@close="closeModel"
/>
</div>
</template>
<script>
import Model from "./model.vue"
import Model from "./model.vue";
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 {
data() {
return {
@ -97,14 +153,16 @@ export default {
upUrl: "",
checkObj: {},
row: 1,
pcd:"http://127.0.0.1:9007/api/pointFile/3.pcd",
column: 1,
streetName: '',
streetName: "",
visible: false,
category: '',
category: "",
count: 0,
modelData: {},
index: 0,
imgUrl: '',
imgUrl: "",
categorys: ["3","2"],
params: [
// {
// label:'盘点批次号',
@ -112,35 +170,30 @@ export default {
// },
{
label:'盘点任务号',
key: 'checkNum'
label: "盘点任务号",
key: "checkNum",
},
{
label:'托盘码',
key: 'trayCode'
label: "托盘码",
key: "trayCode",
},
{
label:'品规',
key: 'category'
label: "盘点时间",
key: "exportTime",
},
{
label:'个数',
key: 'count'
},
{
label:'盘点时间',
key: 'exportTime'
},
],
statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确",3:"人工核对正确"}
}
statusMap: {
0: "未盘点",
1: "盘点异常",
2: "核对正确",
3: "人工核对正确",
},
};
},
beforeRouteLeave(to, form, next) {
// 修复第二次进入界面不执行created
this.$destroy();
if (to.name == 'checkManage') {
if (to.name == "checkManage") {
to.meta.isUseCache = true;
} else {
to.meta.isUseCache = false;
@ -148,159 +201,209 @@ export default {
next();
},
created() {
this.imgUrl = imgUrl
this.imgUrl = imgUrl;
//this.getStreetList();
if (this.$route.query.row && this.$route.query.column && this.$route.query.direction && this.$route.query.side && this.$route.query.streetId) {
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
if (
this.$route.query.row &&
this.$route.query.column &&
this.$route.query.direction &&
this.$route.query.side &&
this.$route.query.streetId
) {
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.getCategoryList();
}
},
mounted() {
},
destroyed () {
},
mounted() {},
destroyed() {},
components: {
Model
Model,
pointCloud,
},
methods: {
handleChangeVlue(value){
this.checkObj.category = value
},
get3D() {
this.visible = true;
},
handleOk() {
this.visible = false;
},
//获取复核页面的核对信息
getStockInfo(row, column) {
this.$api.httpApi.getStockInfo({
this.$api.httpApi
.getStockInfo({
data: {
row: Number(row),
column: Number(column),
direction: this.direction,
side: this.side,
streetId: this.streetId,
}
}).then(res => {
},
})
.then((res) => {
if (res.data) {
this.checkObj = res.data;
var pic = this.checkObj.checkPic;
this.checkPics = pic.toString().split(';')
this.$forceUpdate()
this.checkPics = pic.toString().split(";");
this.pcd = res.data.pcd
this.$forceUpdate();
}
})
.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)
})
.catch((err) => {
console.log(err);
});
},
handleChange(value) {
this.select = value
this.id = value
this.row = 1
this.column = 1
this.getStockInfo(1, 1)
this.select = value;
this.id = value;
this.row = 1;
this.column = 1;
this.getStockInfo(1, 1);
},
checkSure(row, column, shelveId, index) {
this.$api.httpApi.stockCheckCorrect({
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 => {
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)
this.$message.success("操作成功");
this.getStockInfo(this.row, this.column);
}
}).catch(err => {
});
})
.catch((err) => {});
},
checkfalse(row, column, shelveId, index) {
this.$api.httpApi.stockCheckCorrectErr({
this.$api.httpApi
.stockCheckCorrectErr({
data: {
row: Number(row),
column: Number(column),
side: Number(this.side),
streetId: Number(this.streetId),
direction: Number(this.direction),
ok: 0
}
}).then(res => {
ok: 0,
},
})
.then((res) => {
if (res.code == 200) {
this.$message.success('操作成功');
this.getStockInfo(this.row,this.column)
this.$message.success("操作成功");
this.getStockInfo(this.row, this.column);
}
}).catch(err => {
});
})
.catch((err) => {});
},
showModel(checkObj, index) {
this.visible = true
this.modelData = checkObj
this.visible = true;
this.modelData = checkObj;
this.index = index;
},
submit(visible, index) {
this.visible = visible
console.log(index)
this.visible = visible;
console.log(index);
// this.next(index);
this.checkObj.status = 1;
},
closeModel(visible, data) {
this.visible = visible
this.modelData = data
this.visible = visible;
this.modelData = data;
},
nextOne(id) {
this.$api.httpApi.nextOne({
this.$api.httpApi
.nextOne({
data: {
id:Number(id)
}
}).then(res => {
id: Number(id),
},
})
.then((res) => {
if (res.data && res.data != null) {
console.log(res.data)
console.log(res.data);
this.checkObj = res.data;
this.id = res.data.id
this.row = res.data.row
this.column = res.data.column
this.direction = res.data.direction
this.side = res.data.side
this.streetId = res.data.streetId
this.streetName = res.data.streetName
this.checkPics = this.checkObj.checkPic.slpit(';');
this.id = res.data.id;
this.row = res.data.row;
this.column = res.data.column;
this.direction = res.data.direction;
this.side = res.data.side;
this.streetId = res.data.streetId;
this.streetName = res.data.streetName;
var pic = this.checkObj.checkPic;
this.checkPics = pic.toString().split(";");
console.log(this.checkPics);
this.$forceUpdate();
} else {
message.info('全部盘点已完成')
message.info("全部盘点已完成");
}
}).catch(err => {
console.log(err)
})
.catch((err) => {
console.log(err);
});
}
}
}
},
},
};
</script>
<style lang="scss">
/* For demo */
.carousel-wrapper {
overflow: hidden;
width: 100%;
display: flex;
}
.ant-carousel .slick-list {
margin: 0 -8px;
}
.ant-carousel .slick-slide {
padding: 0 8px;
}
.checkOperation {
.carousel-page {
width: 100%;
/*border: solid 1px blue;*/
&-title {
color: #009FE3;
color: #009fe3;
font-size: 16px;
margin: 0;
padding: 15px 0 10px 25px;
@ -313,7 +416,7 @@ export default {
.img-box {
display: flex;
padding: 80px;
padding: 50px;
margin-right: 56px;
align-items: center;
justify-content: center;
@ -322,14 +425,14 @@ export default {
height: 900px;
margin-right: 10px;
img {
height: 100%
height: 100%;
}
p {
height: 25px;
}
ul {
width: 100% / 4;
width: 100%;
height: 100%;
margin-bottom: 0;
padding-inline-start: 0;
@ -341,14 +444,14 @@ export default {
font-weight: 600;
color: #494e52;
.img-box-title {
width: 80px;
width: 30%;
display: inline-block;
}
.img-box-value {
display: inline-block;
width: calc(100% - 130px);
overflow: hidden;
width: 130px;
width: 70%;
position: relative;
top: 5px;
}

Write Preview
Loading…
Cancel
Save