From d4d2ae5e3f46ac525dc34863941c87da060664bd Mon Sep 17 00:00:00 2001 From: Fuyuu <1805498209@qq.com> Date: Fri, 5 Jan 2024 17:50:10 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E6=B7=BB=E5=8A=A0AIS=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2、修改设备入网申请、审评模块 --- src/assets/images/ship_a.png | Bin 0 -> 2858 bytes src/components/earthMap/AISInfoDetail.vue | 193 ++++--- src/components/earthMap/AISInfoWindow.vue | 164 ++++++ src/utils/earthMap/earthObj.ts | 22 +- src/utils/earthMap/shipDraw.ts | 10 +- src/views/earthMap/edit/EarthComp.vue | 19 +- .../licenseManage/MsIotImportLicense.data.ts | 225 ++++---- .../licenseManage/MsIotImportLicenseApply.vue | 19 +- .../licenseManage/MsIotImportLicenseList.vue | 12 +- .../licenseManage/components/ApplyForm.vue | 383 +++++++------- .../licenseManage/components/ApplyModal.vue | 30 +- .../components/MsIotImportLicenseForm.vue | 485 ++++++++++++------ .../components/MsIotImportLicenseModal.vue | 21 +- 13 files changed, 993 insertions(+), 590 deletions(-) create mode 100644 src/assets/images/ship_a.png create mode 100644 src/components/earthMap/AISInfoWindow.vue diff --git a/src/assets/images/ship_a.png b/src/assets/images/ship_a.png new file mode 100644 index 0000000000000000000000000000000000000000..62a9a9e5dcd2a8a196294aee54c6d66c1f43d6f6 GIT binary patch literal 2858 zcmV+_3)S?AP)Px<9s z2Ye|$0^mmkJnSkxnzQy_(rzyA0QHLaDKkFUb)ra}Jw_Xox8)UrTms-%#M5BBX2Z}g z_LM$;2tZC8s8>n{F!S$U)b6;a^unC9|B5zqcL%6foXeQ$uopW~Eb#85YlGYK2tn=u zsFg*72=ZmazQ|MhgdqSKcVK*;v$WlzSN_6BSnV~moALHH+Fq{i0Df7V3&JTIbE44U zr3)v5JMsoWz5tNoJ^p9iUcrK0!p^>t$-hysO&`?&@W27S`kf0AGr$0KBi4ff3<+x1l%sr(!ShX-i!OR)~X+W#<^ZopO&U!4pM8@0eBF=wu2bMz{;x91H}%K&s0oi0az); zSP^(AjIkZ!ofb8Md&6kh9-CPJd?~swdR`c60E~0IranEChULMT1)wfV%NYE|F#a>} zP*v&0VKi)y%_IP;DzDn2z>|+fVSbx<$FWAxeUT)SS0(|dSDb^G>B=Z3#=zNCrO${$ z%SMe%0^m#WYXI+x#Bjn2uc4PjqGh2-<^UL9fKppO|L|udD!8wKD@iO^QDguzTDFatGU0Cv^8cgG^kR0N~-dv&)ks zZI#GG2&a1ueNG~|5=fE>0Q|CZD2Tq1fM4Ad_j*e2lu)kN(_{jGniRhy;K113+K`|K zY&)v-%B1qenJ4uCtlSi@F3uMJjMJo7XcJEJ8v5KsbH!UViMm@%qT{_r>*7c?V-`yn08*?4 zP>I=-f#n&vt*Z1M0}B`kObr05<~d6X8$0sNfN9gEYF2%hJq~P1RwA@pzJ%<29=s<1D(n2b7YCdZZm=-KimRx{Bj0R-gh02tsugOp>LmKH8i42a=`CzH@@;k!W<;KY3R`=P^=l&6jZn~P z00uhpEkbj`N)gl1ZnO2}usU(ZTMa->mM$mor{gprPHh6+;;Po0;>;0N+iC!ODJB4H z8MaB2@mwg(udZF+eTZe{Wi0@8IkG3CaI2NB^;Hxd<*C-CeT5{r*jfN;Qhb4c6BG0z zo>aukyhgBhJmTS1tp&iBqPrt!CeG_|MhcZ}9$lZzE@pi)VI=_LQY>l%nb?Hszw@Ba zd#d%7K4+82aw`GwE2ZPWoVqt`r<@q`AH8Og-4C~{xvT@T|XUb9Ez|I1|3mV zt*=EW8CuFJ0BRNS9%B45bXV32@J*fyta`J_DggYl_zno4vUYwE6h@umR_?^J>mrbf zM8YZn>e6|fL7PX?nWZ93e0a4HeBGAvtO1}lZ)9)k6mGV~nE2}88$A{57oUEA%GLnj zm&L^(9NS;{DP7GYTYAlBB01hZtOND{5ciR9VV#OFo`^r|HiD#1IGMI`D**7f65FAG z%pJ=*mGca~p{j!YBV=k|DJuY|mBq;v^O0`@I}}r3heqZuYCL27BX27J@TFJ|AXVS1 z56uPhVO}%%W@w#|0>%M&aPI7~lhl!KAV%0m4nSRs-!kxyFioU3mibVx8GOrR{YC+JU~_CzDm{PXo6$N< z4S<2`s!AK(^46&Fz7+2V@N-iGupw_y)N>ZE!4sxxF$zFkiXSlWF;mUkke9)SR8?@f zsalKzP?O>*GI8XaDYrM0mw{`mO25riNyY$JEobf5LFal?joXyB<><|qJc1`p)MN|* z(?`CUFng+;4E{`21y`7;$ru1NDaHv{V4`W;auVYjx2X>>QI`<_#w*T_ZKiunG;C|m zqSl*@K90oqLNWqCU5e8gILp>yn5e6}4}z8mz{RKsMZndr(g#MZ zJCk1G0Qi+z^T8eKw@;hNxHx`JlX_G4G5jqK?Wr^q2cTYYKF3T}y&IpT;nU?J;)C5r z@a-h)NgM#bBCY|$nwKJzG<&981YGMXo#=zH!~vMegyGMVbzlfUvVL2aZ3uvMBT2TP zApptxZC$n@0M?Bp*@A`uB

