diff --git a/.env.development b/.env.development index 3ad805b6..5b5abd2b 100644 --- a/.env.development +++ b/.env.development @@ -8,9 +8,8 @@ VITE_PUBLIC_PATH = / #VITE_GLOB_API_URL=/basic-api #财源 # VITE_GLOB_API_URL=http://192.168.10.102:9500 -VITE_GLOB_API_URL=http://192.168.10.102:9023 #基础框架 -#VITE_GLOB_API_URL=http://192.168.10.102:9023 +VITE_GLOB_API_URL=http://192.168.10.102:9023 diff --git a/package.json b/package.json index 7892f019..e17b713e 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,10 @@ "mapbox-gl-utils": "^0.44.0", "@mapbox/mapbox-gl-draw": "^1.4.1", "mapbox-gl-draw-snap-mode": "^0.2.0", + "mapbox-extensions":"^1.3.38", "terraformer-wkt-parser": "^1.2.1", + "ceel-json-editor":"^0.0.3", + "@originjs/vite-plugin-commonjs":"^1.0.3", "mars3d": "^3.7.0", "mars3d-cesium": "^1.113.0", "min-dash": "^4.2.1", diff --git a/src/api/sys/upload.ts b/src/api/sys/upload.ts index bcefd500..724db765 100644 --- a/src/api/sys/upload.ts +++ b/src/api/sys/upload.ts @@ -22,3 +22,14 @@ export function uploadApi( params, ); } + + +export function fileUploadApi(params: UploadFileParams,url:string,onUploadProgress: (progressEvent: AxiosProgressEvent) => void,) { + return defHttp.uploadFile( + { + url: url, + onUploadProgress, + }, + params, + ); +} diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index 687db268..ea4e8474 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -28,7 +28,8 @@ import ApiTree from './components/ApiTree.vue'; import ApiTreeSelect from './components/ApiTreeSelect.vue'; import ApiCascader from './components/ApiCascader.vue'; import ApiTransfer from './components/ApiTransfer.vue'; -import { BasicUpload, ImageUpload } from '@/components/Upload'; +import { BasicUpload, ImageUpload,VideoUpload,FileUpload } from '@/components/Upload'; +import {Location } from '@/components/Map' import { StrengthMeter } from '@/components/StrengthMeter'; import { IconPicker } from '@/components/Icon'; import { CountdownInput } from '@/components/CountDown'; @@ -45,6 +46,9 @@ componentMap.set('InputTextArea', Input.TextArea); componentMap.set('InputNumber', InputNumber); componentMap.set('AutoComplete', AutoComplete); componentMap.set('ImageUpload', ImageUpload); +componentMap.set("VideoUpload",VideoUpload); +componentMap.set("FileUpload",FileUpload); +componentMap.set("Location",Location); componentMap.set('Select', Select); componentMap.set('ApiSelect', ApiSelect); componentMap.set('ApiTree', ApiTree); diff --git a/src/components/FormViewer/index.vue b/src/components/FormViewer/index.vue index 8b7e915b..6566d3d2 100644 --- a/src/components/FormViewer/index.vue +++ b/src/components/FormViewer/index.vue @@ -128,6 +128,7 @@ const scheme = JSON.parse(data.scheme); console.log(scheme); console.log(props.formConfig); + console.log("subTableColumns",subTableColumns) subTableDB.value = scheme.db; let disDetail = false; scheme.formInfo.tabList.forEach((tabElement, index) => { @@ -154,6 +155,9 @@ }); } }); + if (element.component === 'InputGuid') { + element.ifShow = false; + } // 验证规则 if (element.rules !== undefined) { let myString = element.rules[0].pattern; @@ -194,13 +198,15 @@ element.columns.forEach((itemColumn) => { itemColumn.children.forEach((itemColumnChild) => { tableData.push(itemColumnChild); - subTableColumns.value.push({ - key: itemColumnChild.field, - title: itemColumnChild.label, - dataIndex: itemColumnChild.field, - ...itemColumnChild, - width: 120, - }); + if (itemColumnChild.component != 'InputGuid') { + subTableColumns.value.push({ + key: itemColumnChild.field, + title: itemColumnChild.label, + dataIndex: itemColumnChild.field, + ...itemColumnChild, + width: 120, + }); + } }); }); scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 }; @@ -301,7 +307,7 @@ for (const key in values) { for (const fieKey in FieldsValue.value) { if (key == fieKey) { - if (values[key] != undefined) { + if (!values[key]) { values[key] = FieldsValue.value[key]; } } diff --git a/src/components/Map/index.ts b/src/components/Map/index.ts new file mode 100644 index 00000000..fda01fe5 --- /dev/null +++ b/src/components/Map/index.ts @@ -0,0 +1,4 @@ +import { withInstall } from '@/utils'; +import getLocation from './src/components/Location.vue' + +export const Location = withInstall(getLocation); diff --git a/src/components/Map/src/components/Location.vue b/src/components/Map/src/components/Location.vue new file mode 100644 index 00000000..38791328 --- /dev/null +++ b/src/components/Map/src/components/Location.vue @@ -0,0 +1,289 @@ + + + + + diff --git a/src/components/Map/src/components/data.tsx b/src/components/Map/src/components/data.tsx new file mode 100644 index 00000000..7c6415df --- /dev/null +++ b/src/components/Map/src/components/data.tsx @@ -0,0 +1,139 @@ +import type { BasicColumn, ActionItem } from '@/components/Table'; +import { FileBasicColumn, FileItem, PreviewFileItem, UploadResultStatus } from '../types/typing'; +import { isImgTypeByName } from '../helper'; +import { Progress, Tag } from 'ant-design-vue'; +import TableAction from '@/components/Table/src/components/TableAction.vue'; +import ThumbUrl from './ThumbUrl.vue'; +import { useI18n } from '@/hooks/web/useI18n'; + +const { t } = useI18n(); + +// 文件上传列表 +export function createTableColumns(): FileBasicColumn[] { + return [ + { + dataIndex: 'thumbUrl', + title: t('component.upload.legend'), + width: 100, + customRender: ({ record }) => { + const { thumbUrl } = (record as FileItem) || {}; + return thumbUrl && ; + }, + }, + { + dataIndex: 'name', + title: t('component.upload.fileName'), + align: 'left', + customRender: ({ text, record }) => { + const { percent, status: uploadStatus } = (record as FileItem) || {}; + let status: 'normal' | 'exception' | 'active' | 'success' = 'normal'; + if (uploadStatus === UploadResultStatus.ERROR) { + status = 'exception'; + } else if (uploadStatus === UploadResultStatus.UPLOADING) { + status = 'active'; + } else if (uploadStatus === UploadResultStatus.SUCCESS) { + status = 'success'; + } + return ( +
+

