|
|
@@ -0,0 +1,208 @@
|
|
|
+(() => {
|
|
|
+ Vue.component('uploadTitlemap', {
|
|
|
+ props: [],
|
|
|
+ name: 'uploadTitlemap',
|
|
|
+ template: ` <div id="planePic"">
|
|
|
+ <div class="headerBack">
|
|
|
+ <div class="topBox">
|
|
|
+ <i class="backIcon" @click="back"></i>
|
|
|
+ <p class="headerTitle">平面图</p>
|
|
|
+ </div>
|
|
|
+ <el-switch v-model="showMapPic" @change="changeDisplay" active-color="#15BEC8" inactive-color="#999">
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ <div class="defaultPic itemBox" :class="!info.status || info.status==0 ?'active':''">
|
|
|
+ <div class="ctrlBox">
|
|
|
+ <div class="ctrlTitle">
|
|
|
+ 默认平面图
|
|
|
+ <div class="tipBox" title="修改点云或数据集后，请更新平面图"></div>
|
|
|
+ </div>
|
|
|
+ <!-- <p>默认平面图</p> -->
|
|
|
+ <el-popconfirm placement="top" title="系统将创建新的平面图，您上传的平面图将被清除，是否继续？" :hide-icon="true" @confirm="refreshConfirm">
|
|
|
+ <el-button slot="reference">
|
|
|
+ <div class="ctrlBtn">
|
|
|
+ <i class="ctrlIcon refreshIcon"></i>
|
|
|
+ <p class="ctrlText">更新</p>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="diyPic itemBox " :class=" info.status==1 ?'active':''">
|
|
|
+ <div class="ctrlBox">
|
|
|
+
|
|
|
+ <p class="ctrlTitle">自定义平面图</p>
|
|
|
+ <div class="btnBox">
|
|
|
+
|
|
|
+
|
|
|
+ <div class="ctrlBtn" @click="downloadMap">
|
|
|
+ <i class="ctrlIcon downloadIcon"></i>
|
|
|
+ <p class="ctrlText">下载</p>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <label class="ctrlBtn" for="files">
|
|
|
+ <i class="ctrlIcon uploadIcon"></i>
|
|
|
+ <p class="ctrlText">上传</p>
|
|
|
+ </label>
|
|
|
+
|
|
|
+
|
|
|
+ <input type="file" accept=".zip" id="files" @change="uploadPic">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="tipText">
|
|
|
+ 操作说明<br /> 1. 下载默认平面图，支持.png文件下载；<br /> 2. 解压下载的压缩包，替换压缩包中的图片文件；<br /> （文件名，图片大小、格式需与原图保持一致）
|
|
|
+ <br /> 3. 上传平面图<br />
|
|
|
+ </div>
|
|
|
+ </div>`,
|
|
|
+ //删除
|
|
|
+ // <el-popconfirm placement="top" title="确认删除？" :hide-icon="true" @confirm="delConfirm">
|
|
|
+ // <el-button slot="reference">
|
|
|
+ // <div class="ctrlBtn">
|
|
|
+ // <i class="ctrlIcon disableIcon "></i>
|
|
|
+ // <p class="ctrlText">删除</p>
|
|
|
+
|
|
|
+ // </div>
|
|
|
+ // </el-button>
|
|
|
+ // </el-popconfirm>
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showMapPic: false,
|
|
|
+ info: {},
|
|
|
+ downloadUrl: 'https://laser.4dkankan.com/'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ downloadMap() {
|
|
|
+ axios.get(`/indoor/${sceneNum}/api/tiled_maps/download`).then(res => {
|
|
|
+ console.log(this.downloadUrl + res.data.msg)
|
|
|
+ window.location.href = this.downloadUrl + res.data.msg
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ message: err.data.msg,
|
|
|
+ type: 'error',
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ refreshConfirm() {
|
|
|
+ this.$parent.showLoading('更新中...')
|
|
|
+ axios.get(`/indoor/${sceneNum}/api/tiled_maps/init`).then(res => {
|
|
|
+ this.$parent.hideLoading()
|
|
|
+ this.getDetaile()
|
|
|
+ IV.api.AuthenticationService.sendAuthenticationChanged()
|
|
|
+ }).catch(err => {
|
|
|
+ this.$parent.hideLoading()
|
|
|
+ this.$message({
|
|
|
+ message: err.data.msg,
|
|
|
+ type: 'error',
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeDisplay(val) {
|
|
|
+ console.log(val)
|
|
|
+ if (val) {
|
|
|
+ this.info.display = 1
|
|
|
+ } else {
|
|
|
+ this.info.display = 0
|
|
|
+ }
|
|
|
+ this.$parent.showLoading('切换中...')
|
|
|
+ axios.get(`/indoor/${sceneNum}/api/tiled_maps/updateDisplay/${this.info.display}`).then(res => {
|
|
|
+ this.$parent.hideLoading()
|
|
|
+ IV.api.AuthenticationService.sendAuthenticationChanged()
|
|
|
+ }).catch(err => {
|
|
|
+ this.$parent.hideLoading()
|
|
|
+ this.$message({
|
|
|
+ message: err.data.msg,
|
|
|
+ type: 'error',
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ delConfirm() {
|
|
|
+ console.log('delConfirm')
|
|
|
+ },
|
|
|
+ isZip(file) {
|
|
|
+ return /\.(zip)$/.test(file.name)
|
|
|
+ },
|
|
|
+ uploadPic(e) {
|
|
|
+ let file = e.target.files[0]
|
|
|
+ console.log(file)
|
|
|
+ if (!this.isZip(file)) {
|
|
|
+ this.$message({
|
|
|
+ message: '请上传zip格式',
|
|
|
+ type: 'error',
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = new FormData()
|
|
|
+ params.append('file', file)
|
|
|
+ this.$parent.showLoading('上传中...')
|
|
|
+
|
|
|
+ axios.post(`/indoor/${sceneNum}/api/tiled_maps/upload`, params).then(res => {
|
|
|
+ this.$message({
|
|
|
+ message: '上传成功',
|
|
|
+ type: 'success',
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ this.$parent.hideLoading()
|
|
|
+ this.getDetaile()
|
|
|
+ IV.api.AuthenticationService.sendAuthenticationChanged()
|
|
|
+ }).catch(err => {
|
|
|
+ this.$parent.hideLoading()
|
|
|
+ this.$message({
|
|
|
+ message: '上传失败',
|
|
|
+ type: 'error',
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ this.$parent.showType = 0
|
|
|
+ },
|
|
|
+ getDetaile() {
|
|
|
+ axios.get(`/indoor/${sceneNum}/api/tiled_maps/detail`).then(res => {
|
|
|
+ console.log(res.data.data)
|
|
|
+ this.info = res.data.data
|
|
|
+ if (this.info.display) {
|
|
|
+ this.showMapPic = true
|
|
|
+ } else {
|
|
|
+ this.showMapPic = false
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ message: err.data.msg,
|
|
|
+ type: 'error',
|
|
|
+ duration: 1000,
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getDetaile()
|
|
|
+ },
|
|
|
+ })
|
|
|
+})();
|
