377 lines
10 KiB
Vue
377 lines
10 KiB
Vue
<template>
|
|
<!-- <div class="selectImg" > -->
|
|
<div class="selectImg" id="imgBox">
|
|
<div class="boxHeader" id="imgTitle">
|
|
<span></span>
|
|
<div class="title_img">图标选择</div>
|
|
<span></span>
|
|
<div class="header_close" @click="close">
|
|
<i>✕</i>
|
|
</div>
|
|
</div>
|
|
<div class="boxBody">
|
|
<el-tabs v-model="activeName" type="card">
|
|
<template v-if="hasGEMarker1">
|
|
<el-tab-pane label="立体图标" name="GEMarker1">
|
|
<div class="imgItem" :style="item.selected ? 'border-color:red' : ''" v-for="item in imgList_GEMarker1s"
|
|
:key="item.key + 'GEMarker1s'" @click="selectImg(item)">
|
|
<img :src="item.url" />
|
|
</div>
|
|
</el-tab-pane>
|
|
</template>
|
|
<el-tab-pane label="普通图标" name="GEMarker">
|
|
<div class="imgItem" :style="item.selected ? 'border-color:red' : ''" v-for="item in imgList_GEMarker"
|
|
:key="item.key + 'GEMarker'" @click="selectImg(item)">
|
|
<img :src="item.url" />
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane class="zidingyi" label="自定义图标" name="GEMarkerz">
|
|
<!-- http://192.168.110.19:8891/yjearth4.0/api/v1/user/addRole -->
|
|
<div style="display: flex;">
|
|
<el-upload class="upload-demo" :action="url + '/yjearth4.0/api/v1' + '/icon/upload'" multiple
|
|
:file-list="fileList" :show-file-list="false" accept=".png,.jpg,.jpge" :on-success="onSuccess">
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
</el-upload>
|
|
<el-button style="margin-left: 10px;" type="primary" :disabled="imgList_zidingyi.length == 0"
|
|
@click="handleCheckAllChange" size="small">全选</el-button>
|
|
<!-- <el-checkbox-group style="margin-left: 10px;" v-model="isIndeterminate" size="small"
|
|
@change="handleCheckAllChange">
|
|
<el-checkbox-button>全选</el-checkbox-button>
|
|
</el-checkbox-group> -->
|
|
<!-- 这里全选和取消全选 -->
|
|
<el-button style="margin-left: 10px;" size="small" type="primary" @click="delImg">删除</el-button>
|
|
</div>
|
|
<div style="display: flex;" class="sssssssssss">
|
|
<el-checkbox-group v-model="checkList">
|
|
<el-checkbox :label="item.id" v-for="item in imgList_zidingyi" :key="item.id" style="padding-left: 0;">
|
|
<div class="imgItem" :class="{ selectImg1: selectedId == item.id }"
|
|
:style="item.selected ? 'border-color:red' : ''" @click="selectImg(item)">
|
|
<img :src="url + '/yjearth4.0/api/v1/icon/' + item.id + '/' + item.suffix" />
|
|
</div>
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
</template>
|
|
|
|
<script>
|
|
import { setMove } from "./myHeaderAll/systemPopup/js/moveDiv";
|
|
import { zidinyi, deleteIcon } from "../api/gisAPI"
|
|
import { getIP } from "../utils";
|
|
export default {
|
|
name: "selectImg",
|
|
data() {
|
|
return {
|
|
activeName: "GEMarker",
|
|
imgList_GEMarker: [],
|
|
imgList_GEMarker1: [],
|
|
imgList_GEMarker1s: [],
|
|
imgList_zidingyi: [],
|
|
fileList: [],
|
|
checkList: [],
|
|
hasGEMarker1: true,
|
|
flag: null,
|
|
url: '',
|
|
isIndeterminate: false,
|
|
checkAll: true,
|
|
isAll: false,
|
|
selectedId: '',
|
|
};
|
|
},
|
|
mounted() {
|
|
// $(".selectImg .el-tab-pane").addClass("custom_scroll_bar")
|
|
// this.getList();
|
|
setMove("imgTitle", "imgBox");
|
|
},
|
|
methods: {
|
|
// 这里全选和取消全选
|
|
handleCheckAllChange() {
|
|
let arr = this.imgList_zidingyi.map(item => {
|
|
return item.id
|
|
})
|
|
this.isAll = !this.isAll
|
|
this.checkList = this.isAll ? arr : [];
|
|
},
|
|
// 删除
|
|
delImg() {
|
|
let arr = []
|
|
this.imgList_zidingyi.filter(item => {
|
|
if (this.checkList.includes(item.id)) {
|
|
arr.push({
|
|
id: item.id,
|
|
suffix: item.suffix
|
|
})
|
|
}
|
|
})
|
|
if (arr.length == 0) {
|
|
this.$message.warning("请选择要删除的图标");
|
|
return
|
|
}
|
|
deleteIcon({ icons: arr }).then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success("删除成功");
|
|
this.getList()
|
|
}
|
|
})
|
|
},
|
|
//获取列表
|
|
getList(url) {
|
|
zidinyi({}, data => {
|
|
this.imgList_zidingyi = data.list || []
|
|
if (url) {
|
|
this.selectedId = this.getIdFromUrl(url.pathname)
|
|
}
|
|
})
|
|
},
|
|
getIdFromUrl(url) {
|
|
const regex = /\/icon\/([^\/]+)\//;
|
|
const match = url.match(regex);
|
|
return match ? match[1] : null;
|
|
},
|
|
onSuccess(file) {
|
|
this.getList()
|
|
},
|
|
selectImg(item) {
|
|
let selectedImg
|
|
let onLine = false
|
|
if (!item.key) {
|
|
onLine = true
|
|
selectedImg = '/yjearth4.0/api/v1/icon/' + item.id + '/' + item.suffix
|
|
} else {
|
|
selectedImg = item.key.indexOf("1s/") > -1 ? item.key.replace(/1s/g, "1") : item.key;
|
|
}
|
|
this.$sendChanel("selectedImg", { img: selectedImg, flag: this.flag, onLine });
|
|
this.close();
|
|
},
|
|
close() {
|
|
this.$changeComponentShow(".selectImgBox", false);
|
|
this.checkList = []
|
|
},
|
|
set(key) {
|
|
this.flag = key
|
|
},
|
|
init(obj, selected, hasGEMarker1 = true,isUrl) {
|
|
console.log('============================================',obj)
|
|
let selectedd
|
|
if (isUrl) {
|
|
this.getList(new URL(selected))
|
|
} else {
|
|
this.getList()
|
|
}
|
|
console.log('obj, selectedobj, selectedobj, selectedobj, selected', obj, selected, this.imgList_zidingyi);
|
|
let arr = selected.split("/");
|
|
if (selected.includes('/yjearth4.0/api/v1/icon/')) {
|
|
const parts = selected.split("/");
|
|
selectedd = parts[parts.indexOf("icon") + 1];
|
|
this.activeName = 'GEMarkerz';
|
|
} else {
|
|
console.log('selected1111', selected, arr);
|
|
this.activeName = arr[0];
|
|
}
|
|
this.hasGEMarker1 = hasGEMarker1;
|
|
this.url = localStorage.getItem('service')
|
|
|
|
for (const objKey in obj) {
|
|
let imgList = [];
|
|
obj[objKey].forEach((item) => {
|
|
// console.log(
|
|
// arr[0].indexOf("GEMarker1") > -1
|
|
// ? `${arr[0]}s`
|
|
// : arr[0] + "/" + arr[1]
|
|
// );
|
|
// 特定一个数据排到第一个
|
|
if (item == "GEMarker1s/A-ablu-blank.png") {
|
|
imgList.unshift({
|
|
key: item,
|
|
selected:
|
|
item ==
|
|
(arr[0].indexOf("GEMarker1") > -1 ? `${arr[0]}s` : arr[0]) +
|
|
"/" +
|
|
arr[1],
|
|
url: "http://localhost:" + window.staticPort + "/" + item,
|
|
});
|
|
} else {
|
|
imgList.push({
|
|
key: item,
|
|
selected:
|
|
item ==
|
|
(arr[0].indexOf("GEMarker1") > -1 ? `${arr[0]}s` : arr[0]) +
|
|
"/" +
|
|
arr[1],
|
|
url: "http://localhost:" + window.staticPort + "/" + item,
|
|
});
|
|
}
|
|
});
|
|
|
|
this["imgList_" + objKey] = imgList;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.sssssssssss {
|
|
.el-checkbox__label {
|
|
padding-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
.selectImg {
|
|
// border: 1px solid red;
|
|
width: 30vw;
|
|
min-height: 21vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #b2e3eff0;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 45%;
|
|
transform: translate(-50%, -50%);
|
|
background: linear-gradient(0deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
|
border: 1.5px solid rgba(0, 255, 255, 1);
|
|
padding: 10px;
|
|
backdrop-filter: blur(2px);
|
|
|
|
.el-tabs__item {
|
|
color: #fff;
|
|
}
|
|
|
|
.el-tabs__item.is-active,
|
|
.el-tabs__item:hover {
|
|
color: rgba(0, 255, 255, 1);
|
|
}
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
|
|
border-bottom-color: rgba(0, 255, 255, 1)
|
|
}
|
|
|
|
.el-tabs--card>.el-tabs__header {
|
|
border-color: rgba(204, 204, 204, 0.2);
|
|
}
|
|
|
|
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
|
.el-tab-pane::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
background-color: #f5f5f5;
|
|
margin-left: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
.el-tab-pane::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/*定义滑块 内阴影+圆角*/
|
|
.el-tab-pane::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 0 0 6px rgb(0, 217, 255);
|
|
background-color: #0bf7f7;
|
|
}
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__nav {
|
|
border: none;
|
|
}
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__item {
|
|
border-left: none;
|
|
}
|
|
|
|
.boxHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
padding-bottom: 15px;
|
|
|
|
.title_img {
|
|
width: 229px;
|
|
height: 34px;
|
|
line-height: 34px;
|
|
text-align: center;
|
|
background: url('../assets/images/titlebg.png') no-repeat;
|
|
}
|
|
|
|
.header_close {
|
|
position: absolute;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
width: 30px;
|
|
top: -1px;
|
|
background: rgb(0 255 255 / 50%);
|
|
right: 0;
|
|
border-radius: 0 0 0 90%;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
i {
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
// font-weight: 900;
|
|
}
|
|
}
|
|
|
|
i {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.boxBody {
|
|
display: flex;
|
|
|
|
.el-checkbox-button__inner {
|
|
padding: 8px 15px;
|
|
border-radius: 3px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.zidingyi {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.el-checkbox {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.imgItem {
|
|
padding: 5px;
|
|
border: 1px solid transparent;
|
|
width: 45px;
|
|
height: 45px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 35px;
|
|
height: 35px;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
& {
|
|
border-color: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selectImg1 {
|
|
cursor: pointer;
|
|
border-color: red;
|
|
}
|
|
}
|
|
}
|
|
</style>
|