Fuyuu
/
dt-admin-pc-v2
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1.修改查询数量 

2.控制绘画组件和绘画军事组件显示唯一性。
3.更改绘画图形的逻辑，创建和结束使用双击方式触发
4.优化图形编辑页面UI
5.地图创建区域与绘画组件融合
6.store新增shapeUsing属性，用于区分draw组件使用状态
master
DIAMOND 1 year ago
parent
4908c12926
commit
531b72740d
10 changed files with 102 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/components/earthMap/Toolbar.vue
  2. 41
      src/components/earthMap/ToolbarShow.vue
  3. 2
      src/components/earthMap/toolbar/AddKeyControlArea.vue
  4. 11
      src/components/earthMap/toolbar/DrawShape.vue
  5. 14
      src/components/earthMap/toolbar/DrawShapeMilitary.vue
  6. 1
      src/store/modules/earthMap.ts
  7. 3
      src/store/modules/user.ts
  8. 40
      src/utils/earthMap/earthDraw.ts
  9. 18
      src/views/earthMap/edit/EarthComp.vue
  10. 10
      src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue

35
src/components/earthMap/Toolbar.vue
View File

@ -44,10 +44,7 @@
<p title="态势工具" class="tb-img-p alarm" @click="drawShapeMilitary"> <p title="态势工具" class="tb-img-p alarm" @click="drawShapeMilitary">
<img :src="drawShapeMilitaryIMG" /> <img :src="drawShapeMilitaryIMG" />
</p> </p>
<!-- <p title="测试" class="tb-img-p alarm" @click="test">
<img :src="eventNotif" />
<span class="divright">{{ getEventNum }}</span>
</p> -->
</div> </div>
</Window> </Window>
<div id="measurePopModal" class="popModal"> <div id="measurePopModal" class="popModal">
@ -131,10 +128,9 @@
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import $ from 'jquery'; import $ from 'jquery';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useEarthMapStore } from '/@/store/modules/earthMap';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import TestCom from './TestCom.vue';
export default defineComponent({ export default defineComponent({
name: 'Toolbar', name: 'Toolbar',
props: { props: {
@ -155,6 +151,7 @@
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
// const { userInfo } = useUserStore(); // const { userInfo } = useUserStore();
const userStore = useUserStore(); const userStore = useUserStore();
const store = useEarthMapStore();
const { createMessage } = useMessage(); const { createMessage } = useMessage();
let _viewer = ref(); let _viewer = ref();
let show = ref(true); let show = ref(true);
@ -181,7 +178,7 @@
const notificationModelShow = ref(false); const notificationModelShow = ref(false);
const WarnListShow = ref(false); const WarnListShow = ref(false);
const drawShapeShow = ref(false); const drawShapeShow = ref(false);
const drawShapePackage = ref(null); const drawShapePackage: any = ref(null);
const drawShapeMilitaryShow = ref(false); const drawShapeMilitaryShow = ref(false);
//计算属性 //计算属性
@ -954,12 +951,18 @@
//绘画图形 //绘画图形
function drawShape() { function drawShape() {
//基本绘图没有被使用中，则关闭
if(drawShapeMilitaryShow.value && store.shapeUsing == false)
{drawShapeMilitaryShow.value = false}
//清空数据 //清空数据
drawShapePackage.value = null drawShapePackage.value = null
drawShapeShow.value = !drawShapeShow.value; drawShapeShow.value = !drawShapeShow.value;
} }
//绘画图形-军事态势 //绘画图形-军事态势
function drawShapeMilitary() { function drawShapeMilitary() {
//基本绘图没有被使用中，则关闭
if(drawShapeShow.value && store.shapeUsing == false)
{drawShapeShow.value = false}
drawShapeMilitaryShow.value = !drawShapeMilitaryShow.value; drawShapeMilitaryShow.value = !drawShapeMilitaryShow.value;
} }
@ -1064,23 +1067,6 @@
$mitt.off('warnInfoMan'); $mitt.off('warnInfoMan');
}); });
//测试研究 showPropertyWindow
function test() {
const currentModel = new window.XE.Obj.Polyline(window.$earth);
// debugger
window.$uia.showPropertyWindow({}, { component: TestCom });
nextTick(() => {});
// window.$uia.tools.push({
// component: currentModel,
// ref: "sdfcsdcfsdc",
// guid: "sdfcsdcfsdc",
// item: () => {
// return {}
// },
//mrq添加
// nextczm: options && options.jsonSchema
// })
}
return { return {
show, show,
@ -1150,7 +1136,6 @@
drawShapePackage, drawShapePackage,
drawShapeMilitaryShow, drawShapeMilitaryShow,
drawShapeMilitaryIMG, drawShapeMilitaryIMG,
test,
}; };
}, },
}); });