-
-

航行轨迹： - +

+

航行轨迹： +

+ + + + + diff --git a/src/utils/earthMap/earthObj.ts b/src/utils/earthMap/earthObj.ts index 690e697..12ec23d 100644 --- a/src/utils/earthMap/earthObj.ts +++ b/src/utils/earthMap/earthObj.ts @@ -323,7 +323,7 @@ export const addCustomPrimitive = ( }; // 创建船只贴地图片 -export const addShipGroundImg = (lon: number, lat: number, height: number, imgUrl: string, rt: number, trackId: number) => { +export const addShipGroundImg = (lon: number, lat: number, height: number, imgUrl: string, imgUrl_a: string, rt: number, trackId: number) => { const shipGroundImg = new window.XE.Obj.GroundImage(window.$earth); const objConfig = { name: `${trackId}号船只`, @@ -335,6 +335,16 @@ export const addShipGroundImg = (lon: number, lat: number, height: number, imgUr ground: false, }; shipGroundImg.xbsjFromJSON(objConfig); + //移入事件 + shipGroundImg.onmouseover = (e: any) => { + e.id.imageUrls = [imgUrl_a]; + window.$earth.czm.viewer._container.style.cursor = 'pointer'; + }; + //移出事件 + shipGroundImg.onmouseout = (e: any) => { + e.id.imageUrls = [imgUrl]; + window.$earth.czm.viewer._container.style.cursor = 'default'; + }; return shipGroundImg; }; @@ -342,12 +352,14 @@ export const addShipGroundImg = (lon: number, lat: number, height: number, imgUr export const addShipTrack = (positions: number[][]) => { const shipTrack = new window.XE.Obj.Polyline(window.$earth); const objConfig = { - width: 2.0, + width: 3.0, positions, material: { - type: 'XbsjPolylineDashMaterial', - XbsjPolylineDashMaterial: { - color: [1, 1, 0.03, 1], + type: 'XbsjODLineMaterial', + XbsjODLineMaterial: { + bgColor: [1, 1, 0.03, 1], + color: [1, 0, 1, 1], + glowPower: 0.6, }, }, ground: true, diff --git a/src/utils/earthMap/shipDraw.ts b/src/utils/earthMap/shipDraw.ts index ad210e9..05dc4b4 100644 --- a/src/utils/earthMap/shipDraw.ts +++ b/src/utils/earthMap/shipDraw.ts @@ -2,7 +2,7 @@ * @Author: Fuyuu 1805498209@qq.com * @Date: 2024-01-03 17:42:49 * @LastEditors: Fuyuu 1805498209@qq.com - * @LastEditTime: 2024-01-03 18:05:32 + * @LastEditTime: 2024-01-05 17:35:32 * @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -20,10 +20,12 @@ let shipDataList: any = []; // 绘制单个船只 const drawShips = function (shipItem) { - // 引入图片 + // 引入初始图片 let imageUrl = new URL(`../../assets/images/ship.png`, import.meta.url).href; + // 引入高亮图片 + let imageUrl_a = new URL(`../../assets/images/ship_a.png`, import.meta.url).href; // 绘制船只 - let shipModel = addShipGroundImg(shipItem.longitude, shipItem.latitude, 0.5, imageUrl, shipItem.course, shipItem.trackId); + let shipModel = addShipGroundImg(shipItem.longitude, shipItem.latitude, 0.5, imageUrl, imageUrl_a, shipItem.course, shipItem.trackId); // 返回船只绘制信息 return shipModel; }; @@ -43,7 +45,7 @@ export const drawAllShips = function (message) { let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId); if (existingShip) { // 添加新的轨迹点 - existingShip.trackList.unshift([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]); + existingShip.trackList.push([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]); // 获取场景中的船只信息 let shipData = window.$earth.getObject(existingShip.guid); // 更新位置和航向 diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue index 9368563..dd92bc0 100644 --- a/src/views/earthMap/edit/EarthComp.vue +++ b/src/views/earthMap/edit/EarthComp.vue @@ -83,6 +83,8 @@ :eidtId="eidtId" > + +
@@ -101,6 +103,8 @@ import VideoSplitScreen from '@/components/earthMap/VideoSplitScreen.vue'; import VideoWindow from '@/components/earthMap/VideoWindow.vue'; import WarnInfoList from '@/components/earthMap/WarnInfoList.vue'; + import AISInfoDetail from '@/components/earthMap/AISInfoDetail.vue'; + import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue'; import { getRealTime } from '@/utils/date'; import $mitt from '@/utils/earthMap/mitt'; import { drawInit } from '@/utils/earthMap/earthDraw'; @@ -195,9 +199,10 @@ AddModelWin, AddRoamVideo, VideoFusionWin, + AISInfoDetail, + AISInfoWindow, }, props: {}, - }) export default class EarthComp extends Vue { /** @@ -342,7 +347,8 @@ // 监控相机位置 monitorPosition: any = []; /////////////////////////////////////////////////////////////////////////// - + //AIS信息窗口显示 + AISInfoWindowShow = false; mounted() { let that = this; @@ -1871,7 +1877,10 @@ } let pickedFeature = this._viewer.scene.pick(click.position); + console.log('点击的船只:', pickedFeature); + if (pickedFeature && pickedFeature.id) { + // 三维模型 if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'Model') { //点击电线杆触发弹窗 this.cameraData.forEach((data) => { @@ -1928,6 +1937,11 @@ } }); } + // 船只图片 + if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'GroundImage') { + this.AISInfoWindowShow = true; + // console.log(this.AISInfoWindowShow); + } //雷达扫描范围 if ( pickedFeature.id._xbsjOwner && @@ -2007,7 +2021,6 @@ that.cameraModalShow = false; that.poiModalShow = false; } - console.debug('点击到的模型', pickedFeature); }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); } /* 鼠标右键事件 */ diff --git a/src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicense.data.ts b/src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicense.data.ts index 578c6eb..b9fd9af 100644 --- a/src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicense.data.ts +++ b/src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicense.data.ts @@ -4,82 +4,85 @@ import { rules } from '/@/utils/helper/validator'; import { render } from '/@/utils/common/renderUtils'; //列表数据 export const columns: BasicColumn[] = [ - { - title: '状态', - align: "center", - dataIndex: 'status_dictText', - sorter: true, - width: 120 - }, - { - title: '设备Id', - align: "center", - dataIndex: 'deviceId', - width: 200 - }, + // { + // title: '设备Id', + // align: 'center', + // dataIndex: 'deviceId', + // width: 200, + // }, { title: '设备名称', - align: "center", - dataIndex: 'deviceName' - }, - { - title: '设备类型', - align: "center", - dataIndex: 'deviceType_dictText', - sorter: true, - }, - { - title: '入网时间', - align: "center", - dataIndex: 'importDate', - sorter: true, - }, - { - title: '申请人', align: 'center', - dataIndex: 'createBy', + dataIndex: 'deviceId_dictText', }, + // { + // title: '设备类型', + // align: 'center', + // dataIndex: 'deviceType_dictText', + // sorter: true, + // width: 150, + // }, + // { + // title: '申请人', + // align: 'center', + // dataIndex: 'createBy', + // width: 120, + // }, { title: '申请时间', align: 'center', dataIndex: 'createTime', sorter: true, }, + // { + // title: '审批人', + // align: 'center', + // dataIndex: 'auditManid', + // width: 120, + // }, { - title: '备注', - align: "center", - dataIndex: 'remark' - }, - { - title: '许可证编号', - align: "center", - dataIndex: 'licenseNo', - }, - { - title: '审批人', - align: "center", - dataIndex: 'auditManid' + title: '审核状态', + align: 'center', + dataIndex: 'status_dictText', + sorter: true, + width: 140, }, { - title: '审批时间', - align: "center", - dataIndex: 'auditDate', + title: '入网时间', + align: 'center', + dataIndex: 'importDate', sorter: true, }, + // { + // title: '许可证编号', + // align: 'center', + // dataIndex: 'licenseNo', + // }, + // { + // title: '审批时间', + // align: 'center', + // dataIndex: 'auditDate', + // sorter: true, + // }, + // { + // title: '备注', + // align: 'center', + // dataIndex: 'remark', + // }, ]; //查询数据 export const searchFormSchema: FormSchema[] = [ { - label: "设备名称", + label: '设备名称', field: 'deviceName', component: 'Input', colProps: { span: 6 }, }, { - label: "入网时间", - field: "importDate", + label: '入网时间', + field: 'importDate', component: 'RangePicker', componentProps: { showTime: true, @@ -87,8 +90,8 @@ export const searchFormSchema: FormSchema[] = [ colProps: { span: 6 }, }, { - label: "审批时间", - field: "auditDate", + label: '审批时间', + field: 'auditDate', component: 'RangePicker', componentProps: { showTime: true, @@ -104,9 +107,7 @@ export const formSchema: FormSchema[] = [ field: 'deviceId', component: 'Input', dynamicRules: ({ model, schema }) => { - return [ - { required: true, message: '请输入设备Id!' }, - ]; + return [{ required: true, message: '请输入设备Id!' }]; }, }, { @@ -114,9 +115,7 @@ export const formSchema: FormSchema[] = [ field: 'deviceName', component: 'Input', dynamicRules: ({ model, schema }) => { - return [ - { required: true, message: '请输入设备名称!' }, - ]; + return [{ required: true, message: '请输入设备名称!' }]; }, }, { @@ -124,9 +123,7 @@ export const formSchema: FormSchema[] = [ field: 'deviceType', component: 'InputNumber', dynamicRules: ({ model, schema }) => { - return [ - { required: true, message: '请输入设备类型!' }, - ]; + return [{ required: true, message: '请输入设备类型!' }]; }, }, { @@ -134,9 +131,7 @@ export const formSchema: FormSchema[] = [ field: 'licenseNo', component: 'Input', dynamicRules: ({ model, schema }) => { - return [ - { required: true, message: '请输入许可证编号!' }, - ]; + return [{ required: true, message: '请输入许可证编号!' }]; }, }, { @@ -145,12 +140,10 @@ export const formSchema: FormSchema[] = [ component: 'DatePicker', componentProps: { showTime: true, - valueFormat: 'YYYY-MM-DD HH:mm:ss' + valueFormat: 'YYYY-MM-DD HH:mm:ss', }, dynamicRules: ({ model, schema }) => { - return [ - { required: true, message: '请输入入网时间!' }, - ]; + return [{ required: true, message: '请输入入网时间!' }]; }, }, { @@ -163,9 +156,7 @@ export const formSchema: FormSchema[] = [ field: 'auditManid', component: 'Input', dynamicRules: ({ model, schema }) => { - return [ - { required: true, message: '请输入审批人!' }, - ]; + return [{ required: true, message: '请输入审批人!' }]; }, }, { @@ -174,12 +165,10 @@ export const formSchema: FormSchema[] = [ component: 'DatePicker', componentProps: { showTime: true, - valueFormat: 'YYYY-MM-DD HH:mm:ss' + valueFormat: 'YYYY-MM-DD HH:mm:ss', }, dynamicRules: ({ model, schema }) => { - return [ - { required: true, message: '请输入审批时间!' }, - ]; + return [{ required: true, message: '请输入审批时间!' }]; }, }, { @@ -196,69 +185,72 @@ export const formSchema: FormSchema[] = [ }, ]; - - //申请列表数据 export const applyColumns: BasicColumn[] = [ + // { + // title: '设备Id', + // align: 'center', + // dataIndex: 'deviceId', + // }, { - title: '设备Id', - align: "center", - dataIndex: 'deviceId' + title: '设备名称', + align: 'center', + dataIndex: 'deviceId_dictText', }, { - title: '设备名称', - align: "center", - dataIndex: 'deviceName' + title: '申请人', + align: 'center', + dataIndex: 'createBy', + width: 120, + }, + { + title: '申请时间', + align: 'center', + dataIndex: 'createTime', + sorter: true, }, + // { + // title: '设备类型', + // align: 'center', + // dataIndex: 'deviceType_dictText', + // sorter: true, + // width: 120, + // }, { - title: '设备类型', - align: "center", - dataIndex: 'deviceType_dictText', + title: '审核状态', + align: 'center', + dataIndex: 'status_dictText', sorter: true, - width: 120 + width: 140, }, { title: '许可证编号', - align: "center", - dataIndex: 'licenseNo' + align: 'center', + dataIndex: 'licenseNo', }, { title: '入网时间', - align: "center", + align: 'center', dataIndex: 'importDate', sorter: true, }, - { - title: '状态', - align: "center", - dataIndex: 'status_dictText', - sorter: true, - width: 90 - }, - { - title: '备注', - align: "center", - dataIndex: 'remark' - }, + // { + // title: '备注', + // align: 'center', + // dataIndex: 'remark', + // }, // { // title: '申请人', // align: 'center', // dataIndex: 'createBy', // }, - { - title: '申请时间', - align: 'center', - dataIndex: 'createTime', - sorter: true, - }, - - { - title: '更新时间', - align: 'center', - dataIndex: 'updateTime', - sorter: true, - }, + // { + // title: '更新时间', + // align: 'center', + // dataIndex: 'updateTime', + // sorter: true, + // }, // { // title: '审批人', // align: "center", @@ -270,5 +262,4 @@ export const applyColumns: BasicColumn[] = [ // dataIndex: 'auditDate', // sorter: true, // }, - -]; \ No newline at end of file +]; diff --git a/src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicenseApply.vue b/src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicenseApply.vue index db4e3b0..1317800 100644 --- a/src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicenseApply.vue +++ b/src/views/military/modules/equipmentManage/licenseManage/MsIotImportLicenseApply.vue @@ -10,7 +10,7 @@
- + - + - + -->
@@ -58,7 +54,7 @@ diff --git a/src/views/military/modules/equipmentManage/licenseManage/components/MsIotImportLicenseModal.vue b/src/views/military/modules/equipmentManage/licenseManage/components/MsIotImportLicenseModal.vue index 9dba9f5..0b2e2ce 100644 --- a/src/views/military/modules/equipmentManage/licenseManage/components/MsIotImportLicenseModal.vue +++ b/src/views/military/modules/equipmentManage/licenseManage/components/MsIotImportLicenseModal.vue @@ -1,13 +1,22 @@