|
|
@@ -0,0 +1,420 @@
|
|
|
+<template>
|
|
|
+ <div class="tools p-4">
|
|
|
+ <BasicTable @register="registerTable">
|
|
|
+ <template #toolbar>
|
|
|
+ <Button type="primary" @click="openDialog(null)">
|
|
|
+ 新增工具
|
|
|
+ </Button>
|
|
|
+ <Button type="primary" danger :disabled="hasSelected" @click="delAllData">
|
|
|
+ 批量删除
|
|
|
+ </Button>
|
|
|
+ </template>
|
|
|
+ <template #func="{ record }">
|
|
|
+ <TableAction :actions="[
|
|
|
+ {
|
|
|
+ label: '',
|
|
|
+ tooltip: '编辑',
|
|
|
+ icon: 'ant-design:edit-outlined',
|
|
|
+ onClick: openDialog.bind(null, record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '',
|
|
|
+ tooltip: '删除',
|
|
|
+ icon: 'ant-design:delete-outlined',
|
|
|
+ onClick: onDelete.bind(null, record.id),
|
|
|
+ },
|
|
|
+ ]" />
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { defineComponent, onMounted, watch, ref, reactive, toRefs, computed } from 'vue';
|
|
|
+// 导入表格组件,表格事件
|
|
|
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
+import { Button } from 'ant-design-vue';
|
|
|
+
|
|
|
+import { message, Modal } from 'ant-design-vue';
|
|
|
+import moment from 'moment'
|
|
|
+import { session } from '/@/utils/Memory';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ components: { BasicTable, TableAction, Button },
|
|
|
+ name: "tools",
|
|
|
+ setup() {
|
|
|
+ const toolsData = [
|
|
|
+ {
|
|
|
+ group: "常用工具",
|
|
|
+ isQuick: false,
|
|
|
+ label: "全图",
|
|
|
+ option: {},
|
|
|
+ idx: 0,
|
|
|
+ id: "418d4040-df24-4f44-a718-2d4c1729532a",
|
|
|
+ tip: "显示全图范围",
|
|
|
+ icon: "at-icon-quantu",
|
|
|
+ action: "zoomfull"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "group": "常用工具",
|
|
|
+ "isQuick": false,
|
|
|
+ "label": "环境设置",
|
|
|
+ "option": {},
|
|
|
+ "idx": 1,
|
|
|
+ "id": "418d4040-df24-4f44-a718-2d4c1720032a",
|
|
|
+ "tip": "环境设置",
|
|
|
+ "icon": "at-icon-quanjingtu",
|
|
|
+ "action": "envConfig"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "action": "lookdown3D",
|
|
|
+ "label": "俯视",
|
|
|
+ "option": {},
|
|
|
+ "icon": "at-icon-fushi",
|
|
|
+ "idx": 2,
|
|
|
+ "group": "常用工具",
|
|
|
+ "isQuick": true,
|
|
|
+ "id": "7a3e12c5-e39b-4466-bbf7-c7f38e691ca7",
|
|
|
+ "tip": "俯视看图,仰角-90°"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "idx": 3,
|
|
|
+ "icon": "at-icon-zhengbei",
|
|
|
+ "isQuick": false,
|
|
|
+ "action": "looknorth3D",
|
|
|
+ "label": "正北",
|
|
|
+ "tip": "朝正北看图,方位角为0°",
|
|
|
+ "option": {},
|
|
|
+ "id": "3f4bc0ec-20fa-4ec5-856a-48b7ec1997f0",
|
|
|
+ "group": "常用工具"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "量长度",
|
|
|
+ "option": {
|
|
|
+ "measureType": "length"
|
|
|
+ },
|
|
|
+ "idx": 16,
|
|
|
+ "icon": "at-icon-liangchangdu",
|
|
|
+ "isQuick": false,
|
|
|
+ "id": "1b136e85-159d-4d01-90f8-3f1e8b545898",
|
|
|
+ "action": "MeasureAction",
|
|
|
+ "group": "测量/多屏",
|
|
|
+ "tip": "测量长度"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "tip": "测量高度",
|
|
|
+ "icon": "at-icon-lianggaodu",
|
|
|
+ "label": "量高度",
|
|
|
+ "group": "测量/多屏",
|
|
|
+ "option": {
|
|
|
+ "measureType": "height"
|
|
|
+ },
|
|
|
+ "idx": 17,
|
|
|
+ "isQuick": false,
|
|
|
+ "action": "MeasureAction",
|
|
|
+ "id": "2a894bf2-7d7e-44fc-ba6e-219135a57741"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "icon": "at-icon-liangmianji",
|
|
|
+ "tip": "测量面积",
|
|
|
+ "isQuick": false,
|
|
|
+ "label": "量面积",
|
|
|
+ "idx": 18,
|
|
|
+ "group": "测量/多屏",
|
|
|
+ "option": {
|
|
|
+ "measureType": "area"
|
|
|
+ },
|
|
|
+ "id": "e2a2050f-3822-4bbe-83fa-34991790e058",
|
|
|
+ "action": "MeasureAction"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "group": "测量/多屏",
|
|
|
+ "label": "双屏",
|
|
|
+ "isQuick": true,
|
|
|
+ "idx": 19,
|
|
|
+ "tip": "两屏对比",
|
|
|
+ "icon": "at-icon-liangping",
|
|
|
+ "id": "d34d9973-2841-4c4b-8d1b-161b41ce57c9",
|
|
|
+ "option": {
|
|
|
+ "screenNum": 2
|
|
|
+ },
|
|
|
+ "action": "AttachedMapAction"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option": {
|
|
|
+ "screenNum": 3
|
|
|
+ },
|
|
|
+ "tip": "三屏对比",
|
|
|
+ "action": "AttachedMapAction",
|
|
|
+ "idx": 20,
|
|
|
+ "group": "测量/多屏",
|
|
|
+ "label": "三屏",
|
|
|
+ "id": "0bedfcc9-91a1-4e57-939c-af1506097a94",
|
|
|
+ "icon": "at-icon-sanping",
|
|
|
+ "isQuick": false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "group": "测量/多屏",
|
|
|
+ "icon": "at-icon-siping",
|
|
|
+ "id": "4c56a30b-e82f-4d03-b09c-5c73911e11b7",
|
|
|
+ "label": "四屏",
|
|
|
+ "option": {
|
|
|
+ "screenNum": 4
|
|
|
+ },
|
|
|
+ "isQuick": false,
|
|
|
+ "tip": "四屏对比",
|
|
|
+ "action": "AttachedMapAction",
|
|
|
+ "idx": 21
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "4342fbea-6e6e-4e9b-ac1e-730b8abc02b6",
|
|
|
+ "idx": 22,
|
|
|
+ "action": "DrawAction",
|
|
|
+ "group": "绘制工具",
|
|
|
+ "option": {
|
|
|
+ "drawType": "point"
|
|
|
+ },
|
|
|
+ "tip": "绘制点",
|
|
|
+ "isQuick": false,
|
|
|
+ "label": "绘点",
|
|
|
+ "icon": "at-icon-huizhidian"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "idx": 23,
|
|
|
+ "icon": "at-icon-huizhixian",
|
|
|
+ "isQuick": false,
|
|
|
+ "label": "绘线",
|
|
|
+ "tip": "绘制线",
|
|
|
+ "id": "0f3e694b-df62-4fa0-96d1-1a1dfbc1ec14",
|
|
|
+ "action": "DrawAction",
|
|
|
+ "option": {
|
|
|
+ "drawType": "polyline"
|
|
|
+ },
|
|
|
+ "group": "绘制工具"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "action": "DrawAction",
|
|
|
+ "isQuick": true,
|
|
|
+ "option": {
|
|
|
+ "drawType": "polygon"
|
|
|
+ },
|
|
|
+ "idx": 24,
|
|
|
+ "group": "绘制工具",
|
|
|
+ "label": "绘面",
|
|
|
+ "tip": "绘制多边形",
|
|
|
+ "icon": "at-icon-huizhimian1",
|
|
|
+ "id": "34498b42-a0a6-4388-b099-e0b7ac8515db"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "group": "绘制工具",
|
|
|
+ "icon": "at-icon-huizhijuxing",
|
|
|
+ "option": {
|
|
|
+ "drawType": "extent"
|
|
|
+ },
|
|
|
+ "tip": "绘制矩形",
|
|
|
+ "isQuick": false,
|
|
|
+ "idx": 25,
|
|
|
+ "action": "DrawAction",
|
|
|
+ "label": "绘矩形",
|
|
|
+ "id": "c00f16b2-29b2-4f5a-90b5-f27185785456"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "icon": "at-icon-huizhiyuan",
|
|
|
+ "label": "绘圆",
|
|
|
+ "isQuick": false,
|
|
|
+ "idx": 26,
|
|
|
+ "option": {
|
|
|
+ "drawType": "circle"
|
|
|
+ },
|
|
|
+ "id": "4057f545-219d-4e1a-a6d9-4c0145123cfe",
|
|
|
+ "tip": "绘制圆形",
|
|
|
+ "action": "DrawAction",
|
|
|
+ "group": "绘制工具"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "fd585e8d-a9e8-4de9-b13a-de17350459ec",
|
|
|
+ "option": {},
|
|
|
+ "label": "出图",
|
|
|
+ "isQuick": false,
|
|
|
+ "icon": "at-icon-tupian",
|
|
|
+ "tip": "导出当前地图为图片",
|
|
|
+ "idx": 32,
|
|
|
+ "group": "其他工具",
|
|
|
+ "action": "ExportImgAction"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option": {},
|
|
|
+ "id": "a05acc83-4859-49fe-a12d-02bf154cc7ee",
|
|
|
+ "tip": "打印当前地图",
|
|
|
+ "action": "PrintAction",
|
|
|
+ "group": "其他工具",
|
|
|
+ "idx": 33,
|
|
|
+ "isQuick": false,
|
|
|
+ "label": "打印",
|
|
|
+ "icon": "at-icon-dayin"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "group": "其他工具",
|
|
|
+ "option": {},
|
|
|
+ "icon": "at-icon-huanchongfenxi",
|
|
|
+ "action": "BufferPointAction",
|
|
|
+ "tip": "缓冲绘制图形进行分析",
|
|
|
+ "id": "551f5ca2-a39e-43f8-8a0b-9db1ed36efa8",
|
|
|
+ "label": "点缓冲",
|
|
|
+ "idx": 35,
|
|
|
+ "isQuick": false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "group": "其他工具",
|
|
|
+ "option": {},
|
|
|
+ "icon": "at-icon-minus",
|
|
|
+ "action": "BufferLineAction",
|
|
|
+ "tip": "缓冲绘制图形进行分析",
|
|
|
+ "id": "551f5ca2-a39e-43f8-8a0b-9db1ed36efa4",
|
|
|
+ "label": "线缓冲",
|
|
|
+ "idx": 35,
|
|
|
+ "isQuick": false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "group": "其他工具",
|
|
|
+ "option": {},
|
|
|
+ "icon": "at-icon-icon_duobianxing",
|
|
|
+ "action": "BufferPolygonAction",
|
|
|
+ "tip": "缓冲绘制图形进行分析",
|
|
|
+ "id": "551f5ca2-a39e-43f8-8a0b-9db1ed36efb4",
|
|
|
+ "label": "面缓冲",
|
|
|
+ "idx": 35,
|
|
|
+ "isQuick": false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "isQuick": true,
|
|
|
+ "id": "6d51001d-a5e4-4aa8-a977-0694724b916a",
|
|
|
+ "option": {},
|
|
|
+ "group": "其他工具",
|
|
|
+ "tip": "清除缓冲分析",
|
|
|
+ "icon": "at-icon-qingchu1",
|
|
|
+ "idx": 36,
|
|
|
+ "action": "ClearBufferAction",
|
|
|
+ "label": "清除缓冲"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "isQuick": true,
|
|
|
+ "id": "6d51001d-a5e4-4aa8-a977-0694724b916a",
|
|
|
+ "option": {},
|
|
|
+ "group": "常用工具",
|
|
|
+ "tip": "清除所有绘制",
|
|
|
+ "icon": "at-icon-qingchu1",
|
|
|
+ "idx": 37,
|
|
|
+ "action": "ClearDrawAction",
|
|
|
+ "label": "清除"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option": {
|
|
|
+ "data": [
|
|
|
+ {
|
|
|
+ "wkid": "EPSG:4525",
|
|
|
+ "name": "国家2000高斯投影3°分带37°带"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ "label": "定位",
|
|
|
+ "isQuick": false,
|
|
|
+ "id": "b4940bbe-ca14-497c-b51f-726744db787b",
|
|
|
+ "tip": "定位到输入的位置",
|
|
|
+ "icon": "at-icon-dingwei",
|
|
|
+ "group": "常用工具",
|
|
|
+ "action": "MapToPointAction",
|
|
|
+ "idx": 38
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '分组名称',
|
|
|
+ dataIndex: 'group',
|
|
|
+ key: 'group',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'id',
|
|
|
+ dataIndex: 'id',
|
|
|
+ key: 'id',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '显示名称',
|
|
|
+ dataIndex: 'label',
|
|
|
+ key: 'label',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '提示文字',
|
|
|
+ dataIndex: 'tip',
|
|
|
+ key: 'tip',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '图标',
|
|
|
+ dataIndex: 'icon',
|
|
|
+ key: 'icon',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '功能',
|
|
|
+ dataIndex: 'action',
|
|
|
+ key: 'action',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ const openDialog = () => {
|
|
|
+
|
|
|
+ }
|
|
|
+ const onDelete = () => {
|
|
|
+
|
|
|
+ }
|
|
|
+ //判断是否选中数据
|
|
|
+ const hasSelected = computed(() => {
|
|
|
+ const rowSelection = getRowSelection();
|
|
|
+ return !rowSelection.selectedRowKeys?.length;
|
|
|
+ });
|
|
|
+ //注册tag表格
|
|
|
+ const [
|
|
|
+ registerTable,
|
|
|
+ { reload, getRowSelection, getSelectRowKeys, setSelectedRowKeys }
|
|
|
+ ] = useTable({
|
|
|
+ title: '工具列表', //'菜单列表'
|
|
|
+ // api: getTagsData, //加载数据
|
|
|
+ dataSource: toolsData,
|
|
|
+ columns: columns,
|
|
|
+ useSearchForm: false, //开启搜索区域
|
|
|
+ bordered: true,
|
|
|
+ showTableSetting: true, // 显示表格设置
|
|
|
+ tableSetting: { fullScreen: false },
|
|
|
+ showIndexColumn: true,
|
|
|
+ pagination: {
|
|
|
+ // pageSize: 10,
|
|
|
+ hideOnSinglePage: false
|
|
|
+ },
|
|
|
+ rowKey: (record) => record.id,
|
|
|
+ actionColumn: {
|
|
|
+ width: 100,
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'func',
|
|
|
+ slots: { customRender: 'func' },
|
|
|
+ },
|
|
|
+ rowSelection: {
|
|
|
+ type: 'checkbox',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ hasSelected,
|
|
|
+ registerTable,
|
|
|
+ reload,
|
|
|
+ getRowSelection,
|
|
|
+ getSelectRowKeys,
|
|
|
+ setSelectedRowKeys,
|
|
|
+ openDialog,
|
|
|
+ onDelete
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|