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