Browse Source

1.修改查询数量

2.控制绘画组件和绘画军事组件显示唯一性。
3.更改绘画图形的逻辑,创建和结束使用双击方式触发
4.优化图形编辑页面UI
5.地图创建区域与绘画组件融合
6.store新增shapeUsing属性,用于区分draw组件使用状态
master
DIAMOND 1 year ago
parent
commit
531b72740d
  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. 36
      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

@ -44,10 +44,7 @@
<p title="态势工具" class="tb-img-p alarm" @click="drawShapeMilitary">
<img :src="drawShapeMilitaryIMG" />
</p>
<!-- <p title="测试" class="tb-img-p alarm" @click="test">
<img :src="eventNotif" />
<span class="divright">{{ getEventNum }}</span>
</p> -->
</div>
</Window>
<div id="measurePopModal" class="popModal">
@ -131,10 +128,9 @@
import { defHttp } from '/@/utils/http/axios';
import $ from 'jquery';
import { useUserStore } from '/@/store/modules/user';
import { useEarthMapStore } from '/@/store/modules/earthMap';
import { useMessage } from '/@/hooks/web/useMessage';
import TestCom from './TestCom.vue';
export default defineComponent({
name: 'Toolbar',
props: {
@ -155,6 +151,7 @@
const { proxy }: any = getCurrentInstance();
// const { userInfo } = useUserStore();
const userStore = useUserStore();
const store = useEarthMapStore();
const { createMessage } = useMessage();
let _viewer = ref();
let show = ref(true);
@ -181,7 +178,7 @@
const notificationModelShow = ref(false);
const WarnListShow = ref(false);
const drawShapeShow = ref(false);
const drawShapePackage = ref(null);
const drawShapePackage: any = ref(null);
const drawShapeMilitaryShow = ref(false);
//
@ -954,12 +951,18 @@
//
function drawShape() {
//使
if(drawShapeMilitaryShow.value && store.shapeUsing == false)
{drawShapeMilitaryShow.value = false}
//
drawShapePackage.value = null
drawShapeShow.value = !drawShapeShow.value;
}
//-
function drawShapeMilitary() {
//使
if(drawShapeShow.value && store.shapeUsing == false)
{drawShapeShow.value = false}
drawShapeMilitaryShow.value = !drawShapeMilitaryShow.value;
}
@ -1064,23 +1067,6 @@
$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 {
show,
@ -1150,7 +1136,6 @@
drawShapePackage,
drawShapeMilitaryShow,
drawShapeMilitaryIMG,
test,
};
},
});

41
src/components/earthMap/ToolbarShow.vue

@ -44,10 +44,7 @@
<p title="态势工具" class="tb-img-p alarm" @click="drawShapeMilitary">
<img :src="drawShapeMilitaryIMG" />
</p>
<!-- <p title="测试" class="tb-img-p alarm" @click="test">
<img :src="eventNotif" />
<span class="divright">{{ getEventNum }}</span>
</p> -->
</div>
</Window>
<div id="measurePopModal" class="popModal">
@ -127,8 +124,8 @@
import { defHttp } from '/@/utils/http/axios';
import $ from 'jquery';
import { useUserStore } from '/@/store/modules/user';
import TestCom from './TestCom.vue';
import { useEarthMapStore } from '/@/store/modules/earthMap';
import { useMessage } from '/@/hooks/web/useMessage';
export default defineComponent({
name: 'ToolbarShow',
@ -149,6 +146,8 @@
const { proxy }: any = getCurrentInstance();
// const { userInfo } = useUserStore();
const userStore = useUserStore();
const store = useEarthMapStore();
const { createMessage } = useMessage();
let _viewer = ref();
let show = ref(true);
let modalVisible = ref(false);
@ -938,12 +937,19 @@
notificationModelShow.value = !notificationModelShow.value;
}
//
function drawShape() {
//
function drawShape() {
//使
if(drawShapeMilitaryShow.value && store.shapeUsing == false)
{drawShapeMilitaryShow.value = false}
//
drawShapeShow.value = !drawShapeShow.value;
}
//-
function drawShapeMilitary() {
//使
if(drawShapeShow.value && store.shapeUsing == false)
{drawShapeShow.value = false}
drawShapeMilitaryShow.value = !drawShapeMilitaryShow.value;
}
@ -1046,23 +1052,6 @@
$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 {
show,
@ -1130,7 +1119,7 @@
drawShapeShow,
drawShapeMilitaryShow,
drawShapeMilitaryIMG,
test,
};
},
});

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

@ -280,7 +280,7 @@
// store.keyAreaPos.push(point);
// console.log("point", point);
positions.value.push(point);
}, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //
}, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //
}
//

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

@ -253,9 +253,14 @@ onMounted(() => {
}
})
onBeforeUnmount(() => {
// 使
store.shapeUsing = false
})
function draw(type: String = '') {
// 使
store.shapeUsing = true
let t = null
switch (type) {
case 'GeoPolygon':
@ -322,11 +327,11 @@ function draw(type: String = '') {
console.log("错误");
break;
}
// t
// t
if (props.drawShapePackage &&
props.drawShapePackage.from &&
props.drawShapePackage.from == 'addArea') {
$mitt.emit('addAreaFinished', t)
$mitt.emit('addAreaFinished', t)
return
}
else

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

@ -88,13 +88,15 @@
</p> -->
</div>
</a-collapse-panel>
<a-collapse-panel key="4" header="其他" :style="customStyle">
<!-- 暂时隐藏由于未知图形作用 -->
<!-- <a-collapse-panel key="4" header="其他" :style="customStyle">
<div class="toolBoxImg">
<p class="tb-img-p" title="扇形搜索" @click="draw('GeoSectorSearch')">
<img :src="sectorSearch" alt="扇形搜索" />
</p>
</div>
</a-collapse-panel>
</a-collapse-panel> -->
</a-collapse>
</Window>
</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 earthUI = window.$uia // ui
//
onBeforeUnmount(()=>{
//使
store.shapeUsing = false
})
function draw(type: String = '') {
//使
store.shapeUsing = true
let t = null
switch (type) {
case 'GeoPolygon':

1
src/store/modules/earthMap.ts

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

3
src/store/modules/user.ts

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

36
src/utils/earthMap/earthDraw.ts

@ -25,12 +25,17 @@ const earthUI = window.$uia // 获取地图ui对象
//绘画图形初始化
export async function drawInit() {
// console.log("sceneId",userStore.userInfo?.sceneId);
/**
* listBySceneId SceneId以及SceneId为空的列表
*/
defHttp.get({
url: '/military/dtMapDraw/list',
url: '/military/dtMapDraw/listBySceneId',
params: {
sceneId: userStore.userInfo?.sceneId
}
}, { isTransformResponse: false }).then((res) => {
// console.log("listBySceneId",res);
res.result.records.forEach((res) => {
let item = res;
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 = "确认",) => {
return popup("属性", [h(basicEditing, { obj: obj, cancel: cancel, ok: ok, cancelText: cancelText, okText: okText })], "basicEditing");
}
//状态为0,保存
if (state == 0) {
saveInStore(obj)
}
//添加鼠标事件 ,双击结束创建/编辑
listenMouseHandler(obj)
/**
* `primitive`
*
@ -167,7 +176,7 @@ export function drawShow(obj: any, config: any, state: Number) {
drawType: obj.customProp.drawType,
remark: obj.customProp.remark,
sceneId: obj.customProp.sceneId
}
}
obj._polyline.id = obj.id
obj._polyline.name = '绘画'
// obj._polyline = Object.assign({},obj)
@ -178,6 +187,29 @@ export function drawShow(obj: any, config: any, state: Number) {
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窗体
export function editUI(obj: any, cancel: Function = null, ok: Function = null) {
obj.creating = true;

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

@ -1285,14 +1285,14 @@
// console.log("type",type);
return new Promise((resolve, reject) => {
let submitData: any = undefined;
// 屿屿
if (type == 2) {
submitData = {
sysOrgCode: that.orgCode,
let submitData: any = {
pageNo: 1,
pageSize: 99999,
};
// 屿屿
if (type == 2) {
submitData.sysOrgCode = that.orgCode
}
//线
defHttp.get({ url: this.url.queryLineList, params: submitData }, { isTransformResponse: false }).then(async (res) => {
@ -2151,6 +2151,10 @@
let that: any = this;
this._handler = new window.Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
//
this._viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
/* MOUSE事件(有性能问题,慎用!) */
/* 鼠标左键事件 */
@ -2415,10 +2419,14 @@
const el = modelTool.$el
// this.cloneEl(el)
//
el.style.width = '380px' //
el.children[2].style.padding = '0px'
el.children[2].style.transition = 'none'
el.children[2].children[0].children[0].style.minWidth = '370px'
// input
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';
//

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

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

Loading…
Cancel
Save