You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
470 lines
13 KiB
Vue
470 lines
13 KiB
Vue
<template>
|
|
<div class="leftMenu">
|
|
<div
|
|
class="leftMenuTitle"
|
|
:style="{
|
|
width: leftMenuShow ? '340px' : '0px',
|
|
}"
|
|
>
|
|
<div class="leftMenu_closeButton">
|
|
<a-tooltip placement="right">
|
|
<template #title> 关闭弹窗 </template>
|
|
<CloseOutlined
|
|
style="font-size: 24px; margin: 8px; color: white"
|
|
@click="closePathModal"
|
|
/>
|
|
</a-tooltip>
|
|
</div>
|
|
<a-tooltip placement="right">
|
|
<template #title> {{ props.floderName }} </template>
|
|
<div class="title">{{ props.floderName }}</div>
|
|
</a-tooltip>
|
|
</div>
|
|
<div class="leftMenuContent">
|
|
<div class="leftMenuContent_2" v-if="leftMenuShow">
|
|
<div class="leftMenuContent_search">
|
|
<a-select
|
|
v-model:value="tagSelect"
|
|
mode="multiple"
|
|
style="width: 90%"
|
|
placeholder="标签筛选"
|
|
size="small"
|
|
allowClear
|
|
maxTagCount="3"
|
|
:options="tagOptions"
|
|
@change="handleChangeImageSearch"
|
|
>
|
|
</a-select>
|
|
<a-select
|
|
v-model:value="imageTypeSelect"
|
|
mode="multiple"
|
|
style="width: 90%; margin-top: 5px"
|
|
placeholder="类型选择"
|
|
allowClear
|
|
size="small"
|
|
maxTagCount="2"
|
|
:options="imageOptions"
|
|
@change="handleChangeImageSearch"
|
|
>
|
|
</a-select>
|
|
<a-input-search
|
|
v-model:value="searchValue"
|
|
placeholder="按照媒体名称搜索"
|
|
style="width: 90%; margin-top: 5px"
|
|
@search="handleChangeImageSearch"
|
|
allowClear
|
|
size="small"
|
|
/>
|
|
</div>
|
|
<div class="leftMenuContent_list">
|
|
<!-- 列表 -->
|
|
<div v-for="show in showMenuInfoList" :key="show.id">
|
|
<div
|
|
class="showMenuInfo_image"
|
|
v-if="showMenuInfoName == '地图照片'"
|
|
:style="{
|
|
background:
|
|
props.nowShowImageData && props.nowShowImageData.id == show.id
|
|
? '#274D75'
|
|
: show.mouse
|
|
? '#393939'
|
|
: '',
|
|
}"
|
|
>
|
|
<FileImageOutlined />
|
|
<div
|
|
class="eye"
|
|
@click="funShowOnMapOrDisplay(show, 'display')"
|
|
:style="{ background: show.display ? '#2d8cf0' : '#000000' }"
|
|
>
|
|
<EyeOutlined v-if="show.display == 1" style="color: #ffffff; font-size: 16px" />
|
|
<EyeInvisibleOutlined
|
|
v-if="show.display != 1"
|
|
style="color: #ffffff; font-size: 16px"
|
|
/>
|
|
</div>
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<div> {{ show.name }}</div>
|
|
</template>
|
|
<div
|
|
:style="{
|
|
width: show.mouse ? '160px' : '210px',
|
|
'white-space': 'nowrap',
|
|
overflow: 'hidden',
|
|
'text-overflow': 'ellipsis',
|
|
}"
|
|
@click="setNowShowImageData(show)"
|
|
>
|
|
{{ show.name }}
|
|
</div>
|
|
</a-tooltip>
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>回中</span>
|
|
</template>
|
|
<AimOutlined @click="handlerLocation(show)" />
|
|
</a-tooltip>
|
|
<a-popconfirm
|
|
placement="right"
|
|
title="您是否将该照片在地图上取消加载？取消后照片将不在地图上显示。"
|
|
ok-text="确认"
|
|
cancel-text="取消"
|
|
@confirm="funShowOnMapOrDisplay(show, 'showOnMap')"
|
|
>
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>
|
|
{{ show.showOnMap ? '在地图上取消加载' : '在地图上加载' }}
|
|
</span>
|
|
</template>
|
|
<div style="display: flex; align-items: center">
|
|
<div v-if="show.showOnMap == 1" class="svg-container" v-html="showOnMap_1" />
|
|
<div v-if="show.showOnMap != 1" class="svg-container" v-html="showOnMap_0" />
|
|
</div>
|
|
</a-tooltip>
|
|
</a-popconfirm>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="suojinButton" @click="changeLeftMenuShow">
|
|
<DoubleLeftOutlined v-if="leftMenuShow" style="font-size: 16px" />
|
|
<DoubleRightOutlined v-if="!leftMenuShow" style="font-size: 16px" />
|
|
</div>
|
|
|
|
<div class="closeButton" v-if="!leftMenuShow">
|
|
<a-tooltip placement="right">
|
|
<template #title> 关闭弹窗 </template>
|
|
<CloseOutlined style="font-size: 24px; margin: 8px; color: white" @click="closePathModal" />
|
|
</a-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, watch, onMounted } from 'vue';
|
|
import {
|
|
CloseOutlined,
|
|
AntDesignOutlined,
|
|
DoubleLeftOutlined,
|
|
DoubleRightOutlined,
|
|
EnvironmentOutlined,
|
|
CodeSandboxOutlined,
|
|
ExpandAltOutlined,
|
|
BorderOutlined,
|
|
LogoutOutlined,
|
|
EyeOutlined,
|
|
EyeInvisibleOutlined,
|
|
AimOutlined,
|
|
DeleteOutlined,
|
|
FileImageOutlined,
|
|
CheckCircleOutlined,
|
|
StopOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
import { showOnMap_1, showOnMap_0 } from './svg';
|
|
import {
|
|
UpdatePicStatus,
|
|
Deletepic,
|
|
UpdatePicName,
|
|
UpdatePicParentKey,
|
|
} from '@/api/demo/mediaLibrary';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
const { createMessage, createConfirm } = useMessage();
|
|
|
|
const props = defineProps(['leftMenuShow', 'floderName', 'allImageDataList', 'nowShowImageData']);
|
|
const emits = defineEmits([
|
|
'changeLeftMenuShow',
|
|
'handlerLocation',
|
|
'closePathModal',
|
|
'setNowShowImageData',
|
|
'handleSuccessPath',
|
|
'funUpdateDisplayOrShowOnMapData',
|
|
]);
|
|
const showMenuInfoList = ref(props.allImageDataList);
|
|
const showMenuInfoName = ref('地图照片');
|
|
function updateShowMenuInfoList(type) {
|
|
if (type == '地图照片') {
|
|
handleChangeImageSearch();
|
|
}
|
|
}
|
|
// 选择
|
|
function setNowShowImageData(value) {
|
|
emits('setNowShowImageData', value);
|
|
}
|
|
|
|
// 目录-隐藏或者显示
|
|
function changeLeftMenuShow() {
|
|
emits('changeLeftMenuShow');
|
|
}
|
|
// 弹窗-关闭弹窗
|
|
function closePathModal() {
|
|
emits('closePathModal');
|
|
}
|
|
|
|
// 地图图片-------------------------------------------------
|
|
// 地图图片-搜索
|
|
const filterAfterImageDataList = ref();
|
|
// 标签筛选
|
|
const tagSelect = ref([]);
|
|
const tagOptions: any = ref([]);
|
|
|
|
// 图片类型
|
|
const imageTypeSelect = ref([]);
|
|
const imageOptions: any = ref([
|
|
{
|
|
value: '广角照片',
|
|
label: '广角照片',
|
|
},
|
|
{
|
|
value: '变焦照片',
|
|
label: '变焦照片',
|
|
},
|
|
{
|
|
value: '红外照片',
|
|
label: '红外照片',
|
|
},
|
|
{
|
|
value: '全景图',
|
|
label: '全景图',
|
|
},
|
|
{
|
|
value: '码流截图',
|
|
label: '码流截图',
|
|
},
|
|
]);
|
|
// 按照媒体名称搜索
|
|
const searchValue = ref('');
|
|
function handleChangeImageSearch() {
|
|
// let filterImageData = props.allImageDataList;
|
|
let filterImageData = props.allImageDataList.filter((item) => item.showOnMap == 1);
|
|
// 标签筛选
|
|
if (tagSelect.value.length > 0) {
|
|
tagSelect.value.forEach((tag) => {
|
|
filterImageData = filterImageData.filter((item) => item.fileTags.includes(tag));
|
|
});
|
|
}
|
|
// 图片类型
|
|
// if (tagSelect.value.length > 0) {
|
|
// imageTypeSelect.value.forEach((imagetype) => {
|
|
// filterImageData = filterImageData.filter((item) => item.fileTags.includes(imagetype));
|
|
// });
|
|
// }
|
|
// 按照媒体名称搜索
|
|
if (searchValue.value) {
|
|
filterImageData = filterImageData.filter((item) => item.name.includes(searchValue.value));
|
|
}
|
|
filterAfterImageDataList.value = filterImageData;
|
|
showMenuInfoList.value = filterAfterImageDataList.value;
|
|
}
|
|
|
|
watch(
|
|
() => props.allImageDataList,
|
|
() => {
|
|
filterAfterImageDataList.value = props.allImageDataList;
|
|
// 标签选项
|
|
let tagList: any = [];
|
|
tagOptions.value = [];
|
|
props.allImageDataList.forEach((item) => {
|
|
if (item.fileTags && item.fileTags.length > 0) {
|
|
item.fileTags.forEach((tag) => {
|
|
if (!tagList.includes(tag)) {
|
|
tagList.push(tag);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
tagList.forEach((tag) => {
|
|
tagOptions.value.push({
|
|
value: tag,
|
|
label: tag,
|
|
});
|
|
});
|
|
handleChangeImageSearch();
|
|
},
|
|
{
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
);
|
|
|
|
// 加载到地图上
|
|
function funShowOnMapOrDisplay(show, type) {
|
|
if (type == 'showOnMap') {
|
|
if (show.showOnMap == 1) {
|
|
show.showOnMap = 0;
|
|
} else {
|
|
show.showOnMap = 1;
|
|
}
|
|
}
|
|
if (type == 'display') {
|
|
if (show.display == 1) {
|
|
show.display = 0;
|
|
} else {
|
|
show.display = 1;
|
|
}
|
|
}
|
|
UpdatePicStatus({
|
|
id: show.id,
|
|
fileTags: JSON.stringify(show.fileTags),
|
|
graffitiJson: JSON.stringify(show.graffitiJson),
|
|
display: show.display,
|
|
showOnMap: show.showOnMap,
|
|
}).then((res) => {
|
|
if (type == 'showOnMap') {
|
|
if (show.showOnMap) {
|
|
createMessage.success('在地图上加载成功');
|
|
} else {
|
|
createMessage.success('在地图上取消加载成功');
|
|
}
|
|
}
|
|
emits('handleSuccessPath');
|
|
emits('funUpdateDisplayOrShowOnMapData', show);
|
|
});
|
|
}
|
|
|
|
// 移动到中心位置
|
|
function handlerLocation(position) {
|
|
if (showMenuInfoName.value == '地图照片') {
|
|
emits('handlerLocation', {
|
|
lng: position.lng,
|
|
lat: position.lat,
|
|
});
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
updateShowMenuInfoList,
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.leftMenu {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #232323;
|
|
|
|
.leftMenuTitle {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #ffffff55;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.leftMenu_closeButton {
|
|
position: relative;
|
|
padding-top: 7px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
}
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
width: 100%;
|
|
|
|
/* 关键属性 */
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.leftMenuContent {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 800px;
|
|
|
|
.leftMenuContent_2 {
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(100%-50px);
|
|
|
|
.leftMenuContent_search {
|
|
margin: 10px;
|
|
gap: 5px;
|
|
}
|
|
|
|
.leftMenuContent_list {
|
|
margin-top: 5px;
|
|
overflow-y: auto;
|
|
max-height: 720px;
|
|
|
|
// 地图照片
|
|
.showMenuInfo_image {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
color: #ffffff;
|
|
height: 30px;
|
|
padding-left: 15px;
|
|
gap: 10px;
|
|
|
|
.eye {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.buttonRight2 {
|
|
position: absolute;
|
|
right: 35px;
|
|
}
|
|
.buttonRight1 {
|
|
position: absolute;
|
|
right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.suojinButton {
|
|
position: absolute;
|
|
top: 45%;
|
|
right: -18px;
|
|
height: 90px;
|
|
width: 18px;
|
|
background: #ffffff;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
top: 2%;
|
|
right: -25px;
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
}
|
|
.svg-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|