41
src/components/earthMap/ToolbarShow.vue
View File

@ -44,10 +44,7 @@
<p title="态势工具" class="tb-img-p alarm" @click="drawShapeMilitary"> <p title="态势工具" class="tb-img-p alarm" @click="drawShapeMilitary">
<img :src="drawShapeMilitaryIMG" /> <img :src="drawShapeMilitaryIMG" />
</p> </p>
<!-- <p title="测试" class="tb-img-p alarm" @click="test">
<img :src="eventNotif" />
<span class="divright">{{ getEventNum }}</span>
</p> -->
</div> </div>
</Window> </Window>
<div id="measurePopModal" class="popModal"> <div id="measurePopModal" class="popModal">
@ -127,8 +124,8 @@
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import $ from 'jquery'; import $ from 'jquery';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useEarthMapStore } from '/@/store/modules/earthMap';
import TestCom from './TestCom.vue'; import { useMessage } from '/@/hooks/web/useMessage';
export default defineComponent({ export default defineComponent({
name: 'ToolbarShow', name: 'ToolbarShow',
@ -149,6 +146,8 @@
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
// const { userInfo } = useUserStore(); // const { userInfo } = useUserStore();
const userStore = useUserStore(); const userStore = useUserStore();
const store = useEarthMapStore();
const { createMessage } = useMessage();
let _viewer = ref(); let _viewer = ref();
let show = ref(true); let show = ref(true);
let modalVisible = ref(false); let modalVisible = ref(false);
@ -938,12 +937,19 @@
notificationModelShow.value = !notificationModelShow.value; notificationModelShow.value = !notificationModelShow.value;
} }
//绘画图形 //绘画图形
function drawShape() { function drawShape() {
//基本绘图没有被使用中，则关闭
if(drawShapeMilitaryShow.value && store.shapeUsing == false)
{drawShapeMilitaryShow.value = false}
//清空数据
drawShapeShow.value = !drawShapeShow.value; drawShapeShow.value = !drawShapeShow.value;
} }
//绘画图形-军事态势 //绘画图形-军事态势
function drawShapeMilitary() { function drawShapeMilitary() {
//基本绘图没有被使用中，则关闭
if(drawShapeShow.value && store.shapeUsing == false)
{drawShapeShow.value = false}
drawShapeMilitaryShow.value = !drawShapeMilitaryShow.value; drawShapeMilitaryShow.value = !drawShapeMilitaryShow.value;
} }
@ -1046,23 +1052,6 @@
$mitt.off('warnInfoMan'); $mitt.off('warnInfoMan');
}); });
//测试研究 showPropertyWindow
function test() {
const currentModel = new window.XE.Obj.Polyline(window.$earth);
// debugger
window.$uia.showPropertyWindow({}, { component: TestCom });
nextTick(() => {});
// window.$uia.tools.push({
// component: currentModel,
// ref: "sdfcsdcfsdc",
// guid: "sdfcsdcfsdc",
// item: () => {
// return {}
// },
//mrq添加
// nextczm: options && options.jsonSchema
// })
}
return { return {
show, show,
@ -1130,7 +1119,7 @@
drawShapeShow, drawShapeShow,
drawShapeMilitaryShow, drawShapeMilitaryShow,
drawShapeMilitaryIMG, drawShapeMilitaryIMG,
test,
}; };
}, },
}); });

2
src/components/earthMap/toolbar/AddKeyControlArea.vue
View File

@ -280,7 +280,7 @@
// store.keyAreaPos.push(point); // store.keyAreaPos.push(point);
// console.log("point", point); // console.log("point", point);
positions.value.push(point); positions.value.push(point);
}, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //右键事件 }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //左键事件
} }
// 关闭记录位置 // 关闭记录位置

11
src/components/earthMap/toolbar/DrawShape.vue
View File

@ -253,9 +253,14 @@ onMounted(() => {
} }
}) })
onBeforeUnmount(() => {
// 结束使用
store.shapeUsing = false
})
function draw(type: String = '') { function draw(type: String = '') {
// 正在使用组件，创建中
store.shapeUsing = true
let t = null let t = null
switch (type) { switch (type) {
case 'GeoPolygon': case 'GeoPolygon':
@ -322,11 +327,11 @@ function draw(type: String = '') {
console.log("错误"); console.log("错误");
break; break;
} }
//判断是否被创建区域组件调用，有则返回实体 t，交给调用组件处理 // 判断是否被创建区域组件调用，有则返回实体 t，交给调用组件处理
if (props.drawShapePackage && if (props.drawShapePackage &&
props.drawShapePackage.from && props.drawShapePackage.from &&
props.drawShapePackage.from == 'addArea') { props.drawShapePackage.from == 'addArea') {
$mitt.emit('addAreaFinished', t) $mitt.emit('addAreaFinished', t)
return return
} }
else else

14
src/components/earthMap/toolbar/DrawShapeMilitary.vue
View File

@ -88,13 +88,15 @@
</p> --> </p> -->
</div> </div>
</a-collapse-panel> </a-collapse-panel>
<a-collapse-panel key="4" header="其他" :style="customStyle"> <!-- 暂时隐藏，由于未知图形作用 -->
<!-- <a-collapse-panel key="4" header="其他" :style="customStyle">
<div class="toolBoxImg"> <div class="toolBoxImg">
<p class="tb-img-p" title="扇形搜索" @click="draw('GeoSectorSearch')"> <p class="tb-img-p" title="扇形搜索" @click="draw('GeoSectorSearch')">
<img :src="sectorSearch" alt="扇形搜索" /> <img :src="sectorSearch" alt="扇形搜索" />
</p> </p>
</div> </div>
</a-collapse-panel> </a-collapse-panel> -->
</a-collapse> </a-collapse>
</Window> </Window>
</template> </template>
@ -257,7 +259,15 @@ const activeKey = ref(['1', '2', '3', '4']);
const customStyle = 'background: rgb(255 255 255 / 0%);border-radius: 4px;border: 0;overflow: hidden'; const customStyle = 'background: rgb(255 255 255 / 0%);border-radius: 4px;border: 0;overflow: hidden';
const earthUI = window.$uia // 获取地图ui对象 const earthUI = window.$uia // 获取地图ui对象
//移除事件
onBeforeUnmount(()=>{
//说明该组件结束使用
store.shapeUsing = false
})
function draw(type: String = '') { function draw(type: String = '') {
//正在使用组件，创建中
store.shapeUsing = true
let t = null let t = null
switch (type) { switch (type) {
case 'GeoPolygon': case 'GeoPolygon':

1
src/store/modules/earthMap.ts
View File

@ -8,6 +8,7 @@ export const useEarthMapStore = defineStore({
token: '', token: '',
customPrimitiveList: <any>[],// 视频图元数组 customPrimitiveList: <any>[],// 视频图元数组
customPrimitive: null, customPrimitive: null,
shapeUsing: <any> false, //判断绘画组件使用状态
shapeList: <any>[], //绘画数组（区域） shapeList: <any>[], //绘画数组（区域）
shapeShowList: <any>[], //绘画存储（临时） shapeShowList: <any>[], //绘画存储（临时）
keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域 keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域

3
src/store/modules/user.ts
View File

@ -29,7 +29,7 @@ interface UserState {
lastUpdateTime: number; lastUpdateTime: number;
tenantid?: string | number; tenantid?: string | number;
loginInfo?: Nullable<LoginInfo>; loginInfo?: Nullable<LoginInfo>;
customPrimitiveList
} }
export const useUserStore = defineStore({ export const useUserStore = defineStore({
@ -51,7 +51,6 @@ export const useUserStore = defineStore({
tenantid: '', tenantid: '',
//登录返回信息 //登录返回信息
loginInfo: null, loginInfo: null,
customPrimitiveList: [],
}), }),
getters: { getters: {
getUserInfo(): UserInfo { getUserInfo(): UserInfo {

40
src/utils/earthMap/earthDraw.ts
View File

@ -25,12 +25,17 @@ const earthUI = window.$uia // 获取地图ui对象
//绘画图形初始化 //绘画图形初始化
export async function drawInit() { export async function drawInit() {
// console.log("sceneId",userStore.userInfo?.sceneId);
/**
* listBySceneId 查询 SceneId以及SceneId为空的列表
*/
defHttp.get({ defHttp.get({
url: '/military/dtMapDraw/list', url: '/military/dtMapDraw/listBySceneId',
params: { params: {
sceneId: userStore.userInfo?.sceneId sceneId: userStore.userInfo?.sceneId
} }
}, { isTransformResponse: false }).then((res) => { }, { isTransformResponse: false }).then((res) => {
// console.log("listBySceneId",res);
res.result.records.forEach((res) => { res.result.records.forEach((res) => {
let item = res; let item = res;
let config = JSON.parse(item.drawData); let config = JSON.parse(item.drawData);
@ -138,10 +143,14 @@ export function drawShow(obj: any, config: any, state: Number) {
obj.showProperty = (cancel: Function = () => { }, ok: Function = () => { }, cancelText = "取消", okText = "确认",) => { obj.showProperty = (cancel: Function = () => { }, ok: Function = () => { }, cancelText = "取消", okText = "确认",) => {
return popup("属性", [h(basicEditing, { obj: obj, cancel: cancel, ok: ok, cancelText: cancelText, okText: okText })], "basicEditing"); return popup("属性", [h(basicEditing, { obj: obj, cancel: cancel, ok: ok, cancelText: cancelText, okText: okText })], "basicEditing");
} }
//状态为0，保存
if (state == 0) { if (state == 0) {
saveInStore(obj) saveInStore(obj)
} }
//添加鼠标事件 ，双击结束创建/编辑
listenMouseHandler(obj)
/** /**
* 由于返回具有 `primitive` 属性的对象，该属性包含场景中特定窗口坐标处的第一个（顶部）图元， * 由于返回具有 `primitive` 属性的对象，该属性包含场景中特定窗口坐标处的第一个（顶部）图元，
* 如果该位置没有任何内容，则返回未定义的对象。其他属性可能会根据基元的类型进行设置，并可用于进一步识别拾取的对象。 * 如果该位置没有任何内容，则返回未定义的对象。其他属性可能会根据基元的类型进行设置，并可用于进一步识别拾取的对象。
@ -150,7 +159,7 @@ export function drawShow(obj: any, config: any, state: Number) {
*/ */
nextTick(() => { nextTick(() => {
if (obj._polygon) { if (obj._polygon) {
obj._polygon.customProp = { obj._polygon.customProp = {
id: obj.id, id: obj.id,
drawType: obj.customProp.drawType, drawType: obj.customProp.drawType,
remark: obj.customProp.remark, remark: obj.customProp.remark,
@ -162,12 +171,12 @@ export function drawShow(obj: any, config: any, state: Number) {
// Object.assign(obj._polygon, obj) // Object.assign(obj._polygon, obj)
} }
if (obj._polyline) { if (obj._polyline) {
obj._polyline.customProp = { obj._polyline.customProp = {
id: obj.id, id: obj.id,
drawType: obj.customProp.drawType, drawType: obj.customProp.drawType,
remark: obj.customProp.remark, remark: obj.customProp.remark,
sceneId: obj.customProp.sceneId sceneId: obj.customProp.sceneId
} }
obj._polyline.id = obj.id obj._polyline.id = obj.id
obj._polyline.name = '绘画' obj._polyline.name = '绘画'
// obj._polyline = Object.assign({},obj) // obj._polyline = Object.assign({},obj)
@ -178,6 +187,29 @@ export function drawShow(obj: any, config: any, state: Number) {
return obj return obj
} }
function listenMouseHandler(obj: any) {
//添加鼠标事件 ，双击结束创建/编辑
let handler = new window.Cesium.ScreenSpaceEventHandler(window.$earth.czm.viewer.scene.canvas);
handler.setInputAction(() => {
if (obj.creating || obj.editing) {
obj.creating = false
obj.editing = false
console.log("完成", obj);
}
}, window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); //鼠标左键双击事件
// obj.ondbclick = () => {
// obj.creating = false
// obj.editing = false
// console.log("完成", obj);
// }
// obj.onclick = () => {
// obj.creating = false
// obj.editing = false
// console.log("完成222", obj);
// }
}
//区域编辑ui窗体 //区域编辑ui窗体
export function editUI(obj: any, cancel: Function = null, ok: Function = null) { export function editUI(obj: any, cancel: Function = null, ok: Function = null) {
obj.creating = true; obj.creating = true;

18
src/views/earthMap/edit/EarthComp.vue
View File

@ -1285,14 +1285,14 @@
// console.log("type",type); // console.log("type",type);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let submitData: any = undefined; let submitData: any = {
// 如果进入单位是岛屿，则只加载相关岛屿信息
if (type == 2) {
submitData = {
sysOrgCode: that.orgCode,
pageNo: 1, pageNo: 1,
pageSize: 99999, pageSize: 99999,
}; };
// 如果进入单位是岛屿，则只加载相关岛屿信息
if (type == 2) {
submitData.sysOrgCode = that.orgCode
} }
//请求线路信息 //请求线路信息
defHttp.get({ url: this.url.queryLineList, params: submitData }, { isTransformResponse: false }).then(async (res) => { defHttp.get({ url: this.url.queryLineList, params: submitData }, { isTransformResponse: false }).then(async (res) => {
@ -2151,6 +2151,10 @@
let that: any = this; let that: any = this;
this._handler = new window.Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas); this._handler = new window.Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
//取消双击旋转事件
this._viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
/* MOUSE事件（有性能问题，慎用！） */ /* MOUSE事件（有性能问题，慎用！） */
/* 鼠标左键事件 */ /* 鼠标左键事件 */
@ -2415,10 +2419,14 @@
const el = modelTool.$el const el = modelTool.$el
// this.cloneEl(el) // this.cloneEl(el)
// 样式 // 样式
el.style.width = '380px' //宽度
el.children[2].style.padding = '0px' el.children[2].style.padding = '0px'
el.children[2].style.transition = 'none' el.children[2].style.transition = 'none'
el.children[2].children[0].children[0].style.minWidth = '370px'
// 关闭名称input // 关闭名称input
el.children[2].children[0].children[0].children[0].style.display = 'none'; el.children[2].children[0].children[0].children[0].style.display = 'none';
// 关闭创建按钮
el.children[2].children[0].children[0].children[1].children[0].children[1].style.display = 'none';
// 关闭贴地 // 关闭贴地
el.children[2].children[0].children[0].children[2].children[0].style.display = 'none'; el.children[2].children[0].children[0].children[2].children[0].style.display = 'none';
// 关闭拉伸 // 关闭拉伸

10
src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue
View File

@ -17,9 +17,9 @@
<span :class="['selectIcon', 'iconSpan']" title="选取区域" @click="SelectArea"> <span :class="['selectIcon', 'iconSpan']" title="选取区域" @click="SelectArea">
<GatewayOutlined /> <GatewayOutlined />
</span> </span>
<span :class="['testIcon', 'iconSpan']" title="测试" @click="test"> <!-- <span :class="['testIcon', 'iconSpan']" title="测试" @click="test">
<GatewayOutlined /> <GatewayOutlined />
</span> </span> -->
<a-popconfirm title="确认重置区域?" placement="right" ok-text="确认" cancel-text="取消" @confirm="clearArea"> <a-popconfirm title="确认重置区域?" placement="right" ok-text="确认" cancel-text="取消" @confirm="clearArea">
<span :class="['clearIcon', 'iconSpan']" title="重置区域"> <span :class="['clearIcon', 'iconSpan']" title="重置区域">
<FormatPainterOutlined /> <FormatPainterOutlined />
@ -444,9 +444,9 @@ function updateArea() {
// emit('update:areaData', JSON.stringify(areaData)); // emit('update:areaData', JSON.stringify(areaData));
// } // }
// } // }
const test = function () { // const test = function () {
_viewer.camera.moveLeft(100000) // _viewer.camera.moveLeft(100000)
} // }
const mapManageShow = ref(false); const mapManageShow = ref(false);
const modelText = ref('2D'); const modelText = ref('2D');

Write Preview
Loading…
Cancel
Save