index.vue 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209
  1. <template>
  2. <div class="menu-content">
  3. <div class="gradient-text common-dialog-title2">实时标绘</div>
  4. <div v-show="collaboration" style="display: flex; align-items: center; justify-content: flex-end">
  5. <div class="btn2" style="margin-left: 10px" @click="handleCloseCollaboration">关闭协同</div>
  6. <div class="btn2" style="margin-left: 10px">保存</div>
  7. </div>
  8. <div class="line">
  9. <div class="tabs1">
  10. <div v-for="(item, index) in menu" :key="index" :class="menuActive1 === index ? 'tab tab_active' : 'tab'" @click="clickTab(index)">
  11. {{ item.name }}
  12. </div>
  13. </div>
  14. <div class="btn-box">
  15. <div class="btn1" @click="handleScreenshot">
  16. <div class="icon1"></div>
  17. 当前地图截图导出
  18. </div>
  19. <div v-show="!collaboration" class="btn2" @click="handleShare('1')">协同标绘</div>
  20. <div v-show="collaboration" class="btn2" @click="handleShowLayer">查看图层</div>
  21. </div>
  22. </div>
  23. <div v-if="menuActive1 === 0" class="content">
  24. <div class="box1">
  25. <div class="box-item">
  26. <div class="btn" @click="handleUndo">
  27. <div class="revoke-icon"></div>
  28. 撤回
  29. </div>
  30. <div class="line2"></div>
  31. <div class="btn">
  32. <div class="delete-icon"></div>
  33. 删除
  34. </div>
  35. <div class="line2"></div>
  36. <div class="btn" @click="handleShowDialog">
  37. <div class="save-icon"></div>
  38. 保存
  39. </div>
  40. </div>
  41. <div class="btn">
  42. <div class="setting-icon"></div>
  43. 设置
  44. </div>
  45. </div>
  46. <div class="tab-content">
  47. <div class="tabs2">
  48. <div
  49. v-for="(item, index) in menu[menuActive1].children"
  50. :key="index"
  51. :class="menuActive2 === index ? 'tab tab_active' : 'tab'"
  52. @click="clickTab2(index)"
  53. >
  54. {{ item.name }}
  55. </div>
  56. </div>
  57. <div class="tab-content2">
  58. <div v-show="menuActive2 === 0" class="line3">
  59. <LineWidthSelect v-model="mouseToolState.lineWidth" :options="lineWidthOptions" />
  60. <div class="color-container">
  61. <el-color-picker v-model="mouseToolState.color" size="small" popper-class="custom-color-picker" show-alpha />
  62. </div>
  63. </div>
  64. <div class="tab-list">
  65. <div
  66. v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
  67. :key="index"
  68. :class="menuActive3 === index ? 'tab tab_active' : 'tab'"
  69. @click="clickTab3(item, index)"
  70. >
  71. <div :class="menuActive3 === index ? 'checked2' : 'checked1'"></div>
  72. <img :src="item.image" class="icon" />
  73. {{ item.name }}
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <div v-else-if="menuActive1 === 1" class="tab-content3">
  80. <!-- <div class="box1">-->
  81. <!-- <div class="box-item">-->
  82. <!-- <div class="btn">-->
  83. <!-- <div class="merge-icon"></div>-->
  84. <!-- 合并-->
  85. <!-- </div>-->
  86. <!-- </div>-->
  87. <!-- </div>-->
  88. <div class="params-box">
  89. <el-input v-model="queryParams.pattern_name" class="custom-input" placeholder="请输入" @input="handleQuery">
  90. <template #prefix>
  91. <el-icon class="el-input__icon"><search /></el-icon>
  92. </template>
  93. </el-input>
  94. </div>
  95. <div class="custom-table">
  96. <div class="table-header">
  97. <div class="th">预案名称</div>
  98. <div class="th">操作</div>
  99. </div>
  100. <div v-for="(item, index) in patternList" :key="index" class="tr">
  101. <div class="td">
  102. <div>{{ item.pattern_name }}</div>
  103. </div>
  104. <div class="td td2">
  105. <div class="btn" @click="handleDelete(item.id)">
  106. <div class="delete-icon"></div>
  107. 删除
  108. </div>
  109. <div class="line2"></div>
  110. <div class="btn" @click="handleEdit(item.id)">
  111. <div class="edit-icon"></div>
  112. 编辑
  113. </div>
  114. <div class="line2"></div>
  115. <div class="btn" @click="handleShare('2', item.id)">
  116. <div class="share-icon"></div>
  117. 分享
  118. </div>
  119. </div>
  120. </div>
  121. <div class="footer">
  122. <el-pagination
  123. background
  124. :hide-on-single-page="true"
  125. layout="total, prev, pager, next"
  126. :total="total"
  127. :page-size="queryParams.pageSize"
  128. :current-page="queryParams.page"
  129. @current-change="getList"
  130. />
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. <!--添加文字-->
  136. <TextEdit v-if="showTextEdit" v-model="showTextEdit" @add-text="addText" />
  137. <!--绘制提示信息-->
  138. <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
  139. <!--保存修改弹窗-->
  140. <EditDialog v-if="showEdit" v-model="showEdit" :edit-data="editData" @submit="handleSubmit" />
  141. <Contact v-if="shareState.showShare" v-model="shareState.showShare" @close="handleCloseShare" @confirm="handleShareConfirm" />
  142. <Dialog v-model="showForm" title="协同标绘" type="xs" @confirm="handleSendForm">
  143. <div style="display: flex; align-items: center">
  144. <div style="font-size: 16px">预案名称</div>
  145. <el-input v-model="form.pattern_name" class="custom-input" placeholder="请输入" style="flex: 1" />
  146. </div>
  147. </Dialog>
  148. <LayerDetail v-if="showLayer" v-model="showLayer" :patternId="patternId" />
  149. </template>
  150. <script lang="ts" setup name="OnlinePlotting">
  151. import { nanoid } from 'nanoid';
  152. import { deepClone } from '@/utils';
  153. import { useHistory } from '@/hooks/useHistory';
  154. import {
  155. deletePatternById,
  156. getPatternInfo,
  157. getPatternList,
  158. createCollaboration,
  159. closeCollaboration
  160. } from '@/api/globalMap/onlinePlotting';
  161. import TextEdit from '@/views/globalMap/RightMenu/OnlinePlotting/TextEdit.vue';
  162. import EditDialog from '@/views/globalMap/RightMenu/OnlinePlotting/EditDialog.vue';
  163. import { Search } from '@element-plus/icons-vue';
  164. import html2canvas from 'html2canvas';
  165. import LayerDetail from './LayerDetail.vue';
  166. import { createWebSocket } from '@/utils/websocket';
  167. const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  168. const getDrawTool = inject('getDrawTool');
  169. const getMap = inject('getMap');
  170. const getMapUtils = inject('getMapUtils');
  171. const containerScale = inject('containerScale');
  172. const { currentState, commit, undo, history, future } = useHistory();
  173. const emits = defineEmits(['getCollaborationData']);
  174. const getImageUrl = (name) => {
  175. return new URL(`../../../../assets/images/map/rightMenu/onlinePlotting/icon/${name}.png`, import.meta.url).href;
  176. };
  177. let drawing = ref(false);
  178. const mouseToolState = ref({
  179. color: 'rgba(248, 1, 2, 1)',
  180. lineWidth: '1',
  181. graphicsType: ''
  182. });
  183. const menuActive1 = ref<string | number>(0);
  184. const menuActive2 = ref<string | number>(0);
  185. const menuActive3 = ref<string | number>('');
  186. const menu = ref([
  187. {
  188. name: '标绘工具',
  189. children: [
  190. {
  191. name: '基本工具',
  192. value: 'basicTools',
  193. children: [
  194. // {
  195. // name: '直箭头',
  196. // value: 'straightArrow',
  197. // image: getImageUrl('straightArrow')
  198. // },
  199. {
  200. name: '矩形',
  201. value: 'rectangle',
  202. image: getImageUrl('rectangle')
  203. },
  204. {
  205. name: '任意面',
  206. value: 'polygon',
  207. image: getImageUrl('polygon')
  208. },
  209. // {
  210. // name: '任意线',
  211. // value: 'anyLine',
  212. // image: getImageUrl('anyLine')
  213. // },
  214. {
  215. name: '圆',
  216. value: 'circle',
  217. image: getImageUrl('circle')
  218. },
  219. {
  220. name: '直线',
  221. value: 'straightLine',
  222. image: getImageUrl('straightLine')
  223. },
  224. {
  225. name: '文字',
  226. value: 'text',
  227. image: getImageUrl('text')
  228. },
  229. {
  230. name: '面积',
  231. value: 'measureArea',
  232. image: getImageUrl('measureArea')
  233. }
  234. ]
  235. },
  236. {
  237. name: '火点',
  238. value: 'firePoint',
  239. children: [
  240. { name: '起火点', value: 'marker', image: getImageUrl('firePoint'), icon: getImageUrl('firePoint'), size: [55, 29] },
  241. { name: '烟点', value: 'marker', image: getImageUrl('smokePoint'), icon: getImageUrl('smokePoint'), size: [55, 29] },
  242. { name: '已灭火点', value: 'marker', image: getImageUrl('extinguishedPoint'), icon: getImageUrl('extinguishedPoint'), size: [55, 29] }
  243. ]
  244. },
  245. {
  246. name: '火线',
  247. value: 'firewire',
  248. children: [
  249. { name: '火线', value: 'marker', image: getImageUrl('firewire'), icon: getImageUrl('firewire'), size: [55, 29] },
  250. { name: '受控火线', value: 'marker', image: getImageUrl('controlledfireline'), icon: getImageUrl('controlledfireline'), size: [55, 29] },
  251. { name: '已灭火线', value: 'marker', image: getImageUrl('extinguishedline'), icon: getImageUrl('extinguishedline'), size: [55, 29] },
  252. { name: '强火线', value: 'marker', image: getImageUrl('StrongFrontline'), icon: getImageUrl('StrongFrontline'), size: [55, 29] },
  253. { name: '中火线', value: 'marker', image: getImageUrl('ZhongxianLine'), icon: getImageUrl('ZhongxianLine'), size: [55, 29] },
  254. { name: '弱火线', value: 'marker', image: getImageUrl('WeakFrontline'), icon: getImageUrl('WeakFrontline'), size: [55, 29] }
  255. ]
  256. },
  257. {
  258. name: '火场',
  259. value: 'fireGround',
  260. children: [
  261. { name: '火场', value: 'marker', image: getImageUrl('fireground'), icon: getImageUrl('fireground'), size: [55, 29] },
  262. { name: '受控火场', value: 'marker', image: getImageUrl('controlledfireground'), icon: getImageUrl('controlledfireground'), size: [55, 29] },
  263. { name: '已灭火场', value: 'marker', image: getImageUrl('extinguishedfireground'), icon: getImageUrl('extinguishedfireground'), size: [55, 29] }
  264. ]
  265. },
  266. {
  267. name: '箭头',
  268. value: 'arrow',
  269. children: [
  270. { name: '曲箭头', value: 'marker', image: getImageUrl('curvedarrow'), icon: getImageUrl('curvedarrow'), size: [55, 29] },
  271. { name: '直箭头', value: 'marker', image: getImageUrl('straightarrow1'), icon: getImageUrl('straightarrow1'), size: [55, 29] },
  272. { name: '细箭头', value: 'marker', image: getImageUrl('thinarrow'), icon: getImageUrl('thinarrow'), size: [55, 29] }
  273. ]
  274. },
  275. // {
  276. // name: '导航',
  277. // value: 'navigation',
  278. // children: [
  279. // { name: '导航', value: 'marker', image: getImageUrl('navigation'), icon: getImageUrl('navigation'), size: [55, 29] }
  280. // ]
  281. // },
  282. {
  283. name: '扑救队伍',
  284. value: 'firefightingTeam',
  285. children: [
  286. { name: '指挥中心', value: 'marker', image: getImageUrl('commandcentre'), icon: getImageUrl('commandcentre'), size: [55, 29] },
  287. { name: '分指中心', value: 'marker', image: getImageUrl('dividingcenter'), icon: getImageUrl('dividingcenter'), size: [55, 29] },
  288. { name: '集结地', value: 'marker', image: getImageUrl('rendezvous'), icon: getImageUrl('rendezvous'), size: [55, 29] },
  289. { name: '军队', value: 'marker', image: getImageUrl('army'), icon: getImageUrl('army'), size: [55, 29] },
  290. { name: '武警', value: 'marker', image: getImageUrl('armedpolice'), icon: getImageUrl('armedpolice'), size: [55, 29] },
  291. { name: '森林警察', value: 'marker', image: getImageUrl('forestpoliceman'), icon: getImageUrl('forestpoliceman'), size: [55, 29] },
  292. { name: '扑火队伍', value: 'marker', image: getImageUrl('firefightingteam'), icon: getImageUrl('firefightingteam'), size: [55, 29] },
  293. // { name: '扑火队伍路线', value: 'marker', image: getImageUrl('Firefightingteamroute'), icon: getImageUrl('Firefightingteamroute'), size: [55, 29] }
  294. ]
  295. },
  296. {
  297. name: '飞机车辆',
  298. value: 'aircraftVehicles',
  299. children: [
  300. { name: '固定翼', value: 'marker', image: getImageUrl('fixedwing'), icon: getImageUrl('fixedwing'), size: [55, 29] },
  301. { name: '直升机', value: 'marker', image: getImageUrl('helicopter'), icon: getImageUrl('helicopter'), size: [55, 29] },
  302. { name: '无人机', value: 'marker', image: getImageUrl('UAV'), icon: getImageUrl('UAV'), size: [55, 29] },
  303. { name: '指挥车', value: 'marker', image: getImageUrl('commandvehicle'), icon: getImageUrl('commandvehicle'), size: [55, 29] },
  304. { name: '飞机航线设置', value: 'marker', image: getImageUrl('aircraftroutesetting'), icon: getImageUrl('aircraftroutesetting'), size: [55, 29] },
  305. { name: '直升机航线设置', value: 'marker', image: getImageUrl('helicopterroutesetting'), icon: getImageUrl('helicopterroutesetting'), size: [55, 29] }
  306. ]
  307. },
  308. {
  309. name: '基础设置',
  310. value: 'basicSetting',
  311. children: [
  312. { name: '航站', value: 'marker', image: getImageUrl('terminal'), icon: getImageUrl('terminal'), size: [55, 29] },
  313. { name: '起降点', value: 'marker', image: getImageUrl('takeoffandlandingpoint'), icon: getImageUrl('takeoffandlandingpoint'), size: [55, 29] },
  314. { name: '取水点', value: 'marker', image: getImageUrl('waterpoint'), icon: getImageUrl('waterpoint'), size: [55, 29] },
  315. { name: '瞭望塔', value: 'marker', image: getImageUrl('watchtower'), icon: getImageUrl('watchtower'), size: [55, 29] },
  316. { name: '物资库', value: 'marker', image: getImageUrl('materialwarehouse'), icon: getImageUrl('materialwarehouse'), size: [55, 29] },
  317. ]
  318. },
  319. // {
  320. // name: '其他',
  321. // value: 'other',
  322. // children: [
  323. // { name: '危险区域', value: 'marker', image: getImageUrl('dangerousarea'), icon: getImageUrl('dangerousarea'), size: [55, 29] },
  324. // { name: '隔离带开采', value: 'marker', image: getImageUrl('Isolationzonemining'), icon: getImageUrl('Isolationzonemining'), size: [55, 29] },
  325. // { name: '应急庇护场所', value: 'marker', image: getImageUrl('emergencyshelter'), icon: getImageUrl('emergencyshelter'), size: [55, 29] },
  326. // { name: '风力风向', value: 'marker', image: getImageUrl('windspeedanddirection'), icon: getImageUrl('windspeedanddirection'), size: [55, 29] },
  327. // { name: '测距', value: 'marker', image: getImageUrl('ranging'), icon: getImageUrl('ranging'), size: [55, 29] },
  328. // { name: '大风', value: 'marker', image: getImageUrl('strongwind'), icon: getImageUrl('strongwind'), size: [55, 29] },
  329. // { name: '人工降雨', value: 'marker', image: getImageUrl('artificialrainfall'), icon: getImageUrl('artificialrainfall'), size: [55, 29] },
  330. // { name: '台风', value: 'marker', image: getImageUrl('typhoon'), icon: getImageUrl('typhoon'), size: [55, 29] }
  331. // ]
  332. // }
  333. ]
  334. },
  335. {
  336. name: '历史预案',
  337. children: []
  338. }
  339. ]);
  340. const lineWidthOptions = reactive([
  341. { name: '1像素', value: '1' },
  342. { name: '2像素', value: '2' },
  343. { name: '3像素', value: '3' }
  344. ]);
  345. let showTextEdit = ref();
  346. let lnglat = ref([]);
  347. // 协同
  348. let collaboration = ref(false);
  349. // 分享
  350. let shareState = reactive({
  351. type: '',
  352. showShare: false,
  353. id: ''
  354. });
  355. let patternId = ref('');
  356. let shareId = ref('');
  357. const overlays = [];
  358. const overlaysData = [];
  359. watch(
  360. () => drawing,
  361. () => {
  362. if (!drawing.value) {
  363. menuActive3.value = '';
  364. }
  365. }
  366. );
  367. const tipTitle = computed(() => {
  368. let res = '';
  369. if (
  370. menu.value[menuActive1.value] &&
  371. menu.value[menuActive1.value].children &&
  372. menu.value[menuActive1.value].children[menuActive2.value] &&
  373. menu.value[menuActive1.value].children[menuActive2.value].children &&
  374. menu.value[menuActive1.value].children[menuActive2.value].children[menuActive3.value]
  375. ) {
  376. const data = menu.value[menuActive1.value].children[menuActive2.value].children[menuActive3.value];
  377. if (data.value === 'straightArrow') {
  378. res = '单击开始、单击结束';
  379. } else if (['rectangle', 'polygon', 'anyLine', 'circle'].includes(data.value)) {
  380. res = '鼠标按住拖曳,松开鼠标结束标绘';
  381. } else if (['straightLine', 'measureArea'].includes(data.value)) {
  382. res = '单击开始,移动,单击改变方向,双击结束';
  383. }
  384. }
  385. return res;
  386. });
  387. // 点击一级菜单
  388. const clickTab = (value: number) => {
  389. menuActive1.value = value;
  390. };
  391. // 点击二级菜单
  392. const clickTab2 = (value: number) => {
  393. menuActive2.value = value;
  394. };
  395. // 点击三级菜单
  396. const clickTab3 = (item, index) => {
  397. const type = item.value;
  398. if (mouseToolState.value.graphicsType !== type || (mouseToolState.value.graphicsType === 'marker' && mouseToolState.value.title !== item.name)) {
  399. if (type === 'text') {
  400. mouseToolState.value.graphicsType = type;
  401. handleTextEdit();
  402. } else if (type === 'marker') {
  403. const data = {
  404. graphicsType: type,
  405. lineWidth: mouseToolState.value.lineWidth,
  406. color: mouseToolState.value.color,
  407. icon: item.icon,
  408. size: item.size,
  409. title: item.name
  410. };
  411. drawing.value = true;
  412. mouseToolState.value = data;
  413. } else {
  414. showTextEdit.value = false;
  415. drawing.value = true;
  416. mouseToolState.value.graphicsType = type;
  417. }
  418. const drawTool = getDrawTool();
  419. const newOptions = drawTool.drawGraphics(mouseToolState.value);
  420. if (newOptions.graphicsType !== 'text') {
  421. // 绘制完成事件
  422. initDrawMethod(newOptions);
  423. }
  424. menuActive3.value = index;
  425. } else {
  426. showTextEdit.value = false;
  427. drawing.value = false;
  428. mouseToolState.value.graphicsType = '';
  429. menuActive3.value = '';
  430. }
  431. };
  432. const handleTextEdit = () => {
  433. const drawTool = getDrawTool();
  434. const map = drawTool.getMap();
  435. drawTool.closeDraw();
  436. // 监听地图点击事件
  437. map.on('click', handleClickMap);
  438. };
  439. const handleClickMap = (e) => {
  440. // 获取点击位置的经纬度
  441. lnglat.value = [e.lnglat.lng, e.lnglat.lat];
  442. showTextEdit.value = true;
  443. };
  444. const addText = (textEditState) => {
  445. const data = {
  446. graphicsType: 'text',
  447. lineWidth: mouseToolState.value.lineWidth,
  448. color: mouseToolState.value.color,
  449. text: textEditState.text,
  450. fontColor: textEditState.fontColor,
  451. fontSize: textEditState.fontSize,
  452. lnglat: lnglat.value
  453. };
  454. showTextEdit.value = false;
  455. drawing.value = true;
  456. mouseToolState.value = data;
  457. // 绘制完成事件
  458. const drawTool = getDrawTool();
  459. const res = drawTool.drawGraphics(mouseToolState.value);
  460. overlays.push(res.text);
  461. overlaysData.push(res.data);
  462. commit(deepClone(overlaysData));
  463. res.text.on('rightclick', handleRightClick);
  464. const map = drawTool.getMap();
  465. // 监听地图点击事件
  466. map.off('click', handleClickMap);
  467. close();
  468. };
  469. // watch(
  470. // () => mouseToolState.value.graphicsType,
  471. // (value) => {
  472. // if (value) {
  473. // const map = getMap();
  474. // map.off('click', handleClickMap);
  475. // }
  476. // }
  477. // );
  478. const changeDrawing = () => {
  479. drawing.value = !drawing.value;
  480. };
  481. const close = () => {
  482. const drawTool = getDrawTool();
  483. drawTool.closeDraw();
  484. drawing.value = false;
  485. menuActive3.value = '';
  486. mouseToolState.value.graphicsType = '';
  487. };
  488. // 初始化绘制完成回调
  489. const initDrawMethod = (options) => {
  490. const drawTool = getDrawTool();
  491. const mouseTool = drawTool.getMouseTool();
  492. const onDraw = (event) => {
  493. mouseTool.off('draw', onDraw);
  494. close();
  495. const obj = event.obj;
  496. const id = nanoid();
  497. obj._opts.extData = {
  498. id: id
  499. };
  500. const data: any = deepClone(options);
  501. data.id = id;
  502. if (options.type == 'marker') {
  503. const position = obj.getPosition();
  504. data.lnglat = [position.lng, position.lat];
  505. data.latitude = position.lat;
  506. data.longitude = position.lng;
  507. data.image = data.icon;
  508. data.image = data.icon;
  509. data.imageHover = data.icon;
  510. } else {
  511. const path = obj.getPath();
  512. // 将AMap.LngLat对象数组转换为经纬度数组
  513. const pathArr = path.map((lngLat) => {
  514. // 返回经度和纬度的数组
  515. return [lngLat.lng, lngLat.lat];
  516. });
  517. if (options.type !== 'straightLine') {
  518. pathArr.push(pathArr[0]);
  519. }
  520. data.path = pathArr;
  521. if (options.type == 'circle') {
  522. data.center = [obj.getCenter().lng, obj.getCenter().lat];
  523. data.radius = obj.getRadius();
  524. }
  525. }
  526. if (options.type == 'measureArea') {
  527. const AMap = getDrawTool().getAMap();
  528. const map = getMap();
  529. // 计算区域面积
  530. const area = Math.round(AMap.GeometryUtil.ringArea(data.path));
  531. const text = new AMap.Text({
  532. position: data.path[data.path.length - 1],
  533. text: '区域面积' + area + '平方米',
  534. offset: new AMap.Pixel(-20, -20)
  535. });
  536. data.area = area;
  537. map.add(text);
  538. overlays.push([obj, text]);
  539. overlaysData.push(data);
  540. commit(deepClone(overlaysData));
  541. } else {
  542. overlays.push(obj);
  543. overlaysData.push(data);
  544. commit(deepClone(overlaysData));
  545. console.log(overlaysData);
  546. }
  547. // 右击进入编辑
  548. obj.on('rightclick', handleRightClick);
  549. };
  550. mouseTool.on('draw', onDraw);
  551. };
  552. // 图形右击事件
  553. let rightClickObj;
  554. let initContextMenu = false;
  555. const handleRightClick = (event) => {
  556. rightClickObj = event.target;
  557. const contextMenu = getDrawTool().getContextMenu();
  558. if (!initContextMenu) {
  559. // 右键删除按钮
  560. contextMenu.addItem(
  561. '删除',
  562. function () {
  563. contextMenu.close();
  564. deleteGraphics();
  565. },
  566. 0
  567. );
  568. initContextMenu = true;
  569. }
  570. contextMenu.open(getMap(), event.lnglat);
  571. };
  572. // 删除图形
  573. const deleteGraphics = () => {
  574. const id = rightClickObj.getExtData()?.id;
  575. if (id) {
  576. for (let i = 0; i < overlays.length; i++) {
  577. const overlay = Array.isArray(overlays[i]) ? overlays[i][0] : overlays[i];
  578. if (overlay?.getExtData().id === id) {
  579. removeOverlayByIndex(i);
  580. commit(deepClone(overlaysData));
  581. rightClickObj = null;
  582. }
  583. }
  584. }
  585. };
  586. // 撤销绘制
  587. const handleUndo = () => {
  588. // drawing.value = false;
  589. const previous = history.value[history.value.length - 2];
  590. if (history.value.length > 1) {
  591. if (currentState.value.length > previous.length) {
  592. // 撤销新增
  593. removeOverlayByIndex(currentState.value.length - 1);
  594. } else {
  595. let restoreData;
  596. for (let i = 0; i < previous.length; i++) {
  597. let index = 0;
  598. for (let k = 0; k < currentState.value.length; k++) {
  599. if (previous[i].id !== currentState.value[k].id) {
  600. index++;
  601. } else {
  602. break;
  603. }
  604. }
  605. if (index === previous.length - 1) {
  606. restoreData = previous[i];
  607. break;
  608. }
  609. }
  610. if (restoreData) {
  611. const obj = getDrawTool().createGraphics(restoreData);
  612. overlays.push(obj);
  613. }
  614. }
  615. undo();
  616. console.log(history.value, future.value, currentState.value);
  617. }
  618. };
  619. // 根据索引移除覆盖物
  620. const removeOverlayByIndex = (index: number) => {
  621. const map = getMap();
  622. if (Array.isArray(overlays[index])) {
  623. overlays[index].forEach((overlay) => {
  624. // 移除地图上覆盖物
  625. map.remove(overlay);
  626. });
  627. } else {
  628. // 移除地图上覆盖物
  629. map.remove(overlays[index]);
  630. }
  631. overlays.splice(index, 1);
  632. overlaysData.splice(index, 1);
  633. };
  634. // 历史预案
  635. const queryParams = reactive({
  636. page: 1,
  637. pageSize: 9,
  638. pattern_name: ''
  639. });
  640. const patternList = ref([]);
  641. let total = ref(0);
  642. let editData = ref({
  643. id: '',
  644. pattern_name: '',
  645. content: {}
  646. });
  647. let showEdit = ref(false);
  648. const handleSubmit = () => {
  649. showEdit.value = false;
  650. editData.value = {
  651. id: '',
  652. pattern_name: '',
  653. content: {}
  654. };
  655. getList();
  656. };
  657. const handleQuery = () => {
  658. queryParams.page = 1;
  659. getList();
  660. };
  661. const getList = () => {
  662. // if (menuActive1.value === 1 && menu.value[menuActive1.value].name == '历史预案') {
  663. getPatternList(queryParams).then((res) => {
  664. patternList.value = res.data;
  665. total.value = res.total;
  666. });
  667. // }
  668. };
  669. const handleDelete = (id: number) => {
  670. proxy?.$modal.confirm('是否确认删除选择的数据项?').then(() => {
  671. deletePatternById(id).then(() => {
  672. getList();
  673. });
  674. });
  675. };
  676. const handleEdit = (id) => {
  677. getPatternInfo(id).then((res) => {
  678. editData.value = res.data;
  679. editData.value.id = id;
  680. });
  681. showEdit.value = true;
  682. };
  683. const handleShare = (type, id?: string) => {
  684. shareState.type = type;
  685. shareState.id = id;
  686. shareState.showShare = true;
  687. };
  688. const handleCloseShare = () => {
  689. shareState.type = '';
  690. shareState.id = '';
  691. };
  692. const handleCloseCollaboration = () => {
  693. closeCollaboration({ pattern_id: patternId.value }).then(() => {
  694. collaboration.value = false;
  695. });
  696. };
  697. let showForm = ref(false);
  698. let form = ref({
  699. pattern_id: '',
  700. user_id_list: [],
  701. name: '',
  702. pattern_name: '',
  703. visible: 'false',
  704. content: ''
  705. });
  706. const handleShareConfirm = (data) => {
  707. if (shareState.type === '1') {
  708. // 协同标绘
  709. const userIdList = [];
  710. data.forEach((item) => {
  711. userIdList.push(item.userId);
  712. });
  713. let content = currentState.value.length > 0 ? JSON.stringify(currentState.value[currentState.value.length - 1]) : '';
  714. form.value = {
  715. pattern_id: nanoid(),
  716. user_id_list: userIdList,
  717. name: '',
  718. pattern_name: '',
  719. visible: 'false',
  720. content: content
  721. };
  722. showForm.value = true;
  723. } else {
  724. // 分享
  725. }
  726. shareState.type = '';
  727. shareState.id = '';
  728. };
  729. const getWebSocketData = (data) => {
  730. console.log('接收数据', data);
  731. };
  732. const handleSendForm = () => {
  733. createWebSocket('v7fUAuygwZUs24Nx3RDnL', getWebSocketData);
  734. patternId.value = 'v7fUAuygwZUs24Nx3RDnL';
  735. // createCollaboration(form.value).then(() => {
  736. // patternId.value =form.value.pattern_id;
  737. // createWebSocket(form.value.pattern_id, getWebSocketData);
  738. // });
  739. collaboration.value = true;
  740. };
  741. const handleShowDialog = () => {
  742. editData.value = {
  743. id: '',
  744. pattern_name: '',
  745. content: currentState.value
  746. };
  747. showEdit.value = true;
  748. };
  749. let dataURL = ref('');
  750. // 页面元素转图片
  751. const handleScreenshot = () => {
  752. const canvasBox = getMap().Iv;
  753. // 手动创建一个 canvas 标签
  754. const canvas = document.createElement('canvas');
  755. if (canvasBox) {
  756. // 获取父级的宽高
  757. const width = parseInt(window.getComputedStyle(canvasBox).width) / containerScale().scaleX;
  758. const height = parseInt(window.getComputedStyle(canvasBox).height) / containerScale().scaleX;
  759. canvas.style.width = width + 'px';
  760. canvas.style.height = height + 'px';
  761. const options = {
  762. backgroundColor: null, // 设置背景色为透明
  763. useCORS: true, //是否尝试使用CORS从服务器加载图像,解决跨域问题
  764. tainttest: true, // 是否在渲染前测试图片
  765. logging: false // 不启动日志调试
  766. };
  767. // canvasBox是要截图的元素,options是一些相关配置
  768. html2canvas(canvasBox, options).then((canvas) => {
  769. // toDataURL 图片格式转成 base64
  770. dataURL.value = canvas.toDataURL('image/png');
  771. // 新建一个a标签
  772. var oA = document.createElement('a');
  773. oA.download = '截图'; // 设置下载的文件名
  774. oA.href = dataURL.value;
  775. document.body.appendChild(oA);
  776. oA.click(); // 模拟点击a标签
  777. oA.remove(); // 下载之后把创建的元素删除
  778. });
  779. }
  780. };
  781. let showLayer = ref(false);
  782. let handleShowLayer = () => {
  783. showLayer.value = true;
  784. };
  785. onMounted(() => {
  786. getList();
  787. });
  788. </script>
  789. <style lang="scss" scoped>
  790. .menu-content {
  791. width: 612px;
  792. height: 685px;
  793. background: url('@/assets/images/map/rightMenu/onlinePlotting/dialog.png') no-repeat;
  794. padding: 60px 10px 10px 15px;
  795. font-size: 14px;
  796. position: relative;
  797. color: #ffffff;
  798. }
  799. :deep(.el-color-dropdown__link-btn) {
  800. display: none;
  801. }
  802. .line {
  803. display: flex;
  804. justify-content: space-between;
  805. align-items: center;
  806. }
  807. .tabs1 {
  808. display: flex;
  809. .tab {
  810. width: 123px;
  811. height: 30px;
  812. line-height: 30px;
  813. background: url('@/assets/images/map/rightMenu/onlinePlotting/tab.png') no-repeat;
  814. background-size: 100% 100%;
  815. cursor: pointer;
  816. font-size: 16px;
  817. color: #b7c1d5;
  818. font-family: YouSheBiaoTiHei;
  819. padding-left: 28px;
  820. &:hover {
  821. width: 123px;
  822. height: 30px;
  823. color: #ffffff;
  824. background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive.png') no-repeat;
  825. background-size: 100% 100%;
  826. }
  827. }
  828. .tab_active {
  829. width: 123px;
  830. height: 30px;
  831. color: #ffffff;
  832. background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive.png') no-repeat;
  833. background-size: 100% 100%;
  834. }
  835. }
  836. .btn1 {
  837. width: 200px;
  838. height: 60px;
  839. background: url('@/assets/images/map/rightMenu/onlinePlotting/btn1.png') no-repeat;
  840. background-size: 100% 100%;
  841. display: flex;
  842. justify-content: center;
  843. align-items: center;
  844. cursor: pointer;
  845. font-size: 14px;
  846. color: #edfaff;
  847. .icon1 {
  848. width: 22px;
  849. height: 22px;
  850. background: url('@/assets/images/map/rightMenu/onlinePlotting/screenshot.png') no-repeat;
  851. background-size: 100% 100%;
  852. margin-right: 6px;
  853. }
  854. }
  855. .btn2 {
  856. width: 104px;
  857. height: 29px;
  858. background: url('@/assets/images/map/rightMenu/btn.png') no-repeat;
  859. display: flex;
  860. justify-content: center;
  861. align-items: center;
  862. cursor: pointer;
  863. font-size: 16px;
  864. color: #edfaff;
  865. .icon1 {
  866. width: 42px;
  867. height: 42px;
  868. background: url('@/assets/images/map/rightMenu/onlinePlotting/screenshot.png') no-repeat;
  869. margin-right: 12px;
  870. }
  871. }
  872. .box1 {
  873. display: flex;
  874. justify-content: space-between;
  875. align-items: center;
  876. width: 100%;
  877. height: 36px;
  878. background: url('@/assets/images/map/rightMenu/onlinePlotting/box1.png') no-repeat;
  879. background-size: 100% 100%;
  880. padding: 10px 12px;
  881. .box-item {
  882. display: flex;
  883. align-items: center;
  884. }
  885. }
  886. .btn {
  887. display: flex;
  888. align-items: center;
  889. cursor: pointer;
  890. .revoke-icon {
  891. width: 24px;
  892. height: 25px;
  893. margin-right: 3px;
  894. background: url('@/assets/images/map/rightMenu/onlinePlotting/revoke.png') no-repeat;
  895. background-size: 100% 100%;
  896. }
  897. .delete-icon {
  898. width: 25px;
  899. height: 25px;
  900. margin-right: 3px;
  901. background: url('@/assets/images/map/rightMenu/onlinePlotting/delete.png') no-repeat;
  902. background-size: 100% 100%;
  903. }
  904. .edit-icon {
  905. width: 23px;
  906. height: 23px;
  907. margin-right: 3px;
  908. background: url('@/assets/images/map/rightMenu/onlinePlotting/edit.png') no-repeat;
  909. background-size: 100% 100%;
  910. }
  911. .cancel-icon {
  912. width: 25px;
  913. height: 25px;
  914. margin-right: 3px;
  915. background: url('@/assets/images/map/rightMenu/onlinePlotting/cancel.png') no-repeat;
  916. background-size: 100% 100%;
  917. }
  918. .save-icon {
  919. width: 23px;
  920. height: 23px;
  921. margin-right: 3px;
  922. background: url('@/assets/images/map/rightMenu/onlinePlotting/save.png') no-repeat;
  923. background-size: 100% 100%;
  924. }
  925. .share-icon {
  926. width: 23px;
  927. height: 24px;
  928. margin-right: 3px;
  929. background: url('@/assets/images/map/rightMenu/onlinePlotting/share.png') no-repeat;
  930. background-size: 100% 100%;
  931. }
  932. .setting-icon {
  933. width: 24px;
  934. height: 25px;
  935. margin-right: 3px;
  936. background: url('@/assets/images/map/rightMenu/onlinePlotting/setting.png') no-repeat;
  937. background-size: 100% 100%;
  938. }
  939. .merge-icon {
  940. width: 26px;
  941. height: 26px;
  942. margin-right: 3px;
  943. background: url('@/assets/images/map/rightMenu/onlinePlotting/merge.png') no-repeat;
  944. background-size: 100% 100%;
  945. }
  946. }
  947. .line2 {
  948. width: 1px;
  949. height: 10px;
  950. background-color: #a7ccdf;
  951. margin: 0 10px;
  952. }
  953. .tabs2 {
  954. width: 115px;
  955. min-width: 115px;
  956. height: 460px;
  957. background: url('@/assets/images/map/rightMenu/onlinePlotting/tabBg.png') no-repeat;
  958. background-size: 100% 100%;
  959. overflow-y: auto;
  960. padding: 10px 0;
  961. .tab {
  962. width: 100%;
  963. height: 35px;
  964. cursor: pointer;
  965. color: #eaf3fc;
  966. font-size: 14px;
  967. padding: 0 25px;
  968. display: flex;
  969. align-items: center;
  970. &:hover {
  971. background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
  972. background-size: 100% 100%;
  973. }
  974. }
  975. .tab_active {
  976. background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
  977. background-size: 100% 100%;
  978. }
  979. }
  980. .tab-content {
  981. display: flex;
  982. margin-top: 6px;
  983. .tab-content2 {
  984. padding: 18px 15px;
  985. display: flex;
  986. flex-direction: column;
  987. .line {
  988. height: 100px;
  989. }
  990. .line3 {
  991. display: flex;
  992. }
  993. .tab-list {
  994. width: 100%;
  995. flex: 1;
  996. overflow-y: auto;
  997. display: flex;
  998. flex-wrap: wrap;
  999. align-content: baseline;
  1000. .icon {
  1001. width: 45px;
  1002. height: 25px;
  1003. margin-bottom: 8px;
  1004. }
  1005. .tab {
  1006. &:nth-child(3n-1) {
  1007. margin: 18px 27px 0;
  1008. }
  1009. }
  1010. }
  1011. .tab {
  1012. width: 129px;
  1013. height: 91px;
  1014. background: url('@/assets/images/map/rightMenu/onlinePlotting/box2.png') no-repeat;
  1015. background-size: 100% 100%;
  1016. padding: 7px;
  1017. cursor: pointer;
  1018. position: relative;
  1019. font-size: 14px;
  1020. color: #eaf3fc;
  1021. display: flex;
  1022. flex-direction: column;
  1023. justify-content: center;
  1024. align-items: center;
  1025. margin-top: 18px;
  1026. &:hover {
  1027. background: url('@/assets/images/map/rightMenu/onlinePlotting/boxHover2.png') no-repeat;
  1028. background-size: 100% 100%;
  1029. }
  1030. .checked1 {
  1031. position: absolute;
  1032. top: 8px;
  1033. right: 8px;
  1034. width: 13px;
  1035. height: 13px;
  1036. background: url('@/assets/images/map/rightMenu/onlinePlotting/checked1.png') no-repeat;
  1037. background-size: 100% 100%;
  1038. }
  1039. .checked2 {
  1040. position: absolute;
  1041. top: 8px;
  1042. right: 8px;
  1043. width: 13px;
  1044. height: 13px;
  1045. background: url('@/assets/images/map/rightMenu/onlinePlotting/checked2.png') no-repeat;
  1046. background-size: 100% 100%;
  1047. }
  1048. }
  1049. .tab_active {
  1050. background: url('@/assets/images/map/rightMenu/onlinePlotting/boxActive2.png') no-repeat;
  1051. background-size: 100% 100%;
  1052. }
  1053. }
  1054. }
  1055. .tipTitle {
  1056. position: fixed;
  1057. top: 123px;
  1058. left: 50%;
  1059. transform: translateX(-50%);
  1060. z-index: 2;
  1061. padding: 10px 30px;
  1062. font-size: 18px;
  1063. color: #fff;
  1064. background-color: rgba(0, 0, 0, 0.4);
  1065. border-radius: 10px;
  1066. }
  1067. .tab-content3 {
  1068. .custom-table {
  1069. width: 100%;
  1070. color: #000;
  1071. .table-header {
  1072. display: flex;
  1073. font-size: 14px;
  1074. width: 100%;
  1075. background-color: #194ba0;
  1076. .th {
  1077. padding: 11px;
  1078. flex: 1;
  1079. color: #edfaff;
  1080. &:last-child {
  1081. flex: unset;
  1082. width: 180px;
  1083. }
  1084. }
  1085. }
  1086. .tr {
  1087. display: flex;
  1088. font-size: 14px;
  1089. height: 32px;
  1090. background: url('@/assets/images/map/rightMenu/onlinePlotting/tr.png') no-repeat;
  1091. background-size: 100% 100%;
  1092. margin-top: 10px;
  1093. &:hover {
  1094. background: url('@/assets/images/map/rightMenu/onlinePlotting/trActive.png') no-repeat;
  1095. }
  1096. .td {
  1097. padding: 11px;
  1098. color: #edfaff;
  1099. flex: 1;
  1100. .icon {
  1101. margin: 0 10px;
  1102. cursor: pointer;
  1103. }
  1104. }
  1105. .td2 {
  1106. flex: unset;
  1107. display: flex;
  1108. justify-content: center;
  1109. align-items: center;
  1110. }
  1111. }
  1112. }
  1113. }
  1114. .color-container {
  1115. width: 31px;
  1116. height: 22px;
  1117. display: flex;
  1118. justify-content: center;
  1119. align-items: center;
  1120. position: relative;
  1121. background-color: #0d3980;
  1122. border: 1px solid #0b5fbb;
  1123. margin-left: 8px;
  1124. :deep(.el-color-picker) {
  1125. height: 14px !important;
  1126. .el-color-picker__trigger {
  1127. width: 14px;
  1128. height: 14px;
  1129. padding: 0;
  1130. border: none;
  1131. }
  1132. }
  1133. &::before {
  1134. content: '';
  1135. position: absolute;
  1136. top: 0;
  1137. left: 0;
  1138. width: 6px;
  1139. height: 6px;
  1140. background: url('@/assets/images/inputIcon1.png') no-repeat;
  1141. }
  1142. &::after {
  1143. content: '';
  1144. position: absolute;
  1145. right: 0;
  1146. bottom: 0;
  1147. width: 6px;
  1148. height: 6px;
  1149. background: url('@/assets/images/inputIcon2.png') no-repeat;
  1150. }
  1151. }
  1152. .params-box {
  1153. margin: 10px 0;
  1154. }
  1155. .footer {
  1156. display: flex;
  1157. justify-content: flex-end;
  1158. margin-top: 30px;
  1159. padding-right: 40px;
  1160. :deep(.el-pagination__total) {
  1161. color: #a7ccdf !important;
  1162. }
  1163. :deep(.el-pagination) {
  1164. .btn-next,
  1165. .btn-prev {
  1166. background-color: transparent !important;
  1167. border: none !important;
  1168. .el-icon {
  1169. color: #a7ccdf !important;
  1170. }
  1171. }
  1172. .btn-prev:disabled,
  1173. .btn-next:disabled {
  1174. background-color: transparent !important;
  1175. border: none !important;
  1176. }
  1177. .el-pager li {
  1178. text-align: center;
  1179. color: #a7ccdf !important;
  1180. background-color: #0e3064 !important;
  1181. border: 1px solid #0c57a7 !important;
  1182. &:hover {
  1183. background-color: #038dff !important;
  1184. border: 1px solid #038dff !important;
  1185. }
  1186. }
  1187. .el-pager li.is-active {
  1188. background-color: #038dff !important;
  1189. border: 1px solid #038dff !important;
  1190. }
  1191. }
  1192. }
  1193. .btn-box {
  1194. display: flex;
  1195. align-items: center;
  1196. }
  1197. </style>