+ {text} +

+ +
+ ); + }, + }, + { + dataIndex: 'size', + title: t('component.upload.fileSize'), + width: 100, + customRender: ({ text = 0 }) => { + return text && (text / 1024).toFixed(2) + 'KB'; + }, + }, + { + dataIndex: 'status', + title: t('component.upload.fileStatue'), + width: 100, + customRender: ({ text }) => { + if (text === UploadResultStatus.SUCCESS) { + return {() => t('component.upload.uploadSuccess')}; + } else if (text === UploadResultStatus.ERROR) { + return {() => t('component.upload.uploadError')}; + } else if (text === UploadResultStatus.UPLOADING) { + return {() => t('component.upload.uploading')}; + } + + return text || t('component.upload.pending'); + }, + }, + ]; +} +export function createActionColumn(handleRemove: Function): FileBasicColumn { + return { + width: 120, + title: t('component.upload.operating'), + dataIndex: 'action', + fixed: false, + customRender: ({ record }) => { + const actions: ActionItem[] = [ + { + label: t('component.upload.del'), + color: 'error', + onClick: handleRemove.bind(null, record), + }, + ]; + return ; + }, + }; +} +// 文件预览列表 +export function createPreviewColumns(): BasicColumn[] { + return [ + { + dataIndex: 'url', + title: t('component.upload.legend'), + width: 100, + customRender: ({ record }) => { + const { url } = (record as PreviewFileItem) || {}; + return isImgTypeByName(url) && ; + }, + }, + { + dataIndex: 'name', + title: t('component.upload.fileName'), + align: 'left', + }, + ]; +} + +export function createPreviewActionColumn({ + handleRemove, + handleDownload, +}: { + handleRemove: Fn; + handleDownload: Fn; +}): BasicColumn { + return { + width: 160, + title: t('component.upload.operating'), + dataIndex: 'action', + fixed: false, + customRender: ({ record }) => { + const actions: ActionItem[] = [ + { + label: t('component.upload.del'), + color: 'error', + onClick: handleRemove.bind(null, record), + }, + { + label: t('component.upload.download'), + onClick: handleDownload.bind(null, record), + }, + ]; + + return ; + }, + }; +} diff --git a/src/components/Map/src/helper.ts b/src/components/Map/src/helper.ts new file mode 100644 index 00000000..cbc1425c --- /dev/null +++ b/src/components/Map/src/helper.ts @@ -0,0 +1,32 @@ +export function checkFileType(file: File, accepts: string[]) { + const newTypes = accepts.join('|'); + // const reg = /\.(jpg|jpeg|png|gif|txt|doc|docx|xls|xlsx|xml)$/i; + const reg = new RegExp('\\.(' + newTypes + ')$', 'i'); + + return reg.test(file.name); +} + +export function checkImgType(file: File) { + return isImgTypeByName(file.name); +} + +export function isImgTypeByName(name: string) { + return /\.(jpg|jpeg|png|gif|webp)$/i.test(name); +} + + +export function isVideoTypeByName(name: string) { + return /\.(mp4|mov|avi)$/i.test(name); +} + +export function getBase64WithFile(file: File) { + return new Promise<{ + result: string; + file: File; + }>((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve({ result: reader.result as string, file }); + reader.onerror = (error) => reject(error); + }); +} diff --git a/src/components/Map/src/hooks/useUpload.ts b/src/components/Map/src/hooks/useUpload.ts new file mode 100644 index 00000000..53fa3806 --- /dev/null +++ b/src/components/Map/src/hooks/useUpload.ts @@ -0,0 +1,61 @@ +import { Ref, unref, computed } from 'vue'; +import { useI18n } from '@/hooks/web/useI18n'; + +const { t } = useI18n(); +export function useUploadType({ + acceptRef, + helpTextRef, + maxNumberRef, + maxSizeRef, +}: { + acceptRef: Ref; + helpTextRef: Ref; + maxNumberRef: Ref; + maxSizeRef: Ref; +}) { + // 文件类型限制 + const getAccept = computed(() => { + const accept = unref(acceptRef); + if (accept && accept.length > 0) { + return accept; + } + return []; + }); + const getStringAccept = computed(() => { + return unref(getAccept) + .map((item) => { + if (item.indexOf('/') > 0 || item.startsWith('.')) { + return item; + } else { + return `.${item}`; + } + }) + .join(','); + }); + + // 支持jpg、jpeg、png格式，不超过2M，最多可选择10张图片，。 + const getHelpText = computed(() => { + const helpText = unref(helpTextRef); + if (helpText) { + return helpText; + } + const helpTexts: string[] = []; + + const accept = unref(acceptRef); + if (accept.length > 0) { + helpTexts.push(t('component.upload.accept', [accept.join(',')])); + } + + const maxSize = unref(maxSizeRef); + if (maxSize) { + helpTexts.push(t('component.upload.maxSize', [maxSize])); + } + + const maxNumber = unref(maxNumberRef); + if (maxNumber && maxNumber !== Infinity) { + helpTexts.push(t('component.upload.maxNumber', [maxNumber])); + } + return helpTexts.join('，'); + }); + return { getAccept, getStringAccept, getHelpText }; +} diff --git a/src/components/Map/src/props.ts b/src/components/Map/src/props.ts new file mode 100644 index 00000000..eb477eee --- /dev/null +++ b/src/components/Map/src/props.ts @@ -0,0 +1,118 @@ +import type { PropType } from 'vue'; +import { FileBasicColumn } from './types/typing'; + +import type { Options } from 'sortablejs'; + +import { Merge } from '@/utils/types'; + +type SortableOptions = Merge< + Omit, + { + onAfterEnd?: (params: T) => R; + // ...可扩展 + } +>; + +type ListType = 'text' | 'picture' | 'picture-card'; + +export const basicProps = { + listType: { + type: String as PropType, + default: 'picture-card', + }, + helpText: { + type: String as PropType, + default: '', + }, + // 文件最大多少MB + maxSize: { + type: Number as PropType, + default: 2, + }, + // 最大数量的文件，Infinity不限制 + maxNumber: { + type: Number as PropType, + default: 1, + }, + // 根据后缀，或者其他 + accept: { + type: Array as PropType, + default: () => [], + }, + multiple: { + type: Boolean as PropType, + default: false, + }, + uploadParams: { + type: Object as PropType, + default: () => ({}), + }, + api: { + type: Function as PropType, + default: null, + required: true, + }, + name: { + type: String as PropType, + default: 'file', + }, + filename: { + type: String as PropType, + default: null, + }, + fileListOpenDrag: { + type: Boolean, + default: true, + }, + + fileListDragOptions: { + type: Object as PropType, + default: () => ({}), + }, +}; + +export const uploadContainerProps = { + value: { + type: Array as PropType, + default: () => [], + }, + ...basicProps, + showPreviewNumber: { + type: Boolean as PropType, + default: true, + }, + emptyHidePreview: { + type: Boolean as PropType, + default: false, + }, +}; + +export const previewProps = { + value: { + type: Array as PropType, + default: () => [], + }, +}; + +export const fileListProps = { + columns: { + type: Array as PropType, + default: null, + }, + actionColumn: { + type: Object as PropType, + default: null, + }, + dataSource: { + type: Array as PropType, + default: null, + }, + openDrag: { + type: Boolean, + default: false, + }, + dragOptions: { + type: Object as PropType, + default: () => ({}), + }, +}; diff --git a/src/components/Map/src/types/typing.ts b/src/components/Map/src/types/typing.ts new file mode 100644 index 00000000..b87cdd68 --- /dev/null +++ b/src/components/Map/src/types/typing.ts @@ -0,0 +1,46 @@ +import { BasicColumn } from '@/components/Table'; +import { UploadApiResult } from '@/api/sys/model/uploadModel'; + +export enum UploadResultStatus { + DONE = 'done', + SUCCESS = 'success', + ERROR = 'error', + UPLOADING = 'uploading', +} + +export interface FileItem { + thumbUrl?: string; + name: string; + size: string | number; + type?: string; + percent: number; + file: File; + status?: UploadResultStatus; + response?: UploadApiResult; + uuid: string; +} + +export interface PreviewFileItem { + url: string; + name: string; + type: string; +} + +export interface FileBasicColumn extends Omit { + /** + * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config + * @type Function | ScopedSlot + */ + customRender?: Function; + /** + * Title of this column + * @type any (string | slot) + */ + title: string; + + /** + * Display field of the data record, could be set like a.b.c + * @type string + */ + dataIndex: string; +} diff --git a/src/components/MapboxMaps/InsertShp/index.vue b/src/components/MapboxMaps/InsertShp/index.vue index 624e59d4..5b074543 100644 --- a/src/components/MapboxMaps/InsertShp/index.vue +++ b/src/components/MapboxMaps/InsertShp/index.vue @@ -9,7 +9,7 @@ -
上传shp
+
上传数据
+ - - - - EPSG:4326 - EPSG:3857 - EPSG:900913 + + + + + 是 + 否 - - + + + + + EPSG:4326 + EPSG:3857 + EPSG:900913 + + + + + + + 点 + 线 + 面 + + + + + + + + + + + + + + + + + + + +
- 上传 + 上传
+
+
+
@@ -119,6 +169,11 @@
查看数据
+ + +
+ +
@@ -132,29 +187,54 @@ CheckCircleOutlined, } from '@ant-design/icons-vue'; import './index.scss'; - import { InboxOutlined } from '@ant-design/icons-vue'; + import { InboxOutlined,CloudUploadOutlined } from '@ant-design/icons-vue'; import { message } from 'ant-design-vue'; import type { UploadChangeParam } from 'ant-design-vue'; import type { UploadProps } from 'ant-design-vue'; // import { uploadShp } from '@/api/sys/analysis.ts' import axios from 'axios'; import { v4 as uuidv4 } from 'uuid'; -import { FILETYPE } from '../util' + import { FILETYPE } from '../util' + import {ObjectToUrl} from '../src/tool' + const dataSource = reactive([ + { + "tablename":"monitor" + }, + { + "tablename":"monitor0527" + }, + ]) + + const columns = reactive([ + { + title: '数据表名称', + dataIndex: 'tablename', + key: 'tablename', + },{ + title: '选择数据表', + dataIndex: 'operation', + key: 'operation', + } + ]) const current = ref(0); const fileList = ref([]); const props = defineProps(['openModal']); const emits = defineEmits(['update:openModal']); const uploadFrom = reactive({ - serverName: '', + serverName: null, + hasFeature:null, spaceType: null, - tableName: '', + layerType:null, + tableName: null, }); const formRef = ref(); const dataList = ref([]); - const isShp = ref(false); + const isShp = ref(true); + const showExistTableList = ref(false) + // todo - const columns = [ + const tablecolumns = [ { title: 'Shp原始字段', dataIndex: 'name', key: 'name' }, { title: '数据类型', dataIndex: 'type', key: 'type' }, { title: '数据长度', dataIndex: 'length', key: 'length' }, @@ -162,44 +242,146 @@ import { FILETYPE } from '../util' { title: '中文名称', dataIndex: 'initName', key: 'initName' }, { title: '操作', dataIndex: 'operation', key: 'operation' }, ]; - const uploadFormRules = { - serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }], - spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }], - tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }], - }; -const beforeUpload: UploadProps['beforeUpload'] = (file) => { - console.log('beforeUpload',file) - file.type === FILETYPE.ZIP? isShp.value = true: isShp.value = false + + + const uploadFormRules = reactive({ + serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }], + hasFeature: [{ required: true, message: '请选择是否有图斑数据', trigger: 'blur' }], + spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }], + layerType: [{ required: true, message: '请选数据类型', trigger: 'blur' }], + tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }], + }); + + +const beforeUpload:UploadProps['beforeUpload'] = (file) => { + file.type === FILETYPE.ZIP ? isShp.value = true: isShp.value = false fileList.value = [file]; return false; }; + +const handlerUploadFile = ()=>{ + let url = "http://192.168.10.102:9500/api/Files/Upload" + + const [proxyFile] = fileList.value + let file = proxyFile.originFileObj + + let formData = new FormData(); + formData.append('files', file) + // formData.append('serverName',uploadFrom.serverName) + // formData.append('spaceType',uploadFrom.spaceType) + // formData.append('tableName',uploadFrom.tableName) + + + axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data;charset=UTF-8','X-Token':"95a1a7a8"}}).then(res => { + alert(res.data.result[0].filePath); + handlerCreateLayer(res.data.result[0].filePath) + }) +} + +const handlerCreateLayer =(filePath)=>{ + + // upload 接口返回路径的反斜杠替换 20240528\\2024052814563161320172.zip → 20240528/2024052814563161320172.zip + + filePath = filePath.replace(/\\/,'/'); + + let addForm = { + filePath:filePath, + tableName:uploadFrom.tableName, + srid:uploadFrom.spaceType + } + let params = ObjectToUrl(addForm); + + axios.post("http://192.168.10.102:9500/api/PolygonalShape/CreateGISLayer"+params,{},{headers:{'Content-Type': 'multipart/form-data;charset=UTF-8','X-Token':"95a1a7a8"}}).then(res=>{ + console.log("helloworld",res); + }) +} + const submitShp = () => { formRef.value.validate().then(() => { if(fileList.value?.length < 1){ - message.warning('请选择shp文件') + message.warning('请选择需要上传的文件') return } + + // 文件上传FormData() let formData = new FormData(); - const [proxyFile] = fileList.value - let file = proxyFile.originFileObj + + const [proxyFile] = fileList.value + + let file = proxyFile.originFileObj + formData.append('file', file) formData.append('serverName',uploadFrom.serverName) formData.append('spaceType',uploadFrom.spaceType) formData.append('tableName',uploadFrom.tableName) let url = "" isShp.value? url = 'http://221.2.83.254:9006/geoserver/uploadFile': url = 'http://221.2.83.254:9006/geoserver/uploadExcelFile' - axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data;charset=UTF-8'}}).then(res => { - + // isShp.value ? url = "http://192.168.10.102:9500/api/Files/Upload" : url = "http://192.168.10.102:9500/api/Files/Upload" + + // let data = [ + // { + // "length": 1024, + // "name": "name", + // "type": "varchar" + // }, + // { + // "length": 1024, + // "name": "num", + // "type": "varchar" + // }, + // { + // "length": 1024, + // "name": "type", + // "type": "varchar" + // }, + // { + // "length": 1024, + // "name": "shebeiid", + // "type": "varchar" + // }, + // { + // "length": 1024, + // "name": "forestryty", + // "type": "varchar" + // }, + // { + // "length": "", + // "name": "geom", + // "type": "geometry" + // }, + // { + // "length": 1024, + // "name": "road", + // "type": "varchar" + // }, + // { + // "length": 1024, + // "name": "checksite", + // "type": "varchar" + // }, + // { + // "length": 1024, + // "name": "lng", + // "type": "varchar" + // }, + // { + // "length": 1024, + // "name": "lat", + // "type": "varchar" + // } + // ] + + axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data;charset=UTF-8'}}).then(res => { let data = res.data.data.heads let showData = data.map(item => { return {...item,refName:item.name.toLowerCase(),initName:item.name,key:uuidv4()} }) - dataList.value = showData current.value++ + }).catch(err => { console.log(err) }) @@ -214,6 +396,7 @@ const closeModal = () => { fileList.value = [] current.value = 0 } + const deleteListItem = (record) => { dataList.value = dataList.value.filter(item => item.key !== record.key) } @@ -230,22 +413,27 @@ const insertListItem = () => { const submitDataList = () => { - let refRelation = {} + // let refRelation = {} - dataList.value.forEach((item,index)=>{ - refRelation[item.refName] = item.initName; - }) + // dataList.value.forEach((item,index)=>{ + // refRelation[item.refName] = item.initName; + // }) - console.log("refRelation",refRelation); + // console.log("refRelation",refRelation); - let exportForm = { - "newHeads": dataList.value, - "refRelation": JSON.stringify(refRelation), - } + // let exportForm = { + // "newHeads": dataList.value, + // "refRelation": JSON.stringify(refRelation), + // } // console.log(dataList.value) - // current.value++ + current.value++ +} + +// 获取现有数据表 +const handlerGetExistsTableList = (record )=>{ + uploadFrom.tableName = record.tablename } @@ -336,5 +524,14 @@ const submitDataList = () => { flex-direction: column; } } + .exist-table-list{ + width:100%; + height: calc( 100% - 60px); + position:absolute; + top:60px; + left:0px; + background:#fff; + border-radius: 12px; + } } diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue index 7837cfb2..5386f2b0 100644 --- a/src/components/MapboxMaps/MapComponent.vue +++ b/src/components/MapboxMaps/MapComponent.vue @@ -36,7 +36,13 @@ // 图形绘制工具类 import MapboxDraw from '@mapbox/mapbox-gl-draw'; - + + import { generateUUID,getGeometryCenter } from './src/tool' + + // 测量工具 + import { SwitchLayerControl,MeasureControl } from 'mapbox-extensions' + import 'mapbox-extensions/dist/index.css' + import U from 'mapbox-gl-utils'; import 'mapbox-gl/dist/mapbox-gl.css'; import './src/index.less'; @@ -156,6 +162,23 @@ }); window.handlerCopyFeature = handlerCopyFeature; + + map.addControl(new MeasureControl({ + horizontal : true, //default false + btnBgColor : '#ffffff', //default '#ffffff' + btnActiveColor:'#ddd', //default '#ddd' + geometryClick:true, //defualt false + enableModes:['Point','LineString','Polygon'],//default all + onStart:()=>{}, + onStop:()=>{}, + measurePointOptions:{ + }, + measureLineStringOptions:{ + }, + measurePolygonOptions:{ + } + }),"top-left") + }); }); // 销毁地图 @@ -242,57 +265,66 @@ // 初始化绘图空间 const handlerInitDrawTool = (feature, bool) => { - if (feature.features.length > 0) { - feature.features.forEach((item) => { - if (item.geometry.type == 'MultiPolygon') { - let arr: any = ref([]); - item.geometry.coordinates.forEach((val) => { - arr.value.push(val[0]); - }); - item.geometry.coordinates = arr.value; - item.geometry.type = 'Polygon'; - } - }); - } + + // if (feature.features.length > 0) { + + // feature.features.forEach((item) => { + + // if (item.geometry.type == 'MultiPolygon') { + // let arr: any = ref([]); + // item.geometry.coordinates.forEach((val) => { + // arr.value.push(val[0]); + // }); + // item.geometry.coordinates = arr.value; + // item.geometry.type = 'Polygon'; + // } + // }); + + // } - geojson.geojson = feature; - console.log('drawTool', drawTool); - console.log('feature', feature); - if (drawTool) { - drawTool.deleteAll(); - if (feature.features) { - drawTool.set(geojson.geojson); + geojson.geojson = feature; + + + if (drawTool) { + drawTool.deleteAll(); + if (feature.features) { + drawTool.set(geojson.geojson); + } + } else { + drawTool = new MapboxDraw({ + modes: { + ...MapboxDraw.modes, + draw_point: SnapPointMode, + draw_polygon: SnapPolygonMode, + draw_line_string: SnapLineMode, + direct_select: SnapDirectSelect, + }, + styles: customDrawStyles, + userProperties: true, + snap: true, + snapOptions: { + snapPx: 12, // defaults to 15 + snapToMidPoints: true, // defaults to false + snapVertexPriorityDistance: 0.0025, // defaults to 1.25 + }, + guides: false, + }); + + map.addControl(drawTool, 'top-right'); + + if (feature.features) { + drawTool.set(geojson.geojson); + } } - } else { - drawTool = new MapboxDraw({ - modes: { - ...MapboxDraw.modes, - draw_point: SnapPointMode, - draw_polygon: SnapPolygonMode, - draw_line_string: SnapLineMode, - direct_select: SnapDirectSelect, - }, - styles: customDrawStyles, - userProperties: true, - snap: true, - snapOptions: { - snapPx: 12, // defaults to 15 - snapToMidPoints: true, // defaults to false - snapVertexPriorityDistance: 0.0025, // defaults to 1.25 - }, - guides: false, - }); - map.addControl(drawTool, 'top-right'); - if (feature.features) { - drawTool.set(geojson.geojson); - } - } - // 正在绘制 - if (bool) { + + // 正在绘制 + // if (bool) { + // drawing.value = true; + // } else { + // drawing.value = false; + // } + drawing.value = true; - } else { - drawing.value = false; - } }; // 将图斑复制到指定图层 @@ -386,7 +418,7 @@ const handlerLocation = (lngLat) => { map.flyTo({ center: lngLat, - zoom: 16, + zoom: 17, speed: 10, // 飞行速度 curve: 1, // 飞行曲线 easing(t) { @@ -476,42 +508,40 @@ const handlerDraw = (features = null, bool = false) => { - console.log("features",features); - let geo = { type: 'FeatureCollection', features: [], }; - console.log('features', features); - console.log('bool', bool); - if (features == null) { bool = true; } else { if (features.length > 0) { for (let i = 0; i < features.length; i++) { - try { - let featureTemp = WktToGeojson(features[i].value); - let feature = { - id: 'cd1d93c0e4a6747ff597f' + parseInt(1000000000 * Math.random()).toString(), - type: 'Feature', - properties: {}, - geometry: featureTemp, + id: generateUUID(), + type: 'Feature', + properties: {}, + geometry: featureTemp, }; - geo.features.push(feature); + // 获取第一个图斑的中心点跳转 + if(i == 0){ + let lngLat = getGeometryCenter(feature); + handlerLocation(lngLat); + } } catch (e) { console.log('WKT解析错误，请检查WKT数据格式是否有误'); } } } } + handlerInitDrawTool(geo, bool); + }; defineExpose({ @@ -519,6 +549,7 @@ handlerLocation, handlerCancleDraw, }); + \ No newline at end of file diff --git a/src/components/MapboxMaps/MapboxMap.vue b/src/components/MapboxMaps/MapboxMap.vue index 60ce4fa1..b176b310 100644 --- a/src/components/MapboxMaps/MapboxMap.vue +++ b/src/components/MapboxMaps/MapboxMap.vue @@ -225,70 +225,91 @@ popup.remove(); createMessage.success('复制成功！'); }; + \ No newline at end of file diff --git a/src/components/MapboxMaps/Modal/ServeResource/index.vue b/src/components/MapboxMaps/Modal/ServeResource/index.vue index 2e65ec2a..02225ba1 100644 --- a/src/components/MapboxMaps/Modal/ServeResource/index.vue +++ b/src/components/MapboxMaps/Modal/ServeResource/index.vue @@ -42,6 +42,7 @@ ======= + --> + + + diff --git a/src/components/Upload/src/components/ImageUpload.vue b/src/components/Upload/src/components/ImageUpload.vue index e4662934..5b49e443 100644 --- a/src/components/Upload/src/components/ImageUpload.vue +++ b/src/components/Upload/src/components/ImageUpload.vue @@ -1,11 +1,22 @@ diff --git a/src/components/Upload/src/components/UploadModal.vue b/src/components/Upload/src/components/UploadModal.vue index a8cb71a8..1a63ad3e 100644 --- a/src/components/Upload/src/components/UploadModal.vue +++ b/src/components/Upload/src/components/UploadModal.vue @@ -187,7 +187,7 @@ item.percent = complete; }, ); - let data = ret != undefined ? ret.data : {}; + const { data } = ret; item.status = UploadResultStatus.SUCCESS; item.response = data; return { @@ -206,7 +206,9 @@ // 点击开始上传 async function handleStartUpload() { - const { maxNumber } = props; + + const { maxNumber,action } = props; + alert(action); if ((fileListRef.value.length + props.previewFileList?.length ?? 0) > maxNumber) { return createMessage.warning(t('component.upload.maxNumber', [maxNumber])); } diff --git a/src/components/Upload/src/components/VideoUpload.vue b/src/components/Upload/src/components/VideoUpload.vue new file mode 100644 index 00000000..af1f1c78 --- /dev/null +++ b/src/components/Upload/src/components/VideoUpload.vue @@ -0,0 +1,301 @@ + + + + + diff --git a/src/components/Upload/src/components/video.png b/src/components/Upload/src/components/video.png new file mode 100644 index 00000000..ba615a2c Binary files /dev/null and b/src/components/Upload/src/components/video.png differ diff --git a/src/components/Upload/src/helper.ts b/src/components/Upload/src/helper.ts index 7e8494e9..cbc1425c 100644 --- a/src/components/Upload/src/helper.ts +++ b/src/components/Upload/src/helper.ts @@ -14,6 +14,11 @@ export function isImgTypeByName(name: string) { return /\.(jpg|jpeg|png|gif|webp)$/i.test(name); } + +export function isVideoTypeByName(name: string) { + return /\.(mp4|mov|avi)$/i.test(name); +} + export function getBase64WithFile(file: File) { return new Promise<{ result: string; diff --git a/src/components/Upload/src/props.ts b/src/components/Upload/src/props.ts index eb477eee..d3aaa499 100644 --- a/src/components/Upload/src/props.ts +++ b/src/components/Upload/src/props.ts @@ -24,6 +24,14 @@ export const basicProps = { type: String as PropType, default: '', }, + action: { + type: String as PropType, + default: '', + }, + server: { + type: String as PropType, + default: '', + }, // 文件最大多少MB maxSize: { type: Number as PropType, @@ -54,7 +62,7 @@ export const basicProps = { }, name: { type: String as PropType, - default: 'file', + default: 'files', }, filename: { type: String as PropType, @@ -64,7 +72,6 @@ export const basicProps = { type: Boolean, default: true, }, - fileListDragOptions: { type: Object as PropType, default: () => ({}), diff --git a/src/locales/lang/zh-CN/component.json b/src/locales/lang/zh-CN/component.json index 952d99dd..88050392 100644 --- a/src/locales/lang/zh-CN/component.json +++ b/src/locales/lang/zh-CN/component.json @@ -124,5 +124,9 @@ "redoTip": "点击图片可刷新", "dragText": "请按住滑块拖动", "successText": "验证通过" + }, + "map":{ + "refreshSuccess":"获取位置成功！", + "refreshError":"获取位置失败！" } } diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue index 167d6b77..ecd419c9 100644 --- a/src/views/dashboard/analysis/index.vue +++ b/src/views/dashboard/analysis/index.vue @@ -14,6 +14,7 @@ import MapboxMaps from '@/components/MapboxMaps/MapboxMap.vue'; + // import MapboxMaps from '@/components/MapboxMaps/MapComponent.vue'; import {ref,reactive} from 'vue'; import { DrawingType } from '@/enums/mapEnum'; @@ -27,7 +28,7 @@ const layers = reactive([ { id:1, - name:"沂水县道路中心线1", + name:"沂水县道路中心线", checked:false, layer:{ 'id': 'roadnetLine1', @@ -58,39 +59,6 @@ 'line-width': 1 } } - },{ - id:2, - name:"沂水县道路中心线2", - checked:false, - layer:{ - 'id': 'roadnetLine2', - 'type': 'line', - 'source': { - type: 'vector', - tiles: [ 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7'], - minzoom: 1, - maxzoom: 20 - }, - "source-layer": "yishuixian", - 'layout': { - 'line-join': 'round', - 'line-cap': 'round' - }, - 'paint': { - 'line-color': [ - "case", - ["==", ["get", "handle_status_id"], 0], - "#E6A23C", - ["==", ["get", "handle_status_id"], 1], - "#409EFF", - ["==", ["get", "handle_status_id"], 2], - "#67C23A", - // 默认 - "#E6A23C", - ], - 'line-width': 1 - } - } } ]) @@ -104,12 +72,11 @@ // const feature ="LINESTRING (118.55483239594203 35.81329409678203, 118.54889167836416 35.806406839795216, 118.55647247134772 35.80285975465173, 118.56157492816281 35.803303140294986)" // const feature = "POLYGON ((118.54774514802972 35.80786133598188, 118.54515277045988 35.79816597053564, 118.55919536113471 35.80085134034624, 118.56021460056033 35.80462789316549, 118.5595188628206 35.80695604583504, 118.5580066425723 35.80815336506183, 118.54774514802972 35.80786133598188))" - let drawFeatures = [ { "columnName": "mapgeom", - "value": "POLYGON ((118.55901684631719 35.8045110934671, 118.55946931550466 35.80449259041045, 118.55946551324392 35.80463444717644, 118.559024450841 35.80464061486234, 118.55901684631719 35.8045110934671))" + "value": "MULTIPOLYGON (((118.55901684631719 35.8045110934671, 118.55946931550466 35.80449259041045, 118.55946551324392 35.80463444717644, 118.559024450841 35.80464061486234, 118.55901684631719 35.8045110934671)))" }, { "columnName": "mapgeom", "value": "POLYGON ((118.5591119028685 35.804344565958516, 118.5594579087177 35.804344565958516, 118.55945410645693 35.80424279914757, 118.55910049608158 35.80423663146167, 118.5591119028685 35.804344565958516))" @@ -139,25 +106,21 @@ let drawFeatures = [ setTimeout(function(){ - MapboxComponent.value.handlerDraw() + // MapboxComponent.value.handlerDraw() },6000) // 图斑定位 - setTimeout(function(){ - MapboxComponent.value.handlerLocation([118.556717,35.80391]); - },6000) - - + // setTimeout(function(){ + // MapboxComponent.value.handlerLocation([118.556717,35.80391]); + // },6000) + const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line]; const mapOnLoad = (map) => { - // - - // map 对象 console.log('map::: ', map); // mapU封装对象 diff --git a/src/views/demo/form-design/components/VFormCreate/components/FormRender.vue b/src/views/demo/form-design/components/VFormCreate/components/FormRender.vue index 1ccb8d46..15e0a40c 100644 --- a/src/views/demo/form-design/components/VFormCreate/components/FormRender.vue +++ b/src/views/demo/form-design/components/VFormCreate/components/FormRender.vue @@ -162,12 +162,38 @@ let subTableId = ref(null); let subTableData = ref([]); let subTableList = ref([]); - if (props.formConfig.schemas) { - props.formConfig.schemas.forEach((item) => { - if (item.type === 'subTable') { - subTableId.value = item.field; - let tableData = []; - item.columns.forEach((itemColumn) => { + + // if (props.formConfig.schemas) { + // props.formConfig.schemas.forEach((item) => { + // if (item.type === 'subTable') { + // subTableId.value = item.field; + // let tableData = []; + // item.columns.forEach((itemColumn) => { + // itemColumn.children.forEach((itemColumnChild) => { + // tableData.push(itemColumnChild); + // subTableColumns.value.push({ + // key: itemColumnChild.field, + // title: itemColumnChild.label, + // dataIndex: itemColumnChild.field, + // width: 120, + // ...itemColumnChild, + // }); + // }); + // }); + // scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 }; + // subTableData.value = tableData; + // }else{ + // } + // }); + // } + + console.log("props.schema",props.schema) + + if (props.schema) { + if(props.schema.type === "subTable"){ + subTableId.value = props.schema.field + let tableData = []; + props.schema.columns.forEach((itemColumn) => { itemColumn.children.forEach((itemColumnChild) => { tableData.push(itemColumnChild); subTableColumns.value.push({ @@ -181,8 +207,7 @@ }); scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 }; subTableData.value = tableData; - } - }); + } } const addListItem = () => { @@ -201,6 +226,9 @@ const delListItem = (column, record) => { subTableList.value = subTableList.value.filter((item) => item.key != record.key); }; + + +