|
|
@@ -39,7 +39,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-show="showSetting" class="box-item">
|
|
|
- <div class="btn" @click="showSetting = false">
|
|
|
+ <div class="btn" @click="handleQuitSetting">
|
|
|
<div class="revoke-icon"></div>
|
|
|
退出设置
|
|
|
</div>
|
|
|
@@ -79,7 +79,7 @@
|
|
|
<el-color-picker v-model="mouseToolState.color" popper-class="custom-color-picker" show-alpha />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="tab-list">
|
|
|
+ <div v-if="menu[menuActive1] && menu[menuActive1].children && menu[menuActive1].children[menuActive2]" class="tab-list">
|
|
|
<div
|
|
|
v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
|
|
|
:key="index"
|
|
|
@@ -88,7 +88,7 @@
|
|
|
@click="clickTab3(item, index)"
|
|
|
>
|
|
|
<div :class="menuActive3 === index ? 'checked2' : 'checked1'"></div>
|
|
|
- <img :src="item.image" class="icon" />
|
|
|
+ <img :src="getImageUrl(item.image)" class="icon" />
|
|
|
{{ item.name }}
|
|
|
<div v-if="!!showSetting" class="setting-btn" @click="handleShowSetting(item)" />
|
|
|
<div v-if="item.showSetting" class="setting-menu">
|
|
|
@@ -98,7 +98,7 @@
|
|
|
</div>
|
|
|
<div class="menu-item" @click="handleMenuItemHide(item)">
|
|
|
<i class="icon-eye" />
|
|
|
- <span>{{ item.hide ? '隐藏' : '显示' }}</span>
|
|
|
+ <span>{{ item.visible === '0' ? '隐藏' : '显示' }}</span>
|
|
|
</div>
|
|
|
<div class="menu-item" @click="handleMenuItemDelete(item)">
|
|
|
<i class="icon-delete" />
|
|
|
@@ -106,6 +106,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-if="showSetting" class="tab" @click="handleShowAddClass">
|
|
|
+ <el-icon color="#7495b4" :size="80"><Plus /></el-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -166,6 +169,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--添加修改分类弹窗-->
|
|
|
+ <EditClassDialog
|
|
|
+ v-if="showAddDialog"
|
|
|
+ :id="selectEditId"
|
|
|
+ v-model="showAddDialog"
|
|
|
+ :template-id="selectTemplateId"
|
|
|
+ @update-data="getTemplateTreeData"
|
|
|
+ />
|
|
|
<!--添加文字-->
|
|
|
<TextEdit v-model="showTextEdit" @add-text="addText" />
|
|
|
<!--绘制提示信息-->
|
|
|
@@ -186,9 +197,19 @@
|
|
|
import { nanoid } from 'nanoid';
|
|
|
import { deepClone } from '@/utils';
|
|
|
import { useHistory } from '@/hooks/useHistory';
|
|
|
-import { closeCollaboration, createCollaboration, deletePatternById, getPatternInfo, getPatternList } from '@/api/globalMap/onlinePlotting';
|
|
|
-import TextEdit from '@/views/globalMap/RightMenu/OnlinePlotting/TextEdit.vue';
|
|
|
-import EditDialog from '@/views/globalMap/RightMenu/OnlinePlotting/EditDialog.vue';
|
|
|
+import {
|
|
|
+ changeVisibleClassification,
|
|
|
+ closeCollaboration,
|
|
|
+ createCollaboration,
|
|
|
+ deleteClassificationCreate,
|
|
|
+ deletePatternById,
|
|
|
+ getPatternInfo,
|
|
|
+ getPatternList,
|
|
|
+ getTemplateTree
|
|
|
+} from '@/api/globalMap/onlinePlotting';
|
|
|
+import EditClassDialog from './EditClassDialog.vue';
|
|
|
+import TextEdit from './TextEdit.vue';
|
|
|
+import EditDialog from './EditDialog.vue';
|
|
|
import { Search } from '@element-plus/icons-vue';
|
|
|
import html2canvas from 'html2canvas';
|
|
|
import LayerDetail from './LayerDetail.vue';
|
|
|
@@ -201,8 +222,8 @@ const getMap = inject('getMap');
|
|
|
const containerScale = inject('containerScale');
|
|
|
const { currentState, commit, undo, history, future } = useHistory();
|
|
|
const emits = defineEmits(['getCollaborationData']);
|
|
|
-const getImageUrl = (name) => {
|
|
|
- return new URL(`../../../../assets/images/map/rightMenu/onlinePlotting/icon/${name}.png`, import.meta.url).href;
|
|
|
+const getImageUrl = (name: string) => {
|
|
|
+ return import.meta.env.VITE_APP_BASE_API + import.meta.env.VITE_APP_BASE_DOWNLOAD_API + name;
|
|
|
};
|
|
|
let drawing = ref(false);
|
|
|
const mouseToolState = ref<MouseTool>({
|
|
|
@@ -216,181 +237,7 @@ const menuActive3 = ref<string | number>('');
|
|
|
const menu = ref([
|
|
|
{
|
|
|
name: '标绘工具',
|
|
|
- children: [
|
|
|
- {
|
|
|
- name: '基本工具',
|
|
|
- value: 'basicTools',
|
|
|
- children: [
|
|
|
- // {
|
|
|
- // name: '直箭头',
|
|
|
- // value: 'straightArrow',
|
|
|
- // image: getImageUrl('straightArrow')
|
|
|
- // },
|
|
|
- {
|
|
|
- name: '矩形',
|
|
|
- value: 'rectangle',
|
|
|
- image: getImageUrl('rectangle')
|
|
|
- },
|
|
|
- {
|
|
|
- name: '任意面',
|
|
|
- value: 'polygon',
|
|
|
- image: getImageUrl('polygon')
|
|
|
- },
|
|
|
- {
|
|
|
- name: '任意线',
|
|
|
- value: 'anyLine',
|
|
|
- image: getImageUrl('anyLine')
|
|
|
- },
|
|
|
- {
|
|
|
- name: '圆',
|
|
|
- value: 'circle',
|
|
|
- image: getImageUrl('circle')
|
|
|
- },
|
|
|
- {
|
|
|
- name: '直线',
|
|
|
- value: 'straightLine',
|
|
|
- image: getImageUrl('straightLine')
|
|
|
- },
|
|
|
- {
|
|
|
- name: '文字',
|
|
|
- value: 'text',
|
|
|
- image: getImageUrl('text')
|
|
|
- },
|
|
|
- {
|
|
|
- name: '面积',
|
|
|
- value: 'measureArea',
|
|
|
- image: getImageUrl('measureArea')
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '火点',
|
|
|
- value: 'firePoint',
|
|
|
- children: [
|
|
|
- { name: '起火点', value: 'marker', image: getImageUrl('firePoint'), icon: 'firePoint', size: [48, 32] },
|
|
|
- { name: '烟点', value: 'marker', image: getImageUrl('smokePoint'), icon: 'smokePoint', size: [48, 32] },
|
|
|
- { name: '已灭火点', value: 'marker', image: getImageUrl('extinguishedPoint'), icon: 'extinguishedPoint', size: [48, 32] }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '火线',
|
|
|
- value: 'firewire',
|
|
|
- children: [
|
|
|
- { name: '火线', value: 'marker', image: getImageUrl('firewire'), icon: 'firewire', size: [48, 32] },
|
|
|
- { name: '受控火线', value: 'marker', image: getImageUrl('controlledfireline'), icon: 'controlledfireline', size: [48, 32] },
|
|
|
- { name: '已灭火线', value: 'marker', image: getImageUrl('extinguishedline'), icon: 'extinguishedline', size: [48, 32] },
|
|
|
- { name: '强火线', value: 'marker', image: getImageUrl('StrongFrontline'), icon: 'StrongFrontline', size: [48, 32] },
|
|
|
- { name: '中火线', value: 'marker', image: getImageUrl('ZhongxianLine'), icon: 'ZhongxianLine', size: [48, 32] },
|
|
|
- { name: '弱火线', value: 'marker', image: getImageUrl('WeakFrontline'), icon: 'WeakFrontline', size: [48, 32] }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '火场',
|
|
|
- value: 'fireGround',
|
|
|
- children: [
|
|
|
- { name: '火场', value: 'marker', image: getImageUrl('fireground'), icon: 'fireground', size: [48, 32] },
|
|
|
- {
|
|
|
- name: '受控火场',
|
|
|
- value: 'marker',
|
|
|
- image: getImageUrl('controlledfireground'),
|
|
|
- icon: 'controlledfireground',
|
|
|
- size: [48, 32]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已灭火场',
|
|
|
- value: 'marker',
|
|
|
- image: getImageUrl('extinguishedfireground'),
|
|
|
- icon: 'extinguishedfireground',
|
|
|
- size: [48, 32]
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '箭头',
|
|
|
- value: 'arrow',
|
|
|
- children: [
|
|
|
- { name: '曲箭头', value: 'marker', image: getImageUrl('curvedarrow'), icon: 'curvedarrow', size: [48, 32] },
|
|
|
- { name: '直箭头', value: 'marker', image: getImageUrl('straightarrow1'), icon: 'straightarrow1', size: [48, 32] },
|
|
|
- { name: '细箭头', value: 'marker', image: getImageUrl('thinarrow'), icon: 'thinarrow', size: [48, 32] }
|
|
|
- ]
|
|
|
- },
|
|
|
- // {
|
|
|
- // name: '导航',
|
|
|
- // value: 'navigation',
|
|
|
- // children: [
|
|
|
- // { name: '导航', value: 'marker', image: getImageUrl('navigation'), icon: 'navigation', size: [166, 88] }
|
|
|
- // ]
|
|
|
- // },
|
|
|
- {
|
|
|
- name: '扑救队伍',
|
|
|
- value: 'firefightingTeam',
|
|
|
- children: [
|
|
|
- { name: '指挥中心', value: 'marker', image: getImageUrl('commandcentre'), icon: 'commandcentre', size: [48, 32] },
|
|
|
- { name: '分指中心', value: 'marker', image: getImageUrl('dividingcenter'), icon: 'dividingcenter', size: [48, 32] },
|
|
|
- { name: '集结地', value: 'marker', image: getImageUrl('rendezvous'), icon: 'rendezvous', size: [48, 32] },
|
|
|
- { name: '军队', value: 'marker', image: getImageUrl('army'), icon: 'army', size: [48, 32] },
|
|
|
- { name: '武警', value: 'marker', image: getImageUrl('armedpolice'), icon: 'armedpolice', size: [48, 32] },
|
|
|
- { name: '森林警察', value: 'marker', image: getImageUrl('forestpoliceman'), icon: 'forestpoliceman', size: [48, 32] },
|
|
|
- { name: '扑火队伍', value: 'marker', image: getImageUrl('firefightingteam'), icon: 'firefightingteam', size: [48, 32] }
|
|
|
- // { name: '扑火队伍路线', value: 'marker', image: getImageUrl('Firefightingteamroute'), icon: 'Firefightingteamroute', size: [48, 32] }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '飞机车辆',
|
|
|
- value: 'aircraftVehicles',
|
|
|
- children: [
|
|
|
- { name: '固定翼', value: 'marker', image: getImageUrl('fixedwing'), icon: 'fixedwing', size: [48, 32] },
|
|
|
- { name: '直升机', value: 'marker', image: getImageUrl('helicopter'), icon: 'helicopter', size: [48, 32] },
|
|
|
- { name: '无人机', value: 'marker', image: getImageUrl('UAV'), icon: 'UAV', size: [48, 32] },
|
|
|
- { name: '指挥车', value: 'marker', image: getImageUrl('commandvehicle'), icon: 'commandvehicle', size: [48, 32] },
|
|
|
- {
|
|
|
- name: '飞机航线设置',
|
|
|
- value: 'marker',
|
|
|
- image: getImageUrl('aircraftroutesetting'),
|
|
|
- icon: 'aircraftroutesetting',
|
|
|
- size: [48, 32]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '直升机航线设置',
|
|
|
- value: 'marker',
|
|
|
- image: getImageUrl('helicopterroutesetting'),
|
|
|
- icon: 'helicopterroutesetting',
|
|
|
- size: [48, 32]
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '基础设置',
|
|
|
- value: 'basicSetting',
|
|
|
- children: [
|
|
|
- { name: '航站', value: 'marker', image: getImageUrl('terminal'), icon: 'terminal', size: [48, 32] },
|
|
|
- {
|
|
|
- name: '起降点',
|
|
|
- value: 'marker',
|
|
|
- image: getImageUrl('takeoffandlandingpoint'),
|
|
|
- icon: 'takeoffandlandingpoint',
|
|
|
- size: [48, 32]
|
|
|
- },
|
|
|
- { name: '取水点', value: 'marker', image: getImageUrl('waterpoint'), icon: 'waterpoint', size: [48, 32] },
|
|
|
- { name: '瞭望塔', value: 'marker', image: getImageUrl('watchtower'), icon: 'watchtower', size: [48, 32] },
|
|
|
- { name: '物资库', value: 'marker', image: getImageUrl('materialwarehouse'), icon: 'materialwarehouse', size: [48, 32] }
|
|
|
- ]
|
|
|
- }
|
|
|
- // {
|
|
|
- // name: '其他',
|
|
|
- // value: 'other',
|
|
|
- // children: [
|
|
|
- // { name: '危险区域', value: 'marker', image: getImageUrl('dangerousarea'), icon: 'dangerousarea', size: [166, 88] },
|
|
|
- // { name: '隔离带开采', value: 'marker', image: getImageUrl('Isolationzonemining'), icon: 'Isolationzonemining', size: [166, 88] },
|
|
|
- // { name: '应急庇护场所', value: 'marker', image: getImageUrl('emergencyshelter'), icon: 'emergencyshelter', size: [166, 88] },
|
|
|
- // { name: '风力风向', value: 'marker', image: getImageUrl('windspeedanddirection'), icon: 'windspeedanddirection', size: [166, 88] },
|
|
|
- // { name: '测距', value: 'marker', image: getImageUrl('ranging'), icon: 'ranging', size: [166, 88] },
|
|
|
- // { name: '大风', value: 'marker', image: getImageUrl('strongwind'), icon: 'strongwind', size: [166, 88] },
|
|
|
- // { name: '人工降雨', value: 'marker', image: getImageUrl('artificialrainfall'), icon: 'artificialrainfall', size: [166, 88] },
|
|
|
- // { name: '台风', value: 'marker', image: getImageUrl('typhoon'), icon: 'typhoon', size: [166, 88] }
|
|
|
- // ]
|
|
|
- // }
|
|
|
- ]
|
|
|
+ children: []
|
|
|
},
|
|
|
{
|
|
|
name: '历史预案',
|
|
|
@@ -446,6 +293,39 @@ const tipTitle = computed(() => {
|
|
|
return res;
|
|
|
});
|
|
|
|
|
|
+// 获取模板分类树
|
|
|
+const getTemplateTreeData = () => {
|
|
|
+ getTemplateTree({ visible: showSetting.value ? '' : '1'}).then((res) => {
|
|
|
+ menu.value[0].children = res.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+let showAddDialog = ref(false);
|
|
|
+let selectTemplateId = ref('');
|
|
|
+let selectEditId = ref('');
|
|
|
+// 显示现在分类弹窗
|
|
|
+const handleShowAddClass = () => {
|
|
|
+ selectTemplateId.value = menu.value[menuActive1.value].children[menuActive2.value].template_id;
|
|
|
+ selectEditId.value = '';
|
|
|
+ showAddDialog.value = true;
|
|
|
+};
|
|
|
+const handleShowSwitch = (item) => {
|
|
|
+ selectTemplateId.value = menu.value[menuActive1.value].children[menuActive2.value].template_id;
|
|
|
+ item.showSetting = false;
|
|
|
+ selectEditId.value = item.classification_id;
|
|
|
+ showAddDialog.value = true;
|
|
|
+};
|
|
|
+const handleMenuItemHide = (item) => {
|
|
|
+ item.showSetting = false;
|
|
|
+ changeVisibleClassification({ classification_id: item.classification_id, visible: item.visible === '0' ? '1' : '0' }).then(() => {
|
|
|
+ getTemplateTreeData();
|
|
|
+ });
|
|
|
+};
|
|
|
+const handleMenuItemDelete = (item) => {
|
|
|
+ item.showSetting = false;
|
|
|
+ deleteClassificationCreate(item.classification_id).then(() => {
|
|
|
+ getTemplateTreeData();
|
|
|
+ });
|
|
|
+};
|
|
|
// 点击一级菜单
|
|
|
const clickTab = (value: number) => {
|
|
|
menuActive1.value = value;
|
|
|
@@ -810,6 +690,7 @@ const handleQuery = () => {
|
|
|
queryParams.page = 1;
|
|
|
getList();
|
|
|
};
|
|
|
+// 获取预案列表
|
|
|
const getList = () => {
|
|
|
// if (menuActive1.value === 1 && menu.value[menuActive1.value].name == '历史预案') {
|
|
|
getPatternList(queryParams).then((res) => {
|
|
|
@@ -935,6 +816,11 @@ const handleShowDialog = () => {
|
|
|
let showSetting = ref(false);
|
|
|
const handleOpenSetting = () => {
|
|
|
showSetting.value = true;
|
|
|
+ getTemplateTreeData();
|
|
|
+};
|
|
|
+const handleQuitSetting = () => {
|
|
|
+ showSetting.value = false;
|
|
|
+ getTemplateTreeData();
|
|
|
};
|
|
|
const handleShowSetting = (item, index) => {
|
|
|
menu.value[0].children.forEach((menu2) => {
|
|
|
@@ -943,15 +829,7 @@ const handleShowSetting = (item, index) => {
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
-const handleShowSwitch = (item) => {
|
|
|
- item.showSetting = false;
|
|
|
-};
|
|
|
-const handleMenuItemHide = (item) => {
|
|
|
- item.showSetting = false;
|
|
|
-};
|
|
|
-const handleMenuItemDelete = (item) => {
|
|
|
- item.showSetting = false;
|
|
|
-};
|
|
|
+
|
|
|
const handleSendData = (data) => {
|
|
|
const { type, content } = data;
|
|
|
if (type === 'update') {
|
|
|
@@ -1004,6 +882,7 @@ let handleShowLayer = () => {
|
|
|
showLayer.value = true;
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
+ getTemplateTreeData();
|
|
|
getList();
|
|
|
});
|
|
|
</script>
|
