LAPTOP-S9HJSOEB\昊天
1 year ago
parent
2bec0ab66e
commit
2c69a17e1e
@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div class="history bg-white">
|
||||
<div class="ant-advanced-search-form">
|
||||
<a-form
|
||||
layout="inline"
|
||||
:form="queryParam"
|
||||
>
|
||||
<a-row :gutter="24">
|
||||
<a-col
|
||||
:span="17"
|
||||
style="text-align: left"
|
||||
>
|
||||
<a-form-item label="巷道">
|
||||
<a-select
|
||||
@change="handleChange"
|
||||
:value="select"
|
||||
style="width:400px"
|
||||
>
|
||||
|
||||
<a-select-option
|
||||
v-for="i in listData"
|
||||
:key="i.name"
|
||||
:value="i.id"
|
||||
>
|
||||
{{i.name}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="6"
|
||||
style="text-align: right"
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="IndustrialCameraPic"
|
||||
>拍照</a-button>
|
||||
|
||||
<a-button
|
||||
style="margin-left: 15px"
|
||||
type="primary"
|
||||
@click="IndustrialCameraMacth"
|
||||
>识别</a-button>
|
||||
|
||||
<a-button
|
||||
style="margin-left: 15px"
|
||||
@click="reset"
|
||||
>重置</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-row style="height: 900px;">
|
||||
|
||||
<a-col :span="18"><img
|
||||
width="70%"
|
||||
:src="this.imgUrl + picImg"
|
||||
>
|
||||
<img></a-col>
|
||||
<a-col :span="6">
|
||||
|
||||
<!-- <a-row style="height: 40vh;">
|
||||
<div class="clearfix">
|
||||
<a-upload
|
||||
list-type="picture-card"
|
||||
:file-list="fileList"
|
||||
:multiple="true"
|
||||
@preview="handlePreview"
|
||||
@change="handleChangeUpload"
|
||||
@customRequest="customRequest"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
|
||||
<a-icon type="plus" />
|
||||
<div class="ant-upload-text">
|
||||
Upload
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisible"
|
||||
:footer="null"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<img
|
||||
alt="example"
|
||||
style="width: 100%"
|
||||
:src="previewImage"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</a-row> -->
|
||||
<a-row style="height: 20vh;">
|
||||
<p v-if="identificationImg==''">识别失败</p>
|
||||
<img
|
||||
v-if="identificationImg!=''"
|
||||
alt="example"
|
||||
style="width: 100%"
|
||||
:src="this.imgUrl +identificationImg"
|
||||
/>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-form
|
||||
:form="form"
|
||||
:label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 12 }"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<a-form-item label="模板类型">
|
||||
<a-input v-decorator="['typeMacth', { rules: [{ required: true, message: '请输入模板类型!' }] }]" />
|
||||
</a-form-item>
|
||||
<!-- <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>
|
||||
模板建立
|
||||
</a-button>
|
||||
</a-form-item> -->
|
||||
</a-form>
|
||||
</a-row>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { imgUrl, videoUrl } from "@/api/importExcel";
|
||||
import moment from "moment";
|
||||
function getBase64(blob) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = (e) => {
|
||||
resolve(e.target.result);
|
||||
};
|
||||
// readAsDataURL
|
||||
fileReader.readAsDataURL(blob);
|
||||
fileReader.onerror = () => {
|
||||
reject(new Error("文件流异常"));
|
||||
};
|
||||
});
|
||||
}
|
||||
export default {
|
||||
name: "IndustrialCamera",
|
||||
|
||||
data() {
|
||||
return {
|
||||
queryParam: {
|
||||
orderNum: "",
|
||||
streetId: "",
|
||||
},
|
||||
typeMacth:"",
|
||||
listData: [],
|
||||
time: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
data: [],
|
||||
fileList: [],
|
||||
select: "",
|
||||
pagination: {
|
||||
total: 0,
|
||||
defaultPageSize: 10, // 默认每页显示数量
|
||||
showTotal: (total) => `共 ${total} 条数据`, // 显示总数
|
||||
showSizeChanger: true, // 显示可改变每页数量
|
||||
pageSizeOptions: ["10", "20", "30"],
|
||||
onShowSizeChange: (current, pageSize) =>
|
||||
(this.pageSize = pageSize), // 改变每页数量时更新显示
|
||||
},
|
||||
loading: false,
|
||||
imgUrl: imgUrl,
|
||||
identificationImg:"",
|
||||
picImg: "",
|
||||
previewVisible: false,
|
||||
previewImage: "",
|
||||
visible: false,
|
||||
vid1: "",
|
||||
vid2: "",
|
||||
form: this.$form.createForm(this,'from'),
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getStreetList();
|
||||
console.log(this.imgUrl);
|
||||
if (this.$route.params.orderNum) {
|
||||
console.log(this.$route.params.orderNum);
|
||||
this.queryParam.orderNum = this.$route.params.orderNum;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
|
||||
beforeUpload: (file, fileList) => {
|
||||
// 处理文件
|
||||
console.log(file);
|
||||
if (!file.url && !file.preview) {
|
||||
console.log(file.originFileObj);
|
||||
file.preview = getBase64(file.originFileObj);
|
||||
}
|
||||
console.log(fileList);
|
||||
// 阻止默认上传事件
|
||||
return false;
|
||||
},
|
||||
handleCancel() {
|
||||
this.previewVisible = false;
|
||||
},
|
||||
async handlePreview(file) {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj);
|
||||
}
|
||||
this.previewImage = file.url || file.preview;
|
||||
this.previewVisible = true;
|
||||
console.log(file.preview);
|
||||
},
|
||||
handleChangeUpload({ fileList }) {
|
||||
this.fileList = fileList;
|
||||
// 本地电脑路径
|
||||
},
|
||||
customRequest(options) {
|
||||
console.log(options);
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
if (value === 0) {
|
||||
this.select = "全部";
|
||||
this.queryParam.streetId = value;
|
||||
} else {
|
||||
for (let item of this.listData) {
|
||||
if (item.id == value) {
|
||||
this.select = item.name;
|
||||
this.queryParam.streetId = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
//获取巷道列表
|
||||
getStreetList() {
|
||||
this.$api.httpApi
|
||||
.getAllStreet({})
|
||||
.then((res) => {
|
||||
this.listData = res.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
},
|
||||
range(start, end) {
|
||||
const result = [];
|
||||
for (let i = start; i < end; i++) {
|
||||
result.push(i);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
IndustrialCameraPic() {
|
||||
console.log(this.queryParam);
|
||||
this.pageNum = 1;
|
||||
this.request();
|
||||
},
|
||||
IndustrialCameraMacth() {
|
||||
this.$api.httpApi
|
||||
.IndustrialCameraMacth({
|
||||
data: {
|
||||
fileList: this.fileList,
|
||||
picImg: this.picImg,
|
||||
typeMacth:this.form.getFieldValue("typeMacth")
|
||||
},
|
||||
}) .then((res) => {
|
||||
this.identificationImg = res.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
||||
});
|
||||
},
|
||||
IndustrialCameraMacth3D() {
|
||||
this.$api.httpApi
|
||||
.IndustrialCameraMacth3D({
|
||||
data: {
|
||||
fileList: this.fileList,
|
||||
picImg: this.picImg,
|
||||
},
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
handleSubmit(newVal){
|
||||
console.log();
|
||||
this.$api.httpApi
|
||||
.IndustrialCameraMacthCreate({
|
||||
data: {
|
||||
fileList: this.fileList,
|
||||
typeMacth:this.form.getFieldValue("typeMacth")
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
if (res.data !== null && res.data !== "") {
|
||||
this.picImg = res.data;
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
request() {
|
||||
this.$api.httpApi
|
||||
.IndustrialCameraPic({
|
||||
data: {
|
||||
...this.queryParam,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
if (res.data !== null && res.data !== "") {
|
||||
this.picImg = res.data;
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.queryParam.startTimestamp = "";
|
||||
this.queryParam.endTimestamp = "";
|
||||
this.queryParam.orderNum = "";
|
||||
this.queryParam.streetId = "";
|
||||
this.select = "";
|
||||
this.time = [];
|
||||
this.pageNum = 1;
|
||||
this.pageSize = 10;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* you can make up upload button and sample style by using stylesheets */
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
.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: 80px;
|
||||
height: auto;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue