|
|
@@ -0,0 +1,587 @@
|
|
|
+<template>
|
|
|
+ <div class="questionNamep">
|
|
|
+ <!-- 0=企业微信，1=H5相机 -->
|
|
|
+ <!-- 企业微信拍照 -->
|
|
|
+ <div class="cameraDiv" @click="uploadImg" v-if="userInfo.photoMethod == '0'">
|
|
|
+ <van-icon class="photo photos" name="photograph" size="22px" color="#969696" />
|
|
|
+ </div>
|
|
|
+ <!-- 原生自带拍照 -->
|
|
|
+ <H5Camera
|
|
|
+ @getImg="getImg"
|
|
|
+ ref="H5Camera"
|
|
|
+ :capture="pictureSource == '1' ? '' : 'camera'"
|
|
|
+ v-else />
|
|
|
+ <div id="allmap"></div>
|
|
|
+ <div class="mask" v-if="progressFlag">
|
|
|
+ <el-progress
|
|
|
+ type="circle"
|
|
|
+ :percentage="percentage"
|
|
|
+ :show-text="true"
|
|
|
+ :width="110"
|
|
|
+ :format="format"></el-progress>
|
|
|
+ <div class="progressClose" @click="progressClose">取消</div>
|
|
|
+ </div>
|
|
|
+ <imageAIVerifyErr
|
|
|
+ v-if="imageAIVerifyFlag"
|
|
|
+ :imageAIVerifyFlag="imageAIVerifyFlag"
|
|
|
+ :imageAIVerifyData="imageAIVerifyData"
|
|
|
+ @confirmUpload="confirmUpload"
|
|
|
+ @uploadImgFun="uploadImgFun"
|
|
|
+ :source="'visit'"
|
|
|
+ @normalFlow="normalFlow"
|
|
|
+ @close="close"></imageAIVerifyErr>
|
|
|
+ <!-- 图像识别白名单弹框提示 -->
|
|
|
+ <imageWhiteStore
|
|
|
+ v-if="imageWhiteStoreFlag"
|
|
|
+ :imageWhiteStoreFlag="imageWhiteStoreFlag"
|
|
|
+ :imageWhiteStoreData="imageWhiteStoreData"
|
|
|
+ @normalFlow="normalFlow"
|
|
|
+ @close="close">
|
|
|
+ </imageWhiteStore>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { addstorePhoto, addVisitsPosition, addPhotoToDB } from '@/api/index';
|
|
|
+import imageAIVerifyErr from './imageAIVerifyErr';
|
|
|
+import imageWhiteStore from './imageWhiteStore';
|
|
|
+import H5Camera from '@/components/H5Camera';
|
|
|
+import axios from 'axios';
|
|
|
+import uploadAliOss from '@/utils/uploadAliOss';
|
|
|
+import { addH5Photo } from '@/api/H5Camera';
|
|
|
+import { mapState } from 'vuex';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'uploadImg',
|
|
|
+ components: { imageAIVerifyErr, H5Camera, imageWhiteStore },
|
|
|
+ props: {
|
|
|
+ uploadid: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ storeGroupId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ parentCollectionId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ secondCollectionId: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ firstCollectionId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ fourthCollectionId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ thirdCollectionId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ visitsId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ taskId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ collectionId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ objectType: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: Number,
|
|
|
+ default: 1,
|
|
|
+ },
|
|
|
+ imgArr: {
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ visitModel: {
|
|
|
+ type: String,
|
|
|
+ default: '1',
|
|
|
+ },
|
|
|
+ deviceCode: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ putInCode: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ pictureSource: {
|
|
|
+ // 是否允许从相册选择图片 1:允许；0:不允许
|
|
|
+ type: String,
|
|
|
+ default: '0',
|
|
|
+ },
|
|
|
+ photoIdentifyType: {
|
|
|
+ // 图匠识别目的(1:店招内容识别(不能连拍和多选),3:调色机识别(不能连拍和多选),6:陈列SKU图片识别(不需要图匠实时识别))
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ continuousShoot: {
|
|
|
+ // 是否允许连拍/相册多选 1:允许；0:不允许
|
|
|
+ type: String,
|
|
|
+ default: '0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ userInfo: (state) => state.user.userInfo,
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ shows: false,
|
|
|
+ url: '',
|
|
|
+ progressFlag: false,
|
|
|
+ percentage: 0,
|
|
|
+ timeFlag: null,
|
|
|
+ imageAIVerifyFlag: false,
|
|
|
+ imageAIVerifyData: null, //图匠校验返回的数据
|
|
|
+ mediaId: '', //当前上传图片id
|
|
|
+ addressesRemark: '', //当前位置信息
|
|
|
+ controller: null, //取消请求状态
|
|
|
+ fileUrl: '',
|
|
|
+ imageWhiteStoreData: null,
|
|
|
+ imageWhiteStoreFlag: false,
|
|
|
+ localIdsArr: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 原生H5拍照图片
|
|
|
+ // url: base64
|
|
|
+ getImg(base64) {
|
|
|
+ if (this.objectType == '' || this.objectType == null) {
|
|
|
+ this.$toast('请选择类型！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 图片名称：用户名-时间戳
|
|
|
+ let username = localStorage.getItem('loginName');
|
|
|
+ let imgName = username + '-' + new Date().getTime();
|
|
|
+ uploadAliOss(base64, imgName)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.url && res.url.indexOf('http') != -1) {
|
|
|
+ this.fileUrl = res.url;
|
|
|
+ this.uploadImagev();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log('err:' + err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadImgFun() {
|
|
|
+ // 0=企业微信，1=H5相机
|
|
|
+ if (this.userInfo.photoMethod == '0') {
|
|
|
+ this.uploadImg();
|
|
|
+ } else {
|
|
|
+ this.$refs.H5Camera.camera();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadImg() {
|
|
|
+ var map = new TMap.Map('allmap', {
|
|
|
+ zoom: 14,
|
|
|
+ center: new TMap.LatLng(39.986785, 116.301012),
|
|
|
+ });
|
|
|
+
|
|
|
+ var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
|
|
|
+ var markers = new TMap.MultiMarker({
|
|
|
+ map: map,
|
|
|
+ geometries: [],
|
|
|
+ });
|
|
|
+ markers.setGeometries([]);
|
|
|
+
|
|
|
+ if (this.objectType == '' || this.objectType == null) {
|
|
|
+ this.$toast('请选择类型！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let url = window.location.href;
|
|
|
+ let that = this;
|
|
|
+ let wx = this.wx;
|
|
|
+ let qiyeData;
|
|
|
+ this.addressesRemark = '';
|
|
|
+ const instance = axios.create();
|
|
|
+ instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
|
|
|
+ instance
|
|
|
+ .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
|
|
|
+ params: {
|
|
|
+ url: url,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ if (response.status == 200) {
|
|
|
+ qiyeData = response.data.data;
|
|
|
+ wx.config({
|
|
|
+ beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
|
|
|
+ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
|
+ appId: qiyeData.appId, // 必填，企业微信的corpID
|
|
|
+ timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
|
|
|
+ nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
|
|
|
+ signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
|
|
|
+ jsApiList: ['ready', 'chooseImage', 'uploadImage', 'getLocation'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
|
|
|
+ });
|
|
|
+ wx.ready(function () {
|
|
|
+ wx.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ success: function (res) {
|
|
|
+ var location = new TMap.LatLng(res.latitude, res.longitude);
|
|
|
+ map.setCenter(location);
|
|
|
+ markers.updateGeometries([
|
|
|
+ {
|
|
|
+ id: 'main', // 点标注数据数组
|
|
|
+ position: location,
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ geocoder.getAddress({ location: location }).then(
|
|
|
+ function (result) {
|
|
|
+ var addresses = result.result.formatted_addresses;
|
|
|
+ that.addressesRemark = addresses.recommend;
|
|
|
+ },
|
|
|
+ function (err) {
|
|
|
+ that.addressesRemark = '';
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ fail: function () {
|
|
|
+ that.$dialog.alert({
|
|
|
+ message: 'GPS未开启',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ console.log(that.pictureSource);
|
|
|
+ let sourceType = that.pictureSource == '1' ? ['album', 'camera'] : ['camera'];
|
|
|
+ let count = 1;
|
|
|
+ // 1:店招内容识别(不能连拍和多选),3:调色机识别(不能连拍和多选)
|
|
|
+ if (that.photoIdentifyType != 1 && that.photoIdentifyType != 3) {
|
|
|
+ count = that.continuousShoot == '1' ? 5 : 1; //是否允许连拍/相册多选 最多5张
|
|
|
+ }
|
|
|
+ wx.chooseImage({
|
|
|
+ count: count,
|
|
|
+ sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
|
|
|
+ sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有
|
|
|
+ defaultCameraMode: 'normal', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
|
|
|
+ isSaveToAlbum: 0, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
|
|
|
+ success: function (res) {
|
|
|
+ let localIds = res.localIds;
|
|
|
+ that.localIdsArr = [];
|
|
|
+ that.syncUpload(localIds);
|
|
|
+ // var localIds = '';
|
|
|
+ // if (res.localIds != undefined) {
|
|
|
+ // localIds = res.localIds[0];
|
|
|
+ // } else {
|
|
|
+ // localIds = res.localId;
|
|
|
+ // }
|
|
|
+ // wx.uploadImage({
|
|
|
+ // localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
|
|
|
+ // isShowProgressTips: 0, // 默认为1，显示进度提示
|
|
|
+ // success: function (res) {
|
|
|
+ // that.mediaId = res.serverId;
|
|
|
+ // that.uploadImagev(addressesRemark);
|
|
|
+ // },
|
|
|
+ // fail: (err) => {
|
|
|
+ // that.$toast(err.errMsg);
|
|
|
+ // that.$toast(err.errCode);
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ syncUpload(localIds) {
|
|
|
+ if (!localIds.length) {
|
|
|
+ this.uploadImagev();
|
|
|
+ } else {
|
|
|
+ var localId = localIds.pop();
|
|
|
+ wx.uploadImage({
|
|
|
+ localId: localId,
|
|
|
+ isShowProgressTips: 1, // 默认为1，显示进度提示
|
|
|
+ success: (res) => {
|
|
|
+ this.localIdsArr.push(res.serverId);
|
|
|
+ this.syncUpload(localIds);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadImagev() {
|
|
|
+ // 初始化重置 图匠校验
|
|
|
+ this.resetProgress();
|
|
|
+ this.close();
|
|
|
+ var that = this;
|
|
|
+ var parentCollectionId = null;
|
|
|
+ if (that.parentCollectionId != null && that.parentCollectionId != 'null') {
|
|
|
+ parentCollectionId = that.parentCollectionId;
|
|
|
+ }
|
|
|
+ var secondCollectionId = null;
|
|
|
+ if (that.secondCollectionId != null && that.secondCollectionId != 'null') {
|
|
|
+ secondCollectionId = that.secondCollectionId;
|
|
|
+ }
|
|
|
+ var firstCollectionId = null;
|
|
|
+ if (that.firstCollectionId != null && that.firstCollectionId != 'null') {
|
|
|
+ firstCollectionId = that.firstCollectionId;
|
|
|
+ }
|
|
|
+ var fourthCollectionId = null;
|
|
|
+ if (that.fourthCollectionId != null && that.fourthCollectionId != 'null') {
|
|
|
+ fourthCollectionId = that.fourthCollectionId;
|
|
|
+ }
|
|
|
+ var thirdCollectionId = null;
|
|
|
+ if (that.thirdCollectionId != null && that.thirdCollectionId != 'null') {
|
|
|
+ thirdCollectionId = that.thirdCollectionId;
|
|
|
+ }
|
|
|
+ var form = {
|
|
|
+ mediaId: '',
|
|
|
+ fileUrl: '',
|
|
|
+ collectionItemId: that.collectionId,
|
|
|
+ objectType: that.objectType,
|
|
|
+ storeGroupId: that.storeGroupId,
|
|
|
+ taskId: that.taskId,
|
|
|
+ visitsId: localStorage.getItem('visitId'),
|
|
|
+ visitModel: that.visitModel,
|
|
|
+ visitSource: '1',
|
|
|
+ locationRemark: that.addressesRemark,
|
|
|
+ parentCollectionId: parentCollectionId,
|
|
|
+ secondCollectionId: secondCollectionId,
|
|
|
+ firstCollectionId: firstCollectionId,
|
|
|
+ fourthCollectionId: fourthCollectionId,
|
|
|
+ thirdCollectionId: thirdCollectionId,
|
|
|
+ deviceCode: that.deviceCode, //设备编号
|
|
|
+ putInCode: that.putInCode, //投放编号
|
|
|
+ };
|
|
|
+ // 0=企业微信，1=H5相机
|
|
|
+ if (this.userInfo.photoMethod == '0') {
|
|
|
+ form.mediaId = this.localIdsArr; // string 图片素材id
|
|
|
+ } else {
|
|
|
+ form.fileUrl = this.fileUrl; // string 图片素材id
|
|
|
+ }
|
|
|
+ this.controller = null;
|
|
|
+ // 需要图匠校验的添加参数和loading
|
|
|
+ if (
|
|
|
+ this.photoIdentifyType &&
|
|
|
+ (this.photoIdentifyType == '1' || this.photoIdentifyType == '3')
|
|
|
+ ) {
|
|
|
+ form.photoIdentifyType = this.photoIdentifyType;
|
|
|
+ this.progress();
|
|
|
+ this.controller = new AbortController(); //取消请求
|
|
|
+ } else {
|
|
|
+ this.toastLoading(0, '上传中...', true);
|
|
|
+ }
|
|
|
+ addstorePhoto(form, this.controller ? this.controller.signal : null)
|
|
|
+ .then((res) => {
|
|
|
+ this.requestThen(res);
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.requestCatch(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 公用请求then
|
|
|
+ requestThen(res) {
|
|
|
+ this.toastLoading().clear();
|
|
|
+ if (res.code == -1) {
|
|
|
+ // 图匠图片校验接口超时
|
|
|
+ this.requestTimeOut(res);
|
|
|
+ } else if (res.code == 200) {
|
|
|
+ // 图匠校验结果返回
|
|
|
+ if (this.photoIdentifyType && this.photoIdentifyType != '6') {
|
|
|
+ // 重置loaidng状态
|
|
|
+ this.resetProgress();
|
|
|
+ this.imageAIVerifyFlag = true;
|
|
|
+ this.imageAIVerifyData = res.data;
|
|
|
+ } else {
|
|
|
+ // 正常流程
|
|
|
+ // 图像识别白名单用户弹出框提示
|
|
|
+ if (res.data.whiteStore) {
|
|
|
+ this.imageWhiteStoreFlag = true;
|
|
|
+ this.imageWhiteStoreData = res;
|
|
|
+ } else {
|
|
|
+ this.normalFlow(res);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.resetProgress();
|
|
|
+ that.$toast('上传失败！');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 公用请求catch
|
|
|
+ requestCatch(error) {
|
|
|
+ if (error.message === 'canceled') {
|
|
|
+ this.$toast('取消上传');
|
|
|
+ console.log('请求被取消:', error.message);
|
|
|
+ }
|
|
|
+ this.resetProgress();
|
|
|
+ },
|
|
|
+ // 正常流程
|
|
|
+ normalFlow(res) {
|
|
|
+ this.$toast('上传成功！');
|
|
|
+ this.$emit('newimgarr', {
|
|
|
+ fileUrl: res.data.url,
|
|
|
+ id: res.data.fileId,
|
|
|
+ type: 2,
|
|
|
+ photoIdentifyType: this.photoIdentifyType,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ progress() {
|
|
|
+ // 后端接口20000ms后失效，每1000m progress加10，到90停止；
|
|
|
+ this.progressFlag = true;
|
|
|
+ this.percentage = 10;
|
|
|
+ this.timeFlag = setInterval(() => {
|
|
|
+ this.percentage = this.percentage + 10;
|
|
|
+ if (this.percentage == 90) clearInterval(this.timeFlag);
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ format(percentage) {
|
|
|
+ return `${percentage} %\n图像识别中`;
|
|
|
+ },
|
|
|
+ // 重置loaidng状态
|
|
|
+ resetProgress() {
|
|
|
+ this.percentage = 100;
|
|
|
+ clearInterval(this.timeFlag);
|
|
|
+ this.progressFlag = false;
|
|
|
+ this.percentage = 0;
|
|
|
+ },
|
|
|
+ // 照片是否入库，1.照片识别三次不通过仍要上传，2.照片识别通过
|
|
|
+ // isUpdate:是否更新店招照片，只有门店店招需要更新
|
|
|
+ confirmUpload(res) {
|
|
|
+ if (this.photoIdentifyType && this.photoIdentifyType != '6') {
|
|
|
+ var form = {
|
|
|
+ mediaId: '',
|
|
|
+ fileUrl: '',
|
|
|
+ visitSource: '1', // Long 拜访模式
|
|
|
+ storeGroupId: this.storeGroupId, // string 门店任务组，多个用逗号隔开
|
|
|
+ visitsId: localStorage.getItem('visitId'), // string 拜访id
|
|
|
+ taskId: this.taskId, // string 任务id
|
|
|
+ objectType: this.objectType, // string 照片类型，取任务上的照片类型，如果没有则取手动选择的照片类型
|
|
|
+ locationRemark: this.addressesRemark, // String 当前地址信息
|
|
|
+ firstCollectionId: this.firstCollectionId, // Long 第一级采集项id，取当前采集项的字段就行
|
|
|
+ secondCollectionId: this.secondCollectionId, // Long 第二级采集项id，取当前采集项的字段就行
|
|
|
+ putInCode: this.putInCode, // String 当前任务对应的投放编号
|
|
|
+ deviceCode: this.deviceCode, // String 当前任务对应的设备编号
|
|
|
+ collectionItemId: this.collectionId,
|
|
|
+ url: res.data.url, // String 当前拍摄图片的url
|
|
|
+ businessId: res.data.businessId, // 当前拍摄图片id
|
|
|
+ feedbackMessage: res.feedbackMessage,
|
|
|
+ };
|
|
|
+ // 0=企业微信，1=H5相机
|
|
|
+ if (this.userInfo.photoMethod == '0') {
|
|
|
+ form.mediaId = this.localIdsArr; // string 图片素材id
|
|
|
+ } else {
|
|
|
+ form.fileUrl = this.fileUrl; // string 图片素材id
|
|
|
+ }
|
|
|
+ if (res.isUpdate) {
|
|
|
+ form.isUpdate = 'true';
|
|
|
+ }
|
|
|
+ addPhotoToDB(form).then((resData) => {
|
|
|
+ if (resData.code == 200) {
|
|
|
+ console.log(resData);
|
|
|
+ res.data.fileId = resData.data.fileId;
|
|
|
+ this.normalFlow(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.imageAIVerifyFlag = false;
|
|
|
+ this.imageWhiteStoreFlag = false;
|
|
|
+ },
|
|
|
+ requestTimeOut(res) {
|
|
|
+ this.resetProgress();
|
|
|
+ this.close();
|
|
|
+ this.$dialog
|
|
|
+ .confirm({
|
|
|
+ title: '系统提示',
|
|
|
+ message: res.msg,
|
|
|
+ showCancelButton: false,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.confirmUpload(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消图片上传
|
|
|
+ progressClose() {
|
|
|
+ this.controller.abort();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.questionNamep {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #484848;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 0 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .cameraDivp {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .photo {
|
|
|
+ /*margin-top: 9px;*/
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .camera {
|
|
|
+ width: 60px;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
+ z-index: 89;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 99999999;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .progressClose {
|
|
|
+ width: 70px;
|
|
|
+ text-align: center;
|
|
|
+ background: #67c23a;
|
|
|
+ color: #fff;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+#allmap {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ left: -1000px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.mask {
|
|
|
+ .el-progress__text {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
