增加态势部分多语言，完成点线面的属性编辑
This commit is contained in:
Binary file not shown.
2
src/renderer/components.d.ts
vendored
2
src/renderer/components.d.ts
vendored
@ -16,6 +16,7 @@ declare module 'vue' {
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
@ -27,6 +28,7 @@ declare module 'vue' {
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
|
||||
ElPopover: typeof import('element-plus/es')['ElPopover']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSlider: typeof import('element-plus/es')['ElSlider']
|
||||
|
||||
@ -338,5 +338,66 @@ export default {
|
||||
show: '文字显示',
|
||||
},
|
||||
},
|
||||
},
|
||||
// 态势部分
|
||||
ts: {
|
||||
historyDeduce: "历史推演",
|
||||
deduceName: "推演名称",
|
||||
deduceNamePlaceholder: "请输入推演名称",
|
||||
creator: "创建人",
|
||||
creatorPlaceholder: "请输入创建人姓名",
|
||||
creationTime: "创建日期",
|
||||
startPlaceholder: "开始日期",
|
||||
endPlaceholder: "结束日期",
|
||||
search: "搜索",
|
||||
reset: "重置",
|
||||
deduceDesc: "推演描述",
|
||||
operation: "操作",
|
||||
tooltipEdit: "编辑推演",
|
||||
tooltipDetail: "详情",
|
||||
tooltipDelete: "删除",
|
||||
createPlan: "新建推演",
|
||||
deduceDetail: "推演详情",
|
||||
startTime: "仿真开始时间",
|
||||
startTimePlaceholder: "请选择日期时间",
|
||||
deduceDescPlaceholder: "请输入内容描述",
|
||||
operationalTime: "作战时间",
|
||||
enterTuiyan: "进入推演页面",
|
||||
ersanwei: "二三维模式",
|
||||
back: "返回",
|
||||
exitTs: "退出方案库",
|
||||
save: "保存",
|
||||
cancel: "取消",
|
||||
confirm: "确定",
|
||||
standText: "立体文字",
|
||||
layerCabin: "仿真演练图层指挥舱",
|
||||
unfoldCabin: "展开指挥舱",
|
||||
unfoldElement: "展开元素库",
|
||||
fold: "收起",
|
||||
element: "元素库",
|
||||
model: "人工模型",
|
||||
graph: "军事标绘",
|
||||
baseLabel: "基础标绘",
|
||||
effects: "特效",
|
||||
"事件名称": "事件名称",
|
||||
"开始时间": "开始时间",
|
||||
"持续时间": "持续时间",
|
||||
"删除": "删除",
|
||||
"定位": "定位",
|
||||
popconfirmTitle: "确定要删除吗?",
|
||||
numberOfFlicker: "闪烁次数",
|
||||
numberPlaceholder: "请输入闪烁次数",
|
||||
selectEventToUpdate: "选中事件调整属性",
|
||||
situationEvent: "态势事件",
|
||||
hour: "时",
|
||||
minute: "分",
|
||||
second: "秒",
|
||||
isContainModelPosition: "路径是否包含元素点位",
|
||||
drawPath: "绘制路径",
|
||||
directoryNamePlaceholder: "请输入文件夹名称",
|
||||
name: "名称",
|
||||
"添加态势事件": "添加态势事件",
|
||||
"视角设定": "视角设定",
|
||||
"重置视角": "重置视角",
|
||||
}
|
||||
} as const
|
||||
|
||||
@ -338,5 +338,66 @@ export default {
|
||||
show: 'Text show',
|
||||
},
|
||||
},
|
||||
},
|
||||
// 态势部分
|
||||
ts: {
|
||||
historyDeduce: "History Deduction",
|
||||
deduceName: "Deduction Name",
|
||||
deduceNamePlaceholder: "Please enter the name of the deduction",
|
||||
creator: "creator",
|
||||
creatorPlaceholder: "Please enter the name of the creator",
|
||||
creationTime: "creation time",
|
||||
startPlaceholder: "start time",
|
||||
endPlaceholder: "end time",
|
||||
search: "search",
|
||||
reset: "reset",
|
||||
deduceDesc: "Deduction Description",
|
||||
operation: "operation",
|
||||
tooltipEdit: "Edit Deduction",
|
||||
tooltipDetail: "Detail",
|
||||
tooltipDelete: "Delete",
|
||||
createPlan: "Create Plan",
|
||||
deduceDetail: "Deduction Detail",
|
||||
startTime: "Start Time",
|
||||
startTimePlaceholder: "Please select Time",
|
||||
deduceDescPlaceholder: "Please enter the description of the deduction",
|
||||
operationalTime: "Operational Time",
|
||||
enterTuiyan: "Enter play page",
|
||||
ersanwei: "Two-dimensional and three-dimensional",
|
||||
back: "back",
|
||||
exitTs: "exit",
|
||||
save: "save",
|
||||
cancel: "cancel",
|
||||
confirm: "confirm",
|
||||
standText: "Stand Text",
|
||||
layerCabin: "Layer Cabin",
|
||||
unfoldCabin: "Unfold Cabin",
|
||||
unfoldElement: "Unfold Element",
|
||||
fold: "fold",
|
||||
element: "element",
|
||||
model: "model",
|
||||
graph: "Military plotting",
|
||||
baseLabel: "Base Label",
|
||||
effects: "Effects",
|
||||
"事件名称": "Event Name",
|
||||
"开始时间": "Start Time",
|
||||
"持续时间": "time of duration",
|
||||
"删除": "delete",
|
||||
"定位": "location",
|
||||
popconfirmTitle: "Are you sure you want to delete it?",
|
||||
numberOfFlicker: "Number Of Flicker",
|
||||
numberPlaceholder: "Place enter number of flicker",
|
||||
selectEventToUpdate: "Select Event To Update it",
|
||||
situationEvent: "Situation Event",
|
||||
hour: "hour",
|
||||
minute: "minute",
|
||||
second: "second",
|
||||
isContainModelPosition: "Is Contain Position Of Model",
|
||||
drawPath: "Draw Path",
|
||||
directoryNamePlaceholder: "Place enter name of directory",
|
||||
name: "name",
|
||||
"添加态势事件": "Add situation event",
|
||||
"视角设定": "Set View",
|
||||
"重置视角": "Reset View",
|
||||
}
|
||||
} as const
|
||||
|
||||
@ -336,5 +336,65 @@ export default {
|
||||
show: '文字顯示',
|
||||
},
|
||||
},
|
||||
},
|
||||
ts: {
|
||||
historyDeduce: "歷史推演",
|
||||
deduceName: "推演名稱",
|
||||
deduceNamePlaceholder: "請輸入推演名稱",
|
||||
creator: "建立人",
|
||||
creatorPlaceholder: "請輸入建立人姓名",
|
||||
creationTime: "建立日期",
|
||||
startPlaceholder: "開始日期",
|
||||
endPlaceholder: "結束日期",
|
||||
search: "搜尋",
|
||||
reset: "重置",
|
||||
deduceDesc: "推演描述",
|
||||
operation: "操作",
|
||||
tooltipEdit: "編輯推演",
|
||||
tooltipDetail: "詳情",
|
||||
tooltipDelete: "刪除",
|
||||
createPlan: "新增推演",
|
||||
deduceDetail: "推演詳情",
|
||||
startTime: "模擬開始時間",
|
||||
startTimePlaceholder: "請選擇日期時間",
|
||||
deduceDescPlaceholder: "請輸入內容描述",
|
||||
operationalTime: "作戰時間",
|
||||
enterTuiyan: "進入推演頁面",
|
||||
ersanwei: "二三維模式",
|
||||
back: "返回",
|
||||
exitTs: "退出方案庫",
|
||||
save: "儲存",
|
||||
cancel: "取消",
|
||||
confirm: "確定",
|
||||
standText: "立體文字",
|
||||
layerCabin: "模擬演練圖層指揮艙",
|
||||
unfoldCabin: "展開指揮艙",
|
||||
unfoldElement: "展開元素庫",
|
||||
fold: "收起",
|
||||
element: "元素庫",
|
||||
model: "人工模型",
|
||||
graph: "軍事標繪",
|
||||
baseLabel: "基礎標繪",
|
||||
effects: "特效",
|
||||
"事件名称": "事件名稱",
|
||||
"开始时间": "開始時間",
|
||||
"持续时间": "持續時間",
|
||||
"删除": "刪除",
|
||||
"定位": "定位",
|
||||
popconfirmTitle: "確定要刪除嗎?",
|
||||
numberOfFlicker: "閃爍次數",
|
||||
numberPlaceholder: "請輸入閃爍次數",
|
||||
selectEventToUpdate: "選中事件調整屬性",
|
||||
situationEvent: "態勢事件",
|
||||
hour: "時",
|
||||
minute: "分",
|
||||
second: "秒",
|
||||
isContainModelPosition: "路徑是否包含元素點位",
|
||||
drawPath: "繪製路徑",
|
||||
directoryNamePlaceholder: "請輸入資料夾名稱",
|
||||
name: "名稱",
|
||||
"添加态势事件": "新增態勢事件",
|
||||
"视角设定": "視角設定",
|
||||
"重置视角": "重置視角",
|
||||
}
|
||||
} as const
|
||||
|
||||
@ -3,22 +3,22 @@
|
||||
<div class="miniCabin" :style="!mini?'display:none':''">
|
||||
<div class="switch-node-outer" @click="mini=false">
|
||||
<div class="switch-node-inner">
|
||||
展开指挥舱
|
||||
{{ t('ts.unfoldCabin') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cabin" :style="mini?'display:none':''">
|
||||
<div class="titleBox">
|
||||
<span class="title">仿真演练图层指挥舱</span>
|
||||
<span class="title">{{ t('ts.layerCabin') }}</span>
|
||||
<span class="close" @click="mini=true">
|
||||
<svg-icon :size="15" class="icon-svg-item" name="closeRightTs"/>收起
|
||||
<svg-icon :size="15" class="icon-svg-item" name="closeRightTs"/>{{ t('ts.fold') }}
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<el-input
|
||||
v-model="searchKey"
|
||||
class="responsive-input"
|
||||
placeholder="搜索"
|
||||
:placeholder=" t('ts.search') "
|
||||
:prefix-icon="Search"
|
||||
@input="clearResult"
|
||||
id="keyword"
|
||||
@ -30,7 +30,7 @@
|
||||
plain
|
||||
@click="searchPlace"
|
||||
id="queryButton"
|
||||
>搜索
|
||||
>{{ t('ts.search') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="treeBox custom_scroll_bar_ts">
|
||||
@ -56,7 +56,9 @@ import {showRightMenuTs} from "./tree"
|
||||
import {TsApi} from "../../api/ts";
|
||||
import {initMapData} from "./entity";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const {t} = useI18n()
|
||||
const rightMenuRef: any = ref()
|
||||
const treeObj = ref() //树形的实例
|
||||
let zNodes: any = ref([])//树形结构数据
|
||||
@ -356,6 +358,7 @@ let rightClick = (event: MouseEvent, treeId: string, treeNode: any) => {
|
||||
return;
|
||||
}
|
||||
let selectNodes = getSelectedNodes(treeObj.value)
|
||||
// console.log("selectNodes", selectNodes)
|
||||
let isnewSelect = true //是否为新选中
|
||||
selectNodes.forEach((item: any) => {
|
||||
if (treeNode && item.id == treeNode.id) isnewSelect = false
|
||||
@ -363,14 +366,15 @@ let rightClick = (event: MouseEvent, treeId: string, treeNode: any) => {
|
||||
if (!event.ctrlKey && (selectNodes.length < 2 || isnewSelect))
|
||||
cusSelectNode(treeObj.value, treeNode)
|
||||
let menus = showRightMenuTs(event, treeObj.value, getSelectedNodes(treeObj.value), nodeType)
|
||||
if (canCheckType.includes(treeNode.sourceType) && treeNode.sourceType != 'directory') {
|
||||
// console.log("menus", menus)
|
||||
if (treeNode && canCheckType.includes(treeNode.sourceType) && treeNode.sourceType != 'directory') {
|
||||
let customView
|
||||
let entity = window['_entityMap'].get(treeNode.id)
|
||||
customView = Boolean(entity.customView && entity.customView.orientation)
|
||||
|
||||
menus = [...menus, customView ? 'resetView' : 'setView']
|
||||
}
|
||||
console.log('menus', menus)
|
||||
// console.log('menus', menus)
|
||||
if (menus.length == 0) {
|
||||
// $changeComponentShow('.rightMenu', false)
|
||||
return
|
||||
@ -378,7 +382,7 @@ let rightClick = (event: MouseEvent, treeId: string, treeNode: any) => {
|
||||
nextTick(() => {
|
||||
rightMenuRef.value.initMenus(menus, treeNode)
|
||||
})
|
||||
console.log("树形节点右键点击", treeNode)
|
||||
// console.log("树形节点右键点击", treeNode)
|
||||
}
|
||||
const setting = {
|
||||
edit: {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="MouseRight">
|
||||
<div v-for="item in menus" class="item" @click="item.fun">
|
||||
<svg-icon :name="item.key" :size="14"></svg-icon>
|
||||
{{ item.name }}
|
||||
{{ t(`ts.${item.name}`) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -12,7 +12,9 @@ import {ref} from 'vue'
|
||||
import {TsApi} from "../../../api/ts";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {useRightOperate} from './rightOperate'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
const {t} = useI18n()
|
||||
let {delNode, addEvent} = useRightOperate()
|
||||
|
||||
const eventBus: any = inject("bus");
|
||||
|
||||
@ -11,22 +11,22 @@
|
||||
秒
|
||||
</div>-->
|
||||
<div>
|
||||
闪烁次数
|
||||
<el-input v-model="detail.numbers" style="width: 50%" placeholder="请输入闪烁次数"/>
|
||||
{{ t('ts.numberOfFlicker') }}
|
||||
<el-input v-model="detail.numbers" style="width: 50%" :placeholder="t('ts.numberPlaceholder')"/>
|
||||
次
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="optBtn">
|
||||
<el-button @click="updateEvent">确定</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button @click="updateEvent">{{ t('ts.confirm') }}</el-button>
|
||||
<el-button @click="cancel">{{ t('ts.cancel') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="tourBox">
|
||||
<img src="../../../assets/img/tour.png">
|
||||
<p>选中事件调整属性</p>
|
||||
<p>{{ t('ts.selectEventToUpdate') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@ -36,7 +36,9 @@
|
||||
import {inject, ref} from 'vue'
|
||||
import {TsApi} from "../../../api/ts";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
const {t} = useI18n()
|
||||
const times = ref(0)
|
||||
const numbers = ref(0)
|
||||
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
<template>
|
||||
<div class="grid" @click="hideRightMenu">
|
||||
<div class="grid-header row">
|
||||
<div v-for="item in columns" :style="item.style">{{ item.name }}</div>
|
||||
<div class="oneLine" v-for="item in columns" :style="item.style" :title="t('ts.' + item.name)">
|
||||
{{ t('ts.' + item.name) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-body">
|
||||
<div :class="['row',(eventObj&&event.id==eventObj.id)?'selectedRow':'']" :style="getStyle"
|
||||
v-for="(event) in eventList" @click.right="(e)=>{rightClick(e,event)}">
|
||||
<span v-for="item in columns" :class="item.key" :style="item.style">{{
|
||||
<span v-for="item in columns" :class="[item.key,'oneLine']" :style="item.style"
|
||||
:title="format(item.key, event[item.key])">{{
|
||||
format(item.key, event[item.key])
|
||||
}}</span>
|
||||
</div>
|
||||
@ -17,9 +20,30 @@
|
||||
|
||||
</div>
|
||||
<div class="gridRightMenu" v-if="rightClickEvent">
|
||||
<template v-for="item in menus">
|
||||
<template v-for="(item,index) in menus">
|
||||
<template v-if="item.name=='删除'">
|
||||
<el-popconfirm
|
||||
width="220"
|
||||
icon-color="#626AEF"
|
||||
:title="t('ts.popconfirmTitle')"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<template #reference>
|
||||
<span @click="">删除</span>
|
||||
</template>
|
||||
<template #actions="{ confirm, cancel }">
|
||||
<el-button size="small" @click="cancel">{{ t('ts.cancel') }}</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="()=>{item.fun(); confirm()}"
|
||||
>
|
||||
{{ t('ts.confirm') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
|
||||
<!-- <el-popconfirm
|
||||
width="220"
|
||||
icon-color="#626AEF"
|
||||
title="确定要删除吗?"
|
||||
@ -38,10 +62,10 @@
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</el-popconfirm>-->
|
||||
</template>
|
||||
<span v-else @click="item.fun()">
|
||||
{{ item.name }}
|
||||
{{ t('ts.' + item.name) }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
@ -54,7 +78,10 @@ import {computed, onMounted, ref, nextTick} from "vue"
|
||||
import {TsApi} from "../../../api/ts";
|
||||
import {ElMessage} from "element-plus";
|
||||
import * as electron from "electron";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const visible = ref(false)
|
||||
const {t} = useI18n()
|
||||
const eventBus: any = inject('bus')
|
||||
const props = defineProps(['eventList',])
|
||||
const menus = ref([
|
||||
@ -86,6 +113,12 @@ const menus = ref([
|
||||
}
|
||||
},]
|
||||
)
|
||||
// 1. 必加：绑定显示状态（之前缺失的核心）
|
||||
const isPopconfirmShow = ref(false);
|
||||
// 2. 手动触发气泡框显示（确保点击一定触发）
|
||||
const triggerPopconfirm = () => {
|
||||
isPopconfirmShow.value = true;
|
||||
};
|
||||
const clicked = ref(false)
|
||||
const delEvent = (ids, cb) => {
|
||||
TsApi.delEvent(ids).then(res => {
|
||||
@ -105,10 +138,15 @@ function onCancel() {
|
||||
clicked.value = true
|
||||
}
|
||||
|
||||
|
||||
const confirmEvent = () => {
|
||||
console.log('confirm!')
|
||||
}
|
||||
const cancelEvent = () => {
|
||||
console.log('cancel!')
|
||||
}
|
||||
let eventObj = ref(null)
|
||||
let rightClickEvent = ref(null)
|
||||
let columns = ref([{name: '事件名称', key: "name", style: "flex:auto"},
|
||||
let columns = ref([{name: '事件名称', key: "name", style: "width:210px"},
|
||||
{name: '开始时间', key: "startTime", style: "width:120px"},
|
||||
{name: '持续时间', key: "duration_time", style: "width:70px"}])
|
||||
// let eventList = ref([])
|
||||
|
||||
@ -183,8 +183,11 @@ export const useRightOperate = () => {
|
||||
|
||||
})*/
|
||||
}
|
||||
const editNode = () => {
|
||||
console.log("编辑节点")
|
||||
const editNode = (node, eventBus) => {
|
||||
console.log("编辑节点", node)
|
||||
if (node) {
|
||||
eventBus.emit("openDialog", node.sourceType, node.id);
|
||||
}
|
||||
}
|
||||
const addEvent = (node, eventBus) => {
|
||||
eventBus.emit('openAddEvent', node)
|
||||
|
||||
@ -12,14 +12,14 @@
|
||||
<div class="boxBody">
|
||||
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px"
|
||||
@keyup.enter.native="submitForm(ruleForm)">
|
||||
<el-form-item label="名称：" prop="sourceName">
|
||||
<el-form-item :label="t('ts.name')+':'" prop="sourceName">
|
||||
<!-- @input="removeSpaces" -->
|
||||
<el-input v-model.trim="form.sourceName" placeholder="图层文件夹"></el-input>
|
||||
<el-input v-model.trim="form.sourceName" :placeholder="t('ts.directoryNamePlaceholder')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="btnOption">
|
||||
<el-button type="primary" @click="submitForm(ruleForm)">确定</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(ruleForm)">{{ t('ts.confirm') }}</el-button>
|
||||
<el-button @click="cancel">{{ t('ts.cancel') }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -35,7 +35,9 @@ import {ElMessage, FormInstance} from 'element-plus'
|
||||
import {TreeApi} from '@/api/tree'
|
||||
import {useTreeNode} from '@/views/components/tree/hooks/treeNode'
|
||||
import {addMapSource} from "../entity";
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
const {t} = useI18n()
|
||||
const {getKeyOfSelectedNode, getSelectedNode, cusAddNodes, getSameLevel} = useTreeNode()
|
||||
const title = ref('添加文件夹')
|
||||
let form: any = reactive({
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="edit ts-zyl ">
|
||||
<div class="leftTimeDesc">
|
||||
<span>作战时间：{{ stamp }}</span>
|
||||
<span>{{ t('ts.operationalTime') }}：{{ stamp }}</span>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="推演描述"
|
||||
:content="t('ts.deduceDesc')"
|
||||
placement="top"
|
||||
>
|
||||
<svg-icon @click="showInfo" :size="20" class="icon-svg-item" name="des_detail"/>
|
||||
@ -21,7 +21,7 @@
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="item.name"
|
||||
:content="t('ts.'+item.name)"
|
||||
placement="top"
|
||||
>
|
||||
<svg-icon @click="item.fun" :size="35" class="icon-svg-item" :name="item.iconName"/>
|
||||
@ -36,11 +36,12 @@
|
||||
<div id="earthContainer" class="fullSize"></div>
|
||||
<cabin ref="cabin"></cabin>
|
||||
<element></element>
|
||||
|
||||
<deduction :TSOBJ="tsOBJ"></deduction>
|
||||
<newEvent></newEvent>
|
||||
<addDirectory class="adddirectoryBox absolute zIndex999"></addDirectory>
|
||||
<mouseRight></mouseRight>
|
||||
|
||||
<component :is="currentComponent" ref="dynamicComponentRef"/>
|
||||
<!-- 方案描述编辑框 -->
|
||||
<el-dialog width="20vw" v-model="isShowPup" :modal="false" draggable>
|
||||
<template #header>
|
||||
@ -100,8 +101,8 @@
|
||||
<el-input type="textarea" :rows="7" v-model="des_detail"></el-input>
|
||||
</div>
|
||||
<div style="text-align: right;margin-top: 15px">
|
||||
<el-button @click="submit">保存</el-button>
|
||||
<el-button @click="isShowPup=false">取消</el-button>
|
||||
<el-button @click="submit">{{ t('ts.save') }}</el-button>
|
||||
<el-button @click="isShowPup=false">{{ t('ts.cancel') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 立体文字内容 -->
|
||||
@ -155,7 +156,7 @@
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
立体文字
|
||||
{{ t('ts.standText') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -163,8 +164,8 @@
|
||||
<el-input type="textarea" v-model="standText"></el-input>
|
||||
</div>
|
||||
<div style="text-align: right;margin-top: 15px">
|
||||
<el-button @click="()=>{submitStandText(true)}">保存</el-button>
|
||||
<el-button @click="()=>{submitStandText(false)}">取消</el-button>
|
||||
<el-button @click="()=>{submitStandText(true)}">{{ t('ts.save') }}</el-button>
|
||||
<el-button @click="()=>{submitStandText(false)}">{{ t('ts.cancel') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@ -172,7 +173,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
//@ts-nocheck
|
||||
import {ref, reactive, onMounted, nextTick, onUnmounted,} from "vue";
|
||||
import {ref, reactive, onMounted, nextTick, onUnmounted, shallowRef,} from "vue";
|
||||
import {useRouter, useRoute} from "vue-router";
|
||||
import Cabin from "./cabin.vue"
|
||||
import Element from "./element.vue"
|
||||
@ -186,7 +187,12 @@ import {TsApi} from "../../api/ts";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addMapSource} from "../../common/addMapSource";
|
||||
import {$changeComponentShow} from "../../utils/communication";
|
||||
import {useI18n} from "vue-i18n";
|
||||
import billboardObject from "./edit/billboardObjectTs.vue";
|
||||
import polylineObject from "./edit/polylineObjectTs.vue";
|
||||
import polygonObject from "./edit/polygonObjectTs.vue";
|
||||
|
||||
const {t} = useI18n()
|
||||
const planInfo = ref({})
|
||||
const isShowPup = ref(false)
|
||||
const showStandText = ref(false)
|
||||
@ -197,11 +203,11 @@ const stamp = ref("")
|
||||
const rightMenus = ref([
|
||||
|
||||
{
|
||||
name: "进入推演页面", iconName: "playTs", fun: () => {
|
||||
name: "enterTuiyan", iconName: "playTs", fun: () => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "二三维模式", iconName: "ersan_ts", fun: () => {
|
||||
name: "ersanwei", iconName: "ersan_ts", fun: () => {
|
||||
if (YJ.Global.multiViewportMode.getSdk().sdkD) {
|
||||
YJ.Global.multiViewportMode.off(window['earth_ts'])
|
||||
} else {
|
||||
@ -213,14 +219,13 @@ const rightMenus = ref([
|
||||
|
||||
|
||||
{
|
||||
name: "返回", iconName: "backTs", fun: () => {
|
||||
name: "back", iconName: "backTs", fun: () => {
|
||||
router.back()
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "退出方案库", iconName: "exitTs", fun: () => {
|
||||
name: "exitTs", iconName: "exitTs", fun: () => {
|
||||
router.push({path: '/home'})
|
||||
|
||||
}
|
||||
},
|
||||
])
|
||||
@ -236,6 +241,8 @@ for (const routeQueryKey in route.query) {
|
||||
params[routeQueryKey] = Number(route.query[routeQueryKey])
|
||||
}
|
||||
}
|
||||
let currentComponent = shallowRef()
|
||||
let dynamicComponentRef = ref()
|
||||
console.log("params", params)
|
||||
window.planId = params.id
|
||||
let data = new FormData()
|
||||
@ -309,6 +316,7 @@ eventBus.on('open-standText', (currentDrawItemres) => {
|
||||
currentDrawItem.value = currentDrawItemres
|
||||
})
|
||||
eventBus.on('add-event', (task) => {
|
||||
console.log("dd-even", task)
|
||||
tsOBJ.value._Store._tasks = [...tsOBJ.value._Store._tasks, task]
|
||||
})
|
||||
// 新建态势推演对象
|
||||
@ -400,6 +408,39 @@ const handleClick = (e) => {
|
||||
|
||||
$changeComponentShow('.rightMenuTs', false)
|
||||
}
|
||||
eventBus.on('openDialog', async (sourceType: any, id: any) => {
|
||||
if (dynamicComponentRef.value && dynamicComponentRef.value.close) {
|
||||
dynamicComponentRef.value.close()
|
||||
}
|
||||
switch (sourceType) {
|
||||
case 'point':
|
||||
currentComponent.value = billboardObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, sourceType)
|
||||
break
|
||||
case 'line':
|
||||
currentComponent.value = polylineObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, sourceType)
|
||||
break
|
||||
case 'panel':
|
||||
currentComponent.value = polygonObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break
|
||||
}
|
||||
id && dynamicComponentRef.value && (dynamicComponentRef.value.id = id)
|
||||
})
|
||||
eventBus.on('destroyComponent', (id) => {
|
||||
if (id) {
|
||||
if (dynamicComponentRef.value && dynamicComponentRef.value.id == id) {
|
||||
dynamicComponentRef.value?.close()
|
||||
currentComponent.value = undefined
|
||||
}
|
||||
} else {
|
||||
currentComponent.value = undefined
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
922
src/renderer/src/views/TS/edit/billboardObjectTs.vue
Normal file
922
src/renderer/src/views/TS/edit/billboardObjectTs.vue
Normal file
@ -0,0 +1,922 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" :title="t('dialog.point.title')" left="180px" top="100px" :className="'billboard-object'"
|
||||
:closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane :label="t('general.基础信息')" name="1">
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: unset">{{ t('general.名称') }}</span>
|
||||
<input class="input" type="text" v-model="entityOptions.labelText" @change="changeName"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="title1">
|
||||
<div class="row">
|
||||
<p class="lable-left-line">{{ t('dialog.point.WGS84') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title2">
|
||||
<div class="row coordinate-select-box">
|
||||
<div class="lable-left-line">
|
||||
{{ t('dialog.point.转换坐标选择') }}
|
||||
<el-select class="input input-select coordinate-select" style="width: 155px; margin-left: 20px"
|
||||
v-model="coordinate" @change="coordinateChange" placeholder="请选择">
|
||||
<el-option v-for="item in epsg_map" :key="item.epsg" :label="item.name" :value="item.epsg">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-left: 12px;">
|
||||
<div style="width: 46%;">
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">{{ t('general.经度') }}</span>
|
||||
<input class="input" type="number" title="" min="-180" max="180" v-model="entityOptions.lng"
|
||||
@change="changLng" @input="$handleInputLimit"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">{{ t('general.纬度') }}</span>
|
||||
<input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat"
|
||||
@change="changLat" @input="$handleInputLimit"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">{{ t('general.海拔高度') }}</span>
|
||||
<div class="input-number input-number-unit-1 alt-box"
|
||||
:class="{ disabled: heightMode == 2 || heightMode === 3 }">
|
||||
<input class="input" type="number" title="" min="-9999999" max="999999999"
|
||||
v-model="entityOptions.alt" @change="changAlt" @input="$handleInputLimit"/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 50%;">
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">{{ t('dialog.point.XAxis') }}:</span>
|
||||
<input style="border: none; background: none" class="input convert-x" readonly v-model="x"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">{{ t('dialog.point.YAxis') }}:</span>
|
||||
<input style="border: none; background: none" class="input convert-y" readonly v-model="y"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">{{ t('dialog.point.ZAxis') }}:</span>
|
||||
<input style="border: none; background: none" class="input convert-z" readonly v-model="z"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<setStyle type="点" :sourceType="sourceType" :entityOptions="entityOptions"></setStyle>
|
||||
<div class="row" style="padding-left: 12px;">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: none">{{ t('dialog.point.icon.show') }}</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.billboardShow"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-left: 12px;">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: none">{{ t('dialog.point.icon.current') }}</span>
|
||||
<div class="image-box" @click="clickChangeImage">
|
||||
<img class="image" :src="entityOptions.billboardImage" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: none">{{ t('dialog.point.icon.multiple') }}</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0.1" max="99" v-model="entityOptions.billboardScale"
|
||||
@input="$handleInputLimit"/>
|
||||
<span class="unit">{{ t('general.times') }}</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row" style="padding-left: 12px;">
|
||||
<div class="col" style="flex: 0 0 80px;">
|
||||
<span class="label" style="flex: none;">{{ t('dialog.point.text.show') }}</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-left: 12px;">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: none;">{{ t('general.text.color') }}</span>
|
||||
<div class="labelColor" ref="labelColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: none;">{{ t('general.text.size') }}</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="99" v-model="entityOptions.labelFontSize"
|
||||
style="min-width: 70px;" @input="$handleInputLimit"/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col font-select-box">
|
||||
<span class="label" style="flex: none;">{{ t('general.text.font') }}</span>
|
||||
<el-select class="input input-select font-select" style="width: 100px"
|
||||
v-model="entityOptions.labelFontFamily">
|
||||
<el-option v-for="item in fontList" :key="item.key" :label="t('general.' + item.name)"
|
||||
:value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row" style="padding-left: 12px;">
|
||||
<div class="col">
|
||||
<div class="customized-tip"></div>
|
||||
<span class="label" style="flex: none;">{{ t('general.text.style') }}</span>
|
||||
<svg class="icon-text bold">
|
||||
<use xlink:href="#icon-text-bold"></use>
|
||||
</svg>
|
||||
<svg class="icon-text italic">
|
||||
<use xlink:href="#icon-text-italic"></use>
|
||||
</svg>
|
||||
<svg class="icon-text line-bottom">
|
||||
<use xlink:href="#icon-text-line-bottom"></use>
|
||||
</svg>
|
||||
<svg class="icon-text line-through">
|
||||
<use xlink:href="#icon-text-line-through"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: none;">{{ t('general.text.letterSpacing') }}</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0" max="99"
|
||||
style="min-width: 70px;" @input="$handleInputLimit" />
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row" style="padding-left: 12px;">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: none;">{{ t('general.outline.color') }}</span>
|
||||
<div class="labelOutlineColorColor" ref="labelOutlineColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: none;">{{ t('general.outline.width') }}</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0" max="99"
|
||||
style="min-width: 70px;" @input="$handleInputLimit" />
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">{{ t('general.视野缩放') }}</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.scaleByDistance"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">{{ t('general.最近距离') }}</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.near"
|
||||
@input="$handleInputLimit"/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">{{ t('general.最远距离') }}</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.far"
|
||||
@input="$handleInputLimit"/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane :label="t('general.属性信息')" name="2">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane>-->
|
||||
<el-tab-pane :label="t('general.空间信息')" name="3">
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px">{{ t('general.高度模式') }}</span>
|
||||
<el-select class="input input-select height-mode-scelect" style="width: 155px; margin-left: 20px"
|
||||
v-model="heightMode" @change="heightModeChange" placeholder="请选择">
|
||||
<el-option v-for="item in heightModeData" :key="item.key" :label="t('general.' + item.name)"
|
||||
:value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col height-box" v-show="heightMode == 0 || heightMode == 1">
|
||||
<span class="label" style="flex: 0 0 56px">{{ t('general.高度') }}</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height"
|
||||
@change="changHeight" @input="$handleInputLimit"/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex; align-items: center; cursor: pointer"
|
||||
@click="formatChange(1)">
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format1"/>
|
||||
<span style="margin-left: 10px; margin-bottom: 1px; user-select: none">{{
|
||||
t('general.小数格式')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex; align-items: center; cursor: pointer"
|
||||
@click="formatChange(2)">
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format2"/>
|
||||
<span style="margin-left: 10px; margin-bottom: 1px; user-select: none">{{
|
||||
t('general.度分格式')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex; align-items: center; cursor: pointer"
|
||||
@click="formatChange(3)">
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format3"/>
|
||||
<span style="margin-left: 10px; margin-bottom: 1px; user-select: none;white-space: nowrap;">{{
|
||||
t('general.度分秒格式')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 1">
|
||||
<div class="proj-input-box" v-show="format1">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span style="flex: 0 0 40px">{{ t('general.经度') }}</span>
|
||||
<input class="input lng" readonly :value="entityOptions.lng"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span style="flex: 0 0 40px">{{ t('general.纬度') }}</span>
|
||||
<input class="input lat" readonly :value="entityOptions.lat"/>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="proj-input-box" style="width: 56%" v-show="format2">
|
||||
<div class="row">
|
||||
<div class="col" style="flex-direction: column">
|
||||
<div class="row" style="margin-bottom: 15px">
|
||||
<span style="flex: 0 0 40px">{{ t('general.经度') }}</span>
|
||||
<input class="input lng-dm-d" style="flex: 1" readonly :value="lngDmD"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.度') }}</span>
|
||||
<input class="input lng-dm-m" style="flex: 1" readonly :value="lngDmM"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.分') }}</span>
|
||||
<span class="top-line"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span style="flex: 0 0 40px">{{ t('general.纬度') }}</span>
|
||||
<input class="input lat-dm-d" style="flex: 1" readonly :value="latDmD"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.度') }}</span>
|
||||
<input class="input lat-dm-m" style="flex: 1" readonly :value="latDmM"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.分') }}</span>
|
||||
<span class="bottom-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="proj-input-box" style="width: 70%" v-show="format3">
|
||||
<div class="row">
|
||||
<div class="col" style="flex-direction: column">
|
||||
<div class="row" style="margin-bottom: 15px">
|
||||
<span style="flex: 0 0 40px">{{ t('general.经度') }}</span>
|
||||
<input class="input lng-dms-d" style="flex: 1" readonly :value="lngDmsD"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.度') }}</span>
|
||||
<input class="input lng-dms-m" style="flex: 1" readonly :value="lngDmsM"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.分') }}</span>
|
||||
<input class="input lng-dms-s" style="flex: 1" readonly :value="lngDmsS"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.秒') }}</span>
|
||||
<span class="top-line"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span style="flex: 0 0 40px">{{ t('general.纬度') }}</span>
|
||||
<input class="input lat-dms-d" style="flex: 1" readonly :value="latDmsD"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.度') }}</span>
|
||||
<input class="input lat-dms-m" style="flex: 1" readonly :value="latDmsM"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.分') }}</span>
|
||||
<input class="input lat-dms-s" style="flex: 1" readonly :value="latDmsS"/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">{{ t('general.秒') }}</span>
|
||||
<span class="bottom-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex">
|
||||
<button @click="updateHeight">
|
||||
<svg class="icon-updateheigh">
|
||||
<use xlink:href="#yj-icon-updateheight"></use>
|
||||
</svg>
|
||||
{{ t('general.更新高程') }}
|
||||
</button>
|
||||
<button style="margin-left: 10px" @click="translate">{{ t('general.平移') }}</button>
|
||||
</div>
|
||||
<!--<button @click="remove">{{ t('general.删除') }}</button>-->
|
||||
<button @click="confirm">{{ t('general.确定') }}</button>
|
||||
<button @click="close">{{ t('general.关闭') }}</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import {inject} from 'vue'
|
||||
// import {TreeApi} from '@/api/tree'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
// import attribute from './attribute.vue'
|
||||
// import setStyle from './defaultStyle/index.vue'
|
||||
// import {getFontList} from './fontSelect'
|
||||
import {useTreeNode} from '@/views/components/tree/hooks/treeNode'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {TsApi} from "../../../api/ts";
|
||||
|
||||
const {t} = useI18n()
|
||||
|
||||
const {cusUpdateNode, getSelectedNodes, cusRemoveNode} = useTreeNode()
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
const epsg_map = ref([
|
||||
{
|
||||
name: 'WGS 84 / UTM zone 3N',
|
||||
epsg: 'EPSG:32603',
|
||||
def: '+proj=utm +zone=3 +datum=WGS84 +units=m +no_defs'
|
||||
}
|
||||
])
|
||||
let array: any[] = []
|
||||
for (const [key, value] of window['earth_ts'].proj.epsg_map) {
|
||||
let item = structuredClone(value)
|
||||
item.name = item.name + `(${item.epsg}})`
|
||||
array.push(item)
|
||||
}
|
||||
epsg_map.value = array
|
||||
|
||||
const format1 = ref(true)
|
||||
const format2 = ref(false)
|
||||
const format3 = ref(false)
|
||||
const lngDmD = ref('')
|
||||
const lngDmM = ref('')
|
||||
const latDmD = ref('')
|
||||
const latDmM = ref('')
|
||||
const lngDmsD = ref('')
|
||||
const lngDmsM = ref('')
|
||||
const latDmsD = ref('')
|
||||
const latDmsM = ref('')
|
||||
const lngDmsS = ref('')
|
||||
const latDmsS = ref('')
|
||||
|
||||
const fontList = ref([{
|
||||
name: '黑体',
|
||||
value: '黑体',
|
||||
font: 'SimHei',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '思源黑体',
|
||||
value: '思源黑体',
|
||||
font: 'SourceHanSansTi',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '庞门正道标题体',
|
||||
value: '庞门正道标题体',
|
||||
font: 'PMZDBTTi',
|
||||
key: 2
|
||||
},
|
||||
{
|
||||
name: '数黑体',
|
||||
value: '数黑体',
|
||||
font: 'AlimamaShuHeiTi',
|
||||
key: 3
|
||||
}])
|
||||
const height = ref(0)
|
||||
const heightModeData = ref([
|
||||
{
|
||||
name: '海拔高度',
|
||||
value: '海拔高度',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '相对地表',
|
||||
value: '相对地表',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '依附地表',
|
||||
value: '依附地表',
|
||||
key: 2
|
||||
},
|
||||
{
|
||||
name: '依附模型',
|
||||
value: '依附模型',
|
||||
key: 3
|
||||
}
|
||||
])
|
||||
const activeName = ref('1')
|
||||
const entityOptions: any = ref({})
|
||||
const x = ref()
|
||||
const y = ref()
|
||||
const z = ref()
|
||||
const coordinate = ref('EPSG:4326')
|
||||
const heightMode = ref(0)
|
||||
const labelColorRef = ref(null)
|
||||
const sourceType = ref('')
|
||||
|
||||
let originalOptions
|
||||
let that
|
||||
const open = async (id, type) => {
|
||||
that = window['earth_ts'].entityMap.get(id)
|
||||
sourceType.value = type
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
projConvert()
|
||||
heightModeChange(heightMode.value)
|
||||
x.value = that.lng
|
||||
y.value = that.lat
|
||||
z.value = that.alt
|
||||
baseDialog.value?.open()
|
||||
|
||||
await nextTick()
|
||||
let labelColorPicker = new window.YJColorPicker({
|
||||
el: labelColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.labelColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.labelColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
|
||||
// let iconTextBold = document.getElementsByClassName('bold')[0]
|
||||
// let iconTextItalic = document.getElementsByClassName('italic')[0]
|
||||
// let iconTextLineBottom = document.getElementsByClassName('line-bottom')[0]
|
||||
// let iconTextLineThrough = document.getElementsByClassName('line-through')[0]
|
||||
// let tip: any = document.getElementsByClassName('customized-tip')[0]
|
||||
// iconTextBold.addEventListener('mouseleave', (event:any) => {
|
||||
// tip.style.display = 'none'
|
||||
// })
|
||||
// iconTextBold.addEventListener('mousemove', (event:any) => {
|
||||
// tip.innerHTML = t('general.text.bold')
|
||||
// tip.style.left = (event.layerX + 8) + 'px'
|
||||
// tip.style.top = (event.layerY + 18) + 'px'
|
||||
// tip.style.display = 'block'
|
||||
// })
|
||||
// iconTextItalic.addEventListener('mouseleave', (event:any) => {
|
||||
// tip.style.display = 'none'
|
||||
// })
|
||||
// iconTextItalic.addEventListener('mousemove', (event:any) => {
|
||||
// tip.innerHTML = t('general.text.italic')
|
||||
// tip.style.left = (event.layerX + 8) + 'px'
|
||||
// tip.style.top = (event.layerY + 18) + 'px'
|
||||
// tip.style.display = 'block'
|
||||
// })
|
||||
// iconTextLineBottom.addEventListener('mouseleave', (event:any) => {
|
||||
// tip.style.display = 'none'
|
||||
// })
|
||||
// iconTextLineBottom.addEventListener('mousemove', (event:any) => {
|
||||
// tip.innerHTML = t('general.text.underline')
|
||||
// tip.style.left = (event.layerX + 8) + 'px'
|
||||
// tip.style.top = (event.layerY + 18) + 'px'
|
||||
// tip.style.display = 'block'
|
||||
// })
|
||||
// iconTextLineThrough.addEventListener('mouseleave', (event:any) => {
|
||||
// tip.style.display = 'none'
|
||||
// })
|
||||
// iconTextLineThrough.addEventListener('mousemove', (event:any) => {
|
||||
// tip.innerHTML = t('general.text.strikethrough')
|
||||
// tip.style.left = (event.layerX + 8) + 'px'
|
||||
// tip.style.top = (event.layerY + 18) + 'px'
|
||||
// tip.style.display = 'block'
|
||||
// })
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
that.reset()
|
||||
eventBus?.emit('destroyComponent')
|
||||
}
|
||||
|
||||
const changeName = (e) => {
|
||||
entityOptions.value.labelText = e.target.value
|
||||
}
|
||||
|
||||
const coordinateChange = () => {
|
||||
let position = window['earth_ts'].proj.convert(
|
||||
[
|
||||
{
|
||||
x: entityOptions.value.lng || 0,
|
||||
y: entityOptions.value.lat || 0,
|
||||
z: entityOptions.value.alt || 0
|
||||
}
|
||||
],
|
||||
'EPSG:4326',
|
||||
coordinate.value
|
||||
).points
|
||||
x.value = position[0].x
|
||||
y.value = position[0].y
|
||||
z.value = position[0].z
|
||||
}
|
||||
|
||||
const heightModeChange = (val) => {
|
||||
switch (val) {
|
||||
case 0:
|
||||
case '0':
|
||||
height.value = entityOptions.value.alt || 0
|
||||
break
|
||||
case 1:
|
||||
case '1':
|
||||
if (window['earth_ts'].viewer.scene.terrainProvider.availability) {
|
||||
window.Cesium.sampleTerrainMostDetailed(window['earth_ts'].viewer.scene.terrainProvider, [
|
||||
window.Cesium.Cartographic.fromDegrees(entityOptions.value.lng, entityOptions.value.lat)
|
||||
]).then((position) => {
|
||||
height.value = (entityOptions.value.alt || 0) - Number(position[0].height.toFixed(2))
|
||||
})
|
||||
} else {
|
||||
height.value = entityOptions.value.alt || 0
|
||||
}
|
||||
break
|
||||
case 2:
|
||||
case '2':
|
||||
break
|
||||
case 3:
|
||||
case '3':
|
||||
let objectsToExclude: any[] = []
|
||||
for (let [key, value] of window['earth_ts'].entityMap) {
|
||||
if (value.type === 'RadarScanStereoscopic' && value.entity) {
|
||||
objectsToExclude.push((value as any).entity)
|
||||
}
|
||||
}
|
||||
entityOptions.value
|
||||
.getClampToHeight(entityOptions.value.options.position, objectsToExclude)
|
||||
.then((h) => {
|
||||
height.value = Number(h.toFixed(2))
|
||||
entityOptions.value.alt = Number(h.toFixed(2))
|
||||
})
|
||||
break
|
||||
}
|
||||
that.heightMode = val
|
||||
}
|
||||
|
||||
const changLng = () => {
|
||||
entityOptions.value.lng = entityOptions.value.lng || 0
|
||||
projConvert()
|
||||
coordinateChange()
|
||||
}
|
||||
const changLat = () => {
|
||||
entityOptions.value.lat = entityOptions.value.lat || 0
|
||||
projConvert()
|
||||
coordinateChange()
|
||||
}
|
||||
const changAlt = () => {
|
||||
entityOptions.value.alt = entityOptions.value.alt || 0
|
||||
heightModeChange(heightMode.value)
|
||||
coordinateChange()
|
||||
}
|
||||
|
||||
const changHeight = () => {
|
||||
switch (heightMode.value) {
|
||||
case 0:
|
||||
entityOptions.value.alt = Number(Number(height.value).toFixed(2))
|
||||
break
|
||||
case 1:
|
||||
if (window['earth_ts'].viewer.scene.terrainProvider.availability) {
|
||||
window.Cesium.sampleTerrainMostDetailed(window['earth_ts'].viewer.scene.terrainProvider, [
|
||||
window.Cesium.Cartographic.fromDegrees(entityOptions.value.lng, entityOptions.value.lat)
|
||||
]).then((position) => {
|
||||
entityOptions.value.alt = Number(height.value) + Number(position[0].height.toFixed(2))
|
||||
})
|
||||
} else {
|
||||
entityOptions.value.alt = Number(height.value)
|
||||
}
|
||||
break
|
||||
}
|
||||
changAlt()
|
||||
coordinateChange()
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
}
|
||||
|
||||
const formatChange = (val) => {
|
||||
switch (val) {
|
||||
case 1:
|
||||
format1.value = true
|
||||
format2.value = false
|
||||
format3.value = false
|
||||
break
|
||||
case 2:
|
||||
format1.value = false
|
||||
format2.value = true
|
||||
format3.value = false
|
||||
break
|
||||
case 3:
|
||||
format1.value = false
|
||||
format2.value = false
|
||||
format3.value = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const projConvert = () => {
|
||||
let lng,
|
||||
lat,
|
||||
lngDM,
|
||||
latDM,
|
||||
lngDMS,
|
||||
latDMS,
|
||||
lngdnArr1,
|
||||
lngdnArr2,
|
||||
latdnArr1,
|
||||
latdnArr2,
|
||||
lngdnsArr1,
|
||||
lngdnsArr2,
|
||||
lngdnsArr3,
|
||||
latdnsArr1,
|
||||
latdnsArr2,
|
||||
latdnsArr3
|
||||
lng = entityOptions.value.lng || 0
|
||||
lat = entityOptions.value.lat || 0
|
||||
lngDM = that._proj.degreesToDMS(lng, true)
|
||||
latDM = that._proj.degreesToDMS(lat, true)
|
||||
lngdnArr1 = lngDM.split('°')
|
||||
lngdnArr2 = lngdnArr1[1].split("'")
|
||||
latdnArr1 = latDM.split('°')
|
||||
latdnArr2 = latdnArr1[1].split("'")
|
||||
lngDmD.value = lngdnArr1[0]
|
||||
lngDmM.value = lngdnArr2[0]
|
||||
latDmD.value = latdnArr1[0]
|
||||
latDmM.value = latdnArr2[0]
|
||||
lngDMS = that._proj.degreesToDMS(lng)
|
||||
latDMS = that._proj.degreesToDMS(lat)
|
||||
lngdnsArr1 = lngDMS.split('°')
|
||||
lngdnsArr2 = lngdnsArr1[1].split("'")
|
||||
lngdnsArr3 = lngdnsArr2[1].split('"')
|
||||
latdnsArr1 = latDMS.split('°')
|
||||
latdnsArr2 = latdnsArr1[1].split("'")
|
||||
latdnsArr3 = latdnsArr2[1].split('"')
|
||||
lngDmsD.value = lngdnsArr1[0]
|
||||
lngDmsM.value = lngdnsArr2[0]
|
||||
lngDmsS.value = lngdnsArr3[0]
|
||||
latDmsD.value = latdnsArr1[0]
|
||||
latDmsM.value = latdnsArr2[0]
|
||||
latDmsS.value = latdnsArr3[0]
|
||||
}
|
||||
|
||||
const updateHeight = () => {
|
||||
entityOptions.value.updateHeight().then(() => {
|
||||
changAlt()
|
||||
})
|
||||
}
|
||||
const translate = () => {
|
||||
that.openPositionEditing(() => {
|
||||
changAlt()
|
||||
})
|
||||
}
|
||||
const confirm = () => {
|
||||
entityOptions.value.labelText = entityOptions.value.labelText || t("default.untitled")
|
||||
originalOptions = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
let params = structuredClone(that.options)
|
||||
delete params.host
|
||||
delete params.attribute.rtmp
|
||||
let params2 = {
|
||||
id: params.id,
|
||||
sourceName: params.name,
|
||||
detail: JSON.stringify(params),
|
||||
isShow: params.show ? 1 : 0
|
||||
}
|
||||
TsApi.updateTsSource(params2).then(res => {
|
||||
if (res.code == 200) {
|
||||
ElMessage({type: "success", message: "操作成功"})
|
||||
cusUpdateNode({id: params.id, sourceName: params.name, detail: JSON.stringify(params)})
|
||||
}
|
||||
})
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
const clickChangeImage = () => {
|
||||
eventBus?.emit('openPhoto', (img) => {
|
||||
entityOptions.value.billboardImage = img
|
||||
})
|
||||
}
|
||||
const clickChangeDefaultImage = () => {
|
||||
eventBus?.emit('openPhoto', (img) => {
|
||||
entityOptions.value.billboardDefaultImage = img
|
||||
})
|
||||
}
|
||||
const fontChange = (val) => {
|
||||
entityOptions.value.labelFontFamily = val
|
||||
}
|
||||
|
||||
/*const remove = () => {
|
||||
close()
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let node = window.treeObj.getNodeByParam('id', that.options.id, null)
|
||||
let source_ids = cusRemoveNode(window.treeObj, [node])
|
||||
const res = await TreeApi.removeDirectory({ids: source_ids})
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
that.remove()
|
||||
(window as any)._entityMap.delete(source_ids[0])
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户点击取消，不执行任何操作
|
||||
})
|
||||
}*/
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.billboard-object {
|
||||
.YJ-custom-checkbox {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::v-deep > .content {
|
||||
width: 590px;
|
||||
|
||||
.title1 {
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.title2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.customized-tip {
|
||||
display: none;
|
||||
background: linear-gradient(rgba(var(--color-base1), 0.5), rgba(var(--color-base1), 0.5)), rgba(0, 0, 0, 1);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.billboard-object.dialog-en {
|
||||
::v-deep > .content {
|
||||
width: 690px;
|
||||
|
||||
.title1 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.title2 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.attribute-content-link .table .tr .th:nth-child(2),
|
||||
.attribute-content-link .table .tr .td:nth-child(2),
|
||||
.attribute-content-vr .table .tr .th:nth-child(2),
|
||||
.attribute-content-vr .table .tr .td:nth-child(2),
|
||||
.attribute-content-rtmp .table .tr .th:nth-child(2),
|
||||
.attribute-content-rtmp .table .tr .td:nth-child(2) {
|
||||
width: 284px;
|
||||
flex: 0 0 284px;
|
||||
}
|
||||
|
||||
.attribute-content-link .table .tr .td.operation button,
|
||||
.attribute-content-vr .table .tr .td.operation button,
|
||||
.attribute-content-rtmp .table .tr .td.operation button {
|
||||
width: 76px !important;
|
||||
flex: 0 0 76px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.billboard-object > .content button.primary {
|
||||
padding: 6px 14px;
|
||||
}
|
||||
|
||||
.billboard-object > .content > div .row .col {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.billboard-object > .content > div .row .col:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.billboard-object > .content > div .row .col:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.billboard-object > .content > div .row .label {
|
||||
flex: 0 0 56px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.billboard-object.dialog-en > .content > div .div-item:nth-of-type(2) .row .label {
|
||||
flex: 0 0 65px;
|
||||
}
|
||||
|
||||
.billboard-object > .content .DIV-cy-tab-content-pane .input-select {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.billboard-object > .content .DIV-cy-tab-content-pane h4 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.billboard-object > .content div .image-box {
|
||||
width: 23px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(var(--color-base1), 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.billboard-object > .content div .image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.billboard-object.dialog-en > .content div .proj-input-box .row .col span:nth-child(1) {
|
||||
flex: 0 0 70px !important;
|
||||
}
|
||||
</style>
|
||||
393
src/renderer/src/views/TS/edit/polygonObjectTs.vue
Normal file
393
src/renderer/src/views/TS/edit/polygonObjectTs.vue
Normal file
@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" :title="title+'属性'" left="180px" top="100px" className="polygon"
|
||||
:closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 60%;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="margin-right: 0px;">投影面积:</span>
|
||||
<input class="input input-text" readonly type="text" v-model="area">
|
||||
<el-select v-model="areaUnit">
|
||||
<el-option label="平方米" value="m2"></el-option>
|
||||
<el-option label="平方千米" value="km2"></el-option>
|
||||
<el-option label="亩" value="mu"></el-option>
|
||||
<el-option label="公顷" value="ha"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- <el-tab-pane label="属性信息" name="1">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane>-->
|
||||
<el-tab-pane label="空间信息" name="2">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px;">高度模式</span>
|
||||
<el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
|
||||
v-model="heightMode" @change="heightModeChange" placeholder="请选择">
|
||||
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">Z值统一增加</span>
|
||||
<div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
|
||||
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height"
|
||||
@input="$handleInputLimit"/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
|
||||
:disabled="heightMode == 2">应用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="table spatial-info-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th"></div>
|
||||
<div class="th">经度（X）</div>
|
||||
<div class="th">纬度（Y）</div>
|
||||
<div class="th">高度（Z）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
|
||||
v-model="item.lng" min="-180" max="180"
|
||||
v-if="activeTd.index == i && activeTd.name == 'lng'" @input="$handleInputLimit"/>
|
||||
<span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
|
||||
v-model="item.lat" min="-180" max="180"
|
||||
v-if="activeTd.index == i && activeTd.name == 'lat'" @input="$handleInputLimit">
|
||||
<span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')"
|
||||
@input="$handleInputLimit">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
|
||||
v-model="entityOptions.height" min="-9999999" max="999999999"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'">
|
||||
<span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="面风格" name="3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">面颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">描边颜色</span>
|
||||
<div class="lineColor" ref="lineColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">描边宽度</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth"
|
||||
@input="$handleInputLimit">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="标签风格" name="4">
|
||||
<labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
|
||||
</el-tab-pane>-->
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex;">
|
||||
<button @click="nodeEdit">
|
||||
<svg class="icon-edit">
|
||||
<use xlink:href="#yj-icon-edit"></use>
|
||||
</svg>
|
||||
二次编辑
|
||||
</button>
|
||||
<button style="margin-left: 10px;" @click="translate">
|
||||
<svg class="icon-py">
|
||||
<use xlink:href="#yj-icon-py"></use>
|
||||
</svg>
|
||||
平移
|
||||
</button>
|
||||
</div>
|
||||
<!--<button @click="remove">删除</button>-->
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
import {inject} from "vue";
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {TreeApi} from '@/api/tree'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
import {useTreeNode} from '@/views/components/tree/hooks/treeNode'
|
||||
import {TsApi} from "../../../api/ts";
|
||||
|
||||
const {t} = useI18n()
|
||||
const {cusUpdateNode, getSelectedNodes, cusRemoveNode} = useTreeNode()
|
||||
|
||||
const title = ref('面')
|
||||
const baseDialog: any = ref(null);
|
||||
const eventBus: any = inject("bus");
|
||||
const options = ref({});
|
||||
const colorRef = ref(null)
|
||||
const lineColorRef = ref(null)
|
||||
eventBus.on("openPolygonEdit", () => {
|
||||
baseDialog.value?.open()
|
||||
});
|
||||
|
||||
const area = ref(0)
|
||||
const areaUnit = ref('m2')
|
||||
const height = ref(10)
|
||||
const heightModeData = ref([
|
||||
{
|
||||
name: '海拔高度',
|
||||
value: '海拔高度',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '相对地表',
|
||||
value: '相对地表',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '依附模型',
|
||||
value: '依附模型',
|
||||
key: 2
|
||||
}
|
||||
])
|
||||
|
||||
const activeName = ref('2')
|
||||
const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const positions = ref([])
|
||||
const heightMode = ref(0)
|
||||
const entityOptions: any = ref({});
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
const open = async (id: any, type: any) => {
|
||||
if (type && type === 'rectangle') {
|
||||
title.value = '矩形'
|
||||
} else if (type && type === 'rendezvous') {
|
||||
title.value = '集结地'
|
||||
}
|
||||
that = window['earth_ts'].entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
positions.value = structuredClone(that.options.positions)
|
||||
that.areaChangeCallBack = () => {
|
||||
switch (areaUnit.value) {
|
||||
case 'm2'://平方米
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
break
|
||||
case 'km2'://平方千米
|
||||
area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
|
||||
break
|
||||
case 'mu'://亩
|
||||
area.value = Number(
|
||||
(entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
|
||||
)
|
||||
break
|
||||
case 'ha'://公顷
|
||||
area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
|
||||
break
|
||||
default:
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
}
|
||||
}
|
||||
heightModeChange(heightMode.value)
|
||||
baseDialog.value?.open()
|
||||
|
||||
await nextTick()
|
||||
let colorPicker = new window.YJColorPicker({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let linecolorPicker = new window.YJColorPicker({
|
||||
el: lineColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.lineColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
entityOptions.value.lineColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.lineColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
|
||||
const heightModeChange = (val) => {
|
||||
that.heightMode = heightMode.value
|
||||
}
|
||||
|
||||
const heightConfirm = () => {
|
||||
if (entityOptions.value.operate.positionEditing) {
|
||||
that.positionEditing = false
|
||||
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
|
||||
} else {
|
||||
that.closeNodeEdit(this)
|
||||
that.heightMode = that.heightMode
|
||||
setTimeout(() => {
|
||||
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if (heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
index: i,
|
||||
name: anme
|
||||
}
|
||||
await nextTick()
|
||||
let inputElm = event.target.getElementsByClassName('input')[0]
|
||||
if (inputElm) {
|
||||
inputElm.focus()
|
||||
}
|
||||
}
|
||||
const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
activeTd.value = {
|
||||
index: -1,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
const translate = () => {
|
||||
that.openPositionEditing(() => {
|
||||
entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||
})
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
eventBus.emit("destroyComponent")
|
||||
}
|
||||
|
||||
const nodeEdit = () => {
|
||||
that.nodeEdit((e, positions, areaByMeter) => {
|
||||
console.log('positions', positions)
|
||||
entityOptions.value.options.positions = structuredClone(positions)
|
||||
})
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
entityOptions.value.name = entityOptions.value.name || t("default.untitled")
|
||||
originalOptions = structuredClone(that.options)
|
||||
let params = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
delete params.host
|
||||
let params2 = {
|
||||
id: params.id,
|
||||
sourceName: params.name,
|
||||
detail: JSON.stringify(params),
|
||||
isShow: params.show ? 1 : 0
|
||||
}
|
||||
TsApi.updateTsSource(params2).then(res => {
|
||||
if (res.code == 200) {
|
||||
ElMessage({type: "success", message: "操作成功"})
|
||||
cusUpdateNode({id: params.id, sourceName: params.name, "params": JSON.stringify(params)})
|
||||
}
|
||||
})
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
close()
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let node = window.treeObj.getNodeByParam('id', that.options.id, null)
|
||||
let source_ids = cusRemoveNode(window.treeObj, [node])
|
||||
const res = await TreeApi.removeDirectory({ids: source_ids})
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
that.remove()
|
||||
(window as any)._entityMap.delete(source_ids[0])
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户点击取消，不执行任何操作
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => areaUnit.value,
|
||||
(val) => {
|
||||
if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
|
||||
that.areaChangeCallBack()
|
||||
}
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
574
src/renderer/src/views/TS/edit/polylineObjectTs.vue
Normal file
574
src/renderer/src/views/TS/edit/polylineObjectTs.vue
Normal file
@ -0,0 +1,574 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="线标注" left="180px" top="100px" className="polyline" :closeCallback="closeCallback">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name"/>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 56%">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<el-select v-model="wordsName" @change="changeWordsName">
|
||||
<el-option label="空间长度" :value="0"></el-option>
|
||||
<el-option label="投影长度" :value="1"></el-option>
|
||||
<el-option label="地表长度" :value="2"></el-option>
|
||||
</el-select>
|
||||
<input v-model="length" class="input-text" readonly/>
|
||||
<el-select v-model="lengthUnit">
|
||||
<el-option label="米" value="m"></el-option>
|
||||
<el-option label="千米" value="km"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<!--<setStyle type="线" :sourceType="sourceType" :entityOptions="entityOptions"></setStyle>-->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">线条颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">线条宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input class="input" type="number" title="" min="1" max="999" @input="$handleInputLimit"
|
||||
v-model="entityOptions.lineWidth"/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-line-type-box" style="flex: 0 0 37%">
|
||||
<span class="label">线条形式</span>
|
||||
<el-select class="input input-select input-select-line-type" style="margin-left: 20px"
|
||||
v-model="entityOptions.lineType" @change="lineTypechange">
|
||||
<el-option v-for="item in lineTypeData" :key="item.key" :label="item.name" :value="item.key">
|
||||
<i class="yj-custom-icon" :class="item.icon"></i>
|
||||
{{ item.name }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">首尾相连</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail"/>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">线段圆滑</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.smooth"/>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">线段缓冲</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.extend" @change="lineExtendchange"/>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">缓冲宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input class="input" type="number" title="" min="0" data-min="0.01" max="999999"
|
||||
@input="$handleInputLimit" v-model="entityOptions.extendWidth"/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span class="label">缓冲颜色</span>
|
||||
<div class="extendColor" ref="extendColorRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13">
|
||||
<div class="col">
|
||||
<span class="label">首尾反向</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.rotate"/>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">流动速率</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input class="input" type="number" title="" min="0" max="999999" step="1" @input="$handleInputLimit"
|
||||
v-model="entityOptions.speed"/>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span class="label lineSpace"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5">线条间距</span>
|
||||
<div class="input-number input-number-unit-1 lineSpace" style="width: 80px"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5">
|
||||
<input class="input" type="number" title="" min="0" max="4.5" step="0.1" @input="$handleInputLimit"
|
||||
v-model="entityOptions.space"/>
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- <el-tab-pane label="属性信息" name="1">
|
||||
<attribute :entityOptions="entityOptions"></attribute>
|
||||
</el-tab-pane>-->
|
||||
<el-tab-pane label="空间信息" name="2">
|
||||
<div class="row">
|
||||
<div class="col height-mode-box">
|
||||
<span class="label" style="flex: 0 0 56px">高度模式</span>
|
||||
<el-select class="input input-select height-mode-scelect" style="width: 155px; margin-left: 20px"
|
||||
v-model="heightMode" @change="heightModeChange" placeholder="请选择">
|
||||
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">Z值统一增加</span>
|
||||
<div class="input-number input-number-unit-1 height-box" :class="{ disabled: heightMode == 2 }">
|
||||
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height"
|
||||
@input="$handleInputLimit"/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<button class="confirm height-confirm" style="margin-left: 5px" @click="heightConfirm"
|
||||
:disabled="heightMode == 2">
|
||||
应用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="table spatial-info-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th"></div>
|
||||
<div class="th">经度（X）</div>
|
||||
<div class="th">纬度（Y）</div>
|
||||
<div class="th">高度（Z）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
|
||||
v-model="item.lng" min="-180" max="180" @input="$handleInputLimit"
|
||||
v-if="activeTd.index == i && activeTd.name == 'lng'"/>
|
||||
<span style="pointer-events: none" v-else>{{ item.lng.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
|
||||
v-model="item.lat" min="-180" max="180" @input="$handleInputLimit"
|
||||
v-if="activeTd.index == i && activeTd.name == 'lat'"/>
|
||||
<span style="pointer-events: none" v-else>{{ item.lat.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
|
||||
v-model="item.alt" min="-9999999" max="999999999" @input="$handleInputLimit"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'"/>
|
||||
<span style="pointer-events: none" v-else>{{ item.alt.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="标签风格" name="3">
|
||||
<labelStyle type="线" :entityOptions="entityOptions"></labelStyle>
|
||||
</el-tab-pane>-->
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex">
|
||||
<button @click="nodeEdit">
|
||||
<svg class="icon-edit">
|
||||
<use xlink:href="#yj-icon-edit"></use>
|
||||
</svg>
|
||||
二次编辑
|
||||
</button>
|
||||
<button style="margin-left: 10px" @click="translate">
|
||||
<svg class="icon-py">
|
||||
<use xlink:href="#yj-icon-py"></use>
|
||||
</svg>
|
||||
平移
|
||||
</button>
|
||||
</div>
|
||||
<button @click="remove">删除</button>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, getCurrentInstance} from 'vue'
|
||||
import {inject} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {TreeApi} from '@/api/tree'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
// import attribute from './attribute.vue'
|
||||
// import setStyle from './defaultStyle/index.vue'
|
||||
// import labelStyle from './labelStyle.vue'
|
||||
import {useTreeNode} from '@/views/components/tree/hooks/treeNode'
|
||||
import {TsApi} from "../../../api/ts";
|
||||
|
||||
const {t} = useI18n()
|
||||
const {cusUpdateNode, getSelectedNodes, cusRemoveNode} = useTreeNode()
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
const sourceType = ref('')
|
||||
const length = ref(0)
|
||||
const lengthUnit = ref('m')
|
||||
const height = ref(10)
|
||||
const heightModeData = ref([
|
||||
{
|
||||
name: '海拔高度',
|
||||
value: '海拔高度',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: '相对地表',
|
||||
value: '相对地表',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
name: '依附模型',
|
||||
value: '依附模型',
|
||||
key: 2
|
||||
}
|
||||
])
|
||||
const lineTypeData = ref([
|
||||
{
|
||||
name: '实线',
|
||||
value: '实线',
|
||||
key: 0,
|
||||
icon: 'line'
|
||||
},
|
||||
{
|
||||
name: '虚线',
|
||||
value: '虚线',
|
||||
key: 1,
|
||||
icon: 'dash-line'
|
||||
},
|
||||
{
|
||||
name: '泛光',
|
||||
value: '泛光',
|
||||
key: 2,
|
||||
icon: 'light-line'
|
||||
},
|
||||
{
|
||||
name: '尾迹光线',
|
||||
value: '尾迹光线',
|
||||
key: 3,
|
||||
icon: 'tail-line'
|
||||
},
|
||||
{
|
||||
name: '多尾迹光线',
|
||||
value: '多尾迹光线',
|
||||
key: 4,
|
||||
icon: 'mult-tail-line'
|
||||
},
|
||||
{
|
||||
name: '流动虚线1',
|
||||
value: '流动虚线1',
|
||||
key: 5,
|
||||
icon: 'flow-dash-line1'
|
||||
},
|
||||
{
|
||||
name: '流动虚线2',
|
||||
value: '流动虚线2',
|
||||
key: 6,
|
||||
icon: 'flow-dash-line2'
|
||||
},
|
||||
{
|
||||
name: '流动箭头1',
|
||||
value: '流动箭头1',
|
||||
key: 7,
|
||||
icon: 'pic-line1'
|
||||
},
|
||||
{
|
||||
name: '流动箭头2',
|
||||
value: '流动箭头2',
|
||||
key: 8,
|
||||
icon: 'pic-line2'
|
||||
},
|
||||
{
|
||||
name: '流动箭头3',
|
||||
value: '流动箭头3',
|
||||
key: 9,
|
||||
icon: 'pic-line3'
|
||||
},
|
||||
{
|
||||
name: '流动箭头4',
|
||||
value: '流动箭头4',
|
||||
key: 10,
|
||||
icon: 'pic-line4'
|
||||
},
|
||||
{
|
||||
name: '流动箭头5',
|
||||
value: '流动箭头5',
|
||||
key: 11,
|
||||
icon: 'pic-line5'
|
||||
},
|
||||
{
|
||||
name: '流动箭头6',
|
||||
value: '流动箭头6',
|
||||
key: 12,
|
||||
icon: 'pic-line6'
|
||||
}
|
||||
])
|
||||
const activeName = ref('2')
|
||||
const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const entityOptions: any = ref({})
|
||||
const linePositions = ref([])
|
||||
const colorRef = ref(null)
|
||||
const extendColorRef = ref(null)
|
||||
const heightMode = ref(0)
|
||||
const wordsName = ref(0)
|
||||
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
const open = async (id: any, type) => {
|
||||
that = window['earth_ts'].entityMap.get(id)
|
||||
sourceType.value = type
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
wordsName.value = Number(entityOptions.value.wordsName)
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
linePositions.value = structuredClone(that.options.positions)
|
||||
that.lengthChangeCallBack = () => {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
heightModeChange(heightMode.value)
|
||||
baseDialog.value?.open()
|
||||
|
||||
await nextTick()
|
||||
let colorPicker = new (window as any).YJColorPicker({
|
||||
el: colorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.color = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
let extendColorPicker = new (window as any).YJColorPicker({
|
||||
el: extendColorRef.value,
|
||||
size: 'mini', //颜色box类型
|
||||
alpha: true, //是否开启透明度
|
||||
defaultColor: entityOptions.value.extendColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
entityOptions.value.extendColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
entityOptions.value.extendColor = 'rgba(255,255,255,1)'
|
||||
} //点击清空按钮事件回调
|
||||
})
|
||||
}
|
||||
const heightModeChange = (val) => {
|
||||
that.heightMode = heightMode.value
|
||||
// @ts-ignore
|
||||
if (heightMode.value === 0 || heightMode.value === '0' || heightMode.value === 1 || heightMode.value === '1') {
|
||||
entityOptions.value.extend = false
|
||||
}
|
||||
}
|
||||
const heightConfirm = () => {
|
||||
that.positionEditing = false
|
||||
for (let i = 0; i < entityOptions.value.options.positions.length; i++) {
|
||||
entityOptions.value.options.positions[i].alt = Number(
|
||||
(entityOptions.value.options.positions[i].alt + Number(height.value)).toFixed(2)
|
||||
)
|
||||
}
|
||||
that.positionEditing = false
|
||||
that.smooth = that.smooth
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if (heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
index: i,
|
||||
name: anme
|
||||
}
|
||||
await nextTick()
|
||||
let inputElm = event.target.getElementsByClassName('input')[0]
|
||||
if (inputElm) {
|
||||
inputElm.focus()
|
||||
}
|
||||
}
|
||||
const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
entityOptions.value.options.positions[i][name] = Number(Number(event.target.value).toFixed(digit))
|
||||
entityOptions.value.positionEditing = false
|
||||
activeTd.value = {
|
||||
index: -1,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
const changeWordsName = (val) => {
|
||||
entityOptions.value.wordsName = wordsName.value
|
||||
}
|
||||
|
||||
const lineTypechange = () => {
|
||||
}
|
||||
const lineExtendchange = (e) => {
|
||||
if (e.target.checked) {
|
||||
heightMode.value = 2
|
||||
}
|
||||
}
|
||||
const nodeEdit = () => {
|
||||
entityOptions.value.positionEditing = false
|
||||
entityOptions.value.noseToTail = false
|
||||
// heightMode.value = 0
|
||||
// that.heightMode = 0
|
||||
that.nodeEdit((positions, lenByMeter) => {
|
||||
entityOptions.value.options.positions = structuredClone(positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = lenByMeter / 1000
|
||||
} else {
|
||||
length.value = lenByMeter
|
||||
}
|
||||
})
|
||||
}
|
||||
const translate = () => {
|
||||
that.openPositionEditing(() => {
|
||||
entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
eventBus.emit('destroyComponent')
|
||||
}
|
||||
const confirm = () => {
|
||||
entityOptions.value.name = entityOptions.value.name || t("default.untitled")
|
||||
originalOptions = structuredClone(that.options)
|
||||
let params = structuredClone(that.options)
|
||||
baseDialog.value?.close()
|
||||
delete params.host
|
||||
let params2 = {
|
||||
id: params.id,
|
||||
sourceName: params.name,
|
||||
detail: JSON.stringify(params),
|
||||
isShow: params.show ? 1 : 0
|
||||
}
|
||||
TsApi.updateTsSource(params2).then(res => {
|
||||
if (res.code == 200) {
|
||||
ElMessage({type: "success", message: "操作成功"})
|
||||
cusUpdateNode({id: params.id, sourceName: params.name, detail: JSON.stringify(params)})
|
||||
}
|
||||
})
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
close()
|
||||
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let node = window.treeObj.getNodeByParam('id', that.options.id, null)
|
||||
let source_ids = cusRemoveNode(window.treeObj, [node])
|
||||
const res = await TreeApi.removeDirectory({ids: source_ids})
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
that.remove()
|
||||
(window as any)._entityMap.delete(source_ids[0])
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg || '删除失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户点击取消，不执行任何操作
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => lengthUnit.value,
|
||||
(val) => {
|
||||
if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
},
|
||||
{immediate: true}
|
||||
)
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.polyline {
|
||||
::v-deep .input-select-unit-box {
|
||||
.el-input-group__prepend {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
width: 130px;
|
||||
padding: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: unset;
|
||||
|
||||
.el-input__inner {
|
||||
border-radius: 0;
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-group__append {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,29 +3,30 @@
|
||||
<div class="miniElement" :style="!mini?'display:none':''">
|
||||
<div class="switch-node-outer" @click="mini=false">
|
||||
<div class="switch-node-inner">
|
||||
展开元素库
|
||||
{{ t('ts.unfoldElement') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="element" :style="mini?'display:none':''">
|
||||
<div class="titleBox">
|
||||
<span class="title">元素库</span>
|
||||
<span class="title">{{ t("ts.element") }}</span>
|
||||
<span class="close" @click="mini=true">
|
||||
<svg-icon :size="15" class="icon-svg-item" name="closeLeftTs"/>收起
|
||||
<svg-icon :size="15" class="icon-svg-item" name="closeLeftTs"/>{{ t("ts.fold") }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input
|
||||
v-model="input2"
|
||||
class="responsive-input"
|
||||
placeholder="搜索"
|
||||
:placeholder="t('ts.search')"
|
||||
:prefix-icon="Search"
|
||||
/>
|
||||
</div>
|
||||
<div class="tabsBox">
|
||||
<div class="tabs">
|
||||
<div v-for="(item,index) in tabs" @click="handleTabClick(item,index)" :class="index==activIndex?'active':''">
|
||||
{{ item.name }}
|
||||
<div v-for="(item,index) in tabs" @click="handleTabClick(item,index)" :title=" t('ts.' + item.name)"
|
||||
:class="[index==activIndex?'active':'','oneLine']">
|
||||
{{ t('ts.' + item.name) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
@ -75,10 +76,12 @@ import {GraphApi} from "../../api/graphLabel";
|
||||
import {addMapSource} from "./entity";
|
||||
import {useTreeNode} from "../components/tree/hooks/treeNode";
|
||||
import {ElMessage, TreeInstance} from "element-plus";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const {getSelectedNodes} = useTreeNode()
|
||||
const service = ref(localStorage.getItem('ip'))
|
||||
let mini = ref(false)
|
||||
const {t} = useI18n()
|
||||
|
||||
interface Tree {
|
||||
name: string
|
||||
@ -94,10 +97,10 @@ const defaultProps = {
|
||||
|
||||
const activIndex = ref(0)
|
||||
const tabs = [
|
||||
{name: "人工模型", dataType: 'tree', key: "model",},
|
||||
{name: "军事标绘", dataType: 'tree', key: "graph", funName: 'DrawPoint',},
|
||||
{name: "model", dataType: 'tree', key: "model",},
|
||||
{name: "graph", dataType: 'tree', key: "graph", funName: 'DrawPoint',},
|
||||
{
|
||||
name: "基础标绘", dataType: 'list', children:
|
||||
name: "baseLabel", dataType: 'list', children:
|
||||
[
|
||||
{name: "点", source_name: "点标注", funName: 'DrawPoint', type: "point"},
|
||||
{name: "线", source_name: "线标注", funName: 'DrawPolyline', type: "line", positionLength: 2},
|
||||
@ -108,7 +111,7 @@ const tabs = [
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "特效", dataType: 'list', children: [
|
||||
name: "effects", dataType: 'list', children: [
|
||||
{name: "火焰", source_name: "火焰", funName: 'DrawPoint', type: "fire"},
|
||||
{name: "喷射水柱", source_name: "喷射水柱", funName: 'DrawPolyline', type: "waterL", option: {number: 2}},
|
||||
{name: "立体文字", source_name: "", funName: 'DrawPolyline', type: "standText", positionLength: 2}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<span>{{ date.hms }}</span>
|
||||
<div class="ymd_week">
|
||||
<span>{{ date.ymd }}</span>
|
||||
<span>星期{{ date.week }}</span>
|
||||
<span>{{ t(`week.${date.week}`) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="titles">实景三维态势推演系统</div>
|
||||
@ -17,44 +17,45 @@
|
||||
</svg>
|
||||
<div class="list-container">
|
||||
<div class="sub-title">
|
||||
<span>历史推演</span>
|
||||
<span>{{ t('ts.historyDeduce') }}</span>
|
||||
<svg class="icon icon-title" aria-hidden="true">
|
||||
<use xlink:href="#icon-title"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="search">
|
||||
<span>推演名称 <el-input
|
||||
<span>{{ t('ts.deduceName') }} <el-input
|
||||
v-model="searchParams.name"
|
||||
style="width: 240px"
|
||||
placeholder="请输入推演名称"
|
||||
:placeholder="t('ts.deduceNamePlaceholder')"
|
||||
clearable
|
||||
/></span>
|
||||
<span>创建人 <el-input
|
||||
<span>{{ t('ts.creator') }} <el-input
|
||||
v-model="searchParams.createdBy"
|
||||
style="width: 240px"
|
||||
placeholder="请输入创建人姓名"
|
||||
:placeholder="t('ts.creatorPlaceholder')"
|
||||
clearable
|
||||
/></span>
|
||||
<span>创建时间
|
||||
<span>
|
||||
{{ t('ts.creationTime') }}
|
||||
<el-date-picker
|
||||
:teleported="false"
|
||||
class="dark-time-picker"
|
||||
v-model="searchParams.datetime"
|
||||
type="datetimerange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:start-placeholder="t('ts.startPlaceholder')"
|
||||
:end-placeholder="t('ts.endPlaceholder')"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
date-format="YYYY-MM-DD"
|
||||
time-format="HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/></span>
|
||||
<el-button @click="search">搜索</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
<el-button @click="search">{{ t('ts.search') }}</el-button>
|
||||
<el-button @click="reset">{{ t('ts.reset') }}</el-button>
|
||||
</div>
|
||||
<div class="option">
|
||||
<el-button :icon="CirclePlus" @click="()=>{addPlan()}">新建推演</el-button>
|
||||
<el-button :icon="Download">导入</el-button>
|
||||
<el-button :icon="Upload">导出</el-button>
|
||||
<el-button :icon="CirclePlus" @click="()=>{addPlan()}">{{ t('ts.createPlan') }}</el-button>
|
||||
<!-- <el-button :icon="Download">导入</el-button>
|
||||
<el-button :icon="Upload">导出</el-button>-->
|
||||
</div>
|
||||
<div class="tableBox">
|
||||
<el-table
|
||||
@ -62,15 +63,15 @@
|
||||
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column align="center" prop="name" label="推演名称"/>
|
||||
<el-table-column align="center" label="推演描述" :class-name="'ellipsis-column'">
|
||||
<el-table-column align="center" prop="name" :label="t('ts.deduceName')"/>
|
||||
<el-table-column align="center" :label="t('ts.deduceDesc')" :class-name="'ellipsis-column'">
|
||||
<template #default="scope">
|
||||
{{ scope.row.desc }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="createdBy" label="创建人" sortable width="240"/>
|
||||
<el-table-column align="center" prop="createdAt" label="创建日期" sortable width="180"/>
|
||||
<el-table-column align="center" label="操作" width="160">
|
||||
<el-table-column align="center" prop="createdBy" :label="t('ts.creator')" sortable width="240"/>
|
||||
<el-table-column align="center" prop="createdAt" :label="t('ts.creationTime')" sortable width="180"/>
|
||||
<el-table-column align="center" :label="t('ts.operation')" width="160">
|
||||
<template #default="scope">
|
||||
|
||||
<!--<el-button text size="small" type="primary" :icon="Edit" @click="toTSEdit(scope.row)">编辑</el-button>-->
|
||||
@ -93,7 +94,7 @@
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="编辑推演"
|
||||
:content="t('ts.tooltipEdit')"
|
||||
placement="top"
|
||||
>
|
||||
<Edit style="width: 16px; height: 16px; cursor:pointer;" @click="toTSEdit(scope.row)"></Edit>
|
||||
@ -101,7 +102,7 @@
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="详情"
|
||||
:content="t('ts.tooltipDetail')"
|
||||
placement="top"
|
||||
>
|
||||
<Warning style="width: 16px; height: 16px; cursor:pointer; "
|
||||
@ -110,7 +111,7 @@
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="删除"
|
||||
:content="t('ts.tooltipDelete')"
|
||||
placement="top"
|
||||
>
|
||||
<Delete style="width: 16px; height: 16px; cursor:pointer;" @click="delPlanBtn(scope.row.id)"/>
|
||||
@ -136,12 +137,13 @@
|
||||
</el-auto-resizer>-->
|
||||
</div>
|
||||
<div class="pageBox">
|
||||
|
||||
<el-config-provider :locale="locale">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
|
||||
:page-sizes="[5, 10, 50, 100]" :page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</el-config-provider>
|
||||
</div>
|
||||
</div>
|
||||
<NewPlan @addCallback="getList(searchParams.value)"></NewPlan>
|
||||
@ -149,19 +151,29 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, onUnmounted} from "vue";
|
||||
import {ref, onUnmounted, computed} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import {Delete, Edit, Warning, CirclePlus, Download, Upload} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox, TableV2SortOrder} from 'element-plus'
|
||||
import type {SortBy} from 'element-plus'
|
||||
import {TsApi} from "../../api/ts";
|
||||
import NewPlan from "./newPlan.vue"
|
||||
import {useI18n} from "vue-i18n";
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
import zhTw from 'element-plus/es/locale/lang/zh-tw'
|
||||
import en from 'element-plus/es/locale/lang/en'
|
||||
|
||||
const language = ref('zh-CN')
|
||||
language.value = JSON.parse(localStorage.getItem("systemSetting"))?.language || 'zh-CN'
|
||||
const locale = computed(() => (language.value === "zh-CN" ? zhCn : (language.value === "zh-TW" ? zhTw : en)))
|
||||
|
||||
const {t} = useI18n()
|
||||
const moment = require("moment");
|
||||
|
||||
const date = ref({
|
||||
ymd: '',
|
||||
hms: '',
|
||||
week: ""
|
||||
week: 0
|
||||
})
|
||||
const eventBus: any = inject('bus')
|
||||
const {ipcRenderer} = require('electron')
|
||||
@ -338,7 +350,7 @@ const setTime = () => {
|
||||
date.value.ymd = year + '-' + month + '-' + day
|
||||
date.value.hms = hours + ':' + minutes + ':' + seconds
|
||||
|
||||
date.value.week = ["天", "一", "二", "三", "四", "五", "六"][date1.getDay()]
|
||||
date.value.week = date1.getDay() //["天", "一", "二", "三", "四", "五", "六"][date1.getDay()]
|
||||
}
|
||||
// 添加定时器，每秒更新一次时间
|
||||
const timer = setInterval(setTime, 1000)
|
||||
@ -406,6 +418,7 @@ onUnmounted(() => {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.icon-top {
|
||||
@ -452,22 +465,25 @@ onUnmounted(() => {
|
||||
.sub-title {
|
||||
font-size: 32px;
|
||||
width: 15.4350566864vw;
|
||||
height: 4.0740740741vh;
|
||||
height: 5.0740740741vh;
|
||||
//padding: vh(20);
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
//top: 50%;
|
||||
width: 100%;
|
||||
transform: translateX(-50%);
|
||||
//font-family: W7;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-title {
|
||||
width: 15.4350566864vw;
|
||||
height: 4.0740740741vh;
|
||||
height: 5.0740740741vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
|
||||
<div class="set_pup_header">
|
||||
<div class="system_title">
|
||||
态势事件
|
||||
|
||||
{{ t("ts.situationEvent") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="set_detail">
|
||||
@ -24,25 +25,25 @@
|
||||
<div class="eventDetail">
|
||||
<template v-if="currentKey&¤tKey!='normal'">
|
||||
<el-form label-width="auto" :model="form" style="max-width: 600px">
|
||||
<el-form-item label="事件名称">
|
||||
<el-form-item :label="t('ts.事件名称')">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间">
|
||||
<el-form-item :label="t('ts.开始时间')">
|
||||
<el-date-picker
|
||||
:show-now="false"
|
||||
popper-class="ts_dark_theme"
|
||||
v-model="form.datetime"
|
||||
type="datetime"
|
||||
placeholder="选择触发时间"
|
||||
:placeholder="t('ts.startTimePlaceholder')"
|
||||
class="timePicker"
|
||||
/>
|
||||
</el-form-item>
|
||||
<template v-if="!['display','hide'].includes(currentKey)">
|
||||
<el-form-item label="持续时间">
|
||||
<el-form-item :label="t('ts.持续时间')">
|
||||
<div class="duration">
|
||||
<span><el-input v-model="hour"/>时</span>
|
||||
<span><el-input v-model="minute"/>分 </span>
|
||||
<span><el-input v-model="second"/>秒</span>
|
||||
<span><el-input v-model="hour"/>{{ t('ts.hour') }}</span>
|
||||
<span><el-input v-model="minute"/>{{ t('ts.minute') }} </span>
|
||||
<span><el-input v-model="second"/>{{ t('ts.second') }}</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
@ -56,7 +57,7 @@
|
||||
</div>
|
||||
|
||||
</el-form-item>-->
|
||||
<el-form-item label="闪烁次数">
|
||||
<el-form-item :label="t('ts.numberOfFlicker')">
|
||||
<div class="duration">
|
||||
<span>
|
||||
<el-input v-model="numbers"/>次
|
||||
@ -65,17 +66,17 @@
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="currentKey=='move'">
|
||||
<el-form-item label="路径是否包含元素点位" label-width="160">
|
||||
<el-form-item :label="t('ts.isContainModelPosition')" label-width="160">
|
||||
<el-switch v-model="isContainModelPosition"/>
|
||||
</el-form-item>
|
||||
<el-button @click="drawLine">绘制路径</el-button>
|
||||
<el-button @click="drawLine">{{ t('ts.drawPath') }}</el-button>
|
||||
</template>
|
||||
|
||||
|
||||
</el-form>
|
||||
<div class="optionbtn">
|
||||
<el-button @click="addEvent">确定</el-button>
|
||||
<el-button @click="()=>{isShowPup=false,reset()}">取消</el-button>
|
||||
<el-button @click="addEvent">{{ t('ts.confirm') }}</el-button>
|
||||
<el-button @click="()=>{isShowPup=false,reset()}">{{ t('ts.cancel') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -93,7 +94,9 @@ import type {RenderContentContext, TreeInstance} from 'element-plus'
|
||||
import {TsApi} from "../../api/ts";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {initMapData} from "./entity";
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
const {t} = useI18n()
|
||||
const treeRef = ref<TreeInstance>()
|
||||
// 存储当前需要高亮的节点 key（初始为空）
|
||||
const currentKey = ref<number | string | null>("flicker");
|
||||
@ -238,6 +241,7 @@ const addEvent = () => {
|
||||
"detail": JSON.stringify(obj)
|
||||
}
|
||||
console.log("dbParams", dbParams)
|
||||
console.log("duration_S", duration_S)
|
||||
// return;
|
||||
TsApi.addTsEvent(dbParams).then(res => {
|
||||
if (res.code == 200) {
|
||||
|
||||
@ -5,14 +5,13 @@
|
||||
<template v-if="!currentPlanId">
|
||||
<div class="set_pup_header">
|
||||
<div class="system_title">
|
||||
<!--{{ t('model.title') }}-->
|
||||
新建推演
|
||||
{{ t('ts.createPlan') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="detailTitle">
|
||||
推演详情
|
||||
{{ t('ts.deduceDetail') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -27,10 +26,10 @@
|
||||
:label-position="'top'"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item label="推演名称" prop="name" required>
|
||||
<el-input v-model="sizeForm.name" placeholder="请填写名称"/>
|
||||
<el-form-item :label="t('ts.deduceName')" prop="name" required>
|
||||
<el-input v-model="sizeForm.name" :placeholder="t('ts.deduceNamePlaceholder')"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="仿真开始时间" prop="simulationStartTime" required>
|
||||
<el-form-item :label="t('ts.startTime')" prop="simulationStartTime" required>
|
||||
<el-date-picker
|
||||
:readonly="Boolean(currentPlanId)"
|
||||
v-model="sizeForm.simulationStartTime"
|
||||
@ -38,16 +37,16 @@
|
||||
type="datetime"
|
||||
timezone="Asia/Shanghai"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
placeholder="请选择日期时间"
|
||||
:placeholder="t('ts.startTimePlaceholder')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="推演描述" prop="desc" required>
|
||||
<el-input v-model="sizeForm.desc" type="textarea" placeholder="请输入内容描述"/>
|
||||
<el-form-item :label="t('ts.deduceDesc')" prop="desc" required>
|
||||
<el-input v-model="sizeForm.desc" type="textarea" :placeholder="t('ts.deduceDescPlaceholder')"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="optionbtn">
|
||||
<el-button @click="addPlan(ruleFormRef)">确定</el-button>
|
||||
<el-button @click="isShowPup= false">取消</el-button>
|
||||
<el-button @click="addPlan(ruleFormRef)">{{ t('btn.confirm') }}</el-button>
|
||||
<el-button @click="isShowPup= false">{{ t('general.取消') }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -62,7 +61,9 @@
|
||||
import {ref, reactive,} from "vue";
|
||||
import {ElMessage, FormInstance, FormRules} from 'element-plus'
|
||||
import {TsApi} from "../../api/ts";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const {t} = useI18n()
|
||||
const eventBus: any = inject('bus')
|
||||
const emit = defineEmits(['addCallback']);
|
||||
const isShowPup = ref(false)
|
||||
@ -72,6 +73,7 @@ interface RuleForm {
|
||||
name: string,
|
||||
simulationStartTime: string,
|
||||
desc: string,
|
||||
wheel: number,
|
||||
}
|
||||
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
@ -79,11 +81,12 @@ let sizeForm = reactive<RuleForm>({
|
||||
name: '',
|
||||
simulationStartTime: '',
|
||||
desc: '',
|
||||
wheel: 20
|
||||
})
|
||||
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
// {required: true, message: '推演名称不能为空', trigger: 'blur'},
|
||||
{required: true, message: '推演名称不能为空', trigger: 'blur'},
|
||||
{
|
||||
// 自定义验证器
|
||||
validator: (rule, value, callback) => {
|
||||
@ -91,18 +94,18 @@ const rules = reactive<FormRules<RuleForm>>({
|
||||
const trimmedVal = value.trim();
|
||||
if (!trimmedVal) {
|
||||
// 验证失败，返回错误提示
|
||||
callback(new Error('推演名称不能为空（不能仅输入空格）'));
|
||||
callback(new Error('不能仅输入空格'));
|
||||
} else {
|
||||
// 验证通过，调用 callback() 无参
|
||||
callback();
|
||||
}
|
||||
},
|
||||
// 触发时机：失去焦点 + 表单提交（可按需调整）
|
||||
trigger: ['blur', 'submit']
|
||||
trigger: ['blur', 'submit',]
|
||||
}
|
||||
],
|
||||
desc: [
|
||||
// {required: true, message: '推演描述不能为空', trigger: 'blur'},
|
||||
{required: true, message: '推演描述不能为空', trigger: 'blur'},
|
||||
{
|
||||
// 自定义验证器
|
||||
validator: (rule, value, callback) => {
|
||||
@ -110,7 +113,7 @@ const rules = reactive<FormRules<RuleForm>>({
|
||||
const trimmedVal = value.trim();
|
||||
if (!trimmedVal) {
|
||||
// 验证失败，返回错误提示
|
||||
callback(new Error('推演描述不能为空（不能仅输入空格）'));
|
||||
callback(new Error('不能仅输入空格'));
|
||||
} else {
|
||||
// 验证通过，调用 callback() 无参
|
||||
callback();
|
||||
@ -140,6 +143,7 @@ const addPlan = async (formEl: FormInstance | undefined) => {
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (currentPlanId.value == '') {
|
||||
|
||||
TsApi.addPlan(sizeForm).then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 200) {
|
||||
|
||||
Reference in New Issue
Block a user