|
|
@@ -12,7 +12,12 @@
|
|
|
<div class="tourist-tltBox">
|
|
|
<img src="../../../static/touristA.png" alt class="tourist-tlt-img" />
|
|
|
<div class="tourist-tlt-txt">游客暂只能使用识别功能</div>
|
|
|
- <img @click="outUser()" src="../../../static/out.png" alt class="xiaoxi_img" />
|
|
|
+ <img
|
|
|
+ @click="outUser()"
|
|
|
+ src="../../../static/out.png"
|
|
|
+ alt
|
|
|
+ class="xiaoxi_img"
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
<div class="tourist-imgBox">
|
|
|
@@ -21,19 +26,79 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="tourist-btnBox">
|
|
|
- <button class="tourist-btnA" @click="dialogVisible = true">去识别</button>
|
|
|
+ <button class="tourist-btnA" @click="dialogVisible = true">
|
|
|
+ 去识别
|
|
|
+ </button>
|
|
|
<button class="tourist-btnB" @click="touristlogin()">去登录</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 识别功能弹框 -->
|
|
|
<!-- 点击相机图标弹出选择昆虫或病害窗口 -->
|
|
|
- <el-dialog :modal-append-to-body="false" title="提示" :visible.sync="dialogVisible" width="60%">
|
|
|
+ <el-dialog
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ title=""
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :show-close="showClo"
|
|
|
+ width="62%"
|
|
|
+ class="home_box-discern-imageTxtBox"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="../../assets/image/558.png"
|
|
|
+ class="home_box-discern-image"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="home_box-discern-imageTxt">
|
|
|
+ 由<span style="color: #59aa21">中科感知</span>提供大数据服务及技术支持
|
|
|
+ </div>
|
|
|
+ <span
|
|
|
+ slot="footer"
|
|
|
+ class="dialog-footer"
|
|
|
+ style="text-align: center; margin: 0 0.5rem 0 0"
|
|
|
+ >
|
|
|
+ <!-- 选择昆虫 -->
|
|
|
+ <div class="home_box_div">
|
|
|
+ <!-- 测试 -->
|
|
|
+ <el-button
|
|
|
+ @click="(dialogVisible = false), upload()"
|
|
|
+ class="kunchongBtn"
|
|
|
+ >虫 害</el-button
|
|
|
+ >
|
|
|
+ <img v-show="sHow" src="../../assets/upload.png" alt id="img" />
|
|
|
+ <input
|
|
|
+ class="hiddenInputA"
|
|
|
+ ref="file"
|
|
|
+ type="file"
|
|
|
+ accept="image/*"
|
|
|
+ @change="uploadChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 选择病害 -->
|
|
|
+ <div class="home_box_div">
|
|
|
+ <!-- 测试 -->
|
|
|
+ <el-button
|
|
|
+ @click="(dialogVisible = false), uploadA()"
|
|
|
+ class="binghaiBtn"
|
|
|
+ >病 害</el-button
|
|
|
+ >
|
|
|
+ <img v-show="sHow" src="../../assets/upload.png" alt id="img" />
|
|
|
+ <input
|
|
|
+ class="hiddenInputA"
|
|
|
+ ref="file"
|
|
|
+ type="file"
|
|
|
+ accept="image/*"
|
|
|
+ @change="uploadChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- <el-dialog :modal-append-to-body="false" title="提示" :visible.sync="dialogVisible" width="60%">
|
|
|
<span>请选择识别类型</span>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
- <!-- 选择昆虫 -->
|
|
|
+ 选择昆虫
|
|
|
<div class="tourist_box_div">
|
|
|
- <!-- 测试 -->
|
|
|
+ 测试
|
|
|
<el-button @click="dialogVisible = false, upload()" class="kunchongBtn">昆 虫</el-button>
|
|
|
<img v-show="sHow" src="../../assets/upload.png" alt id="img" />
|
|
|
<input
|
|
|
@@ -45,9 +110,9 @@
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 选择病害 -->
|
|
|
+ 选择病害
|
|
|
<div class="tourist_box_div">
|
|
|
- <!-- 测试 -->
|
|
|
+ 测试
|
|
|
<el-button @click="dialogVisible = false, uploadA()" class="binghaiBtn">病 害</el-button>
|
|
|
<img v-show="sHow" src="../../assets/upload.png" alt id="img" />
|
|
|
<input
|
|
|
@@ -59,7 +124,7 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</span>
|
|
|
- </el-dialog>
|
|
|
+ </el-dialog> -->
|
|
|
|
|
|
<!-- 上传图片 -->
|
|
|
<div class="v-simple-cropper">
|
|
|
@@ -74,7 +139,11 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- loading -->
|
|
|
- <div v-if="loadingShow" class="loading_box" :style="'height:' + fullHeight + 'px'">
|
|
|
+ <div
|
|
|
+ v-if="loadingShow"
|
|
|
+ class="loading_boxA"
|
|
|
+ :style="'height:' + fullHeight + 'px'"
|
|
|
+ >
|
|
|
<div class="loading_box_del" @click="loadingDel()">X</div>
|
|
|
|
|
|
<div class="loading_box_div">
|
|
|
@@ -96,6 +165,7 @@ export default {
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
+ showClo: false, //右上角关闭按钮隐藏
|
|
|
loading: true, //页面加载
|
|
|
sHow: false, //预览对象
|
|
|
dialogVisible: false, //选择昆虫还是病害识别
|
|
|
@@ -106,7 +176,7 @@ export default {
|
|
|
filename: "",
|
|
|
dialogVisible: false, //选择昆虫还是病害识别
|
|
|
sHow: false, //预览对象
|
|
|
- fileA: "" //上传图片
|
|
|
+ fileA: "", //上传图片
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -128,24 +198,24 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 测试图片剪裁-昆虫
|
|
|
- change(event) {
|
|
|
- let image = document.getElementById("img"); //预览对象
|
|
|
- this.clip(event, {
|
|
|
- resultObj: image,
|
|
|
- aspectRatio: 1
|
|
|
- });
|
|
|
- this.loadingShow = true;
|
|
|
- },
|
|
|
+ // change(event) {
|
|
|
+ // let image = document.getElementById("img"); //预览对象
|
|
|
+ // this.clip(event, {
|
|
|
+ // resultObj: image,
|
|
|
+ // aspectRatio: 1,
|
|
|
+ // });
|
|
|
+ // this.loadingShow = true;
|
|
|
+ // },
|
|
|
|
|
|
- // 测试图片剪裁-病害
|
|
|
- changeA(event) {
|
|
|
- let image = document.getElementById("img"); //预览对象
|
|
|
- this.clip(event, {
|
|
|
- resultObj: image,
|
|
|
- aspectRatio: 1
|
|
|
- });
|
|
|
- this.loadingShow = true;
|
|
|
- },
|
|
|
+ // // 测试图片剪裁-病害
|
|
|
+ // changeA(event) {
|
|
|
+ // let image = document.getElementById("img"); //预览对象
|
|
|
+ // this.clip(event, {
|
|
|
+ // resultObj: image,
|
|
|
+ // aspectRatio: 1,
|
|
|
+ // });
|
|
|
+ // this.loadingShow = true;
|
|
|
+ // },
|
|
|
|
|
|
//等待动画关闭按钮
|
|
|
loadingDel() {
|
|
|
@@ -155,7 +225,7 @@ export default {
|
|
|
//测试游客登录
|
|
|
touristlogin() {
|
|
|
this.$router.replace("/");
|
|
|
- location.reload();
|
|
|
+ // location.reload();
|
|
|
sessionStorage.removeItem("login");
|
|
|
localStorage.removeItem("ret");
|
|
|
},
|
|
|
@@ -164,7 +234,7 @@ export default {
|
|
|
this.$confirm("即将退出程序, 是否继续?", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
- type: "warning"
|
|
|
+ type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
var webview = plus.webview.currentWebview(); //获取当前页面的
|
|
|
@@ -176,17 +246,282 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 初始化裁剪插件
|
|
|
+ // init() {
|
|
|
+ // let cropperImg = this.$refs["cropperImg"];
|
|
|
+ // this.cropper = new Cropper(cropperImg, {
|
|
|
+ // viewMode: 1,
|
|
|
+ // dragMode: "none",
|
|
|
+ // initialAspectRatio: 1,
|
|
|
+ // aspectRatio: 1,
|
|
|
+ // preview: ".before",
|
|
|
+ // background: false,
|
|
|
+ // autoCropArea: 0.6,
|
|
|
+ // zoomOnWheel: false,
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // // 点击上传按钮-昆虫
|
|
|
+ // upload() {
|
|
|
+ // var _this = this;
|
|
|
+ // localStorage.setItem("insect", "昆虫"); //添加一个昆虫标识在本地
|
|
|
+ // localStorage.removeItem("plant"); //删除病害标识
|
|
|
+ // this.$refs["file"].click();
|
|
|
+ // },
|
|
|
+ // // 点击上传按钮-病害
|
|
|
+ // uploadA() {
|
|
|
+ // var _this = this;
|
|
|
+ // localStorage.setItem("plant", "病害"); // 添加一个病害标识在本地
|
|
|
+ // localStorage.removeItem("insect"); //删除昆虫标识
|
|
|
+ // this.$refs["file"].click();
|
|
|
+ // },
|
|
|
+ // // 取消上传
|
|
|
+ // cancelHandle() {
|
|
|
+ // this.cropper.reset();
|
|
|
+ // this.$refs["layer"].style.display = "none";
|
|
|
+ // this.$refs["file"].value = "";
|
|
|
+ // },
|
|
|
+ // // 选择上传文件
|
|
|
+ // uploadChange(e) {
|
|
|
+ // let file = e.target.files[0];
|
|
|
+ // this.fileA = file; //传递给data中
|
|
|
+ // this.filename = file["name"];
|
|
|
+ // let URL = window.URL || window.webkitURL;
|
|
|
+ // //判断当前识别次数是否有
|
|
|
+ // let postData = this.$qs.parse({
|
|
|
+ // name: sessionStorage.getItem("login"), //账号名字
|
|
|
+ // ret: localStorage.getItem("ret"), //账号类型
|
|
|
+ // });
|
|
|
+ // this.$axios({
|
|
|
+ // method: "post",
|
|
|
+ // url: "http://192.168.1.8:8002/detect_number",
|
|
|
+ // data: postData,
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // if (localStorage.getItem("ret") === "tourist") {
|
|
|
+ // if (res.data === 0) {
|
|
|
+ // this.$notify({
|
|
|
+ // title: "提示",
|
|
|
+ // message:
|
|
|
+ // "抱歉,您的体验次数已用完;如果想再次使用,请先注册账号",
|
|
|
+ // type: "warning",
|
|
|
+ // duration: 3000,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // if (res.data[0].num == "0") {
|
|
|
+ // this.$notify({
|
|
|
+ // title: "提示",
|
|
|
+ // message: "您的识别体验还剩下最后一次机会",
|
|
|
+ // type: "warning",
|
|
|
+ // duration: 3000,
|
|
|
+ // });
|
|
|
+ // this.$refs["layer"].style.display = "block";
|
|
|
+ // this.cropper.replace(URL.createObjectURL(file));
|
|
|
+ // } else if (res.data[0].num < "5") {
|
|
|
+ // this.numData = res.data[0].num;
|
|
|
+ // this.$notify({
|
|
|
+ // title: "提示",
|
|
|
+ // message: "您的识别体验还剩" + this.numData + "次",
|
|
|
+ // type: "warning",
|
|
|
+ // duration: 2000,
|
|
|
+ // });
|
|
|
+ // this.$refs["layer"].style.display = "block";
|
|
|
+ // this.cropper.replace(URL.createObjectURL(file));
|
|
|
+ // } else {
|
|
|
+ // this.$refs["layer"].style.display = "block";
|
|
|
+ // this.cropper.replace(URL.createObjectURL(file));
|
|
|
+ // }
|
|
|
+ // } else if (localStorage.getItem("ret") === "user") {
|
|
|
+ // if (res.data === 0) {
|
|
|
+ // } else if (res.data === 1) {
|
|
|
+ // this.$refs["layer"].style.display = "block";
|
|
|
+ // this.cropper.replace(URL.createObjectURL(file));
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // .catch((error) => {
|
|
|
+ // console.log(error);
|
|
|
+ // });
|
|
|
+
|
|
|
+ // // this.$refs["layer"].style.display = "block";
|
|
|
+ // // this.cropper.replace(URL.createObjectURL(file));
|
|
|
+ // },
|
|
|
+ // //上传
|
|
|
+ // confirmHandle() {
|
|
|
+ // let _this = this;
|
|
|
+ // _this.base();
|
|
|
+ // //获取图片的ba64编码
|
|
|
+ // this.cropper.reset();
|
|
|
+ // this.$refs["layer"].style.display = "none";
|
|
|
+ // this.loadingShow = true;
|
|
|
+ // // 判断用户选择的病害还是昆虫;
|
|
|
+ // if (localStorage.getItem("insect") !== null) {
|
|
|
+ // //虫害
|
|
|
+ // let form = new FormData();
|
|
|
+ // form.append("img_addr", _this.fileA);
|
|
|
+ // this.$axios({
|
|
|
+ // method: "post",
|
|
|
+ // url: "http://192.168.1.8:8002/app_insect",
|
|
|
+ // anync: true,
|
|
|
+ // data: form,
|
|
|
+ // headers: {
|
|
|
+ // "Content-Type": "multipart/form-data",
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // self.botNav = true; //隐藏底部导航
|
|
|
+ // // window.clearInterval(timer); //销毁计时器
|
|
|
+ // if (
|
|
|
+ // res.data.msg === "识别失败_!" ||
|
|
|
+ // res.data.msg === "" ||
|
|
|
+ // res.data.data === null
|
|
|
+ // ) {
|
|
|
+ // this.$message({
|
|
|
+ // type: "error",
|
|
|
+ // message: "识别失败!",
|
|
|
+ // });
|
|
|
+
|
|
|
+ // this.$router.push({
|
|
|
+ // name: "show",
|
|
|
+ // params: { data: form.get("img_addr") },
|
|
|
+ // });
|
|
|
+ // localStorage.setItem("recordID", "1");
|
|
|
+ // this.loadingShow = false;
|
|
|
+ // } else {
|
|
|
+ // this.$notify({
|
|
|
+ // title: "成功",
|
|
|
+ // message: "识别成功",
|
|
|
+ // type: "success",
|
|
|
+ // });
|
|
|
+ // localStorage.setItem(
|
|
|
+ // "axiosData",
|
|
|
+ // JSON.stringify(res.data.data[0])
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+ // this.$router.push({
|
|
|
+ // name: "show",
|
|
|
+ // params: { data: form.get("img_addr") },
|
|
|
+ // });
|
|
|
+ // localStorage.setItem("recordID", "1");
|
|
|
+ // this.loadingShow = false;
|
|
|
+ // this.$refs["file"].value = "";
|
|
|
+ // })
|
|
|
+ // .catch((error) => {
|
|
|
+ // // window.clearInterval(timer); //销毁计时器
|
|
|
+ // this.$message({
|
|
|
+ // type: "error",
|
|
|
+ // message: "识别失败!",
|
|
|
+ // });
|
|
|
+ // this.$router.push({
|
|
|
+ // name: "show",
|
|
|
+ // params: { data: form.get("img_addr") },
|
|
|
+ // });
|
|
|
+ // localStorage.setItem("recordID", "1");
|
|
|
+ // this.loadingShow = false;
|
|
|
+ // this.$refs["file"].value = "";
|
|
|
+ // });
|
|
|
+ // } else if (localStorage.getItem("plant") !== null) {
|
|
|
+ // //病害
|
|
|
+ // let form = new FormData();
|
|
|
+ // form.append("img_addr", _this.fileA);
|
|
|
+ // this.$axios({
|
|
|
+ // method: "post",
|
|
|
+ // url: "http://192.168.1.8:8002/app_plant",
|
|
|
+ // anync: true,
|
|
|
+ // data: form,
|
|
|
+ // headers: {
|
|
|
+ // "Content-Type": "multipart/form-data",
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // _this.botNav = true; //隐藏底部导航
|
|
|
+ // if (
|
|
|
+ // res.data.msg === "识别失败_! " ||
|
|
|
+ // res.data.msg === "" ||
|
|
|
+ // res.data.data === null
|
|
|
+ // ) {
|
|
|
+ // this.$message({
|
|
|
+ // type: "error",
|
|
|
+ // message: "识别失败!",
|
|
|
+ // });
|
|
|
+ // _this.botNav = false; //隐藏底部导航
|
|
|
+
|
|
|
+ // this.$router.push({
|
|
|
+ // name: "show",
|
|
|
+ // params: { data: form.get("img_addr") },
|
|
|
+ // });
|
|
|
+ // localStorage.setItem("recordID", "1");
|
|
|
+ // } else {
|
|
|
+ // this.$notify({
|
|
|
+ // title: "成功",
|
|
|
+ // message: "识别成功",
|
|
|
+ // type: "success",
|
|
|
+ // });
|
|
|
+ // localStorage.setItem(
|
|
|
+ // "axiosData",
|
|
|
+ // JSON.stringify(res.data.data[0])
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+ // this.$router.push({
|
|
|
+ // name: "show",
|
|
|
+ // params: { data: form.get("img_addr") },
|
|
|
+ // });
|
|
|
+ // localStorage.setItem("recordID", "1");
|
|
|
+ // this.loadingShow = false;
|
|
|
+ // this.$refs["file"].value = "";
|
|
|
+ // })
|
|
|
+ // .catch((error) => {
|
|
|
+ // this.$message({
|
|
|
+ // type: "error",
|
|
|
+ // message: "识别失败aaaaaaa!",
|
|
|
+ // });
|
|
|
+ // this.$router.push({
|
|
|
+ // name: "show",
|
|
|
+ // params: { data: form.get("img_addr") },
|
|
|
+ // });
|
|
|
+ // localStorage.setItem("recordID", "1");
|
|
|
+ // this.loadingShow = false;
|
|
|
+ // this.$refs["file"].value = "";
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // base() {
|
|
|
+ // var _this = this;
|
|
|
+ // var files = _this.fileA;
|
|
|
+ // if (files) {
|
|
|
+ // var file = files;
|
|
|
+ // var reader = new FileReader();
|
|
|
+ // reader.readAsDataURL(file);
|
|
|
+ // reader.onload = function () {
|
|
|
+ // img.src = this.result;
|
|
|
+ // };
|
|
|
+ // var img = new Image(),
|
|
|
+ // width = 1024, //image resize 压缩后的宽
|
|
|
+ // quality = 0.8, //image quality 压缩质量
|
|
|
+ // canvas = document.createElement("canvas"),
|
|
|
+ // drawer = canvas.getContext("2d");
|
|
|
+ // img.onload = function () {
|
|
|
+ // canvas.width = width;
|
|
|
+ // canvas.height = width * (img.height / img.width);
|
|
|
+ // drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
|
+ // var base64 = canvas.toDataURL("image/jpeg", quality); // 这里就拿到了压缩后的base64图片
|
|
|
+ // console.log(base64);
|
|
|
+ // localStorage.setItem("ba64dataA", base64);
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+
|
|
|
+ // 测试测试
|
|
|
+ // 初始化裁剪插件
|
|
|
init() {
|
|
|
let cropperImg = this.$refs["cropperImg"];
|
|
|
this.cropper = new Cropper(cropperImg, {
|
|
|
viewMode: 1,
|
|
|
dragMode: "none",
|
|
|
- initialAspectRatio: 1,
|
|
|
- aspectRatio: 1,
|
|
|
+ initialAspectRatio: 0,
|
|
|
+ aspectRatio: 0,
|
|
|
preview: ".before",
|
|
|
background: false,
|
|
|
autoCropArea: 0.6,
|
|
|
- zoomOnWheel: false
|
|
|
+ zoomOnWheel: false,
|
|
|
});
|
|
|
},
|
|
|
// 点击上传按钮-昆虫
|
|
|
@@ -194,111 +529,88 @@ export default {
|
|
|
var _this = this;
|
|
|
localStorage.setItem("insect", "昆虫"); //添加一个昆虫标识在本地
|
|
|
localStorage.removeItem("plant"); //删除病害标识
|
|
|
+ //删除测试
|
|
|
+ localStorage.removeItem("ba64dataA");
|
|
|
+ localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
|
|
|
+ localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
|
|
|
+ localStorage.removeItem("memoryID");
|
|
|
+ localStorage.removeItem("memoryDistinction");
|
|
|
+ localStorage.removeItem("collectID");
|
|
|
+ localStorage.removeItem("collectDistinction");
|
|
|
+ localStorage.removeItem("seek_dataID");
|
|
|
+ localStorage.removeItem("Point");
|
|
|
this.$refs["file"].click();
|
|
|
},
|
|
|
+
|
|
|
// 点击上传按钮-病害
|
|
|
uploadA() {
|
|
|
var _this = this;
|
|
|
localStorage.setItem("plant", "病害"); // 添加一个病害标识在本地
|
|
|
localStorage.removeItem("insect"); //删除昆虫标识
|
|
|
+ //删除测试
|
|
|
+ localStorage.removeItem("ba64dataA");
|
|
|
+ localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
|
|
|
+ localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
|
|
|
+ localStorage.removeItem("memoryID");
|
|
|
+ localStorage.removeItem("memoryDistinction");
|
|
|
+ localStorage.removeItem("collectID");
|
|
|
+ localStorage.removeItem("collectDistinction");
|
|
|
+ localStorage.removeItem("seek_dataID");
|
|
|
+ localStorage.removeItem("Point");
|
|
|
this.$refs["file"].click();
|
|
|
},
|
|
|
- // 取消上传
|
|
|
- cancelHandle() {
|
|
|
- this.cropper.reset();
|
|
|
- this.$refs["layer"].style.display = "none";
|
|
|
- this.$refs["file"].value = "";
|
|
|
- },
|
|
|
// 选择上传文件
|
|
|
uploadChange(e) {
|
|
|
let file = e.target.files[0];
|
|
|
this.fileA = file; //传递给data中
|
|
|
this.filename = file["name"];
|
|
|
let URL = window.URL || window.webkitURL;
|
|
|
- //判断当前识别次数是否有
|
|
|
- let postData = this.$qs.parse({
|
|
|
- name: sessionStorage.getItem("login"), //账号名字
|
|
|
- ret: localStorage.getItem("ret") //账号类型
|
|
|
- });
|
|
|
- this.$axios({
|
|
|
- method: "post",
|
|
|
- url: "bigservers/detect_number",
|
|
|
- data: postData
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- if (localStorage.getItem("ret") === "tourist") {
|
|
|
- if (res.data === 0) {
|
|
|
- this.$notify({
|
|
|
- title: "提示",
|
|
|
- message:
|
|
|
- "抱歉,您的体验次数已用完;如果想再次使用,请先注册账号",
|
|
|
- type: "warning",
|
|
|
- duration: 3000
|
|
|
- });
|
|
|
- }
|
|
|
- if (res.data[0].num == "0") {
|
|
|
- this.$notify({
|
|
|
- title: "提示",
|
|
|
- message: "您的识别体验还剩下最后一次机会",
|
|
|
- type: "warning",
|
|
|
- duration: 3000
|
|
|
- });
|
|
|
- this.$refs["layer"].style.display = "block";
|
|
|
- this.cropper.replace(URL.createObjectURL(file));
|
|
|
- } else if (res.data[0].num < "5") {
|
|
|
- this.numData = res.data[0].num;
|
|
|
- this.$notify({
|
|
|
- title: "提示",
|
|
|
- message: "您的识别体验还剩" + this.numData + "次",
|
|
|
- type: "warning",
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- this.$refs["layer"].style.display = "block";
|
|
|
- this.cropper.replace(URL.createObjectURL(file));
|
|
|
- } else {
|
|
|
- this.$refs["layer"].style.display = "block";
|
|
|
- this.cropper.replace(URL.createObjectURL(file));
|
|
|
- }
|
|
|
- } else if (localStorage.getItem("ret") === "user") {
|
|
|
- if (res.data === 0) {
|
|
|
- } else if (res.data === 1) {
|
|
|
- this.$refs["layer"].style.display = "block";
|
|
|
- this.cropper.replace(URL.createObjectURL(file));
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log(error);
|
|
|
- });
|
|
|
-
|
|
|
- // this.$refs["layer"].style.display = "block";
|
|
|
- // this.cropper.replace(URL.createObjectURL(file));
|
|
|
+ this.$refs["layer"].style.display = "block";
|
|
|
+ this.cropper.replace(URL.createObjectURL(file));
|
|
|
+ },
|
|
|
+ // 取消上传
|
|
|
+ cancelHandle() {
|
|
|
+ this.cropper.reset();
|
|
|
+ this.$refs["layer"].style.display = "none";
|
|
|
+ this.$refs["file"].value = "";
|
|
|
},
|
|
|
//上传
|
|
|
confirmHandle() {
|
|
|
let _this = this;
|
|
|
- _this.base();
|
|
|
- //获取图片的ba64编码
|
|
|
- this.cropper.reset();
|
|
|
this.$refs["layer"].style.display = "none";
|
|
|
this.loadingShow = true;
|
|
|
+ var fileA = this.cropper
|
|
|
+ .getCroppedCanvas({
|
|
|
+ imageSmoothingQuality: "high",
|
|
|
+ })
|
|
|
+ .toDataURL("image/jpeg");
|
|
|
+ localStorage.setItem("ba64dataA", fileA);
|
|
|
+ let blob = _this.dataURLtoFile(fileA, "image/jpeg"); //将base64转换为blob
|
|
|
+ let data = _this.submitPic(blob); //再将blob转换为file
|
|
|
+ var img = data.get("file");
|
|
|
+
|
|
|
// 判断用户选择的病害还是昆虫;
|
|
|
if (localStorage.getItem("insect") !== null) {
|
|
|
//虫害
|
|
|
let form = new FormData();
|
|
|
- form.append("img_addr", _this.fileA);
|
|
|
+ form.append("imageFile", img);
|
|
|
+ console.log(form.get("imageFile"));
|
|
|
+
|
|
|
+ form.append("imageType", "1");
|
|
|
+ form.append("uniqueKey", "84e6eb40f3a616dd14b1fefc75425006");
|
|
|
+ form.append("username", "yunfei");
|
|
|
+ form.append("gis", "118.279643#31.221456");
|
|
|
this.$axios({
|
|
|
method: "post",
|
|
|
- url: "bigservers/app_insect",
|
|
|
+ url: "http://47.99.110.100:8080/recognizationSys/api/recognization",
|
|
|
anync: true,
|
|
|
data: form,
|
|
|
headers: {
|
|
|
- "Content-Type": "multipart/form-data"
|
|
|
- }
|
|
|
+ "Content-Type": "multipart/form-data",
|
|
|
+ },
|
|
|
})
|
|
|
- .then(res => {
|
|
|
+ .then((res) => {
|
|
|
self.botNav = true; //隐藏底部导航
|
|
|
- // window.clearInterval(timer); //销毁计时器
|
|
|
if (
|
|
|
res.data.msg === "识别失败_!" ||
|
|
|
res.data.msg === "" ||
|
|
|
@@ -306,12 +618,12 @@ export default {
|
|
|
) {
|
|
|
this.$message({
|
|
|
type: "error",
|
|
|
- message: "识别失败!"
|
|
|
+ message: "识别失败!",
|
|
|
});
|
|
|
|
|
|
this.$router.push({
|
|
|
name: "show",
|
|
|
- params: { data: form.get("img_addr") }
|
|
|
+ params: { data: form.get("imageFile") },
|
|
|
});
|
|
|
localStorage.setItem("recordID", "1");
|
|
|
this.loadingShow = false;
|
|
|
@@ -319,30 +631,36 @@ export default {
|
|
|
this.$notify({
|
|
|
title: "成功",
|
|
|
message: "识别成功",
|
|
|
- type: "success"
|
|
|
+ type: "success",
|
|
|
});
|
|
|
localStorage.setItem(
|
|
|
"axiosData",
|
|
|
JSON.stringify(res.data.data[0])
|
|
|
);
|
|
|
+ this.$router.push({
|
|
|
+ name: "show",
|
|
|
+ params: { data: form.get("imageFile") },
|
|
|
+ });
|
|
|
+ localStorage.setItem("recordID", "1");
|
|
|
+ // console.log(form.get("imageFile"));
|
|
|
}
|
|
|
this.$router.push({
|
|
|
name: "show",
|
|
|
- params: { data: form.get("img_addr") }
|
|
|
+ params: { data: form.get("imageFile") },
|
|
|
});
|
|
|
localStorage.setItem("recordID", "1");
|
|
|
this.loadingShow = false;
|
|
|
this.$refs["file"].value = "";
|
|
|
})
|
|
|
- .catch(error => {
|
|
|
+ .catch((error) => {
|
|
|
// window.clearInterval(timer); //销毁计时器
|
|
|
this.$message({
|
|
|
type: "error",
|
|
|
- message: "识别失败!"
|
|
|
+ message: "识别失败!",
|
|
|
});
|
|
|
this.$router.push({
|
|
|
name: "show",
|
|
|
- params: { data: form.get("img_addr") }
|
|
|
+ params: { data: form.get("imageFile") },
|
|
|
});
|
|
|
localStorage.setItem("recordID", "1");
|
|
|
this.loadingShow = false;
|
|
|
@@ -351,17 +669,21 @@ export default {
|
|
|
} else if (localStorage.getItem("plant") !== null) {
|
|
|
//病害
|
|
|
let form = new FormData();
|
|
|
- form.append("img_addr", _this.fileA);
|
|
|
+ form.append("imageFile", img);
|
|
|
+ form.append("imageType", "2");
|
|
|
+ form.append("uniqueKey", "84e6eb40f3a616dd14b1fefc75425006");
|
|
|
+ form.append("username", "yunfei");
|
|
|
+ form.append("gis", "118.279643#31.221456");
|
|
|
this.$axios({
|
|
|
method: "post",
|
|
|
- url: "bigservers/app_plant",
|
|
|
+ url: "http://47.99.110.100:8080/recognizationSys/api/recognization",
|
|
|
anync: true,
|
|
|
data: form,
|
|
|
headers: {
|
|
|
- "Content-Type": "multipart/form-data"
|
|
|
- }
|
|
|
+ "Content-Type": "multipart/form-data",
|
|
|
+ },
|
|
|
})
|
|
|
- .then(res => {
|
|
|
+ .then((res) => {
|
|
|
_this.botNav = true; //隐藏底部导航
|
|
|
if (
|
|
|
res.data.msg === "识别失败_! " ||
|
|
|
@@ -370,20 +692,20 @@ export default {
|
|
|
) {
|
|
|
this.$message({
|
|
|
type: "error",
|
|
|
- message: "识别失败!"
|
|
|
+ message: "识别失败!",
|
|
|
});
|
|
|
- _this.botNav = false; //隐藏底部导航
|
|
|
+ _this.botNav = true; //隐藏底部导航
|
|
|
|
|
|
this.$router.push({
|
|
|
name: "show",
|
|
|
- params: { data: form.get("img_addr") }
|
|
|
+ params: { data: form.get("imageFile") },
|
|
|
});
|
|
|
localStorage.setItem("recordID", "1");
|
|
|
} else {
|
|
|
this.$notify({
|
|
|
title: "成功",
|
|
|
message: "识别成功",
|
|
|
- type: "success"
|
|
|
+ type: "success",
|
|
|
});
|
|
|
localStorage.setItem(
|
|
|
"axiosData",
|
|
|
@@ -392,20 +714,20 @@ export default {
|
|
|
}
|
|
|
this.$router.push({
|
|
|
name: "show",
|
|
|
- params: { data: form.get("img_addr") }
|
|
|
+ params: { data: form.get("imageFile") },
|
|
|
});
|
|
|
localStorage.setItem("recordID", "1");
|
|
|
this.loadingShow = false;
|
|
|
this.$refs["file"].value = "";
|
|
|
})
|
|
|
- .catch(error => {
|
|
|
+ .catch((error) => {
|
|
|
this.$message({
|
|
|
type: "error",
|
|
|
- message: "识别失败aaaaaaa!"
|
|
|
+ message: "识别失败aaaaaaa!",
|
|
|
});
|
|
|
this.$router.push({
|
|
|
name: "show",
|
|
|
- params: { data: form.get("img_addr") }
|
|
|
+ params: { data: form.get("imageFile") },
|
|
|
});
|
|
|
localStorage.setItem("recordID", "1");
|
|
|
this.loadingShow = false;
|
|
|
@@ -413,31 +735,27 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- base() {
|
|
|
- var _this = this;
|
|
|
- var files = _this.fileA;
|
|
|
- if (files) {
|
|
|
- var file = files;
|
|
|
- var reader = new FileReader();
|
|
|
- reader.readAsDataURL(file);
|
|
|
- reader.onload = function() {
|
|
|
- img.src = this.result;
|
|
|
- };
|
|
|
- var img = new Image(),
|
|
|
- width = 1024, //image resize 压缩后的宽
|
|
|
- quality = 0.8, //image quality 压缩质量
|
|
|
- canvas = document.createElement("canvas"),
|
|
|
- drawer = canvas.getContext("2d");
|
|
|
- img.onload = function() {
|
|
|
- canvas.width = width;
|
|
|
- canvas.height = width * (img.height / img.width);
|
|
|
- drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
|
- var base64 = canvas.toDataURL("image/jpeg", quality); // 这里就拿到了压缩后的base64图片
|
|
|
- console.log(base64);
|
|
|
- localStorage.setItem("ba64dataA", base64);
|
|
|
- };
|
|
|
+
|
|
|
+ //base64转为file类型
|
|
|
+ //将base64转换为blob
|
|
|
+ dataURLtoFile(dataURI, type) {
|
|
|
+ let binary = atob(dataURI.split(",")[1]);
|
|
|
+ let array = [];
|
|
|
+ for (let i = 0; i < binary.length; i++) {
|
|
|
+ array.push(binary.charCodeAt(i));
|
|
|
}
|
|
|
- }
|
|
|
+ return new Blob([new Uint8Array(array)], { type: type });
|
|
|
+ },
|
|
|
+ // 图片提交事件。把bold格式转为formData格式进行提交。
|
|
|
+ submitPic(fileData) {
|
|
|
+ console.log(fileData);
|
|
|
+ let form = new FormData();
|
|
|
+ // console.log(form)
|
|
|
+ let fileOfBlob = new File([fileData], this.fileA.name); // 重命名了
|
|
|
+ console.log(this.fileA.name);
|
|
|
+ form.append("file", fileOfBlob);
|
|
|
+ return form;
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {},
|
|
|
@@ -452,7 +770,7 @@ export default {
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='scss'>
|
|
|
@@ -505,4 +823,132 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 识别弹框样式
|
|
|
+.home_box-discern-imageTxtBox {
|
|
|
+ margin: 2.5rem 0 0 0;
|
|
|
+}
|
|
|
+.home_box-discern-imageTxtBox .el-dialog .el-dialog__body {
|
|
|
+ // margin: 2rem 0 -1rem 0;
|
|
|
+ margin: 0 0 -1rem 0;
|
|
|
+}
|
|
|
+.home_box-discern-image {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ // top: -2.8rem;
|
|
|
+ top: -4rem;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.home_box-discern-imageTxt {
|
|
|
+ margin: 0.5rem 0 0 0;
|
|
|
+}
|
|
|
+.home_box_div {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+//昆虫按钮
|
|
|
+.kunchongBtn span {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+//病害按钮
|
|
|
+.binghaiBtn span {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+// 上传文件input
|
|
|
+.home_box .hiddenInput,
|
|
|
+.home_box .hiddenInputA {
|
|
|
+ width: 8rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 1rem;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.home_box_div .hiddenInputA {
|
|
|
+ width: 8rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 1rem;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+// loading
|
|
|
+.loading_boxA {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ // top: -19rem;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ z-index: 25;
|
|
|
+}
|
|
|
+.loading_box_del {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #fff;
|
|
|
+ float: left;
|
|
|
+ margin: 0.5rem 0 0 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.loading_box_div {
|
|
|
+ margin: 60% 0 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.loading_text {
|
|
|
+ color: #f3f3f3;
|
|
|
+ font-size: 25px;
|
|
|
+}
|
|
|
+// .el-dialog__footer {
|
|
|
+// text-align: center !important;
|
|
|
+// }
|
|
|
+// loading动画
|
|
|
+.loading_gif {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+// 裁剪框
|
|
|
+.v-simple-cropper {
|
|
|
+ .file {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .v-cropper-layer {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 99999;
|
|
|
+ display: none;
|
|
|
+ .layer-header {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99999;
|
|
|
+ background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 0.8rem;
|
|
|
+ padding: 0 0.2rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .cancel,
|
|
|
+ .confirm {
|
|
|
+ line-height: 0.8rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ background: inherit;
|
|
|
+ border: 0;
|
|
|
+ outline: 0;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .confirm {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ position: inherit !important;
|
|
|
+ border-radius: inherit !important;
|
|
|
+ float: inherit !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|