Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/ShiJiTianKongDiPingTai
commit
1d00158b78
|
|
@ -1,8 +1,9 @@
|
|||
import type { App } from 'vue';
|
||||
import { Button } from './Button';
|
||||
import { Input, Layout } from 'ant-design-vue';
|
||||
// import { Button } from './Button';
|
||||
// import { Input, Layout } from 'ant-design-vue';
|
||||
import VXETable from 'vxe-table';
|
||||
|
||||
export function registerGlobComp(app: App) {
|
||||
app.use(Input).use(Button).use(Layout).use(VXETable);
|
||||
// app.use(Input).use(Button).use(Layout).use(VXETable);
|
||||
app.use(VXETable);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@ import { router, setupRouter } from '@/router';
|
|||
import { setupRouterGuard } from '@/router/guard';
|
||||
import { setupStore } from '@/store';
|
||||
|
||||
import { injectState, key } from '@/mars/common/store/widget';
|
||||
import store from './mars/install/widget-store';
|
||||
|
||||
import VideoPlayer from 'vue-video-player';
|
||||
import 'vue-video-player/src/custom-theme.css';
|
||||
|
|
@ -27,8 +25,6 @@ import App from './App.vue';
|
|||
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css';
|
||||
import 'mars3d/dist/mars3d.css';
|
||||
|
||||
import MarsUIInstall from '@/mars/components/mars-ui';
|
||||
import '@/mars/components/mars-ui/common';
|
||||
|
||||
import ElementPlus from 'element-plus';
|
||||
import 'element-plus/theme-chalk/index.css';
|
||||
|
|
@ -81,9 +77,6 @@ async function bootstrap() {
|
|||
// https://next.router.vuejs.org/api/#isready
|
||||
// await router.isReady();
|
||||
|
||||
// 注册Mars3d UI组件
|
||||
MarsUIInstall(app);
|
||||
app.use(injectState(store), key);
|
||||
app.use(ElementPlus);
|
||||
app.use(VForm3);
|
||||
app.use(VideoPlayer);
|
||||
|
|
|
|||
BIN
src/mars.rar
BIN
src/mars.rar
Binary file not shown.
|
|
@ -1,21 +0,0 @@
|
|||
root = true #表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件
|
||||
|
||||
# 匹配全部文件
|
||||
[*]
|
||||
# 缩进风格，可选"space"、"tab"
|
||||
indent_style = space
|
||||
# 缩进的空格数
|
||||
indent_size = 2
|
||||
# 结尾换行符
|
||||
end_of_line = lf
|
||||
# 设置字符集
|
||||
charset = utf-8
|
||||
# 删除一行中的前后空格
|
||||
trim_trailing_whitespace = true
|
||||
# 在文件结尾插入新行
|
||||
insert_final_newline = true
|
||||
max_line_length = 150
|
||||
|
||||
[*.md]
|
||||
# 删除一行中的前后空格
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
extends: ["plugin:vue/vue3-essential", "standard", "@vue/typescript/recommended"],
|
||||
globals: {
|
||||
defineProps: "readonly",
|
||||
defineEmits: "readonly",
|
||||
defineExpose: "readonly",
|
||||
withDefaults: "readonly"
|
||||
},
|
||||
rules: {
|
||||
"@typescript-eslint/no-explicit-any": "off", // ts：允许用any
|
||||
"@typescript-eslint/no-useless-constructor": "error", // ts：不允许使用未定位类型自动转为any
|
||||
"@typescript-eslint/no-var-requires": "off", // ts：是否允许使用var
|
||||
"@typescript-eslint/no-non-null-assertion": "off", // ts：非空赋值
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off", // ts：是否需要显式定义函数将返回什么类型
|
||||
"@typescript-eslint/ban-ts-comment": "off", // ts： 禁止ts注释
|
||||
"@typescript-eslint/no-unused-vars": "off", // ts：允许定义未引用使用的变量
|
||||
"vue/multi-word-component-names": ["error", { ignores: ["index", "App"] }], // vue：多词组件名称
|
||||
"vue/comment-directive": ["off", { reportUnusedDisableDirectives: false }], // vue：允许在标签中写 HTML 注释。
|
||||
"vue/no-deprecated-slot-attribute": "off", // 允许使用slot
|
||||
"vue/valid-v-slot": "off",
|
||||
|
||||
camelcase: "off", // 强制驼峰命名规则
|
||||
indent: "off", // 强制一致的缩进风格
|
||||
eqeqeq: "error", // 是否使用 === 替代 ==
|
||||
quotes: ["error", "double", { avoidEscape: true, allowTemplateLiterals: true }], // 使用双引号
|
||||
curly: ["error", "all"], // 强制所有控制语句使用一致的括号风格 @fixable if 后面必须要有 {，除非是单行 if
|
||||
|
||||
"padded-blocks": "off", // 块内行首行尾是否空行
|
||||
"global-require": "off", // require 必须在全局作用域下
|
||||
"comma-dangle": "error", // 强制在对象和数组文字中一致地使用尾随逗号
|
||||
"valid-jsdoc": "off", // 强制使用有效的 JSDoc 注释
|
||||
"consistent-return": "off", // 要求 return 语句要么总是指定返回的值，要么不指定
|
||||
"default-case": "off", // switch 语句强制 default 分支，也可添加 // no default 注释取消此次警告
|
||||
"block-scoped-var": "error", // 将 var 定义的变量视为块作用域，禁止在块外使用
|
||||
"guard-for-in": "off", // for in 内部必须有 hasOwnProperty
|
||||
"constructor-super": "error", // constructor 中必须有 super
|
||||
"dot-location": ["off", "property"], // @fixable 链式调用的时候，点号必须放在第二行开头处，禁止放在第一行结尾处
|
||||
"comma-style": ["error", "last"], // 控制逗号在行尾出现还是在行首出现 (默认行尾)
|
||||
"space-before-function-paren": ["off", "always"], // 函数定义时括号前的空格
|
||||
"object-curly-newline": ["error", { multiline: true, consistent: true }], // @fixable 大括号内的首尾必须有换行
|
||||
"computed-property-spacing": ["error", "never"], // "SwitchCase" (默认：0) 强制 switch 语句中的 case 子句的缩进水平
|
||||
|
||||
"no-debugger": "warn", // 是否允许debugger
|
||||
"no-console": "off", // 不允许出现console语句
|
||||
"no-var": "error", // @fixable 禁止使用 var
|
||||
"no-trailing-spaces": "off", // 一行最后不允许有空格
|
||||
"no-prototype-builtins": "off", // 是否允许使用Object.prototype
|
||||
"no-template-curly-in-string": "off", // 关闭${xxx}检测
|
||||
"no-mixed-spaces-and-tabs": "error", // 不允许混用tab和空格
|
||||
"no-new": "error", // 禁止在非赋值或条件语句中使用 new 操作符
|
||||
"no-new-wrappers": "error", // 禁止对 String，Number 和 Boolean 使用 new 操作符
|
||||
"no-self-assign": "error", // 禁止自我赋值
|
||||
"no-self-compare": "error", // 禁止自身比较
|
||||
"no-case-declarations": "error", // switch 的 case 内有变量定义的时候，必须使用大括号将 case 内变成一个代码块
|
||||
"no-extend-native": "error", // 禁止修改原生对象
|
||||
"no-extra-bind": "error", // @fixable 禁止出现没必要的 bind
|
||||
"no-extra-label": "error", // @fixable 禁止出现没必要的 label
|
||||
"no-fallthrough": "error", // switch 的 case 内必须有 break, return 或 throw
|
||||
"no-floating-decimal": "error", // @fixable 表示小数时，禁止省略 0，比如 .5
|
||||
"no-global-assign": "error", // 禁止对全局变量赋值
|
||||
"no-multi-str": "error", // 禁止使用 \ 来换行字符串
|
||||
"no-const-assign": "error", // 禁止对使用 const 定义的常量重新赋值
|
||||
"no-dupe-class-members": "error", // 禁止重复定义类
|
||||
"no-duplicate-imports": "off", // 禁止重复 import 模块
|
||||
"no-useless-constructor": "off", // 禁止出现没必要的 constructor，比如 constructor(value) { super(value) }
|
||||
"no-useless-escape": "off", // 可以使用\转义
|
||||
"no-callback-literal": "off", // 关闭eslint标准模式callback回调报错
|
||||
"no-dupe-keys": "error", // 禁止对象字面量中出现重复的 key
|
||||
"no-func-assign": "error", // 禁止对 function 声明重新赋值
|
||||
"no-nested-ternary": "error", // 禁用嵌套的三元表达式
|
||||
"no-multiple-empty-lines": ["error", { max: 3 }], // 空行最多不能超过两行
|
||||
"new-cap": "off" // 关闭eslint fromDegrees方法报错
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"useTabs": false,
|
||||
"eslintIntegration": true,
|
||||
"singleQuote": false,
|
||||
"semi": false,
|
||||
"trailingComma": "none",
|
||||
"bracketSpacing": true,
|
||||
"printWidth": 150,
|
||||
"arrowParens": "always"
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
/**
|
||||
* store 状态管理
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-02-19
|
||||
*/
|
||||
/*
|
||||
* @Author: 滕嵩
|
||||
* @Date: 2024-01-24 14:09:37
|
||||
* @LastEditors: 滕嵩
|
||||
* @LastEditTime: 2024-01-25 10:53:31
|
||||
* @FilePath: \vue-vben-admin\src\mars\common\store\test.ts
|
||||
* @Description:
|
||||
*/
|
||||
import { defineStore } from "pinia"
|
||||
import { InjectionKey } from "vue"
|
||||
|
||||
export interface Test {
|
||||
count?: number
|
||||
}
|
||||
|
||||
export const key: InjectionKey<Test> = Symbol("test")
|
||||
|
||||
export const store = defineStore({
|
||||
id: "marsTest",
|
||||
state: (): Test => ({
|
||||
count: 0,
|
||||
}),
|
||||
})
|
||||
|
|
@ -1,301 +0,0 @@
|
|||
/**
|
||||
* store 状态管理
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-02-19
|
||||
*/
|
||||
import { Store, StoreOptions, createStore, useStore } from "vuex"
|
||||
import { InjectionKey, computed, nextTick, onUnmounted, inject } from "vue"
|
||||
import { v4 as uuidV4 } from "uuid"
|
||||
|
||||
// 为 store state 声明类型
|
||||
export interface DefaultOption {
|
||||
autoDisable?: boolean
|
||||
disableOther?: boolean | string[]
|
||||
group?: string // group相同的widget一定是互斥的
|
||||
meta?: any // 额外参数 不会在每次关闭后清除
|
||||
}
|
||||
|
||||
export interface Widget {
|
||||
name: string // 唯一标识
|
||||
key?: string // 作为vue diff 环节的key，用于控制组件重载
|
||||
component?: any // widget关联的异步组件
|
||||
autoDisable?: boolean // 是否能够被自动关闭
|
||||
disableOther?: boolean | string[] // 是否自动关闭其他widget,或通过数组指定需要被关闭的widget
|
||||
group?: string // group相同的widget一定是互斥的
|
||||
visible?: boolean // 显示隐藏
|
||||
data?: any // 额外传参 会在每次关闭后清除
|
||||
meta?: any // 额外参数 不会在每次关闭后清除
|
||||
}
|
||||
|
||||
export interface WidgetState {
|
||||
widgets: Widget[] // widget具体配置
|
||||
openAtStart: string[] // 默认加载的widget
|
||||
defaultOption?: DefaultOption // 支持配置默认参数
|
||||
}
|
||||
|
||||
export let key: InjectionKey<Store<WidgetState>> = Symbol("widget")
|
||||
|
||||
|
||||
/**
|
||||
* 初始化状态
|
||||
* @param {StoreOptions<WidgetState>} options
|
||||
* @return {Store<WidgetState>} 公共状态
|
||||
*/
|
||||
export const injectState = (options: StoreOptions<WidgetState>): Store<WidgetState> => {
|
||||
key = Symbol("widget")
|
||||
if (typeof options.state === "function") {
|
||||
options.state = (options.state() || {}) as WidgetState
|
||||
}
|
||||
const defaultOption = {
|
||||
autoDisable: true,
|
||||
disableOther: false,
|
||||
...options.state.defaultOption
|
||||
}
|
||||
const openAtStart = options.state?.openAtStart
|
||||
if (!options) {
|
||||
throw new Error("injectState 参数不能为空")
|
||||
} else {
|
||||
const widgets = options.state?.widgets.map((item) => {
|
||||
return {
|
||||
visible: openAtStart?.includes(item.name),
|
||||
...defaultOption,
|
||||
...item,
|
||||
meta: {
|
||||
...defaultOption.meta,
|
||||
...item.meta
|
||||
},
|
||||
key: uuidV4()
|
||||
}
|
||||
})
|
||||
options.state!.widgets = widgets!
|
||||
}
|
||||
return createStore<WidgetState>({
|
||||
state: {
|
||||
widgets: [],
|
||||
openAtStart: [],
|
||||
...options.state,
|
||||
defaultOption
|
||||
},
|
||||
getters: {
|
||||
...options.getters
|
||||
},
|
||||
mutations: {
|
||||
addAlive(state, value: string) {
|
||||
if (!state.openAtStart.includes(value)) {
|
||||
state.openAtStart.push(value)
|
||||
}
|
||||
},
|
||||
...options.mutations
|
||||
},
|
||||
actions: {
|
||||
activate({ commit, state, dispatch }, widget: any) {
|
||||
const value = typeof widget === "string" ? widget : widget.name
|
||||
|
||||
const pannel = state.widgets.find((item) => item.name === value)
|
||||
if (!pannel) {
|
||||
console.log("widget不存在", widget)
|
||||
return
|
||||
}
|
||||
|
||||
if (pannel.visible && widget.reload) {
|
||||
// 重载组件
|
||||
pannel.visible = false
|
||||
pannel.key = uuidV4()
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
if (typeof widget === "object" && widget !== null && widget.data) {
|
||||
pannel.data = widget.data
|
||||
}
|
||||
pannel.visible = true
|
||||
})
|
||||
|
||||
// 处理其他面板的显示隐藏
|
||||
state.widgets.forEach((item) => {
|
||||
if (pannel.name !== item.name) {
|
||||
// 默认关闭同组
|
||||
if (pannel.group && item.group === pannel.group) {
|
||||
item.visible = false
|
||||
}
|
||||
// 关闭非同组需要关闭的面板
|
||||
if (Array.isArray(pannel.disableOther)) {
|
||||
pannel.disableOther.forEach((item: string) => {
|
||||
dispatch("disable", item)
|
||||
})
|
||||
} else if (pannel.disableOther && item.autoDisable) {
|
||||
item.visible = false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (!state.openAtStart.includes(value)) {
|
||||
commit("addAlive", value)
|
||||
}
|
||||
},
|
||||
disable({ state }, widget: string) {
|
||||
const value = widget
|
||||
const pannel = state.widgets.find((item, i) => {
|
||||
if (item.name === value) {
|
||||
delete state.widgets[i].data
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
// 显示面板
|
||||
if (pannel) {
|
||||
pannel.visible = false
|
||||
}
|
||||
},
|
||||
disableAll({ state }, hasAll: boolean) {
|
||||
state.widgets.forEach((item: Widget) => {
|
||||
if (item.visible && (hasAll || item.autoDisable)) {
|
||||
item.visible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
...options.actions
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
type EventCb = (...args: any[]) => void
|
||||
class Event {
|
||||
private _cache: Record<string, EventCb[]> = {}
|
||||
// 绑定
|
||||
on(type: string, callback: EventCb) {
|
||||
const fns = (this._cache[type] = this._cache[type] || [])
|
||||
if (fns.indexOf(callback) === -1) {
|
||||
fns.push(callback)
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
emit(type: string, ...args: any[]) {
|
||||
const fns = this._cache[type]
|
||||
if (Array.isArray(fns)) {
|
||||
fns.forEach((fn) => {
|
||||
fn(...args)
|
||||
})
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
off(type: string, callback: EventCb) {
|
||||
const fns = this._cache[type]
|
||||
if (Array.isArray(fns)) {
|
||||
if (callback) {
|
||||
const index = fns.indexOf(callback)
|
||||
if (index !== -1) {
|
||||
fns.splice(index, 1)
|
||||
}
|
||||
} else {
|
||||
// 全部清空
|
||||
fns.length = 0
|
||||
}
|
||||
}
|
||||
return this
|
||||
}
|
||||
}
|
||||
const widgetEvent = new Event()
|
||||
|
||||
export function useWidgetStore() {
|
||||
const store = useStore(key)
|
||||
return store
|
||||
}
|
||||
|
||||
export function useWidget() {
|
||||
const store = useStore(key)
|
||||
|
||||
const getCurrentWidget = inject<() => string>("getCurrentWidget")
|
||||
let currentWidget: any
|
||||
if (getCurrentWidget) {
|
||||
const widegtName = getCurrentWidget()
|
||||
|
||||
currentWidget = {
|
||||
...store.state.widgets.find((item: any) => item.name === widegtName),
|
||||
onUpdate(callback: EventCb) {
|
||||
if (currentWidget) {
|
||||
widgetEvent.on(currentWidget.name, callback)
|
||||
}
|
||||
onUnmounted(() => {
|
||||
if (currentWidget) {
|
||||
widgetEvent.off(currentWidget.name, callback)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
currentWidget,
|
||||
// 获取指定的widget
|
||||
getWidget: (name: string) => {
|
||||
const widget = store.state.widgets.find((item: any) => item.name === name)
|
||||
if (!widget) {
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
...widget,
|
||||
onUpdate(callback: EventCb) {
|
||||
if (widget) {
|
||||
widgetEvent.on(widget.name, callback)
|
||||
}
|
||||
onUnmounted(() => {
|
||||
widgetEvent.off(widget.name, callback)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
setVisible(name: string, visible: boolean) {
|
||||
const widget = store.state.widgets.find((item: any) => item.name === name)
|
||||
widget.visible = visible
|
||||
},
|
||||
// 出发对应widget的onUpdate
|
||||
updateWidget(name: string, ...args: any[]) {
|
||||
widgetEvent.emit(name, ...args)
|
||||
},
|
||||
// 获取widget的当前激活状态
|
||||
isActivate: (name: string) => {
|
||||
const widget = store.state.widgets.find((item: any) => item.name === name)
|
||||
return widget ? widget.visible : false
|
||||
},
|
||||
// 激活指定 widget模块
|
||||
activate: (option: string | Widget | (string | Widget)[], reload = true) => {
|
||||
let widgets: (string | Widget)[] = []
|
||||
if (!Array.isArray(option)) {
|
||||
widgets.push(option)
|
||||
} else {
|
||||
widgets = option
|
||||
}
|
||||
console.log("widgets111111", widgets)
|
||||
widgets.forEach((widget) => {
|
||||
let params: any
|
||||
if (typeof widget === "string") {
|
||||
params = { reload, name: widget }
|
||||
} else {
|
||||
params = { reload, ...widget }
|
||||
}
|
||||
store.dispatch("activate", params)
|
||||
})
|
||||
},
|
||||
// 释放指定的widget
|
||||
disable: (option: string | string[]) => {
|
||||
let widgets: (string | Widget)[] = []
|
||||
if (!Array.isArray(option)) {
|
||||
widgets.push(option)
|
||||
} else {
|
||||
widgets = option
|
||||
}
|
||||
|
||||
widgets.forEach((widget) => {
|
||||
store.dispatch("disable", widget)
|
||||
})
|
||||
},
|
||||
// 关闭释放所有widget ，hasAll传true值强制释放所有widget(默认autoDisable为false的widet不会释放)
|
||||
disableAll: (hasAll = false) => {
|
||||
store.dispatch("disableAll", hasAll)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/**
|
||||
* 组件中开启 map.ts 生命周期
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-02-19
|
||||
*/
|
||||
import { inject, onBeforeMount, onBeforeUnmount } from "vue"
|
||||
|
||||
export default function useLifecycle(mapWork: any): void {
|
||||
const getMapInstance = inject<any>("getMapInstance")
|
||||
onBeforeMount(() => {
|
||||
if (mapWork.onMounted) {
|
||||
const map = getMapInstance()
|
||||
mapWork.onMounted(map)
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
if (mapWork.onUnmounted) {
|
||||
mapWork.onUnmounted()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
<template>
|
||||
<mars-dialog :visible="true" right="10" bottom="60" width="230" >
|
||||
<a-form>
|
||||
<a-row :gutter="[0, 8]">
|
||||
<a-col :span="12">总长度:</a-col>
|
||||
<a-col :span="12">{{ formState.td_alllength }}</a-col>
|
||||
|
||||
<a-col :span="12">已漫游长度:</a-col>
|
||||
<a-col :span="12">{{ formState.td_length }}</a-col>
|
||||
|
||||
<a-col :span="12">总时长:</a-col>
|
||||
<a-col :span="12">{{ formState.td_alltimes }}</a-col>
|
||||
|
||||
<a-col :span="12">已漫游时间:</a-col>
|
||||
<a-col :span="12">{{ formState.td_times }}</a-col>
|
||||
|
||||
<a-col :span="12">经度:</a-col>
|
||||
<a-col :span="12">{{ formState.td_jd }}</a-col>
|
||||
|
||||
<a-col :span="12">纬度:</a-col>
|
||||
<a-col :span="12">{{ formState.td_wd }}</a-col>
|
||||
|
||||
<a-col :span="12">漫游高程:</a-col>
|
||||
<a-col :span="12">{{ formState.td_gd }}</a-col>
|
||||
<a-progress :percent="formState.percent" size="small" color="#fff" />
|
||||
</a-row>
|
||||
</a-form>
|
||||
</mars-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 公共组件：飞行漫游路线公共面板
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
import { onMounted, reactive } from "vue"
|
||||
import type { UnwrapRef } from "vue"
|
||||
|
||||
interface FormState {
|
||||
td_alllength: string
|
||||
td_length: string
|
||||
td_alltimes: string
|
||||
td_times: string
|
||||
td_jd: string
|
||||
td_wd: string
|
||||
td_gd: string
|
||||
percent: number
|
||||
}
|
||||
|
||||
// mapWork是map.js内定义的所有对象， 在项目中使用时可以改为import方式使用: import * as mapWork from './map.js'
|
||||
const mapWork = window.mapWork
|
||||
// const mars3d = mapWork.mars3d
|
||||
// const Cesium = mapWork.Cesium
|
||||
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
td_alllength: "",
|
||||
td_length: "",
|
||||
td_alltimes: "",
|
||||
td_times: "",
|
||||
td_jd: "",
|
||||
td_wd: "",
|
||||
td_gd: "",
|
||||
percent: 0
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (mapWork.fixedRoute?.info) {
|
||||
showInfo(mapWork.fixedRoute.info)
|
||||
}
|
||||
mapWork.eventTarget.on("roamLineChange", (item: any) => {
|
||||
showInfo(item)
|
||||
})
|
||||
})
|
||||
|
||||
function showInfo(item: any) {
|
||||
let val = Math.ceil((item.distance * 100) / item.distance_all)
|
||||
if (val < 1) {
|
||||
val = 0
|
||||
}
|
||||
if (val > 100) {
|
||||
val = 100
|
||||
}
|
||||
formState.percent = val
|
||||
|
||||
formState.td_jd = item.point?.lng
|
||||
formState.td_wd = item.point?.lat
|
||||
formState.td_gd = mapWork.formatDistance(item.point?.alt)
|
||||
formState.td_times = mapWork.formatTime(item.second)
|
||||
formState.td_alltimes = mapWork.formatTime(item.second_all)
|
||||
formState.td_length = mapWork.formatDistance(item.distance) || "0米"
|
||||
formState.td_alllength = mapWork.formatDistance(item.distance_all)
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
:deep(.info-view) {
|
||||
width: 200px;
|
||||
top: auto !important;
|
||||
bottom: 60px;
|
||||
overflow-y: hidden;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-progress-text) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,881 +0,0 @@
|
|||
<template>
|
||||
<div class="f-mb">
|
||||
<a-space>
|
||||
<span class="mars-pannel-item-label">图层状态:</span>
|
||||
<a-checkbox v-model:checked="formState.enabledShowHide" @change="onChangeShow" title="显示隐藏状态">显示</a-checkbox>
|
||||
|
||||
<span v-if="formState.enabledOpacity" class="mars-pannel-item-label" title="不是所有矢量数据均支持修改全局透明度">透明度:</span>
|
||||
<mars-slider v-if="formState.enabledOpacity" v-model:value="formState.opacity" :min="0.0" :max="1.0" :step="0.1" @change="onOpacityChange" />
|
||||
|
||||
<mars-button @click="onClickFlyTo" title="视角定位" size="small" shape="round">
|
||||
<mars-icon icon="aiming" class="icon-vertical-a" />
|
||||
定位
|
||||
</mars-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="f-mb" v-if="props.interaction">
|
||||
<a-space>
|
||||
<span class="mars-pannel-item-label">图层交互:</span>
|
||||
<a-checkbox v-model:checked="formState.enabledPopup" @change="onChangePopup" title="是否绑定Popup鼠标单击弹窗">单击Popup</a-checkbox>
|
||||
<a-checkbox v-model:checked="formState.enabledTooltip" @change="onChangeTooltip" title="是否绑定Tooltip鼠标移入弹窗">移入Tooltip</a-checkbox>
|
||||
<a-checkbox v-model:checked="formState.enabledRightMenu" @change="onChangeRightMenu" title="是否绑定右键菜单">右键菜单</a-checkbox>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="f-mb" v-if="props.enabledDraw">
|
||||
<a-space>
|
||||
<span class="mars-pannel-item-label">数据维护:</span>
|
||||
<mars-button v-if="!formState.isDrawing" @click="onClickStartDraw">{{ props.drawLabel1 }}</mars-button>
|
||||
<mars-button v-if="props.drawLabel2 && !formState.isDrawing" @click="onClickStartDraw2">{{ props.drawLabel2 }}</mars-button>
|
||||
<mars-button v-if="formState.isDrawing" @click="onClickClearDrawing">取消绘制</mars-button>
|
||||
|
||||
<a-checkbox
|
||||
v-if="props.interaction && formState.enabledEdit"
|
||||
v-model:checked="formState.hasEdit"
|
||||
@change="onChangeHasEdit"
|
||||
title="是否单击进行编辑状态"
|
||||
>是否编辑</a-checkbox
|
||||
>
|
||||
|
||||
<a-checkbox v-if="enabledTable" v-model:checked="formState.hasTable" title="显示图层内所有矢量数据列表">显示列表</a-checkbox>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="f-mb">
|
||||
<a-space>
|
||||
<span>数据测试:</span>
|
||||
<mars-input-number :min="1" :max="1000000" v-model:value="formState.count" step="1"></mars-input-number>条
|
||||
<mars-button @click="addRandomGraphicByCount">生成</mars-button>
|
||||
<mars-button @click="onClickClear">
|
||||
<mars-icon icon="delete" class="icon-vertical-a" />
|
||||
清除
|
||||
</mars-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="f-mb">
|
||||
<a-space>
|
||||
<span class="mars-pannel-item-label">数据导出:</span>
|
||||
|
||||
<a-upload
|
||||
:multiple="false"
|
||||
name="file"
|
||||
accept=".json,.geojson"
|
||||
:file-list="fileList"
|
||||
:showUploadList="false"
|
||||
:supportServerRender="true"
|
||||
:beforeUpload="() => false"
|
||||
@change="onClickImpFile"
|
||||
>
|
||||
<mars-button title="打开GeoJSON">
|
||||
<mars-icon icon="folder-open" class="icon-vertical-a" />
|
||||
打开
|
||||
</mars-button>
|
||||
</a-upload>
|
||||
|
||||
<mars-button @click="expGeoJSONFile" title="保存GeoJSON">
|
||||
<mars-icon icon="save-one" class="icon-vertical-a" />
|
||||
导出GeoJSON
|
||||
</mars-button>
|
||||
|
||||
<mars-button @click="expJSONFile" title="导出构造参数Json"> 导出构造JSON </mars-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="f-mb data-list">
|
||||
<mars-table
|
||||
size="small"
|
||||
v-if="enabledTable && formState.hasTable"
|
||||
:pagination="{ pageSize: currentPage }"
|
||||
:customRow="graphicCustomRowObj"
|
||||
:row-selection="graphicRowSelection"
|
||||
:dataSource="graphicDataList"
|
||||
:columns="graphicColumns"
|
||||
:scroll="{ x: 400, y: 400 }"
|
||||
@change="pageSizeChange"
|
||||
bordered
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'caozuo'">
|
||||
<a-space>
|
||||
<mars-icon title="修改矢量数据样式" icon="editor" class="icon-vertical-a" @click.stop="startEditGraphic(record)" />
|
||||
<mars-icon title="删除矢量数据" icon="delete" class="icon-vertical-a" @click.stop="deleteGraphic(record)" />
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ record.name }}
|
||||
</template>
|
||||
</template>
|
||||
</mars-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
/**
|
||||
* 公共组件：封装矢量图层操作
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
import { ref, reactive, onMounted, markRaw } from "vue"
|
||||
import type { UnwrapRef } from "vue"
|
||||
import { $alert, $message, $showLoading, $hideLoading } from "@/mars/components/mars-ui/index"
|
||||
import { useWidget } from "@/mars/widgets/common/store/widget"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
interaction?: boolean // 是否可以鼠标拾取和交互
|
||||
enabledDraw?: boolean // 是否可以绘制
|
||||
enabledTable?: boolean // 是否显示表格
|
||||
drawLabel1?: string // 绘制按钮 文本
|
||||
drawLabel2?: string // 绘制按钮2 文本
|
||||
defaultCount?: number // 默认的数据量
|
||||
customEditor?: string
|
||||
}>(),
|
||||
{
|
||||
interaction: true,
|
||||
enabledDraw: true,
|
||||
enabledTable: true,
|
||||
drawLabel1: "图上标绘",
|
||||
drawLabel2: undefined,
|
||||
defaultCount: 100,
|
||||
customEditor: ""
|
||||
}
|
||||
)
|
||||
|
||||
interface FormState {
|
||||
enabledShowHide: boolean
|
||||
enabledPopup: boolean
|
||||
enabledTooltip: boolean
|
||||
enabledRightMenu: boolean
|
||||
enabledOpacity: boolean
|
||||
opacity: number
|
||||
enabledEdit: boolean
|
||||
hasEdit: boolean
|
||||
hasTable: boolean
|
||||
count: number
|
||||
isDrawing: boolean
|
||||
}
|
||||
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
enabledShowHide: true,
|
||||
enabledPopup: true,
|
||||
enabledTooltip: false,
|
||||
enabledRightMenu: false,
|
||||
enabledOpacity: true,
|
||||
opacity: 1,
|
||||
enabledEdit: true,
|
||||
hasEdit: false,
|
||||
hasTable: false,
|
||||
count: props.defaultCount,
|
||||
isDrawing: false
|
||||
})
|
||||
|
||||
const currentPage = ref(5) // 分页查询每页条数
|
||||
|
||||
// mapWork是map.js内定义的所有对象， 在项目中使用时可以改为import方式使用: import * as mapWork from './map.js'
|
||||
const mapWork = window.mapWork
|
||||
const mars3d = mapWork.mars3d
|
||||
|
||||
defineExpose({
|
||||
addTableData(graphicLayer) {
|
||||
console.log("addTableData", graphicLayer)
|
||||
|
||||
graphicDataList.value = []
|
||||
rowKeys.value = []
|
||||
|
||||
const list = graphicLayer.graphics
|
||||
for (let i = list.length - 1; i >= 0; i--) {
|
||||
const graphic = list[i]
|
||||
if (graphic.isPrivate) {
|
||||
continue
|
||||
}
|
||||
graphicDataList.value.push({
|
||||
key: graphic.id,
|
||||
name: getGraphicName(graphic)
|
||||
})
|
||||
if (graphic.show) {
|
||||
rowKeys.value.push(graphic.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 恢复默认状态
|
||||
if (mapWork.eventTarget) {
|
||||
mapWork.eventTarget.on("defuatData", (item: any) => {
|
||||
formState.opacity = 1.0
|
||||
formState.enabledShowHide = item.enabledShowHide
|
||||
formState.enabledPopup = item.enabledPopup
|
||||
formState.enabledTooltip = item.enabledTooltip
|
||||
formState.enabledRightMenu = item.enabledRightMenu
|
||||
})
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const layer = getManagerLayer()
|
||||
if (layer) {
|
||||
formState.enabledShowHide = layer.show
|
||||
formState.enabledPopup = layer.hasPopup()
|
||||
formState.enabledTooltip = layer.hasTooltip()
|
||||
formState.enabledRightMenu = layer.hasContextMenu()
|
||||
|
||||
const graphics = layer.getGraphics()
|
||||
|
||||
if (graphics.length > 0) {
|
||||
const lastgraphic = graphics[graphics.length - 1]
|
||||
formState.enabledOpacity = lastgraphic.hasOpacity
|
||||
formState.enabledEdit = lastgraphic.hasEdit
|
||||
}
|
||||
|
||||
formState.hasTable = graphics.length > 0
|
||||
|
||||
layer.on([mars3d.EventType.drawCreated, mars3d.EventType.addGraphic, mars3d.EventType.removeGraphic], function (e) {
|
||||
formState.isDrawing = layer.isDrawing
|
||||
})
|
||||
}
|
||||
}, 500)
|
||||
})
|
||||
|
||||
// 获取map.js中定义的需要管理的图层
|
||||
function getManagerLayer() {
|
||||
if (mapWork.getManagerLayer) {
|
||||
return mapWork.getManagerLayer()
|
||||
}
|
||||
return mapWork.graphicLayer
|
||||
}
|
||||
|
||||
// 分页查询每页条数
|
||||
const pageSizeChange = (pagination) => {
|
||||
currentPage.value = pagination.pageSize
|
||||
}
|
||||
|
||||
// 是否编辑
|
||||
const onChangeHasEdit = () => {
|
||||
const layer = getManagerLayer()
|
||||
layer.hasEdit = formState.hasEdit
|
||||
|
||||
// 编辑时，为了方便操作自动关闭Popup，真实项目中请按需修改
|
||||
formState.enabledPopup = !formState.hasEdit
|
||||
onChangePopup()
|
||||
}
|
||||
|
||||
// 调整透明度
|
||||
const onOpacityChange = () => {
|
||||
const layer = getManagerLayer()
|
||||
layer.opacity = formState.opacity
|
||||
}
|
||||
|
||||
// 生成大数据
|
||||
const addRandomGraphicByCount = () => {
|
||||
$showLoading()
|
||||
const startTime = new Date().getTime()
|
||||
|
||||
const result = mapWork.addRandomGraphicByCount(formState.count)
|
||||
|
||||
$hideLoading()
|
||||
const endTime = new Date().getTime()
|
||||
const usedTime = (endTime - startTime) / 1000 // 两个时间戳相差的毫秒数
|
||||
$message(`生成${result || formState.count}条数据，共耗时${usedTime.toFixed(2)}秒`)
|
||||
|
||||
const layer = getManagerLayer()
|
||||
initGraphicableData(layer)
|
||||
layer.flyTo({ duration: 0, heading: 0, pitch: -40, scale: 1.2 })
|
||||
}
|
||||
|
||||
const onClickFlyTo = () => {
|
||||
const layer = getManagerLayer()
|
||||
layer.flyTo({ scale: 1.2 })
|
||||
}
|
||||
|
||||
const onClickStartDraw = () => {
|
||||
if (props.customEditor) {
|
||||
emit("onStopEditor")
|
||||
} else {
|
||||
disable("graphic-editor")
|
||||
}
|
||||
|
||||
mapWork.startDrawGraphic()
|
||||
const layer = getManagerLayer()
|
||||
formState.isDrawing = layer?.isDrawing
|
||||
}
|
||||
const onClickStartDraw2 = () => {
|
||||
if (props.customEditor) {
|
||||
emit("onStopEditor")
|
||||
} else {
|
||||
disable("graphic-editor")
|
||||
}
|
||||
|
||||
mapWork.startDrawGraphic2()
|
||||
const layer = getManagerLayer()
|
||||
formState.isDrawing = layer?.isDrawing
|
||||
}
|
||||
const onClickClearDrawing = () => {
|
||||
const layer = getManagerLayer()
|
||||
layer.clearDrawing()
|
||||
formState.isDrawing = layer?.isDrawing
|
||||
}
|
||||
|
||||
const onChangeShow = () => {
|
||||
const layer = getManagerLayer()
|
||||
layer.show = formState.enabledShowHide
|
||||
}
|
||||
const onChangePopup = () => {
|
||||
const layer = getManagerLayer()
|
||||
if (formState.enabledPopup) {
|
||||
if (mapWork.bindLayerPopup) {
|
||||
mapWork.bindLayerPopup()
|
||||
} else {
|
||||
bindLayerPopup()
|
||||
}
|
||||
} else {
|
||||
layer.unbindPopup()
|
||||
}
|
||||
}
|
||||
|
||||
const onChangeTooltip = () => {
|
||||
const layer = getManagerLayer()
|
||||
if (formState.enabledTooltip) {
|
||||
// layer.bindTooltip("我是layer上绑定的Tooltip")
|
||||
layer.bindTooltip(
|
||||
function (event) {
|
||||
const attr = getAttrForEvent(event)
|
||||
attr["类型"] = event.graphic?.type
|
||||
attr["来源"] = "我是layer上绑定的Toolip"
|
||||
attr["备注"] = "我支持鼠标移入交互"
|
||||
|
||||
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
|
||||
},
|
||||
{ pointerEvents: false }
|
||||
)
|
||||
} else {
|
||||
layer.unbindTooltip()
|
||||
}
|
||||
}
|
||||
|
||||
const onChangeRightMenu = () => {
|
||||
const layer = getManagerLayer()
|
||||
if (formState.enabledRightMenu) {
|
||||
if (mapWork.bindLayerContextMenu) {
|
||||
mapWork.bindLayerContextMenu()
|
||||
} else {
|
||||
bindLayerContextMenu()
|
||||
}
|
||||
} else {
|
||||
layer.unbindContextMenu(true)
|
||||
}
|
||||
}
|
||||
|
||||
// 在图层绑定Popup弹窗
|
||||
function bindLayerPopup() {
|
||||
const graphicLayer = getManagerLayer()
|
||||
graphicLayer.bindPopup(
|
||||
function (event) {
|
||||
const attr = getAttrForEvent(event)
|
||||
attr["类型"] = event.graphic?.type
|
||||
attr["来源"] = "我是layer上绑定的Popup"
|
||||
attr["备注"] = "我支持鼠标交互"
|
||||
|
||||
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
|
||||
|
||||
// return new Promise((resolve) => {
|
||||
// //这里可以进行后端接口请求数据，setTimeout测试异步
|
||||
// setTimeout(() => {
|
||||
// resolve('Promise异步回调显示的弹窗内容信息')
|
||||
// }, 2000)
|
||||
// })
|
||||
},
|
||||
{ pointerEvents: true }
|
||||
)
|
||||
}
|
||||
|
||||
function getAttrForEvent(event) {
|
||||
if (event?.graphic?.attr) {
|
||||
return event.graphic.attr
|
||||
}
|
||||
if (!event.czmObject) {
|
||||
return {}
|
||||
}
|
||||
|
||||
let attr = event.czmObject._attr || event.czmObject.properties || event.czmObject.attribute
|
||||
if (attr && attr.type && attr.attr) {
|
||||
attr = attr.attr // 兼容历史数据,V2内部标绘生产的geojson
|
||||
}
|
||||
return attr ?? {}
|
||||
}
|
||||
|
||||
// 绑定右键菜单
|
||||
function bindLayerContextMenu() {
|
||||
const graphicLayer = getManagerLayer()
|
||||
|
||||
graphicLayer.bindContextMenu([
|
||||
{
|
||||
text: "开始编辑对象",
|
||||
icon: "fa fa-edit",
|
||||
show: function (e) {
|
||||
const graphic = e.graphic
|
||||
if (!graphic || !graphic.hasEdit) {
|
||||
return false
|
||||
}
|
||||
return !graphic.isEditing
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return false
|
||||
}
|
||||
if (graphic) {
|
||||
graphicLayer.startEditing(graphic)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "停止编辑对象",
|
||||
icon: "fa fa-edit",
|
||||
show: function (e) {
|
||||
const graphic = e.graphic
|
||||
if (!graphic || !graphic.hasEdit) {
|
||||
return false
|
||||
}
|
||||
return graphic.isEditing
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return false
|
||||
}
|
||||
if (graphic) {
|
||||
graphic.stopEditing()
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "删除对象",
|
||||
icon: "fa fa-trash-o",
|
||||
show: (event) => {
|
||||
const graphic = event.graphic
|
||||
if (!graphic || graphic.isDestroy) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return
|
||||
}
|
||||
const parent = graphic.parent // 右击是编辑点时
|
||||
graphicLayer.removeGraphic(graphic)
|
||||
if (parent) {
|
||||
graphicLayer.removeGraphic(parent)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "计算长度",
|
||||
icon: "fa fa-medium",
|
||||
show: function (e) {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
graphic.type === "polyline" ||
|
||||
graphic.type === "polylineP" ||
|
||||
graphic.type === "curve" ||
|
||||
graphic.type === "curveP" ||
|
||||
graphic.type === "polylineVolume" ||
|
||||
graphic.type === "polylineVolumeP" ||
|
||||
graphic.type === "corridor" ||
|
||||
graphic.type === "corridorP" ||
|
||||
graphic.type === "wall" ||
|
||||
graphic.type === "wallP"
|
||||
)
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
|
||||
$alert("该对象的长度为:" + strDis)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "计算周长",
|
||||
icon: "fa fa-medium",
|
||||
show: function (e) {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
graphic.type === "circle" ||
|
||||
graphic.type === "circleP" ||
|
||||
graphic.type === "rectangle" ||
|
||||
graphic.type === "rectangleP" ||
|
||||
graphic.type === "polygon" ||
|
||||
graphic.type === "polygonP"
|
||||
)
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
|
||||
$alert("该对象的周长为:" + strDis)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "计算面积",
|
||||
icon: "fa fa-reorder",
|
||||
show: function (e) {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
graphic.type === "circle" ||
|
||||
graphic.type === "circleP" ||
|
||||
graphic.type === "rectangle" ||
|
||||
graphic.type === "rectangleP" ||
|
||||
((graphic.type === "polygon" ||
|
||||
graphic.type === "polygonP" ||
|
||||
graphic.type === "wall" ||
|
||||
graphic.type === "scrollWall" ||
|
||||
graphic.type === "water") &&
|
||||
graphic.positionsShow?.length > 2)
|
||||
)
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
const strArea = mars3d.MeasureUtil.formatArea(graphic.area)
|
||||
$alert("该对象的面积为:" + strArea)
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
// 清除数据
|
||||
const onClickClear = () => {
|
||||
const layer = getManagerLayer()
|
||||
|
||||
layer.enabledEvent = false // 关闭事件，大数据removeGraphic时效率低
|
||||
layer.clear()
|
||||
if (mapWork.clear) {
|
||||
mapWork.clear()
|
||||
}
|
||||
layer.enabledEvent = true
|
||||
|
||||
formState.isDrawing = false
|
||||
|
||||
// 清除列表
|
||||
graphicDataList.value = []
|
||||
rowKeys.value = []
|
||||
if (props.customEditor) {
|
||||
emit("onStopEditor")
|
||||
} else {
|
||||
disable("graphic-editor")
|
||||
}
|
||||
}
|
||||
// 保存json
|
||||
const expJSONFile = () => {
|
||||
const graphicLayer = getManagerLayer()
|
||||
|
||||
if (graphicLayer.length === 0) {
|
||||
$message("当前没有标注任何数据，无需保存！")
|
||||
return
|
||||
}
|
||||
const geojson = graphicLayer.toJSON()
|
||||
mars3d.Util.downloadFile("矢量数据构造参数.json", JSON.stringify(geojson))
|
||||
}
|
||||
// 保存geojson
|
||||
const expGeoJSONFile = () => {
|
||||
const graphicLayer = getManagerLayer()
|
||||
|
||||
if (graphicLayer.length === 0) {
|
||||
$message("当前没有标注任何数据，无需保存！")
|
||||
return
|
||||
}
|
||||
const geojson = graphicLayer.toGeoJSON()
|
||||
mars3d.Util.downloadFile("矢量数据GeoJSON.json", JSON.stringify(geojson))
|
||||
}
|
||||
// 打开geojson
|
||||
const onClickImpFile = (info: any) => {
|
||||
const graphicLayer = getManagerLayer()
|
||||
|
||||
const item = info.file
|
||||
const fileName = item.name
|
||||
const fileType = fileName?.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase()
|
||||
|
||||
if (fileType === "json" || fileType === "geojson") {
|
||||
const reader = new FileReader()
|
||||
reader.readAsText(item, "UTF-8")
|
||||
reader.onloadend = function (e) {
|
||||
const geojson = JSON.parse(this.result as string)
|
||||
console.log("打开了json文件", geojson)
|
||||
|
||||
if (geojson.type === "graphic" && geojson.data) {
|
||||
graphicLayer.addGraphic(geojson.data)
|
||||
graphicLayer.flyTo()
|
||||
} else {
|
||||
graphicLayer.loadGeoJSON(geojson, { flyTo: true })
|
||||
// initGraphicableData(graphicLayer)
|
||||
}
|
||||
|
||||
initGraphicableData(graphicLayer)
|
||||
}
|
||||
} else if (fileType === "kml") {
|
||||
const reader = new FileReader()
|
||||
reader.readAsText(item, "UTF-8")
|
||||
reader.onloadend = function (e) {
|
||||
const strkml = this.result
|
||||
|
||||
mapWork.kgUtil.toGeoJSON(strkml).then((geojson) => {
|
||||
console.log("kml2geojson转换结果为", geojson)
|
||||
|
||||
graphicLayer.loadGeoJSON(geojson, {
|
||||
flyTo: true
|
||||
})
|
||||
})
|
||||
}
|
||||
} else if (fileType === "kmz") {
|
||||
// 加载input文件控件的二进制流
|
||||
|
||||
mapWork.kgUtil.toGeoJSON(item).then((geojson) => {
|
||||
console.log("kmz2geojson", geojson)
|
||||
|
||||
graphicLayer.loadGeoJSON(geojson, {
|
||||
flyTo: true
|
||||
})
|
||||
})
|
||||
} else {
|
||||
$message("暂不支持 " + fileType + " 文件类型的数据！")
|
||||
}
|
||||
}
|
||||
|
||||
const fileList = ref([])
|
||||
|
||||
// 数据编辑属性面板 相关处理
|
||||
const { activate, disable, isActivate, updateWidget } = useWidget()
|
||||
onMounted(() => {
|
||||
const graphicLayer = getManagerLayer()
|
||||
|
||||
// 矢量数据创建完成
|
||||
graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
|
||||
if (formState.hasEdit || props.customEditor) {
|
||||
showEditor(e.graphic)
|
||||
}
|
||||
})
|
||||
|
||||
// 单击开始编辑
|
||||
graphicLayer.on(mars3d.EventType.editStart, (e: any) => {
|
||||
setTimeout(() => {
|
||||
// 属性面板打开时，点击其他的矢量数据，打开后会被下面的执行关闭
|
||||
showEditor(e.graphic)
|
||||
}, 150)
|
||||
})
|
||||
// 修改了矢量数据
|
||||
graphicLayer.on([mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint], function (e) {
|
||||
updateWidget("graphic-editor", {
|
||||
data: {
|
||||
graphic: markRaw(e.graphic)
|
||||
}
|
||||
})
|
||||
})
|
||||
// 停止编辑
|
||||
graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], function (e) {
|
||||
setTimeout(() => {
|
||||
if (!graphicLayer.isEditing) {
|
||||
if (props.customEditor) {
|
||||
emit("onStopEditor")
|
||||
} else {
|
||||
disable("graphic-editor")
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
let lastUUid = ""
|
||||
const showEditor = (graphic: any) => {
|
||||
if (graphic.isDestroy) {
|
||||
return
|
||||
}
|
||||
|
||||
if (props.customEditor === graphic.type) {
|
||||
disable("graphic-editor") // 关闭属性面板
|
||||
emit("onStartEditor", {
|
||||
graphicId: graphic.id,
|
||||
graphicName: getGraphicName(graphic)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
emit("onStopEditor") // 关闭参数调节面板
|
||||
|
||||
if (!graphic._conventStyleJson) {
|
||||
graphic.style = graphic.toJSON().style // 因为示例中的样式可能有复杂对象，需要转为单个json简单对象
|
||||
graphic._conventStyleJson = true // 只处理一次
|
||||
}
|
||||
|
||||
if (lastUUid !== graphic.id) {
|
||||
activate({
|
||||
name: "graphic-editor",
|
||||
data: {
|
||||
graphic: markRaw(graphic)
|
||||
}
|
||||
})
|
||||
lastUUid = graphic.id
|
||||
} else {
|
||||
lastUUid = ""
|
||||
}
|
||||
}
|
||||
|
||||
// 数据列表
|
||||
interface GraphicTableItem {
|
||||
key: number
|
||||
name: string
|
||||
}
|
||||
const graphicDataList = ref<GraphicTableItem[]>([])
|
||||
const rowKeys = ref<number[]>([]) // 勾选的row
|
||||
|
||||
// 列表名称
|
||||
const graphicColumns = [
|
||||
{
|
||||
title: "名称",
|
||||
dataIndex: "name",
|
||||
key: "name"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "caozuo",
|
||||
key: "caozuo",
|
||||
width: 60,
|
||||
align: "center"
|
||||
}
|
||||
]
|
||||
|
||||
const graphicRowSelection = {
|
||||
hideSelectAll: true,
|
||||
hideDefaultSelections: true,
|
||||
selectedRowKeys: rowKeys,
|
||||
onChange: (selectedRowKeys: number[]) => {
|
||||
rowKeys.value = selectedRowKeys // 使得点击之后选项改变
|
||||
},
|
||||
onSelect: (record: GraphicTableItem, selected: boolean) => {
|
||||
const graphicLayer = getManagerLayer()
|
||||
const graphic = graphicLayer.getGraphicById(record.key)
|
||||
if (graphic) {
|
||||
graphic.show = selected
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const graphicLayer = getManagerLayer()
|
||||
initGraphicableData(graphicLayer)
|
||||
|
||||
graphicLayer.on(mars3d.EventType.drawCreated, function (event) {
|
||||
const graphic = event.graphic
|
||||
if (graphic.isPrivate) {
|
||||
return
|
||||
}
|
||||
|
||||
graphicDataList.value.push({
|
||||
key: graphic.id,
|
||||
name: getGraphicName(graphic)
|
||||
})
|
||||
rowKeys.value.push(graphic.id)
|
||||
})
|
||||
|
||||
graphicLayer.on(mars3d.EventType.removeGraphic, function (event) {
|
||||
const graphicId = event.graphic.id
|
||||
const idx = graphicDataList.value.findIndex((item) => item.key === graphicId)
|
||||
if (idx !== -1) {
|
||||
graphicDataList.value.splice(idx, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function initGraphicableData(graphicLayer) {
|
||||
const list = graphicLayer.graphics
|
||||
for (let i = list.length - 1; i >= 0; i--) {
|
||||
const graphic = list[i]
|
||||
if (graphic.isPrivate) {
|
||||
continue
|
||||
}
|
||||
|
||||
graphicDataList.value.push({
|
||||
key: graphic.id,
|
||||
name: getGraphicName(graphic)
|
||||
})
|
||||
if (graphic.show) {
|
||||
rowKeys.value.push(graphic.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getGraphicName(graphic) {
|
||||
if (graphic.name) {
|
||||
return `${graphic.type} - ${graphic.name}`
|
||||
}
|
||||
if (graphic.attr.index) {
|
||||
return `${graphic.type} - ${graphic.attr.index}`
|
||||
}
|
||||
if (graphic.attr.remark) {
|
||||
return `${graphic.type} - ${graphic.attr.remark}`
|
||||
}
|
||||
if (graphic?.style?.label?.text && graphic.style.label.text !== "0") {
|
||||
return `${graphic.type} - ${graphic.style.label.text}`
|
||||
}
|
||||
|
||||
return `${graphic.type} - ${graphic.name || "未命名"}`
|
||||
}
|
||||
|
||||
// 表格行: 点击含，飞行定位
|
||||
const graphicCustomRowObj = (recode: any) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
const graphicLayer = getManagerLayer()
|
||||
const graphic = graphicLayer.getGraphicById(recode.key)
|
||||
graphic.flyTo()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const emit = defineEmits(["onStartEditor", "onStopEditor"])
|
||||
|
||||
// 表格行: 开始编辑graphic
|
||||
function startEditGraphic(record: GraphicTableItem) {
|
||||
const graphicLayer = getManagerLayer()
|
||||
const graphic = graphicLayer.getGraphicById(record.key)
|
||||
showEditor(graphic) // 修改style
|
||||
}
|
||||
|
||||
// 表格行: 删除graphic
|
||||
const deleteGraphic = (record: GraphicTableItem) => {
|
||||
const graphicLayer = getManagerLayer()
|
||||
const graphic = graphicLayer.getGraphicById(record.key)
|
||||
graphic && graphic.remove(true)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.mars-pannel-item-label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
width: 152px;
|
||||
}
|
||||
|
||||
:deep(.ant-slider) {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-pagination) {
|
||||
margin: 10px 0 1px !important;
|
||||
}
|
||||
|
||||
.data-list {
|
||||
width: 450px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,371 +0,0 @@
|
|||
<template>
|
||||
<a-space>
|
||||
<span class="mars-pannel-item-label" v-if="props.label !== ''">{{ props.label }}</span>
|
||||
<a-checkbox v-model:checked="formState.enabledShowHide" @change="onChangeShow" title="显示隐藏状态">显示</a-checkbox>
|
||||
<a-checkbox v-model:checked="formState.enabledPopup" @change="onChangePopup" title="是否绑定Popup鼠标单击弹窗">Popup</a-checkbox>
|
||||
<a-checkbox v-model:checked="formState.enabledTooltip" @change="onChangeTooltip" title="是否绑定Tooltip鼠标移入弹窗">Tooltip</a-checkbox>
|
||||
<a-checkbox v-model:checked="formState.enabledRightMenu" @change="onChangeRightMenu" title="是否绑定右键菜单">右键菜单</a-checkbox>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
/**
|
||||
* 公共组件：封装图层状态操作
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
import { ref, reactive, onMounted, markRaw } from "vue"
|
||||
import type { UnwrapRef } from "vue"
|
||||
import { $alert } from "@/mars/components/mars-ui/index"
|
||||
import { useWidget } from "@/mars/widgets/common/store/widget"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
label?: string
|
||||
}>(),
|
||||
{
|
||||
label: "图层状态:"
|
||||
}
|
||||
)
|
||||
|
||||
interface FormState {
|
||||
enabledShowHide: boolean
|
||||
enabledPopup: boolean
|
||||
enabledTooltip: boolean
|
||||
enabledRightMenu: boolean
|
||||
}
|
||||
|
||||
// mapWork是map.js内定义的所有对象， 在项目中使用时可以改为import方式使用: import * as mapWork from './map.js'
|
||||
const mapWork = window.mapWork
|
||||
const mars3d = mapWork.mars3d
|
||||
const Cesium = mapWork.Cesium
|
||||
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
enabledShowHide: true,
|
||||
enabledPopup: true,
|
||||
enabledTooltip: false,
|
||||
enabledRightMenu: false
|
||||
})
|
||||
|
||||
// 恢复默认状态
|
||||
|
||||
if (mapWork.eventTarget) {
|
||||
mapWork.eventTarget.on("defuatData", (item: any) => {
|
||||
formState.enabledShowHide = item.enabledShowHide
|
||||
formState.enabledPopup = item.enabledPopup
|
||||
formState.enabledTooltip = item.enabledTooltip
|
||||
formState.enabledRightMenu = item.enabledRightMenu
|
||||
})
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const layer = getManagerLayer()
|
||||
if (layer) {
|
||||
formState.enabledShowHide = layer.show
|
||||
formState.enabledPopup = layer.hasPopup()
|
||||
formState.enabledTooltip = layer.hasTooltip()
|
||||
formState.enabledRightMenu = layer.hasContextMenu()
|
||||
}
|
||||
}, 1000)
|
||||
|
||||
// 获取map.js中定义的需要管理的图层
|
||||
function getManagerLayer() {
|
||||
if (mapWork.getManagerLayer) {
|
||||
return mapWork.getManagerLayer()
|
||||
}
|
||||
return mapWork.graphicLayer
|
||||
}
|
||||
|
||||
const onChangeShow = () => {
|
||||
const layer = getManagerLayer()
|
||||
layer.show = formState.enabledShowHide
|
||||
}
|
||||
const onChangePopup = () => {
|
||||
const layer = getManagerLayer()
|
||||
|
||||
if (formState.enabledPopup) {
|
||||
if (mapWork.bindLayerPopup) {
|
||||
mapWork.bindLayerPopup()
|
||||
} else {
|
||||
bindLayerPopup()
|
||||
}
|
||||
} else {
|
||||
layer.unbindPopup()
|
||||
}
|
||||
}
|
||||
|
||||
const onChangeTooltip = () => {
|
||||
const layer = getManagerLayer()
|
||||
if (formState.enabledTooltip) {
|
||||
// layer.bindTooltip("我是layer上绑定的Tooltip")
|
||||
layer.bindTooltip(
|
||||
function (event) {
|
||||
const attr = getAttrForEvent(event)
|
||||
attr["类型"] = event.graphic?.type
|
||||
attr["来源"] = "我是layer上绑定的Toolip"
|
||||
attr["备注"] = "我支持鼠标移入交互"
|
||||
|
||||
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
|
||||
},
|
||||
{ pointerEvents: true }
|
||||
)
|
||||
} else {
|
||||
layer.unbindTooltip()
|
||||
}
|
||||
}
|
||||
|
||||
const onChangeRightMenu = () => {
|
||||
const layer = getManagerLayer()
|
||||
if (formState.enabledRightMenu) {
|
||||
if (mapWork.bindLayerContextMenu) {
|
||||
mapWork.bindLayerContextMenu()
|
||||
} else {
|
||||
bindLayerContextMenu()
|
||||
}
|
||||
} else {
|
||||
layer.unbindContextMenu(true)
|
||||
}
|
||||
}
|
||||
|
||||
// 在图层绑定Popup弹窗
|
||||
function bindLayerPopup() {
|
||||
const graphicLayer = getManagerLayer()
|
||||
graphicLayer.bindPopup(
|
||||
function (event) {
|
||||
const attr = getAttrForEvent(event)
|
||||
attr["类型"] = event.graphic?.type
|
||||
attr["来源"] = "我是layer上绑定的Popup"
|
||||
attr["备注"] = "我支持鼠标交互"
|
||||
|
||||
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
|
||||
|
||||
// return new Promise((resolve) => {
|
||||
// //这里可以进行后端接口请求数据，setTimeout测试异步
|
||||
// setTimeout(() => {
|
||||
// resolve('Promise异步回调显示的弹窗内容信息')
|
||||
// }, 2000)
|
||||
// })
|
||||
},
|
||||
{ pointerEvents: true }
|
||||
)
|
||||
}
|
||||
|
||||
function getAttrForEvent(event) {
|
||||
if (event?.graphic?.attr) {
|
||||
return event.graphic.attr
|
||||
}
|
||||
if (!event.czmObject) {
|
||||
return {}
|
||||
}
|
||||
|
||||
let attr = event.czmObject._attr || event.czmObject.properties || event.czmObject.attribute
|
||||
if (attr && attr.type && attr.attr) {
|
||||
attr = attr.attr // 兼容历史数据,V2内部标绘生产的geojson
|
||||
}
|
||||
return attr ?? {}
|
||||
}
|
||||
|
||||
// 绑定右键菜单
|
||||
function bindLayerContextMenu() {
|
||||
const graphicLayer = getManagerLayer()
|
||||
|
||||
graphicLayer.bindContextMenu([
|
||||
// {
|
||||
// text: "开始编辑对象",
|
||||
// icon: "fa fa-edit",
|
||||
// show: function (e) {
|
||||
// const graphic = e.graphic
|
||||
// if (!graphic || !graphic.hasEdit) {
|
||||
// return false
|
||||
// }
|
||||
// return !graphic.isEditing
|
||||
// },
|
||||
// callback: (e) => {
|
||||
// const graphic = e.graphic
|
||||
// if (!graphic) {
|
||||
// return false
|
||||
// }
|
||||
// if (graphic) {
|
||||
// graphicLayer.startEditing(graphic)
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// text: "停止编辑对象",
|
||||
// icon: "fa fa-edit",
|
||||
// show: function (e) {
|
||||
// const graphic = e.graphic
|
||||
// if (!graphic || !graphic.hasEdit) {
|
||||
// return false
|
||||
// }
|
||||
// return graphic.isEditing
|
||||
// },
|
||||
// callback: (e) => {
|
||||
// const graphic = e.graphic
|
||||
// if (!graphic) {
|
||||
// return false
|
||||
// }
|
||||
// if (graphic) {
|
||||
// graphic.stopEditing()
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
{
|
||||
text: "删除对象",
|
||||
icon: "fa fa-trash-o",
|
||||
show: (event) => {
|
||||
const graphic = event.graphic
|
||||
if (!graphic || graphic.isDestroy) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return
|
||||
}
|
||||
const parent = graphic.parent // 右击是编辑点时
|
||||
graphicLayer.removeGraphic(graphic)
|
||||
if (parent) {
|
||||
graphicLayer.removeGraphic(parent)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "计算长度",
|
||||
icon: "fa fa-medium",
|
||||
show: function (e) {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
graphic.type === "polyline" ||
|
||||
graphic.type === "polylineP" ||
|
||||
graphic.type === "curve" ||
|
||||
graphic.type === "curveP" ||
|
||||
graphic.type === "polylineVolume" ||
|
||||
graphic.type === "polylineVolumeP" ||
|
||||
graphic.type === "corridor" ||
|
||||
graphic.type === "corridorP" ||
|
||||
graphic.type === "wall" ||
|
||||
graphic.type === "wallP"
|
||||
)
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
|
||||
$alert("该对象的长度为:" + strDis)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "计算周长",
|
||||
icon: "fa fa-medium",
|
||||
show: function (e) {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
graphic.type === "circle" ||
|
||||
graphic.type === "circleP" ||
|
||||
graphic.type === "rectangle" ||
|
||||
graphic.type === "rectangleP" ||
|
||||
graphic.type === "polygon" ||
|
||||
graphic.type === "polygonP"
|
||||
)
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
|
||||
$alert("该对象的周长为:" + strDis)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "计算面积",
|
||||
icon: "fa fa-reorder",
|
||||
show: function (e) {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
graphic.type === "circle" ||
|
||||
graphic.type === "circleP" ||
|
||||
graphic.type === "rectangle" ||
|
||||
graphic.type === "rectangleP" ||
|
||||
((graphic.type === "polygon" ||
|
||||
graphic.type === "polygonP" ||
|
||||
graphic.type === "wall" ||
|
||||
graphic.type === "scrollWall" ||
|
||||
graphic.type === "water") &&
|
||||
graphic.positionsShow?.length > 2)
|
||||
)
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
const strArea = mars3d.MeasureUtil.formatArea(graphic.area)
|
||||
$alert("该对象的面积为:" + strArea)
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
// 数据编辑属性面板 相关处理
|
||||
const { activate, disable, isActivate, updateWidget } = useWidget()
|
||||
onMounted(async () => {
|
||||
const mars3d = window.mapWork.mars3d
|
||||
const graphicLayer = await getManagerLayer()
|
||||
// 矢量数据创建完成
|
||||
if (graphicLayer) {
|
||||
graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
|
||||
showEditor(e)
|
||||
})
|
||||
// 修改了矢量数据
|
||||
graphicLayer.on(
|
||||
[mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint],
|
||||
function (e) {
|
||||
showEditor(e)
|
||||
}
|
||||
)
|
||||
// 停止编辑
|
||||
graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], function (e) {
|
||||
setTimeout(() => {
|
||||
if (!graphicLayer.isEditing) {
|
||||
disable("graphic-editor")
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const showEditor = (e: any) => {
|
||||
const graphic = e.graphic
|
||||
if (!graphic._conventStyleJson) {
|
||||
graphic.options.style = graphic.toJSON().style // 因为示例中的样式可能有复杂对象，需要转为单个json简单对象
|
||||
graphic._conventStyleJson = true // 只处理一次
|
||||
}
|
||||
|
||||
if (!isActivate("graphic-editor")) {
|
||||
activate({
|
||||
name: "graphic-editor",
|
||||
data: {
|
||||
graphic: markRaw(graphic)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
updateWidget("graphic-editor", {
|
||||
data: {
|
||||
graphic: markRaw(graphic)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.mars-pannel-item-label {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<template>
|
||||
<mars-dialog :visible="true" right="10" bottom="40">
|
||||
<a-space>
|
||||
<mars-button @click="onClickCenterAtTerrain">定位至山区</mars-button>
|
||||
<mars-button @click="onClickCenterAtModel">定位至模型</mars-button>
|
||||
</a-space>
|
||||
</mars-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 公共组件：快捷定位
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
import { defineComponent, ref } from "vue"
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
// mapWork是map.js内定义的所有对象， 在项目中使用时可以改为import方式使用: import * as mapWork from './map.js'
|
||||
const mapWork = window.mapWork
|
||||
const mars3d = mapWork.mars3d
|
||||
const Cesium = mapWork.Cesium
|
||||
|
||||
// let modelTest
|
||||
// 定位至山区
|
||||
const onClickCenterAtTerrain = () => {
|
||||
mapWork.map.setCameraView({ lat: 30.859414, lng: 116.28709, alt: 8617, heading: 18, pitch: -28 })
|
||||
}
|
||||
|
||||
// 定位至模型
|
||||
let modelTest
|
||||
const onClickCenterAtModel = () => {
|
||||
const map = mapWork.map
|
||||
if (!modelTest) {
|
||||
modelTest = new mars3d.layer.TilesetLayer({
|
||||
url: "//data.mars3d.cn/3dtiles/qx-simiao/tileset.json",
|
||||
position: { alt: 38.8 },
|
||||
maximumScreenSpaceError: 1,
|
||||
flyTo: true
|
||||
})
|
||||
map.addLayer(modelTest)
|
||||
}
|
||||
map.setCameraView({ lat: 33.587396, lng: 119.03181, alt: 588, heading: 0, pitch: -45 })
|
||||
}
|
||||
|
||||
return {
|
||||
onClickCenterAtTerrain,
|
||||
onClickCenterAtModel
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.localBtn {
|
||||
top: auto;
|
||||
bottom: 40px;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,438 +0,0 @@
|
|||
<template>
|
||||
<div class="f-mb">
|
||||
<a-space>
|
||||
<mars-button v-if="formState.hasAddTileLayer" @click="addTileLayer">添加图层</mars-button>
|
||||
<mars-button v-if="formState.hasAddTileLayer" @click="removeTileLayer">移除图层</mars-button>
|
||||
|
||||
<a-checkbox v-model:checked="formState.showTable" title="显示图层内所有矢量数据列表">显示列表</a-checkbox>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 使用表格实现界面 -->
|
||||
<mars-table
|
||||
v-if="formState.showTable"
|
||||
:row-selection="tileLayerRowSelection"
|
||||
:dataSource="tileLayerList"
|
||||
:columns="tileLayerColumns"
|
||||
bordered
|
||||
:pagination="{ pageSize: 5 }"
|
||||
size="small"
|
||||
:customRow="tileLayerCustomRowObj"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'edit'">
|
||||
<a-space>
|
||||
<mars-icon icon="aiming" color="#f2f2f2" class="icon-vertical-a" title="飞行定位" @click.stop="flyToLayer(record)" />
|
||||
<mars-icon icon="delete" color="#f2f2f2" class="icon-vertical-a" title="删除图层" @click.stop="deleteLayer(record)" />
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</mars-table>
|
||||
|
||||
<!-- 编辑图层的面板 -->
|
||||
<div class="property-content" v-if="formState.showTable && formState.layerName">
|
||||
<h2 class="f-mb f-mt title">{{ formState.layerName }}</h2>
|
||||
|
||||
<!-- 图层状态、交互、操作的盒子 -->
|
||||
<div class="bottomBox">
|
||||
<!-- 图层状态 -->
|
||||
<div class="f-mb">
|
||||
<a-space>
|
||||
<span class="mars-pannel-item-label">状态:</span>
|
||||
<a-checkbox v-model:checked="formState.show" @change="onChangeShow" title="显示隐藏状态">显示</a-checkbox>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="f-mb">
|
||||
<mars-gui :options="options"></mars-gui>
|
||||
</div>
|
||||
|
||||
<!-- 图层交互 -->
|
||||
<div class="f-mb" v-if="props.interaction">
|
||||
<a-space>
|
||||
<span class="mars-pannel-item-label">图层交互:</span>
|
||||
<a-checkbox v-model:checked="formState.hasPopup" @change="onChangePopup" title="是否绑定Popup鼠标单击弹窗">单击Popup</a-checkbox>
|
||||
<a-checkbox v-model:checked="formState.hasHighlight" @change="onChangeHighlight" title="是否绑定单击高亮其对应矢量数据"
|
||||
>单击高亮</a-checkbox
|
||||
>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<!-- 图层操作 -->
|
||||
<!-- <div class="f-mb">
|
||||
<a-space>
|
||||
<span class="mars-pannel-item-label">图层操作:</span>
|
||||
|
||||
<mars-button @click="onClickFlyTo" title="视角定位" >
|
||||
<mars-icon icon="aiming" class="icon-vertical-a" />
|
||||
视角定位
|
||||
</mars-button>
|
||||
|
||||
<mars-button @click="removeLayer" title="删除图层">
|
||||
<mars-icon icon="delete" class="icon-vertical-a" />
|
||||
删除图层
|
||||
</mars-button>
|
||||
</a-space>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import type { GuiItem } from "@/mars/components/mars-ui/mars-gui"
|
||||
import type { UnwrapRef } from "vue"
|
||||
|
||||
// mapWork是map.js内定义的所有对象， 在项目中使用时可以改为import方式使用: import * as mapWork from './map.js'
|
||||
const mapWork = window.mapWork
|
||||
const mars3d = mapWork.mars3d
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
interaction?: boolean // 是否可以鼠标拾取和交互
|
||||
}>(),
|
||||
{
|
||||
interaction: false
|
||||
}
|
||||
)
|
||||
|
||||
interface FormState {
|
||||
show: boolean
|
||||
hasAddTileLayer: boolean
|
||||
hasPopup: boolean
|
||||
hasHighlight: boolean
|
||||
showTable: boolean // 控制列表的显示与隐藏
|
||||
layerName: string
|
||||
}
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
show: true,
|
||||
hasAddTileLayer: true,
|
||||
hasPopup: true,
|
||||
hasHighlight: true,
|
||||
showTable: true,
|
||||
layerName: ""
|
||||
})
|
||||
|
||||
// 表格相关
|
||||
interface LayerTableItem {
|
||||
key: number
|
||||
name: string
|
||||
isTile: boolean
|
||||
}
|
||||
|
||||
const tileLayerList = ref([])
|
||||
const rowKeys = ref<string[]>([])
|
||||
|
||||
const tileLayerColumns = ref([
|
||||
{
|
||||
title: "名称",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: "编辑",
|
||||
dataIndex: "edit",
|
||||
key: "edit",
|
||||
align: "center"
|
||||
}
|
||||
])
|
||||
|
||||
// 选择功能的配置
|
||||
const tileLayerRowSelection = ref({
|
||||
hideSelectAll: true,
|
||||
hideDefaultSelections: true,
|
||||
selectedRowKeys: rowKeys,
|
||||
onChange: (selectedRowKeys: string[]) => {
|
||||
rowKeys.value = selectedRowKeys
|
||||
},
|
||||
onSelect: (record: LayerTableItem, selected: boolean) => {
|
||||
const layer = map.getLayerById(record.key)
|
||||
layer.show = selected // 图层显示
|
||||
}
|
||||
})
|
||||
// 实现点击行聚焦到对应位置
|
||||
const tileLayerCustomRowObj = (record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
startEditingLayer(record)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let map
|
||||
let thisLayer: any // 选中的图层
|
||||
|
||||
onMounted(() => {
|
||||
map = mapWork.map
|
||||
|
||||
formState.hasAddTileLayer = Boolean(mapWork.addTileLayer)
|
||||
|
||||
const list = []
|
||||
const layers = map.getLayers()
|
||||
for (let i = layers.length - 1; i >= 0; i--) {
|
||||
const layer = layers[i]
|
||||
if (layer.isPrivate) {
|
||||
continue
|
||||
}
|
||||
|
||||
list.push({
|
||||
key: layer.id,
|
||||
name: `${layer.type} - ${layer.name || "未命名"}`,
|
||||
isTile: layer.isTile
|
||||
})
|
||||
}
|
||||
tileLayerList.value = list
|
||||
|
||||
console.log("当前图层列表为", list)
|
||||
|
||||
// 实现默认全部选中
|
||||
rowKeys.value = list.map((item) => item.key)
|
||||
|
||||
selectedFirst()
|
||||
|
||||
// 添加新的图层，数组中也添加数据
|
||||
map.on(mars3d.EventType.addLayer, function (event) {
|
||||
const layer = event.layer
|
||||
if (layer.isPrivate || layer.name === "POI查询") {
|
||||
return
|
||||
}
|
||||
|
||||
tileLayerList.value.push({
|
||||
key: layer.id,
|
||||
name: `${layer.type} - ${layer.name || "未命名"}`,
|
||||
isTile: layer.isTile
|
||||
})
|
||||
|
||||
// 将新添加的图层也默认选中
|
||||
rowKeys.value = tileLayerList.value.map((item) => item.key)
|
||||
|
||||
selectedFirst()
|
||||
})
|
||||
|
||||
// 删除图层
|
||||
map.on(mars3d.EventType.removeLayer, function (event) {
|
||||
const layerId = event.layer.id
|
||||
|
||||
const idx = tileLayerList.value.findIndex((item) => item.key === layerId)
|
||||
tileLayerList.value.splice(idx, 1)
|
||||
|
||||
if (thisLayer && thisLayer.id === layerId) {
|
||||
thisLayer = null
|
||||
formState.layerName = "" // 隐藏编辑面板
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function selectedFirst() {
|
||||
setTimeout(() => {
|
||||
// 选中第一个
|
||||
if (tileLayerList.value.length === 1) {
|
||||
startEditingLayer(tileLayerList.value[0])
|
||||
}
|
||||
}, 50)
|
||||
}
|
||||
|
||||
// 编辑图层面板的参数
|
||||
const options: GuiItem[] = [
|
||||
{
|
||||
type: "slider",
|
||||
field: "opacity",
|
||||
label: "透明度",
|
||||
step: 0.01,
|
||||
min: 0,
|
||||
max: 1,
|
||||
value: 1.0,
|
||||
extra: "{opacity}",
|
||||
extraWidth: 40,
|
||||
change(data) {
|
||||
setLayerOptions("opacity", data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "slider",
|
||||
field: "brightness",
|
||||
label: "亮度",
|
||||
step: 0.01,
|
||||
min: 0,
|
||||
max: 3,
|
||||
value: 1.0,
|
||||
extra: "{brightness}",
|
||||
extraWidth: 40,
|
||||
change(data) {
|
||||
setLayerOptions("brightness", data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "slider",
|
||||
field: "contrast",
|
||||
label: "对比度",
|
||||
step: 0.01,
|
||||
min: 0,
|
||||
max: 3,
|
||||
value: 1.16,
|
||||
extra: "{contrast}",
|
||||
extraWidth: 40,
|
||||
change(data) {
|
||||
setLayerOptions("contrast", data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "slider",
|
||||
field: "hue",
|
||||
label: "色彩",
|
||||
step: 0.01,
|
||||
min: 0,
|
||||
max: 3,
|
||||
value: 0.1,
|
||||
extra: "{hue}",
|
||||
extraWidth: 40,
|
||||
change(data) {
|
||||
setLayerOptions("hue", data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "slider",
|
||||
field: "saturation",
|
||||
label: "饱和度",
|
||||
step: 0.01,
|
||||
min: 0,
|
||||
max: 3,
|
||||
value: 1.0,
|
||||
extra: "{saturation}",
|
||||
extraWidth: 40,
|
||||
change(data) {
|
||||
setLayerOptions("saturation", data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "slider",
|
||||
field: "gamma",
|
||||
label: "伽马值",
|
||||
step: 0.01,
|
||||
min: 0,
|
||||
max: 3,
|
||||
value: 0.53,
|
||||
extra: "{gamma}",
|
||||
extraWidth: 40,
|
||||
change(data) {
|
||||
setLayerOptions("gamma", data)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const setLayerOptions = (attribute: string, val: number) => {
|
||||
if (thisLayer) {
|
||||
thisLayer[attribute] = val
|
||||
}
|
||||
}
|
||||
|
||||
const addTileLayer = () => {
|
||||
mapWork.addTileLayer()
|
||||
}
|
||||
|
||||
const removeTileLayer = () => {
|
||||
mapWork.removeTileLayer()
|
||||
}
|
||||
|
||||
// 表格行：点击定位图层
|
||||
const flyToLayer = (record: LayerTableItem) => {
|
||||
const layer = map.getLayerById(record.key)
|
||||
if (layer) {
|
||||
layer.flyTo()
|
||||
}
|
||||
}
|
||||
|
||||
// 表格行：点击删除图层
|
||||
const deleteLayer = (record: LayerTableItem) => {
|
||||
const layer = map.getLayerById(record.key)
|
||||
if (layer) {
|
||||
layer.remove(true)
|
||||
formState.layerName = "" // 隐藏编辑面板
|
||||
}
|
||||
}
|
||||
|
||||
// 点击显示编辑图层面板,将获取的面板数据放在新出现的面板上
|
||||
const startEditingLayer = (record: LayerTableItem) => {
|
||||
if (!record.isTile) {
|
||||
return
|
||||
}
|
||||
|
||||
formState.layerName = record.name // 获取到的对应图层的信息
|
||||
|
||||
thisLayer = map.getLayerById(record.key)
|
||||
formState.show = thisLayer.show
|
||||
}
|
||||
|
||||
// 调试显示隐藏
|
||||
const onChangeShow = () => {
|
||||
if (thisLayer) {
|
||||
thisLayer.show = formState.show
|
||||
}
|
||||
}
|
||||
|
||||
const onChangePopup = () => {
|
||||
if (!thisLayer) {
|
||||
return
|
||||
}
|
||||
if (formState.hasPopup) {
|
||||
thisLayer.bindPopup("all")
|
||||
} else {
|
||||
thisLayer.unbindPopup()
|
||||
}
|
||||
}
|
||||
|
||||
const onChangeHighlight = () => {
|
||||
if (!thisLayer) {
|
||||
return
|
||||
}
|
||||
if (formState.hasHighlight) {
|
||||
thisLayer.bindHighlight({
|
||||
clampToGround: true,
|
||||
fill: true,
|
||||
color: "#2deaf7",
|
||||
opacity: 0.6,
|
||||
outline: true,
|
||||
outlineWidth: 3,
|
||||
outlineColor: "#e000d9",
|
||||
outlineOpacity: 1.0
|
||||
})
|
||||
} else {
|
||||
thisLayer.unbindHighlight()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.imageRectangle {
|
||||
width: 337px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.iconLeft {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.showBtn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
.mars-pannel-item-label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.guiBox {
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
margin-left: -3px;
|
||||
}
|
||||
:deep(.ant-table-pagination) {
|
||||
margin: 10px 0 1px 0 !important;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 836 B |
Binary file not shown.
|
Before Width: | Height: | Size: 582 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 548 B |
Binary file not shown.
|
Before Width: | Height: | Size: 906 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 B |
Binary file not shown.
|
Before Width: | Height: | Size: 226 B |
|
|
@ -1,489 +0,0 @@
|
|||
// 提示组件背景
|
||||
.mars-msg-bg {
|
||||
color: var(--mars-msg-title-color);
|
||||
background: var(--mars-msg-content-bg);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// 提示组件标题样式
|
||||
.mars-msg-title {
|
||||
height: 41px;
|
||||
line-height: 41px;
|
||||
font-size: 18px;
|
||||
padding-left: 13px;
|
||||
color: var(--mars-alert-title-color);
|
||||
background: var(--mars-msg-title-bg);
|
||||
background-size: 10px 44px;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0;
|
||||
border-top: 1px solid var(--mars-primary-color);
|
||||
border-left: 1px solid var(--mars-primary-color);
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 70px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-top: 1px solid var(--mars-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉样式
|
||||
.mars-drop-bg {
|
||||
border-bottom: 1px solid #008aff70;
|
||||
border-left: 1px solid #008aff70;
|
||||
border-right: 1px solid #008aff70;
|
||||
box-shadow: 0px 4px 15px 1px rgba(2, 33, 59, 0.7);
|
||||
border-radius: 0px;
|
||||
background: linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) left bottom no-repeat,
|
||||
linear-gradient(to bottom, var(--mars-base-color), var(--mars-base-color)) left bottom no-repeat,
|
||||
linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) right bottom no-repeat,
|
||||
linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) right bottom no-repeat;
|
||||
background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
|
||||
background-color: var(--mars-bg-base);
|
||||
}
|
||||
|
||||
.mars-hover-bg {
|
||||
// background: var(--mars-title-active);
|
||||
background-color: var(--mars-select-bg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.mars-main-view {
|
||||
color: var(--mars-text-color);
|
||||
|
||||
// collapse 折叠面板相关样式
|
||||
.ant-collapse,
|
||||
.ant-collapse-item,
|
||||
.ant-collapse-content {
|
||||
background: none !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-collapse-content-box {
|
||||
padding: 5px 5px 10px 5px;
|
||||
}
|
||||
|
||||
.ant-collapse-header {
|
||||
background: var(--mars-collapse-title-bg);
|
||||
margin-bottom: 10px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
font-size: 18px;
|
||||
padding: 5px 15px !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.ant-collapse-content {
|
||||
color: var(--mars-base-color) !important;
|
||||
}
|
||||
|
||||
.ant-collapse-extra {
|
||||
.mars-icon {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// 切换按钮
|
||||
.ant-radio-button-wrapper {
|
||||
background: rgba(32, 160, 255, 0.2);
|
||||
color: #ffffff;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// 选中按钮
|
||||
.ant-radio-button-checked {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
// 表单元素
|
||||
.ant-form {
|
||||
color: rgba(255, 255, 255, 0.925);
|
||||
|
||||
.ant-form-item-extra {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
color: var(--mars-text-color);
|
||||
|
||||
.ant-form-item-label > label {
|
||||
font-size: 16px;
|
||||
color: var(--mars-sub-title-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item:nth-last-child(1) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.mars-ant-card {
|
||||
background: none;
|
||||
border: 1px solid var(--mars-base-border-color);
|
||||
color: var(--mars-text-color);
|
||||
|
||||
.ant-card-head {
|
||||
border-color: var(--mars-base-border-color);
|
||||
min-height: auto;
|
||||
padding: 0 10px;
|
||||
color: var(--mars-text-color);
|
||||
|
||||
.ant-card-head-title {
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 文件选择
|
||||
.ant-upload {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
// 多选
|
||||
.ant-checkbox-wrapper {
|
||||
color: var(--mars-text-color);
|
||||
|
||||
.ant-checkbox-inner {
|
||||
background-color: var(--mars-bg-base);
|
||||
border-color: var(--mars-base-border-color);
|
||||
}
|
||||
|
||||
.ant-checkbox-checked {
|
||||
background: var(--mars-primary-color);
|
||||
|
||||
.ant-checkbox-inner {
|
||||
background-color: var(--mars-primary-color);
|
||||
border-color: var(--mars-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 单选
|
||||
.ant-radio-wrapper {
|
||||
color: var(--mars-text-color);
|
||||
|
||||
.ant-radio-inner {
|
||||
background-color: var(--mars-bg-base);
|
||||
border-color: var(--mars-base-border-color);
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.ant-radio-checked {
|
||||
.ant-radio-inner {
|
||||
border-color: var(--mars-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-radio-input {
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格
|
||||
.ant-table,
|
||||
.ant-table-thead > tr > th {
|
||||
color: var(--mars-sub-title-color);
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.ant-table-sticky-holder {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ant-table-row:nth-of-type(even) {
|
||||
background-color: var(--mars-bg-base);
|
||||
}
|
||||
.ant-table-row:nth-of-type(odd) {
|
||||
background-color: var(--mars-odd-table-bg);
|
||||
}
|
||||
|
||||
.ant-table .ant-table-thead {
|
||||
background-color: var(--mars-select-bg);
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr.ant-table-placeholder > td {
|
||||
background: #141414;
|
||||
}
|
||||
|
||||
.ant-table-row:hover > td,
|
||||
.ant-table-row-selected > td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ant-table-cell {
|
||||
font-size: 16px;
|
||||
color: var(--mars-text-color);
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ant-table-container {
|
||||
border: 1px solid var(--mars-primary-color) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ant-table-placeholder > td {
|
||||
background: var(--mars-bg-base) !important;
|
||||
}
|
||||
|
||||
.ant-table-row:nth-last-child(1) .ant-table-cell {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ant-cascader-dropdown {
|
||||
padding: 0 !important;
|
||||
.mars-drop-bg();
|
||||
|
||||
.ant-cascader-menu-item {
|
||||
color: var(--mars-text-color);
|
||||
&:hover {
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item-expand-icon {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
// 标签页的标签文字颜色
|
||||
.ant-tabs-tab {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
// 分页
|
||||
.ant-pagination {
|
||||
* {
|
||||
color: var(--mars-text-color) !important;
|
||||
}
|
||||
|
||||
.ant-pagination-item,
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
background: none;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ant-pagination-simple-pager {
|
||||
input {
|
||||
background: none;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select {
|
||||
color: var(--mars-text-color);
|
||||
background-color: transparent !important;
|
||||
background: none;
|
||||
|
||||
.ant-select-selector {
|
||||
border-color: var(--mars-base-border-color) !important;
|
||||
background: none;
|
||||
background-color: transparent !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: #4db3ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
color: var(--mars-base-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-dropdown {
|
||||
padding: 0 !important;
|
||||
.mars-drop-bg();
|
||||
|
||||
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
|
||||
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
|
||||
font-weight: 700;
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
|
||||
.ant-select-item {
|
||||
transition: none;
|
||||
color: var(--mars-base-color) !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 列表
|
||||
.ant-list-items {
|
||||
* {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
.ant-list-item {
|
||||
border-bottom: 1px solid #303030;
|
||||
}
|
||||
|
||||
.ant-list-item-meta-description {
|
||||
color: hsla(0, 0%, 100%, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
// 分割线
|
||||
.ant-divider-vertical {
|
||||
border-color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
//table表格滚动条
|
||||
.ant-table-body {
|
||||
&::-webkit-scrollbar {
|
||||
//整体样式
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs {
|
||||
width: 100%;
|
||||
.ant-tabs-nav {
|
||||
margin-top: 0;
|
||||
&::before {
|
||||
border-color: var(--mars-base-border-color);
|
||||
}
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
color: var(--mars-base-color) !important;
|
||||
}
|
||||
|
||||
.ant-tabs-nav-wrap {
|
||||
line-height: 1;
|
||||
}
|
||||
&.ant-tabs-card {
|
||||
.ant-tabs-nav .ant-tabs-tab-active {
|
||||
background: #20a0ff33 !important;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
background: #20a0ff33 !important;
|
||||
border-color: var(--mars-base-border-color);
|
||||
}
|
||||
}
|
||||
.ant-tabs-tab-active {
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mars-cascader-dropdown {
|
||||
padding: 0 !important;
|
||||
background-color: var(--mars-select-bg) !important;
|
||||
.mars-drop-bg();
|
||||
|
||||
.ant-cascader-menu-item {
|
||||
color: var(--mars-text-color);
|
||||
&:hover {
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item-expand-icon {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉选择
|
||||
.mars-select-dropdown {
|
||||
padding: 0 !important;
|
||||
color: var(--mars-text-color) !important;
|
||||
.mars-drop-bg();
|
||||
|
||||
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
|
||||
font-weight: 700;
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
.ant-select-item {
|
||||
transition: none;
|
||||
color: var(--mars-text-color) !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item {
|
||||
color: var(--mars-text-color);
|
||||
&:hover {
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
|
||||
background: var(--mars-list-active);
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item-expand-icon {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条
|
||||
::-webkit-scrollbar-button {
|
||||
height: 0;
|
||||
width: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--mars-scrollbar-track);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 4px;
|
||||
background: var(--mars-scrollbar-thumb);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
background-color: var(--mars-scrollbar-thumb);
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
const doc = document.documentElement
|
||||
doc.dataset.theme = "dark"
|
||||
|
|
@ -1,437 +0,0 @@
|
|||
/**
|
||||
* 通用 class
|
||||
*
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-01-01
|
||||
*/
|
||||
|
||||
//TODO 注释掉，不然后导致首页登录框长度过长
|
||||
// .w-full {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
.f-pt {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.f-mt {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.f-mb {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.f-ml {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.f-mr {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.f-ib {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.f-cb::after,
|
||||
.f-cbli li::after {
|
||||
content: ".";
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.f-cb,
|
||||
.f-cbli li {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.f-dn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.f-db {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.f-fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.f-fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.f-pr {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.f-prz {
|
||||
position: relative;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.f-oh {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.f-ff0 {
|
||||
font-family: arial, "\5b8b\4f53";
|
||||
}
|
||||
|
||||
.f-ff1 {
|
||||
font-family: "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", arial, "\5b8b\4f53";
|
||||
}
|
||||
|
||||
.f-fs12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.f-fs14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.f-fs16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.f-fs18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.f-fwn {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.f-fwb {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.f-tal {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.f-tac {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.f-tar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.f-taj {
|
||||
text-align: justify;
|
||||
text-justify: inter-ideograph;
|
||||
}
|
||||
|
||||
.f-vam,
|
||||
.f-vama * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.f-wsn {
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.f-pre {
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.f-wwb {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.f-ti {
|
||||
overflow: hidden;
|
||||
text-indent: -30000px;
|
||||
}
|
||||
|
||||
.f-ti2 {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.f-lhn {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.f-tdu,
|
||||
.f-tdu:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.f-tdn,
|
||||
.f-tdn:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.f-toe {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.f-csp {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.f-csd {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.f-csh {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.f-csm {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.f-usn {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.f-push-5-b {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.f-push-5-t {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.f-push-5-r {
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
.f-push-5-l {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
.f-push-10-b {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.f-push-10-t {
|
||||
margin-top: 10px !important;
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
.f-push-10-r {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.f-push-10-l {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
.f-push-15-b {
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.f-push-15-t {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
.f-push-15-r {
|
||||
margin-right: 15px !important;
|
||||
}
|
||||
|
||||
.f-push-15-l {
|
||||
margin-left: 15px !important;
|
||||
}
|
||||
|
||||
.f-push-20-b {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.f-push-20-t {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
.f-push-20-r {
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
|
||||
.f-push-20-l {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
|
||||
.f-push-30-b {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.f-push-30-t {
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
|
||||
.f-push-30-r {
|
||||
margin-right: 30px !important;
|
||||
}
|
||||
|
||||
.f-push-30-l {
|
||||
margin-left: 30px !important;
|
||||
}
|
||||
|
||||
.f-push-40-b {
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.f-push-40-t {
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
|
||||
.f-push-40-r {
|
||||
margin-right: 40px !important;
|
||||
}
|
||||
|
||||
.f-push-40-l {
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
|
||||
.f-push-50-b {
|
||||
margin-bottom: 50px !important;
|
||||
}
|
||||
|
||||
.f-push-50-t {
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
|
||||
.f-push-50-r {
|
||||
margin-right: 50px !important;
|
||||
}
|
||||
|
||||
.f-push-50-l {
|
||||
margin-left: 50px !important;
|
||||
}
|
||||
|
||||
.f-pdg-5-b {
|
||||
padding-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.f-pdg-5-t {
|
||||
padding-top: 5px !important;
|
||||
}
|
||||
|
||||
.f-pdg-5-r {
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
|
||||
.f-pdg-5-l {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
|
||||
.f-pdg-10-b {
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.f-pdg-10-t {
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
.f-pdg-10-r {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.f-pdg-10-l {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
.f-pdg-15-b {
|
||||
padding-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.f-pdg-15-t {
|
||||
padding-top: 15px !important;
|
||||
}
|
||||
|
||||
.f-pdg-15-r {
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
|
||||
.f-pdg-15-l {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
|
||||
.f-pdg-20-b {
|
||||
padding-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.f-pdg-20-t {
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
|
||||
.f-pdg-20-r {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
.f-pdg-20-l {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
.f-pdg-30-b {
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.f-pdg-30-t {
|
||||
padding-top: 30px !important;
|
||||
}
|
||||
|
||||
.f-pdg-30-r {
|
||||
padding-right: 30px !important;
|
||||
}
|
||||
|
||||
.f-pdg-30-l {
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
|
||||
.f-pdg-40-b {
|
||||
padding-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.f-pdg-40-t {
|
||||
padding-top: 40px !important;
|
||||
}
|
||||
|
||||
.f-pdg-40-r {
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
|
||||
.f-pdg-40-l {
|
||||
padding-left: 40px !important;
|
||||
}
|
||||
|
||||
.f-pdg-50-b {
|
||||
padding-bottom: 50px !important;
|
||||
}
|
||||
|
||||
.f-pdg-50-t {
|
||||
padding-top: 50px !important;
|
||||
}
|
||||
|
||||
.f-pdg-50-r {
|
||||
padding-right: 50px !important;
|
||||
}
|
||||
|
||||
.f-pdg-50-l {
|
||||
padding-left: 50px !important;
|
||||
}
|
||||
|
||||
.pad-none {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.mars-pannel-item-label {
|
||||
display: block;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
/**
|
||||
* 所有页面全局公共CSS
|
||||
*
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-01-01
|
||||
*/
|
||||
|
||||
/* 清除内外边距 */
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
p,
|
||||
blockquote,
|
||||
/* structural elements 结构元素 */
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
/* list elements 列表元素 */
|
||||
pre,
|
||||
/* text formatting elements 文本格式元素 */
|
||||
fieldset,
|
||||
lengend,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
/* form elements 表单元素 */
|
||||
th,
|
||||
td {
|
||||
/* table elements 表格元素 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#root,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
background-color: var(--mars-bg-base) !important;
|
||||
// color: var(--mars-base-color) !important;
|
||||
font-size: 14px;
|
||||
// min-width: 900px;
|
||||
overflow: hidden;
|
||||
|
||||
* {
|
||||
scrollbar-base-color: #f4f7fc;
|
||||
scrollbar-track-color: #f4f7fc;
|
||||
scrollbar-face-color: #797979;
|
||||
scrollbar-arrow-color: #f4f7fc;
|
||||
scrollbar-shadow-color: #f4f7fc;
|
||||
scrollbar-3dlight-color: #f4f7fc;
|
||||
scrollbar-highlight-color: #f4f7fc;
|
||||
scrollbar-darkshadow-color: #f4f7fc;
|
||||
font-size: 14px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
}
|
||||
|
||||
.mars-primary-table {
|
||||
width: 100%;
|
||||
border-color: var(--mars-base-border-color);
|
||||
|
||||
tr td:nth-of-type(1) {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 5px;
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
/**
|
||||
* 统一导出公共组件, 按需初始化ant-design-vue
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
import { App } from "vue"
|
||||
import MarsSelect from "./mars-select/index.vue"
|
||||
import MarsButton from "./mars-button/index.vue"
|
||||
import MarsInput from "./mars-input/index.vue"
|
||||
import MarsTextarea from "./mars-textarea/index.vue"
|
||||
import MarsInputNumber from "./mars-input-number/index.vue"
|
||||
import MarsInputGroup from "./mars-input-group/index.vue"
|
||||
import MarsDatePicker from "./mars-date-picker/index.vue"
|
||||
import MarsRangePicker from "./mars-range-picker/index.vue"
|
||||
import MarsColorPicker from "./mars-color-picker"
|
||||
import MarsColor from "./mars-color/index.vue"
|
||||
import MarsIcon from "./mars-icon/index.vue"
|
||||
import MarsSwitch from "./mars-switch/index.vue"
|
||||
import MarsDialog from "./mars-dialog/index.vue"
|
||||
import MarsSlider from "./mars-slider/index.vue"
|
||||
import MarsDropDown from "./mars-dropdown"
|
||||
import MarsGui from "./mars-gui/index.vue"
|
||||
import MarsTable from "./mars-table/index.vue"
|
||||
|
||||
import MarsMessage, { $message as marsMessage } from "./mars-message"
|
||||
import MarsAlert, { $alert as marsAlert } from "./mars-alert/"
|
||||
import MarsNotify, { $notify as marsNotify } from "./mars-notify"
|
||||
import MarsLoading, { $hideLoading as marsHideLoading, $showLoading as marsShowLoading } from "./mars-loading"
|
||||
import MarsTree from "./mars-tree"
|
||||
import {
|
||||
AutoComplete,
|
||||
Button,
|
||||
Cascader,
|
||||
Checkbox,
|
||||
Col,
|
||||
Collapse,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
DatePicker,
|
||||
Select,
|
||||
List,
|
||||
Menu,
|
||||
Modal,
|
||||
PageHeader,
|
||||
Popover,
|
||||
Progress,
|
||||
Pagination,
|
||||
Radio,
|
||||
Row,
|
||||
Slider,
|
||||
Space,
|
||||
Spin,
|
||||
Switch,
|
||||
Table,
|
||||
Tabs,
|
||||
Tooltip,
|
||||
Tree,
|
||||
Typography,
|
||||
Upload,
|
||||
Card,
|
||||
Image,
|
||||
Empty
|
||||
} from "ant-design-vue"
|
||||
|
||||
import "./mars-echarts"
|
||||
import "./themes"
|
||||
import "./index.less"
|
||||
import "./function.less"
|
||||
|
||||
export const $alert = marsAlert
|
||||
export const $notify = marsNotify
|
||||
export const $message = marsMessage
|
||||
export const $hideLoading = marsHideLoading
|
||||
export const $showLoading = marsShowLoading
|
||||
|
||||
const components = [
|
||||
MarsSelect,
|
||||
MarsButton,
|
||||
MarsInput,
|
||||
MarsInputGroup,
|
||||
MarsInputNumber,
|
||||
MarsDatePicker,
|
||||
MarsRangePicker,
|
||||
MarsColorPicker,
|
||||
MarsTree,
|
||||
MarsDropDown,
|
||||
MarsIcon,
|
||||
MarsDialog,
|
||||
MarsTextarea,
|
||||
MarsSwitch,
|
||||
MarsSlider,
|
||||
MarsGui,
|
||||
MarsTable,
|
||||
MarsColor
|
||||
]
|
||||
|
||||
let marsUIConfig: Record<string, any>
|
||||
|
||||
export const getConfig = () => {
|
||||
return marsUIConfig
|
||||
}
|
||||
|
||||
export default function (app: App, config: Record<string, any> = {}): App {
|
||||
marsUIConfig = config
|
||||
app.use(AutoComplete)
|
||||
app.use(Row)
|
||||
app.use(Cascader)
|
||||
app.use(Col)
|
||||
app.use(Collapse)
|
||||
app.use(Button)
|
||||
app.use(Select)
|
||||
app.use(List)
|
||||
app.use(Form)
|
||||
app.use(Input)
|
||||
app.use(InputNumber)
|
||||
app.use(DatePicker)
|
||||
app.use(Dropdown)
|
||||
app.use(Checkbox)
|
||||
app.use(Radio)
|
||||
app.use(Switch)
|
||||
app.use(Space)
|
||||
app.use(Slider)
|
||||
app.use(Table)
|
||||
app.use(Tree)
|
||||
app.use(Upload)
|
||||
app.use(Progress)
|
||||
app.use(PageHeader)
|
||||
app.use(Menu)
|
||||
app.use(Popover)
|
||||
app.use(Spin)
|
||||
app.use(Modal)
|
||||
app.use(Typography)
|
||||
app.use(Tabs)
|
||||
app.use(Tooltip)
|
||||
app.use(Divider)
|
||||
app.use(Card)
|
||||
app.use(Image)
|
||||
app.use(Pagination)
|
||||
app.use(Table)
|
||||
app.use(Empty)
|
||||
|
||||
components.forEach((comp) => {
|
||||
app.component(comp.name, comp)
|
||||
})
|
||||
MarsMessage(app)
|
||||
MarsAlert(app)
|
||||
MarsNotify(app)
|
||||
MarsLoading(app)
|
||||
return app
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
/**
|
||||
* 所有页面全局公共CSS
|
||||
*
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-01-01
|
||||
*/
|
||||
/* 清除内外边距 */
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
p,
|
||||
blockquote,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
pre,
|
||||
fieldset,
|
||||
lengend,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
th,
|
||||
td {
|
||||
/* table elements 表格元素 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-user-select: none;
|
||||
/*火狐*/
|
||||
-webkit-user-select: none;
|
||||
/*webkit浏览器*/
|
||||
-ms-user-select: none;
|
||||
/*IE10*/
|
||||
-khtml-user-select: none;
|
||||
/*早期浏览器*/
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
}
|
||||
#root,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
background-color: var(--mars-bg-base) !important;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
body *,
|
||||
html * {
|
||||
scrollbar-base-color: #f4f7fc;
|
||||
scrollbar-track-color: #f4f7fc;
|
||||
scrollbar-face-color: #797979;
|
||||
scrollbar-arrow-color: #f4f7fc;
|
||||
scrollbar-shadow-color: #f4f7fc;
|
||||
scrollbar-3dlight-color: #f4f7fc;
|
||||
scrollbar-highlight-color: #f4f7fc;
|
||||
scrollbar-darkshadow-color: #f4f7fc;
|
||||
font-size: 14px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.mars-primary-table {
|
||||
width: 100%;
|
||||
border-color: var(--mars-base-border-color);
|
||||
}
|
||||
.mars-primary-table tr td:nth-of-type(1) {
|
||||
width: 100px;
|
||||
}
|
||||
.mars-primary-table td {
|
||||
padding: 5px;
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
// alert
|
||||
.mars-global-alert {
|
||||
.ant-modal-confirm-title {
|
||||
.mars-msg-title();
|
||||
}
|
||||
|
||||
.ant-modal-confirm-content {
|
||||
margin: 0;
|
||||
padding: 10px 14px;
|
||||
color: var(--mars-msg-title-color);
|
||||
font-size: 16px;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.ant-modal-confirm-btns {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
||||
.ant-btn {
|
||||
border: none;
|
||||
background: var(--mars-primary-color);
|
||||
background-color: var(--mars-primary-color);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
padding-bottom: 10px;
|
||||
background-color: transparent;
|
||||
.mars-msg-bg();
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
* {
|
||||
color: #4db3ff !important;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { Modal } from "ant-design-vue"
|
||||
import { App } from "vue"
|
||||
import "./alert.less"
|
||||
|
||||
/**
|
||||
* alert弹窗
|
||||
* @export
|
||||
* @param {App} app vue实例
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
* @returns { void }
|
||||
*/
|
||||
export const $alert = (content: any, title = "提示", type: keyof typeof Modal = "info") => {
|
||||
if (Modal[type] && typeof Modal[type] === "function") {
|
||||
return new Promise((resolve, reject) => {
|
||||
const func = Modal[type] as (a: any) => any
|
||||
func({
|
||||
title,
|
||||
content,
|
||||
icon: null,
|
||||
okType: "default",
|
||||
okText: "确定",
|
||||
class: "mars-global-alert",
|
||||
onOk() {
|
||||
resolve(true)
|
||||
},
|
||||
onCancel() {
|
||||
reject(new Error("用户取消"))
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return Promise!.reject()
|
||||
}
|
||||
}
|
||||
export default function (app: App): void {
|
||||
app.config.globalProperties.$alert = $alert
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<template>
|
||||
<a-button class="mars-button" v-bind="attrs">
|
||||
<template v-for="(comp, name) in slots" :key="name" v-slot:[name]>
|
||||
<component :is="comp" />
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, useSlots, defineComponent } from "vue"
|
||||
export default defineComponent({
|
||||
name: "mars-button",
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
return {
|
||||
attrs,
|
||||
slots
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 按钮
|
||||
.mars-button {
|
||||
font-size: 14px;
|
||||
background: var(--mars-primary-half-color);
|
||||
border: none;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #ffffff;
|
||||
:deep(.mars-icon) {
|
||||
font-size: 18px !important;
|
||||
line-height: 18px;
|
||||
vertical-align: middle !important;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
.mars-button:not([disabled]) {
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
border-color: #89bceb;
|
||||
background: var(--mars-hover-btn-bg);
|
||||
}
|
||||
&:focus {
|
||||
color: #ffffff;
|
||||
border-color: #89bceb;
|
||||
background: var(--mars-click-btn-bg);
|
||||
}
|
||||
}
|
||||
.ant-btn:disabled {
|
||||
color: var(--mars-text-color);
|
||||
background: var(--mars-disable-btn-bg);
|
||||
&:hover {
|
||||
background: var(--mars-disable-btn-bg);
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.ant-btn-link {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
padding: 0;
|
||||
height: initial;
|
||||
}
|
||||
/* 小型 单击按钮 */
|
||||
.small-btn {
|
||||
padding: 4px 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
import { Popover } from "ant-design-vue"
|
||||
import { ColorPicker } from "vue-color-kit"
|
||||
import MarsButton from "../mars-button/index.vue"
|
||||
import { App, defineComponent, h, ref } from "vue"
|
||||
import "./mars-color-picker.less"
|
||||
|
||||
/**
|
||||
* 颜色选择器
|
||||
*
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
const MarsColorPicker = defineComponent({
|
||||
name: "mars-color-picker",
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: "rgba(255,255,255,1)"
|
||||
},
|
||||
hiddenAlpha: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ["update:value", "change"],
|
||||
setup(props, context) {
|
||||
let pointColor = props.value || ""
|
||||
const visible = ref(false)
|
||||
let colorObject: any = null
|
||||
|
||||
console.log("传递过来的", props.hiddenAlpha)
|
||||
|
||||
|
||||
const changeColor = (color: any) => {
|
||||
pointColor = `rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`// color.hex
|
||||
colorObject = color
|
||||
}
|
||||
const cancel = () => {
|
||||
visible.value = false
|
||||
pointColor = props.value
|
||||
}
|
||||
const choose = () => {
|
||||
visible.value = false
|
||||
context.emit("update:value", pointColor)
|
||||
context.emit("change", colorObject)
|
||||
}
|
||||
|
||||
const Buttons = [
|
||||
h(
|
||||
MarsButton,
|
||||
{ size: "small", onClick: choose },
|
||||
{
|
||||
default: () => "确定"
|
||||
}
|
||||
),
|
||||
h(
|
||||
MarsButton,
|
||||
{ size: "small", class: "ml5", onClick: cancel },
|
||||
{
|
||||
default: () => "取消"
|
||||
}
|
||||
)
|
||||
]
|
||||
|
||||
const content = [
|
||||
h(ColorPicker, { suckerHide: true, color: pointColor, onChangeColor: changeColor } as any /* TODO 强制给any类型 */),
|
||||
h("div", { class: "f-tac" }, Buttons)
|
||||
]
|
||||
|
||||
return () =>
|
||||
h(
|
||||
Popover,
|
||||
{
|
||||
trigger: "click",
|
||||
placement: "right",
|
||||
overlayClassName: props.hiddenAlpha ? "overlayClassName" : "", // 打开的面板样式,隐藏透明度面板
|
||||
// overlayClassName: "overlayClassName", // 打开的面板样式,隐藏透明度面板
|
||||
visible: visible.value,
|
||||
"onUpdate:visible": (v: boolean) => {
|
||||
visible.value = v
|
||||
},
|
||||
color: "rgba(32, 42, 68, 0.9)"
|
||||
},
|
||||
{
|
||||
default: () => h("div", { class: "marsColorView", style: { backgroundColor: props.value } }),
|
||||
content: () => h("div", null, content)
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export function install(app: App): App {
|
||||
app.component(MarsColorPicker.name, MarsColorPicker)
|
||||
return app
|
||||
}
|
||||
export default MarsColorPicker
|
||||
|
|
@ -1,224 +0,0 @@
|
|||
/**
|
||||
* 颜色选择器
|
||||
*
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
|
||||
.hu-color-picker {
|
||||
padding: 10px;
|
||||
background: var(--mars-bg-base);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hu-color-picker {
|
||||
width: 220px !important;
|
||||
background-color: var(--mars-bg-base) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.hu-color-picker.light {
|
||||
background: #f7f8f9;
|
||||
}
|
||||
|
||||
.hu-color-picker.light .color-show .sucker {
|
||||
background: #eceef0;
|
||||
}
|
||||
|
||||
.hu-color-picker.light .color-type .name {
|
||||
background: #e7e8e9;
|
||||
}
|
||||
|
||||
.hu-color-picker.light .color-type .value {
|
||||
color: #666;
|
||||
background: #eceef0;
|
||||
}
|
||||
|
||||
.hu-color-picker.light .colors.history {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.hu-color-picker canvas {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.hu-color-picker .color-set {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hu-color-picker .color-show {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.saturation {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.saturation .slide {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.color-alpha {
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-alpha .slide {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sucker {
|
||||
width: 30px;
|
||||
fill: #9099a4;
|
||||
background: #2e333a;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.sucker.active,
|
||||
.sucker:hover {
|
||||
fill: #1593ff;
|
||||
}
|
||||
|
||||
.hue {
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hue .slide {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.colors {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.colors.history {
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #2e333a;
|
||||
}
|
||||
|
||||
.colors .item {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 10px 0 0 10px;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
transition: all 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.colors .item:nth-child(8n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.colors .item:hover {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
.colors .item .alpha {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.colors .item .color {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.color-type {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.color-type .name {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
background: #252930;
|
||||
}
|
||||
|
||||
.color-type .value {
|
||||
flex: 1;
|
||||
height: 30px;
|
||||
min-width: 100px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
background: #2e333a;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.marsColorView {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.overlayClassName {
|
||||
.color-alpha {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hue {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.hu-color-picker {
|
||||
.color-type {
|
||||
&:nth-last-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// .color-show {
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<div class="mars-color" :style="{ backgroundColor: props.value }">
|
||||
<input type="color" :onchange="changeColor" v-model="props.value" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue"
|
||||
|
||||
export default defineComponent({
|
||||
name: "mars-color",
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: "#FFFFFF"
|
||||
}
|
||||
},
|
||||
emits: ["update:value", "change"],
|
||||
setup(props, context) {
|
||||
const changeColor = (e: any) => {
|
||||
context.emit("change", e.target.value)
|
||||
}
|
||||
return {
|
||||
props,
|
||||
changeColor
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars-color {
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
outline: none !important;
|
||||
border: 0px !important;
|
||||
opacity: 0;
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<template>
|
||||
<a-date-picker :locale="locale" :dayjs="dayjs" class="mars-date-picker" dropdownClassName="mars-datepicker-dropdown" v-bind="attrs">
|
||||
<template v-for="(comp, name) in slots" :key="name" v-slot:[name]>
|
||||
<component :is="comp" />
|
||||
</template>
|
||||
</a-date-picker>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, useSlots, defineComponent } from "vue"
|
||||
import dayjs from "dayjs"
|
||||
import "dayjs/locale/zh-cn"
|
||||
import locale from "ant-design-vue/es/date-picker/locale/zh_CN"
|
||||
export default defineComponent({
|
||||
name: "mars-date-picker",
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
return {
|
||||
attrs,
|
||||
slots,
|
||||
dayjs,
|
||||
locale
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars-date-picker {
|
||||
color: var(--mars-text-color);
|
||||
border-color: var(--mars-base-border-color) !important;
|
||||
background-color: transparent !important;
|
||||
&:hover {
|
||||
border-color: var(--mars-primary-color) !important;
|
||||
}
|
||||
|
||||
:deep(.ant-picker-input) {
|
||||
input {
|
||||
color: var(--mars-base-color) !important;
|
||||
}
|
||||
}
|
||||
:deep(.ant-picker-clear) {
|
||||
background: var(--mars-bg-base);
|
||||
color: var(--mars-base-color) !important;
|
||||
}
|
||||
:deep(.ant-picker-suffix *) {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.mars-datepicker-dropdown {
|
||||
.ant-picker-panel-container {
|
||||
.mars-drop-bg();
|
||||
}
|
||||
*,
|
||||
.ant-picker-content th {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
.ant-picker-footer {
|
||||
border: none;
|
||||
}
|
||||
.ant-picker-cell {
|
||||
&:hover,
|
||||
&.ant-picker-cell-selected {
|
||||
.ant-picker-cell-inner {
|
||||
background-color: var(--mars-primary-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-picker-time-panel-cell {
|
||||
.ant-picker-time-panel-cell-inner {
|
||||
color: var(--mars-base-color) !important;
|
||||
}
|
||||
&:hover,
|
||||
&.ant-picker-time-panel-cell-selected {
|
||||
background-color: var(--mars-primary-color) !important;
|
||||
.ant-picker-time-panel-cell-inner {
|
||||
background-color: var(--mars-primary-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,804 +0,0 @@
|
|||
<template>
|
||||
<teleport :to="mergeProps.warpper">
|
||||
<div class="mars-dialog-thumb" v-show="isFold && show" ref="thumbnailRef" @click="toogleFold(false)">
|
||||
<mars-icon :icon="mergeProps.thumbnail.icon" :width="20" color="#FFFFFF"></mars-icon>
|
||||
</div>
|
||||
<div
|
||||
class="mars-dialog"
|
||||
:class="[customClass, animationClass]"
|
||||
:style="{ 'padding-top': showHeader ? '44px' : '10px', 'padding-bottom': slots.footer ? '44px' : '10px' }"
|
||||
ref="dialogRef"
|
||||
v-show="visible && !isFold && show"
|
||||
>
|
||||
<div v-if="showHeader" class="mars-dialog__header" :style="{ cursor: mergeProps.draggable ? 'move' : 'auto' }" @mousedown="dragStart">
|
||||
<mars-icon v-if="mergeProps.icon" :icon="mergeProps.icon" :width="18" color="#41A8FF" class="icon"></mars-icon>
|
||||
<slot v-if="slots.title" name="title"></slot>
|
||||
<span v-else class="title">{{ mergeProps.title }}</span>
|
||||
<mars-icon v-if="mergeProps.closeable && mergeProps.closeButton" icon="close" :width="18" class="close-btn" @click="close"></mars-icon>
|
||||
</div>
|
||||
<mars-icon
|
||||
v-else-if="mergeProps.closeable && mergeProps.closeButton"
|
||||
icon="close-one"
|
||||
:width="18"
|
||||
class="close-btn__flot"
|
||||
@click="close"
|
||||
></mars-icon>
|
||||
|
||||
<div class="mars-dialog__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<div v-if="slots.footer" class="mars-dialog__footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="handle in actualHandles"
|
||||
:key="handle"
|
||||
class="mars-dialog__handle"
|
||||
:class="['handle-' + handle]"
|
||||
@mousedown="resizeStart(handle, $event)"
|
||||
></div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
/**
|
||||
* dialog弹框
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-02-19
|
||||
*/
|
||||
import { computed, onMounted, onUnmounted, ref, useSlots, nextTick } from "vue"
|
||||
|
||||
const globalConfig: Record<string, any> = {}
|
||||
|
||||
interface Position {
|
||||
left?: number | string // 定位 left值
|
||||
right?: number | string // 定位right值
|
||||
top?: number | string // 定位top值
|
||||
bottom?: number | string // 定位bottom值
|
||||
}
|
||||
|
||||
interface Props {
|
||||
warpper?: string // 容器id 默认是app，将作为定位的参照元素，一般不需要修改
|
||||
title?: string // 弹框标题
|
||||
visible?: boolean // 是否启用
|
||||
show?: boolean // 弹窗是否默认显示
|
||||
|
||||
draggable?: boolean // 是否可拖拽
|
||||
|
||||
closeable?: boolean // 是否可关闭
|
||||
closeButton?: boolean // 是否显示关闭按钮
|
||||
|
||||
animation?: string | boolean // 是否开启开场动画，或开场动画的class名
|
||||
|
||||
width?: number | string // 初始宽度
|
||||
height?: number | string // 初始高度
|
||||
|
||||
left?: number | string // 定位 left值
|
||||
right?: number | string // 定位right值
|
||||
top?: number | string // 定位top值
|
||||
bottom?: number | string // 定位bottom值
|
||||
position?: Position // 统一设置位置属性，优先级高于 left right top bottom
|
||||
|
||||
handles?: boolean | string // 缩放控制器
|
||||
minWidth?: number // 最小宽度
|
||||
minHeight?: number // 最小高度
|
||||
maxWidth?: number // 最大宽度
|
||||
maxHeight?: number // 最大高度
|
||||
zIndex?: number // 层级
|
||||
|
||||
icon?: string
|
||||
|
||||
customClass?: string // 自定义class
|
||||
|
||||
defaultFold?: boolean // 是否折叠
|
||||
thumbnail?: {
|
||||
left?: number | string // 定位 left值
|
||||
right?: number | string // 定位right值
|
||||
top?: number | string // 定位top值
|
||||
bottom?: number | string // 定位bottom值
|
||||
icon?: string
|
||||
} // 折叠状态下的配置
|
||||
|
||||
beforeClose?: () => Promise<any> | boolean | void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
visible: false,
|
||||
show: true,
|
||||
closeable: false,
|
||||
closeButton: true,
|
||||
draggable: true,
|
||||
animation: true,
|
||||
handles: false,
|
||||
defaultFold: false,
|
||||
minWidth: 100,
|
||||
minHeight: 100,
|
||||
maxWidth: 100000,
|
||||
maxHeight: 1000,
|
||||
zIndex: 900
|
||||
})
|
||||
|
||||
const emits = defineEmits(["update:visible", "resize", "move", "closed"])
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
const mergeProps = computed(() => {
|
||||
const newProps: Record<string, any> = {}
|
||||
|
||||
for (const k in props) {
|
||||
if (props[k] === undefined) {
|
||||
newProps[k] = globalConfig[k]
|
||||
} else {
|
||||
newProps[k] = props[k]
|
||||
}
|
||||
}
|
||||
|
||||
if (!props.warpper) {
|
||||
newProps.warpper = globalConfig.warpper || "#mars-main-view"
|
||||
}
|
||||
|
||||
if (newProps.position) {
|
||||
newProps.left = newProps.position.left
|
||||
newProps.right = newProps.position.right
|
||||
newProps.top = newProps.position.top
|
||||
newProps.bottom = newProps.position.bottom
|
||||
}
|
||||
|
||||
// 缩略图
|
||||
newProps.thumbnail = newProps.thumbnail ?? {}
|
||||
newProps.thumbnail.left = newProps.thumbnail.left ?? newProps.left ?? 10
|
||||
newProps.thumbnail.right = newProps.thumbnail.right ?? newProps.right
|
||||
newProps.thumbnail.top = newProps.thumbnail.top ?? newProps.top ?? 10
|
||||
newProps.thumbnail.bottom = newProps.thumbnail.bottom ?? newProps.bottom
|
||||
newProps.thumbnail.icon = newProps.thumbnail.icon ?? newProps.icon ?? "left-expand"
|
||||
|
||||
if (!isAllowValue(newProps.left) && !isAllowValue(newProps.right)) {
|
||||
// left right 都不存在时默认出现在左侧
|
||||
newProps.left = 10
|
||||
}
|
||||
if (!isAllowValue(newProps.top) && !isAllowValue(newProps.bottom)) {
|
||||
// top bottom 都不存在时默认出现在顶部
|
||||
newProps.top = 10
|
||||
}
|
||||
|
||||
if (isAllowValue(newProps.closeable) && (slots.title || isAllowValue(newProps.title) || isAllowValue(newProps.icon) || newProps.draggable)) {
|
||||
newProps.closeable = true
|
||||
}
|
||||
|
||||
if (newProps.draggable) {
|
||||
newProps.handles = true
|
||||
}
|
||||
|
||||
return newProps
|
||||
})
|
||||
|
||||
const showHeader = computed(
|
||||
() => slots.title || isAllowValue(mergeProps.value.icon) || isAllowValue(mergeProps.value.title) || mergeProps.value.draggable
|
||||
)
|
||||
|
||||
const dialogRef = ref()
|
||||
const thumbnailRef = ref()
|
||||
let warpperEle = null
|
||||
|
||||
let observeDialog = false // 控制是否自动监听
|
||||
let hasUserSet = false // 控制是否自动监听
|
||||
|
||||
// 处理折叠
|
||||
const isFold = ref(mergeProps.value.defaultFold)
|
||||
|
||||
defineExpose({
|
||||
expend() {
|
||||
toogleFold(false)
|
||||
},
|
||||
fold() {
|
||||
toogleFold(true)
|
||||
},
|
||||
toggle() {
|
||||
toogleFold(!isFold.value)
|
||||
}
|
||||
})
|
||||
|
||||
function toogleFold(status) {
|
||||
isFold.value = status
|
||||
nextTick(() => {
|
||||
if (status) {
|
||||
initThumbnail()
|
||||
} else if (!hasUserSet) {
|
||||
// 用户没有操作过
|
||||
initDialog()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function initThumbnail() {
|
||||
const thOp = mergeProps.value.thumbnail
|
||||
thumbnailRef.value.style.right = autoUnit(thOp.right)
|
||||
thumbnailRef.value.style.left = autoUnit(thOp.left)
|
||||
thumbnailRef.value.style.bottom = autoUnit(thOp.bottom)
|
||||
thumbnailRef.value.style.top = autoUnit(thOp.top)
|
||||
|
||||
observeDialog = false
|
||||
}
|
||||
|
||||
// 初始化展示
|
||||
function initDialog() {
|
||||
initSize()
|
||||
initPosition()
|
||||
|
||||
// 处理给定top之后的超出的情况
|
||||
observeDialog = true
|
||||
autoNiceHeight()
|
||||
}
|
||||
onMounted(() => {
|
||||
warpperEle = document.querySelector(mergeProps.value.warpper)
|
||||
if (isFold.value) {
|
||||
initThumbnail()
|
||||
} else {
|
||||
initDialog()
|
||||
}
|
||||
})
|
||||
|
||||
// 初始化位置
|
||||
function initPosition() {
|
||||
const pannelStyle = dialogRef.value.style
|
||||
// 层级位置
|
||||
pannelStyle.zIndex = mergeProps.value.zIndex
|
||||
// 横向位置初始化 同时存在优先取left, right 将用来控制宽度
|
||||
if (isAllowValue(mergeProps.value.left)) {
|
||||
pannelStyle.left = autoUnit(mergeProps.value.left)
|
||||
} else if (mergeProps.value.right) {
|
||||
pannelStyle.right = autoUnit(mergeProps.value.right)
|
||||
}
|
||||
// 纵向位置初始化 同时存在优先取top, bottom 将用来控制宽度
|
||||
if (isAllowValue(mergeProps.value.top)) {
|
||||
pannelStyle.top = autoUnit(mergeProps.value.top)
|
||||
} else if (isAllowValue(mergeProps.value.bottom)) {
|
||||
pannelStyle.bottom = autoUnit(mergeProps.value.bottom)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化大小
|
||||
function initSize() {
|
||||
let w = null
|
||||
let h = null
|
||||
|
||||
// 如果同时存在 left right 则自动计算
|
||||
if (isAllowValue(mergeProps.value.left) && isAllowValue(mergeProps.value.right)) {
|
||||
w = warpperEle.offsetWidth - mergeProps.value.left - mergeProps.value.right
|
||||
} else if (mergeProps.value.width) {
|
||||
w = mergeProps.value.width
|
||||
}
|
||||
setSize("width", w)
|
||||
|
||||
// 如果同时存在 left right 则自动计算
|
||||
if (isAllowValue(mergeProps.value.top) && isAllowValue(mergeProps.value.bottom)) {
|
||||
h = warpperEle.offsetHeight - mergeProps.value.top - mergeProps.value.bottom
|
||||
} else if (mergeProps.value.height) {
|
||||
h = mergeProps.value.height
|
||||
}
|
||||
setSize("height", h)
|
||||
}
|
||||
|
||||
// 开始移动
|
||||
function dragStart(event: any) {
|
||||
if (!warpperEle || !mergeProps.value.draggable) {
|
||||
return
|
||||
}
|
||||
|
||||
const pb = dialogRef.value
|
||||
const x = event.clientX
|
||||
const y = event.clientY
|
||||
const bl = pb.offsetLeft
|
||||
const bt = pb.offsetTop
|
||||
|
||||
bindMouseDrag(toPointerPosition)
|
||||
|
||||
function toPointerPosition(e: any) {
|
||||
const distanceX = e.clientX - x
|
||||
const distanceY = e.clientY - y
|
||||
const left = bl + distanceX
|
||||
const top = bt + distanceY
|
||||
|
||||
setPosition("left", left)
|
||||
setPosition("top", top)
|
||||
emits("move")
|
||||
}
|
||||
}
|
||||
|
||||
// 缩放
|
||||
const defaultHandles = ["l", "r", "t", "b", "lb", "rb"]
|
||||
let handleName = ""
|
||||
const actualHandles = computed<string[]>(() => {
|
||||
if (!mergeProps.value.handles) {
|
||||
return []
|
||||
}
|
||||
if (typeof mergeProps.value.handles === "string") {
|
||||
return mergeProps.value.handles.split("")
|
||||
}
|
||||
return defaultHandles
|
||||
})
|
||||
// 处理自定义缩放
|
||||
function resizeStart(handle: string, event: any) {
|
||||
handleName = handle
|
||||
const x = event.clientX
|
||||
const y = event.clientY
|
||||
const bw = dialogRef.value.offsetWidth
|
||||
const bh = dialogRef.value.offsetHeight
|
||||
const bl = dialogRef.value.offsetLeft
|
||||
const bt = dialogRef.value.offsetTop
|
||||
|
||||
bindMouseDrag(handleMove)
|
||||
|
||||
function handleMove(e: any) {
|
||||
if (handleName.indexOf("l") !== -1) {
|
||||
const L = x - e.clientX
|
||||
if (e.clientX > 0 && e.clientX < warpperEle.offsetWidth) {
|
||||
if ((dialogRef.value.offsetWidth <= mergeProps.value.minWidth && L > 0) || dialogRef.value.offsetWidth > mergeProps.value.minWidth) {
|
||||
setPosition("left", bl - L)
|
||||
setSize("width", bw + L)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (handleName.indexOf("r") !== -1) {
|
||||
setSize("width", bw + e.clientX - x)
|
||||
}
|
||||
if (handleName.indexOf("t") !== -1) {
|
||||
const L = y - e.clientY
|
||||
if (e.clientY > 0 && e.clientY < warpperEle.offsetHeight) {
|
||||
if ((dialogRef.value.offsetHeight <= mergeProps.value.minHeight && L > 0) || dialogRef.value.offsetHeight > mergeProps.value.minHeight) {
|
||||
setPosition("top", bt - y + e.clientY)
|
||||
setSize("height", bh + y - e.clientY)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (handleName.indexOf("b") !== -1) {
|
||||
setSize("height", bh + e.clientY - y)
|
||||
}
|
||||
|
||||
emits("resize")
|
||||
}
|
||||
}
|
||||
|
||||
function setSize(attr: "width" | "height", v) {
|
||||
if (isAllowValue(v)) {
|
||||
let value = v
|
||||
switch (attr) {
|
||||
case "width": {
|
||||
value = Math.max(mergeProps.value.minWidth, value)
|
||||
value = Math.min(mergeProps.value.maxWidth, value, warpperEle.offsetWidth)
|
||||
break
|
||||
}
|
||||
case "height": {
|
||||
value = Math.max(mergeProps.value.minHeight, value)
|
||||
value = Math.min(mergeProps.value.maxHeight, value, warpperEle.offsetHeight)
|
||||
break
|
||||
}
|
||||
}
|
||||
dialogRef.value.style[attr] = autoUnit(value)
|
||||
}
|
||||
}
|
||||
|
||||
function setPosition(attr: "left" | "top", v) {
|
||||
if (isAllowValue(v)) {
|
||||
let value = v
|
||||
const pb = dialogRef.value
|
||||
|
||||
switch (attr) {
|
||||
case "left": {
|
||||
const maxLeft = warpperEle.offsetWidth - pb.offsetWidth
|
||||
value = Math.min(Math.max(0, value), maxLeft)
|
||||
break
|
||||
}
|
||||
case "top": {
|
||||
const maxTop = warpperEle.offsetHeight - pb.offsetHeight
|
||||
value = Math.min(Math.max(0, value), maxTop)
|
||||
break
|
||||
}
|
||||
}
|
||||
dialogRef.value.style[attr] = autoUnit(value)
|
||||
}
|
||||
}
|
||||
|
||||
let domObserver
|
||||
onMounted(() => {
|
||||
addEvent(window, "resize", resize)
|
||||
|
||||
// 监听元素变化
|
||||
domObserver = new MutationObserver((mList, ob) => {
|
||||
autoNiceHeight()
|
||||
})
|
||||
|
||||
domObserver.observe(dialogRef.value, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
subtree: true
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
removeEvent(window, "resize", resize)
|
||||
domObserver.disconnect()
|
||||
})
|
||||
|
||||
// 处理高度超出的情况
|
||||
function autoNiceHeight() {
|
||||
if (observeDialog) {
|
||||
const isExceed = warpperEle.offsetHeight < dialogRef.value.offsetHeight + dialogRef.value.offsetTop
|
||||
if (isExceed) {
|
||||
const niceHeight = warpperEle.offsetHeight - dialogRef.value.offsetTop
|
||||
dialogRef.value.style.height = autoUnit(niceHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理窗口缩放
|
||||
function resize() {
|
||||
const pb = dialogRef.value
|
||||
if (!warpperEle) {
|
||||
return
|
||||
}
|
||||
|
||||
if (pb.offsetTop + pb.offsetHeight > warpperEle.offsetHeight) {
|
||||
setSize("height", warpperEle.offsetHeight - pb.offsetTop)
|
||||
}
|
||||
if (pb.offsetLeft + pb.offsetWidth > warpperEle.offsetWidth) {
|
||||
setSize("width", warpperEle.offsetWidth - pb.offsetLeft)
|
||||
}
|
||||
}
|
||||
|
||||
async function close() {
|
||||
if (props.beforeClose && typeof mergeProps.value.beforeClose === "function") {
|
||||
const result = props.beforeClose()
|
||||
|
||||
if (result instanceof Promise) {
|
||||
try {
|
||||
await result
|
||||
emitClose()
|
||||
} catch (err) {
|
||||
console.log("取消关闭")
|
||||
}
|
||||
} else if (result !== false) {
|
||||
emitClose()
|
||||
}
|
||||
} else {
|
||||
emitClose()
|
||||
}
|
||||
}
|
||||
|
||||
function emitClose() {
|
||||
emits("update:visible", false)
|
||||
emits("closed")
|
||||
}
|
||||
|
||||
const animationClass = computed(() => {
|
||||
if (mergeProps.value.animation === true) {
|
||||
const right = mergeProps.value.right
|
||||
if (right && right >= 0 && right < 100) {
|
||||
return "fadein-right"
|
||||
}
|
||||
const left = mergeProps.value.left
|
||||
if (left || (left >= 0 && left < 100)) {
|
||||
return "fadein-left"
|
||||
}
|
||||
const top = mergeProps.value.top
|
||||
if (left || (top >= 0 && top < 100)) {
|
||||
return "fadein-down"
|
||||
}
|
||||
const bottom = mergeProps.value.bottom
|
||||
if (bottom || (bottom >= 0 && bottom < 100)) {
|
||||
return "fadein-up"
|
||||
}
|
||||
return "fadein-center"
|
||||
} else if (typeof mergeProps.value.animation === "string") {
|
||||
return mergeProps.value.animation
|
||||
} else {
|
||||
return ""
|
||||
}
|
||||
})
|
||||
|
||||
// 处理传入的单位问题
|
||||
function autoUnit(value: number | string) {
|
||||
if (typeof value === "number" || (typeof value === "string" && /^[0-9]*$/.test(value))) {
|
||||
return `${value}px`
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function isAllowValue(value) {
|
||||
return value !== null && value !== undefined
|
||||
}
|
||||
|
||||
// 事件绑定处理
|
||||
function bindMouseDrag(callback) {
|
||||
addEvent(document.documentElement, "mousemove", handleMove)
|
||||
addEvent(document.documentElement, "mouseup", handleUp)
|
||||
|
||||
function handleMove(e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
hasUserSet = true
|
||||
callback(e)
|
||||
}
|
||||
|
||||
function handleUp(e: any) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
removeEvent(document.documentElement, "mousemove", handleMove)
|
||||
removeEvent(document.documentElement, "mouseup", handleUp)
|
||||
}
|
||||
}
|
||||
|
||||
function addEvent(el: any, event: any, handler: (e: any) => void) {
|
||||
if (!el) {
|
||||
return
|
||||
}
|
||||
if (el.attachEvent) {
|
||||
el.attachEvent(`on${event}`, handler)
|
||||
} else if (el.addEventListener) {
|
||||
el.addEventListener(event, handler)
|
||||
} else {
|
||||
el[`on${event}`] = handler
|
||||
}
|
||||
}
|
||||
// 事件解除绑定
|
||||
function removeEvent(el: any, event: any, handler: (e: any) => void) {
|
||||
if (!el) {
|
||||
return
|
||||
}
|
||||
if (el.detachEvent) {
|
||||
el.detachEvent(`on${event}`, handler)
|
||||
} else if (el.removeEventListener) {
|
||||
el.removeEventListener(event, handler)
|
||||
} else {
|
||||
el[`on${event}`] = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "mars-dialog"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mars-dialog-thumb {
|
||||
background-color: var(--mars-bg-base);
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mars-dialog {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 10px 10px;
|
||||
border-radius: 4px;
|
||||
z-index: 999 !important;
|
||||
border-bottom: 1px solid #008aff70;
|
||||
border-left: 1px solid #008aff70;
|
||||
border-right: 1px solid #008aff70;
|
||||
z-index: 100;
|
||||
.mars-drop-bg();
|
||||
|
||||
.mars-dialog__header {
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
line-height: 44px;
|
||||
overflow: hidden;
|
||||
.mars-msg-title();
|
||||
padding: 0 5px 0px 10px;
|
||||
color: var(--mars-base-color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn__flot {
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mars-dialog__content {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.mars-dialog__footer {
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
color: var(--mars-text-color);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.mars-dialog__handle {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.handle-t {
|
||||
width: auto;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.handle-b {
|
||||
width: auto;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.handle-l {
|
||||
height: auto;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
bottom: 10px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.handle-r {
|
||||
height: auto;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.handle-rb {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.handle-lb {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
}
|
||||
|
||||
/**下面是 5个 动画 */
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadein-right {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-name: fadeInRight;
|
||||
animation-name: fadeInRight;
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadein-left {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-name: fadeInLeft;
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadein-up {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-name: fadeInUp;
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadein-down {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
@keyframes fadeInCenter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadein-center {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-name: fadeInCenter;
|
||||
animation-name: fadeInCenter;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
// 下拉菜单
|
||||
.mars-dropdown-menu {
|
||||
.ant-dropdown-menu {
|
||||
border-bottom: 1px solid #008aff70;
|
||||
border-left: 1px solid #008aff70;
|
||||
border-right: 1px solid #008aff70;
|
||||
.mars-drop-bg();
|
||||
.mars-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-title-content {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-item,
|
||||
.ant-dropdown-menu-submenu-title {
|
||||
&:hover {
|
||||
background-color: var(--mars-select-bg);
|
||||
}
|
||||
.ant-upload {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
.ant-dropdown-menu-submenu-title {
|
||||
padding: 6px 20px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { Dropdown } from "ant-design-vue"
|
||||
import { App, defineComponent, h } from "vue"
|
||||
import "./dropdown.less"
|
||||
|
||||
/**
|
||||
* 下拉菜单
|
||||
*
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
|
||||
const MarsDropdown = defineComponent({
|
||||
name: "mars-dropdown-menu",
|
||||
inheritAttrs: false,
|
||||
setup(props, context) {
|
||||
return () => h(Dropdown, { ...context.attrs, ...props, overlayClassName: "mars-dropdown-menu" }, context.slots)
|
||||
}
|
||||
})
|
||||
|
||||
export function install(app: App): App {
|
||||
app.component(MarsDropdown.name, MarsDropdown)
|
||||
return app
|
||||
}
|
||||
export default MarsDropdown
|
||||
|
|
@ -1,476 +0,0 @@
|
|||
import * as echarts from "echarts"
|
||||
/**
|
||||
* echarts公共样式配置
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-02-19
|
||||
*/
|
||||
|
||||
echarts.registerTheme("dark", {
|
||||
color: ["rgba(14,227,247,1)", "#ff715e", "#ffee51", "#54e66b", "#715c87"],
|
||||
backgroundColor: "rgba(64,64,64,0)",
|
||||
textStyle: {},
|
||||
title: {
|
||||
textStyle: {
|
||||
color: "#ffaf51"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#eeeeee"
|
||||
}
|
||||
},
|
||||
line: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "2"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: "3"
|
||||
}
|
||||
},
|
||||
symbolSize: "8",
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z",
|
||||
smooth: false
|
||||
},
|
||||
radar: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "2"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: "3"
|
||||
}
|
||||
},
|
||||
symbolSize: "8",
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z",
|
||||
smooth: false
|
||||
},
|
||||
bar: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderWidth: "0",
|
||||
barBorderColor: "#ccc"
|
||||
},
|
||||
emphasis: {
|
||||
barBorderWidth: "0",
|
||||
barBorderColor: "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
pie: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
}
|
||||
},
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z"
|
||||
},
|
||||
scatter: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
}
|
||||
},
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z"
|
||||
},
|
||||
boxplot: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
}
|
||||
},
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z"
|
||||
},
|
||||
parallel: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
}
|
||||
},
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z"
|
||||
},
|
||||
sankey: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
}
|
||||
},
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z"
|
||||
},
|
||||
funnel: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
}
|
||||
},
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z"
|
||||
},
|
||||
gauge: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
}
|
||||
},
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z"
|
||||
},
|
||||
candlestick: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ffee51",
|
||||
color0: "#ffffff",
|
||||
borderColor: "#ff715e",
|
||||
borderColor0: "#797fba",
|
||||
borderWidth: "1"
|
||||
}
|
||||
}
|
||||
},
|
||||
graph: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: "0",
|
||||
borderColor: "#ccc"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: "1",
|
||||
color: "#888888"
|
||||
}
|
||||
},
|
||||
symbolSize: "8",
|
||||
symbol:
|
||||
"path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z",
|
||||
smooth: false,
|
||||
color: ["rgba(14,227,247,1)", "#ff715e", "#ffee51", "#54e66b", "#715c87"],
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: "#333333"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
map: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: "#555555",
|
||||
borderColor: "#999999",
|
||||
borderWidth: 0.5
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: "rgba(255,175,81,0.5)",
|
||||
borderColor: "#ffaf51",
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: "#ffffff"
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: "rgb(255,238,81)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: "#555555",
|
||||
borderColor: "#999999",
|
||||
borderWidth: 0.5
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: "rgba(255,175,81,0.5)",
|
||||
borderColor: "#ffaf51",
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: "#ffffff"
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: "rgb(255,238,81)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
categoryAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#91cc75"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#91cc75"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#555555"]
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
|
||||
}
|
||||
}
|
||||
},
|
||||
valueAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#91cc75"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#eeeeee"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#555555"]
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
|
||||
}
|
||||
}
|
||||
},
|
||||
logAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#91cc75"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#eeeeee"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#555555"]
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
|
||||
}
|
||||
}
|
||||
},
|
||||
timeAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#91cc75"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#eeeeee"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#555555"]
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
|
||||
}
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
iconStyle: {
|
||||
normal: {
|
||||
borderColor: "#999999"
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: "#666666"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "#cccccc"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#cccccc",
|
||||
width: 1
|
||||
},
|
||||
crossStyle: {
|
||||
color: "#cccccc",
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
timeline: {
|
||||
lineStyle: {
|
||||
color: "#ffaf51",
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ffaf51",
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
color: "#ffaf51"
|
||||
}
|
||||
},
|
||||
controlStyle: {
|
||||
normal: {
|
||||
color: "#ffaf51",
|
||||
borderColor: "#ffaf51",
|
||||
borderWidth: 0.5
|
||||
},
|
||||
emphasis: {
|
||||
color: "#ffaf51",
|
||||
borderColor: "#ffaf51",
|
||||
borderWidth: 0.5
|
||||
}
|
||||
},
|
||||
checkpointStyle: {
|
||||
color: "#ff715e",
|
||||
borderColor: "rgba(255,113,94,0.4)"
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: "#ff715e"
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: "#ff715e"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
color: ["#ff715e", "#ffee51", "#797fba"]
|
||||
},
|
||||
dataZoom: {
|
||||
backgroundColor: "rgba(255,255,255,0)",
|
||||
dataBackgroundColor: "rgba(222,222,222,1)",
|
||||
fillerColor: "rgba(255,113,94,0.2)",
|
||||
handleColor: "#cccccc",
|
||||
handleSize: "100%",
|
||||
textStyle: {
|
||||
color: "#999999"
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: "#333333"
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: "#333333"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
export const components = {
|
||||
number: "mars-input-number",
|
||||
switch: "mars-switch",
|
||||
radio: "a-radio-group",
|
||||
checkbox: "a-checkbox-group",
|
||||
slider: "mars-slider",
|
||||
color: "mars-color-picker",
|
||||
select: "mars-select",
|
||||
textarea: "mars-textarea",
|
||||
input: "mars-input",
|
||||
inputGroup: "mars-input-group"
|
||||
}
|
||||
|
||||
export interface GuiItem {
|
||||
type: keyof typeof components
|
||||
field: string
|
||||
label: string
|
||||
extra?: any
|
||||
extraWidth?: number
|
||||
extraType?: "string" | "custom"
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
range?: boolean
|
||||
data?: any[]
|
||||
value?: string | boolean | number | any
|
||||
units?: string[]
|
||||
show?: boolean | ((data: any) => boolean)
|
||||
change?: (value: any, dataObj: any) => any
|
||||
}
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
<template>
|
||||
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<template v-for="(item, i) in renderOptions" :key="i">
|
||||
<a-form-item v-if="(item.show as any)(attrForm)" :label="item.label">
|
||||
<div :style="getItemStyle(item)">
|
||||
<component
|
||||
:is="getComponent(item.type)"
|
||||
v-model:value="item.value"
|
||||
:min="item.min || item.min === 0 ? item.min : -Infinity"
|
||||
:max="item.max || item.max === 0 ? item.max : Infinity"
|
||||
:step="item.step || 0.1"
|
||||
:range="item.range || false"
|
||||
:options="item.data || []"
|
||||
:units="item.units"
|
||||
@change="itemChange(item)"
|
||||
>
|
||||
</component>
|
||||
</div>
|
||||
<template v-if="item.extra !== undefined">
|
||||
<template v-if="item.extraType === 'string'">{{ item.extra(attrForm) }}</template>
|
||||
<component v-else :is="item.extra(attrForm)"></component
|
||||
></template>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watchEffect } from "vue"
|
||||
import { components, GuiItem } from "./index"
|
||||
|
||||
const props = defineProps<{
|
||||
options: GuiItem[]
|
||||
labelCol?: number
|
||||
}>()
|
||||
|
||||
const emits = defineEmits(["change"])
|
||||
|
||||
const renderOptions = ref<GuiItem[]>([])
|
||||
|
||||
const attrForm = computed(() => {
|
||||
const modelValues: Record<string, any> = {}
|
||||
renderOptions.value.forEach((item) => {
|
||||
modelValues[item.field] = item.value
|
||||
})
|
||||
|
||||
return modelValues
|
||||
})
|
||||
|
||||
const labelCol = { span: props.labelCol || 6 }
|
||||
const wrapperCol = { span: 24 - labelCol.span }
|
||||
|
||||
watchEffect(() => {
|
||||
renderOptions.value = props.options.map((item) => mergeItemOption(item))
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
// 删除指定 field 或 索引的 元素
|
||||
delete: (key: string | number) => {
|
||||
let index: number
|
||||
if (typeof key === "string") {
|
||||
renderOptions.value.forEach((item, i) => {
|
||||
if (item.field === key) {
|
||||
index = i
|
||||
}
|
||||
})
|
||||
}
|
||||
if (typeof key === "number" && key >= 0 && key < renderOptions.value.length) {
|
||||
index = key
|
||||
}
|
||||
if (index !== undefined) {
|
||||
renderOptions.value.splice(index, 1)
|
||||
}
|
||||
},
|
||||
// 在指定位置插入 一个 或 多个 元素
|
||||
insert(index: number, ...args: GuiItem[]) {
|
||||
args.forEach((item) => {
|
||||
renderOptions.value.splice(index, 0, mergeItemOption(item))
|
||||
})
|
||||
},
|
||||
updateField(field: string, value) {
|
||||
renderOptions.value.forEach((item) => {
|
||||
if (item.field === field) {
|
||||
item.value = value
|
||||
}
|
||||
})
|
||||
},
|
||||
updateExtra(field: string, value) {
|
||||
renderOptions.value.forEach((item) => {
|
||||
if (item.field === field) {
|
||||
item.extra = mergeExtra(value)
|
||||
}
|
||||
})
|
||||
},
|
||||
updateFields(fieldObj: any) {
|
||||
renderOptions.value.forEach((item) => {
|
||||
if (fieldObj[item.field]) {
|
||||
item.value = fieldObj[item.field]
|
||||
}
|
||||
})
|
||||
},
|
||||
getValue(field: string) {
|
||||
const item = renderOptions.value.find((it) => {
|
||||
return it.field === field
|
||||
})
|
||||
if (item) {
|
||||
return item.value
|
||||
}
|
||||
throw new Error("field is not exist")
|
||||
},
|
||||
getValues() {
|
||||
return attrForm.value
|
||||
}
|
||||
})
|
||||
|
||||
const getItemStyle = ({ extraWidth, extra, label }: GuiItem) => {
|
||||
if (!extraWidth && extraWidth !== 0) {
|
||||
extraWidth = 100
|
||||
}
|
||||
return extra !== undefined
|
||||
? {
|
||||
width: `calc(100% - ${extraWidth || extraWidth === 0 ? extraWidth : 100}px)`,
|
||||
display: "inline-block",
|
||||
marginRight: "10px"
|
||||
}
|
||||
: {
|
||||
display: "inline-block",
|
||||
width: "100%"
|
||||
}
|
||||
}
|
||||
|
||||
function getComponent(type: keyof typeof components) {
|
||||
return components[type]
|
||||
}
|
||||
|
||||
function mergeItemOption(item) {
|
||||
// show字段转为function
|
||||
if (typeof item.show !== "function") {
|
||||
item.show = () => (item.show === undefined ? true : !!item.show)
|
||||
}
|
||||
|
||||
// extra 字段转为function
|
||||
item.extra = mergeExtra(item.extra)
|
||||
item.extraType = item.extraType || "string"
|
||||
return item
|
||||
}
|
||||
|
||||
function mergeExtra(extra) {
|
||||
let extraNew = extra
|
||||
if (extraNew === undefined || extraNew === null) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
if (typeof extraNew !== "function" && extraNew) {
|
||||
extraNew = () => {
|
||||
if (typeof extra === "string") {
|
||||
let str = extra
|
||||
const paramsPattern = /[^{\}]+(?=})/g
|
||||
const extractParams = str.match(paramsPattern) || []
|
||||
extractParams.forEach((key) => {
|
||||
str = str.replace(new RegExp(`{${key}}`, "g"), attrForm.value[key])
|
||||
})
|
||||
return str
|
||||
} else {
|
||||
return extra
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return extraNew
|
||||
}
|
||||
|
||||
function itemChange(item: GuiItem) {
|
||||
emits("change", attrForm.value)
|
||||
if (item.change) {
|
||||
item.change(item.value, attrForm.value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "mars-gui"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<span class="mars-icon" v-html="svgComponent"></span>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, useAttrs, defineComponent } from "vue"
|
||||
import * as svgModule from "@icon-park/svg"
|
||||
import _ from "lodash"
|
||||
export default defineComponent({
|
||||
name: "mars-icon",
|
||||
// inheritAttrs: false,
|
||||
props: {
|
||||
icon: {
|
||||
type: String
|
||||
},
|
||||
color: {
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: "14"
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const attrs = useAttrs()
|
||||
const iconName = computed(() => _.upperFirst(_.camelCase(props.icon)))
|
||||
|
||||
const svgComponent = svgModule[iconName.value]({
|
||||
theme: "outline",
|
||||
fill: props.color,
|
||||
size: props.width,
|
||||
...attrs
|
||||
})
|
||||
|
||||
return {
|
||||
attrs,
|
||||
svgComponent
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars-icon {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<a-space>
|
||||
<template v-for="(item, i) in value" :key="i">
|
||||
<mars-input v-model:value="values[i]" @change="(v) => itemChange(v, i)" :suffix="props.units[i]" />
|
||||
</template>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { watchEffect, ref } from "vue"
|
||||
const props = defineProps<{
|
||||
value: string[]
|
||||
units: string[]
|
||||
}>()
|
||||
|
||||
const values = ref([])
|
||||
|
||||
watchEffect(() => {
|
||||
values.value = props.value
|
||||
})
|
||||
|
||||
const emits = defineEmits(["update:value", "change"])
|
||||
|
||||
function itemChange(v, i) {
|
||||
emits("update:value", values)
|
||||
emits("change", values)
|
||||
}
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "mars-input-group"
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<template>
|
||||
<a-input-number class="mars-input-number" v-bind="attrs">
|
||||
<template v-for="(comp, name) in slots" :key="name" v-slot:[name]>
|
||||
<component :is="comp" />
|
||||
</template>
|
||||
</a-input-number>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, useSlots, defineComponent } from "vue"
|
||||
export default defineComponent({
|
||||
name: "mars-input-number",
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
return {
|
||||
attrs,
|
||||
slots
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars-input-number {
|
||||
color: var(--mars-text-color);
|
||||
background-color: transparent !important;
|
||||
border-color: var(--mars-base-border-color);
|
||||
width: 100%;
|
||||
* {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
:deep(.ant-input-number-handler-wrap) {
|
||||
background: none;
|
||||
.anticon {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<template>
|
||||
<a-input class="mars-input" v-bind="attrs">
|
||||
<template v-for="(comp, name) in slots" :key="name" v-slot:[name]>
|
||||
<component :is="comp" />
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, useSlots, defineComponent } from "vue"
|
||||
export default defineComponent({
|
||||
name: "mars-input",
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
return {
|
||||
attrs,
|
||||
slots
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars-input {
|
||||
background-color: transparent !important;
|
||||
color: var(--mars-text-color);
|
||||
font-size: 12px !important;
|
||||
|
||||
:deep(.ant-input) {
|
||||
border-color: var(--mars-base-border-color);
|
||||
background-color: transparent !important;
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
:deep(.ant-input-suffix .anticon) {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper-focused {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mars-input[disabled] {
|
||||
color: var(--mars-disable-btn-bg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import nprogress from "nprogress"
|
||||
import "nprogress/nprogress.css"
|
||||
import { App } from "vue"
|
||||
|
||||
/**
|
||||
* loading组件
|
||||
* @export
|
||||
* @param {App} app vue实例
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-02-19
|
||||
* @returns { void }
|
||||
*/
|
||||
let loadingNum = 0
|
||||
export const $showLoading = () => {
|
||||
loadingNum++
|
||||
nprogress.start()
|
||||
const interval = setInterval(() => {
|
||||
if (nprogress.isStarted() && nprogress.status < 0.8) {
|
||||
nprogress.set(nprogress.status + 0.1)
|
||||
} else {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
export const $hideLoading = () => {
|
||||
loadingNum = Math.max(0, --loadingNum)
|
||||
if (loadingNum === 0) {
|
||||
nprogress.done()
|
||||
}
|
||||
}
|
||||
export default function (app: App): void {
|
||||
app.config.globalProperties.$showLoading = $showLoading
|
||||
app.config.globalProperties.$hideLoading = $hideLoading
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { message } from "ant-design-vue"
|
||||
import MarsIcon from "../mars-icon/index.vue"
|
||||
import { App, h } from "vue"
|
||||
import "./message.less"
|
||||
|
||||
/**
|
||||
* message 信息弹窗
|
||||
* @export
|
||||
* @param {App} app vue实例
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
message.config({
|
||||
top: `100px`
|
||||
})
|
||||
export const $message = (msg: string, type: keyof typeof message = "info") => {
|
||||
if (message[type] && typeof message[type] === "function") {
|
||||
const func = message[type] as (a: any) => Promise<any>
|
||||
return func({
|
||||
class: "mars-message",
|
||||
icon: h(MarsIcon, { icon: "remind", theme: "filled", size: "20", fill: "#008aff" }),
|
||||
content: msg
|
||||
})
|
||||
} else {
|
||||
return Promise!.reject()
|
||||
}
|
||||
}
|
||||
export default function (app: App): void {
|
||||
app.config.globalProperties.$message = $message
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/*提示*/
|
||||
.mars-message {
|
||||
.ant-message-notice-content {
|
||||
background: none;
|
||||
color: var(--mars-text-color);
|
||||
padding: 15px 20px;
|
||||
.mars-msg-bg();
|
||||
.ant-message-info span{
|
||||
font-size: 16px;
|
||||
}
|
||||
.mars-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import { notification } from "ant-design-vue"
|
||||
import { App } from "vue"
|
||||
import "./notify.less"
|
||||
|
||||
/**
|
||||
* 消息提醒
|
||||
* @export
|
||||
* @param {App} app vue实例
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
* @returns { void }
|
||||
*/
|
||||
export const $notify = (message: any, description: any, options: any = {}, type: keyof typeof notification = "info") => {
|
||||
if (notification[type] && typeof notification[type] === "function") {
|
||||
return new Promise((resolve) => {
|
||||
notification.config({
|
||||
placement: "bottomRight",
|
||||
right: 10,
|
||||
bottom: 40,
|
||||
duration: 10,
|
||||
...options
|
||||
})
|
||||
const func = notification[type] as (a: any) => any
|
||||
func({
|
||||
message,
|
||||
icon: () => null,
|
||||
description,
|
||||
class: "mars-notify-message",
|
||||
onClose() {
|
||||
resolve(true)
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return Promise!.reject()
|
||||
}
|
||||
}
|
||||
export default function (app: App): void {
|
||||
app.config.globalProperties.$notify = $notify
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
// 功能提示和已知问题提示框
|
||||
.mars-notify-message {
|
||||
padding: 0;
|
||||
background: none;
|
||||
.mars-msg-bg();
|
||||
.ant-notification-notice-message {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
.mars-msg-title();
|
||||
}
|
||||
.ant-notification-notice-description {
|
||||
color: var(--mars-text-color);
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
user-select: text;
|
||||
}
|
||||
.ant-notification-notice-close {
|
||||
color: var(--mars-alert-title-color);
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
<template>
|
||||
<a-range-picker :locale="locale" :dayjs="dayjs" class="mars-range-picker" v-bind="attrs">
|
||||
<!-- <template v-for="(comp, name) in slots" :key="name" v-slot:[name]>
|
||||
<component :is="comp" />
|
||||
</template> -->
|
||||
</a-range-picker>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, defineComponent } from "vue"
|
||||
import dayjs from "dayjs"
|
||||
import "dayjs/locale/zh-cn"
|
||||
import locale from "ant-design-vue/es/date-picker/locale/zh_CN"
|
||||
export default defineComponent({
|
||||
name: "mars-range-picker",
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const attrs = useAttrs()
|
||||
return {
|
||||
attrs,
|
||||
dayjs,
|
||||
locale
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars-range-picker {
|
||||
color: var(--mars-text-color);
|
||||
border-color: var(--mars-base-border-color) !important;
|
||||
background-color: transparent !important;
|
||||
&:hover {
|
||||
border-color: var(--mars-primary-color) !important;
|
||||
}
|
||||
:deep(.ant-picker-input > input) {
|
||||
color: var(--mars-base-color) !important;
|
||||
}
|
||||
:deep(.ant-picker-clear) {
|
||||
background: var(--mars-bg-base);
|
||||
color: var(--mars-base-color) !important;
|
||||
}
|
||||
:deep(.ant-picker-suffix *) {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
:deep(.ant-picker-range-separator *) {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
}
|
||||
:deep(.ant-picker-panel-container ) {
|
||||
background: var(--mars-bg-base) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<template>
|
||||
<a-select class="mars-select" dropdownClassName="mars-select-dropdown" v-bind="attrs">
|
||||
<template v-for="(comp, name) in slots" :key="name" v-slot:[name]>
|
||||
<component :is="comp" />
|
||||
</template>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, useSlots, defineComponent } from "vue"
|
||||
export default defineComponent({
|
||||
name: "mars-select",
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
return {
|
||||
attrs,
|
||||
slots
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars-select {
|
||||
color: var(--mars-text-color);
|
||||
background-color: transparent !important;
|
||||
background: none;
|
||||
:deep(.ant-select-selector) {
|
||||
border-color: var(--mars-base-border-color) !important;
|
||||
background: none;
|
||||
background-color: transparent !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: #4db3ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-select-arrow) {
|
||||
color: var(--mars-base-color) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less"></style>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<template>
|
||||
<a-slider class="mars-slider" v-bind="attrs">
|
||||
<template v-for="(comp, name) in slots" :key="name" v-slot:[name]>
|
||||
<component :is="comp" />
|
||||
</template>
|
||||
</a-slider>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, useSlots, defineComponent } from "vue"
|
||||
export default defineComponent({
|
||||
name: "mars-slider",
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
return {
|
||||
attrs,
|
||||
slots
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/*滑动条 输入面板内时修改高度等*/
|
||||
.mars-slider {
|
||||
margin: 0px 6px 6px 6px;
|
||||
:deep(.ant-slider-mark-text) {
|
||||
color: var(--mars-base-color) !important;
|
||||
top: 5px;
|
||||
}
|
||||
/*滑动条 未选择、已选择部分 高度*/
|
||||
:deep(.ant-slider-rail) {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #284660 !important;
|
||||
}
|
||||
:deep(.ant-slider-track) {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--mars-primary-color) !important;
|
||||
}
|
||||
/*滑动条 刻度点*/
|
||||
:deep(.ant-slider-dot) {
|
||||
background-color: #16212c7d;
|
||||
top: 12px;
|
||||
height: 6px;
|
||||
width: 1px;
|
||||
border-radius: 0 0;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
:deep(.ant-slider-dot:first-child) {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/*滑动条 拖拽点*/
|
||||
:deep(.ant-slider-handle) {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: -3px;
|
||||
border: 4px solid var(--mars-primary-color);
|
||||
}
|
||||
:deep(.ant-slider-dot-active, .ant-slider-handle) {
|
||||
border-color: var(--mars-primary-color) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<template>
|
||||
<a-switch class="mars-switch" v-model:checked="switchValue" @change="valueChange" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watchEffect } from "vue"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value?: boolean | string | number
|
||||
checked?: boolean | string | number
|
||||
}>(),
|
||||
{
|
||||
value: undefined,
|
||||
checked: undefined
|
||||
}
|
||||
)
|
||||
|
||||
const switchValue = ref()
|
||||
watchEffect(() => {
|
||||
if (props.checked !== undefined) {
|
||||
switchValue.value = props.checked
|
||||
} else {
|
||||
switchValue.value = props.value || false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(["update:value", "update:checked", "change"])
|
||||
|
||||
const valueChange = (value: boolean) => {
|
||||
emit("update:value", value)
|
||||
emit("update:checked", value)
|
||||
emit("change", value)
|
||||
}
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "mars-switch"
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 开关
|
||||
.mars-switch {
|
||||
background-color: var(--mars-disable-btn-bg);
|
||||
&.ant-switch-checked {
|
||||
background-color: var(--mars-primary-color) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<a-table class="mars-table" v-bind="attrs">
|
||||
<template v-for="(comp, name) in slots" #[name]="data" :key="name">
|
||||
<slot :name="name" v-bind="data"></slot>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, useSlots, defineComponent } from "vue"
|
||||
export default defineComponent({
|
||||
name: "mars-table",
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
|
||||
return {
|
||||
attrs,
|
||||
slots
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<template>
|
||||
<a-textarea class="mars-textarea" v-bind="attrs">
|
||||
<template v-for="(comp, name) in slots" :key="name" v-slot:[name]>
|
||||
<component :is="comp" />
|
||||
</template>
|
||||
</a-textarea>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, useSlots, defineComponent } from "vue"
|
||||
export default defineComponent({
|
||||
name: "mars-textarea",
|
||||
inheritAttrs: false,
|
||||
setup() {
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
return {
|
||||
attrs,
|
||||
slots
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars-textarea {
|
||||
color: var(--mars-text-color);
|
||||
background-color: var(--mars-bg-base) !important;
|
||||
:deep(.ant-input) {
|
||||
background-color: var(--mars-bg-base) !important;
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
:deep(.ant-input-suffix .anticon) {
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
.mars-textarea[disabled]{
|
||||
color: var(--mars-disable-btn-bg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import { Tree } from "ant-design-vue"
|
||||
import { App, defineComponent, h } from "vue"
|
||||
import Icon from "../mars-icon/index.vue"
|
||||
import "./tree.less"
|
||||
|
||||
/**
|
||||
* 树控件
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-01-01
|
||||
*/
|
||||
const MarsTree = defineComponent({
|
||||
name: "mars-tree",
|
||||
inheritAttrs: false,
|
||||
setup(props, context) {
|
||||
const icon = (isLeaf: boolean, expanded: boolean, group: boolean) => {
|
||||
if (isLeaf && !group) {
|
||||
return [
|
||||
h(Icon, {
|
||||
icon: "notes",
|
||||
width: "14",
|
||||
color: "#79C1F8",
|
||||
theme: "outline",
|
||||
key: new Date().getTime()
|
||||
})
|
||||
]
|
||||
} else if (!expanded) {
|
||||
return [h(Icon, { icon: "folder-close", width: "14", color: "#db9829", theme: "filled", key: new Date().getTime() })]
|
||||
} else if (expanded) {
|
||||
return [h(Icon, { icon: "folder-open", width: "14", color: "#db9829", theme: "filled", key: new Date().getTime() })]
|
||||
}
|
||||
}
|
||||
return () =>
|
||||
h(
|
||||
Tree,
|
||||
{
|
||||
showIcon: true,
|
||||
showLine: true,
|
||||
...context.attrs,
|
||||
...props
|
||||
},
|
||||
{
|
||||
icon: ({ isLeaf, expanded, data }: any) => h("span", null, icon(isLeaf, expanded, data.group)),
|
||||
...context.slots
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export function install(app: App): App {
|
||||
app.component(MarsTree.name, MarsTree)
|
||||
return app
|
||||
}
|
||||
export default MarsTree
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
.mars-main-view {
|
||||
|
||||
// 树控件
|
||||
.ant-tree {
|
||||
background: none;
|
||||
color: var(--mars-text-color);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.ant-tree-checkbox {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ant-tree-show-line .ant-tree-switcher,
|
||||
.ant-tree-checkbox-inner {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.ant-tree-checkbox-checked {
|
||||
background: var(--mars-primary-color);
|
||||
|
||||
.ant-tree-checkbox-inner {
|
||||
border-color: var(--mars-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.anticon-file.ant-tree-switcher-line-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-tree-show-line .ant-tree-indent-unit::before {
|
||||
border-right: 1px dotted var(--mars-text-color);
|
||||
}
|
||||
|
||||
.ant-tree-switcher-noop {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.ant-tree-node-selected {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.ant-tree-switcher-noop::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: 26px;
|
||||
border-right: 1px dotted var(--mars-text-color);
|
||||
}
|
||||
|
||||
.ant-tree-treenode-leaf-last {
|
||||
.ant-tree-switcher-noop::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
border-right: 1px dotted var(--mars-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tree-switcher-noop::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border-bottom: 1px dotted var(--mars-text-color);
|
||||
}
|
||||
|
||||
.ant-tree-node-content-wrapper {
|
||||
color: var(--mars-text-color) !important;
|
||||
|
||||
.ant-tree-iconEle {
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: hsla(0, 0%, 100%, 0.08) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
|
|
@ -1,41 +0,0 @@
|
|||
@import url("./zhts.less");
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--mars-primary-color: rgba(0, 138, 255, 0.9);
|
||||
--mars-primary-half-color: rgba(0, 138, 255, 0.5);
|
||||
--mars-sub-color: #26ddff;
|
||||
--mars-danger-color: #f75165;
|
||||
--mars-warning-color: #ff8041;
|
||||
--mars-success-color: #18af92;
|
||||
--mars-base-color: #ffffff;
|
||||
--mars-content-color: #cdcdcd;
|
||||
--mars-text-color: #ffffff;
|
||||
--mars-hover-btn-bg: #3ea6ff;
|
||||
--mars-click-btn-bg: #015dab;
|
||||
--mars-disable-btn-bg: #cdcdcd;
|
||||
--mars-base-border: #ffffff;
|
||||
--mars-select-bg: rgba(0, 138, 255, 0.2);
|
||||
--mars-bg-base: rgba(23, 49, 71, 0.8);
|
||||
--mars-odd-table-bg: rgba(0, 138, 255, 0.06); // 奇数表格背景
|
||||
--mars-bg-title: #0f3453; // 普通的头部背景色
|
||||
--mars-base-border-color: #b9b9b9;
|
||||
--mars-list-active: linear-gradient(90deg, rgba(0, 138, 255, 0) 0%, rgba(0, 138, 255, 0.58) 53%, rgba(0, 138, 255, 0.02) 100%);
|
||||
|
||||
--mars-title-active: linear-gradient(0deg, rgba(0, 138, 255, 0.6) 0%, rgba(0, 138, 255, 0) 100%);
|
||||
--mars-title-text-active: #ffffff;
|
||||
|
||||
--mars-menu-emb: url(../assets/images/sub-menu-emb.png);
|
||||
|
||||
--mars-msg-title-bg: url(../assets/images/msg-title-bg.png);
|
||||
--mars-msg-title-color: #c7d3dd;
|
||||
--mars-msg-content-bg: url("../assets/images/border-image-base.png");
|
||||
|
||||
--mars-alert-title-color: #0089fe;
|
||||
|
||||
--mars-scrollbar-thumb: #134875;
|
||||
--mars-scrollbar-track: #173147;
|
||||
|
||||
--mars-sub-title-color: #cdcdcd; // 小标题的颜色
|
||||
|
||||
--mars-collapse-title-bg: url("@/mars/components/mars-ui/assets/images/tab-title.png");
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
:root[data-theme="dark"] {
|
||||
--zhts-title-bg: url("../assets/images/header-bg.png");
|
||||
--zhts-title-img: url("../assets/images/heade-title-bg.png");
|
||||
}
|
||||
:root[data-theme="dark"] {
|
||||
--mars-primary-color: rgba(0, 138, 255, 0.9);
|
||||
--mars-primary-half-color: rgba(0, 138, 255, 0.5);
|
||||
--mars-sub-color: #26ddff;
|
||||
--mars-danger-color: #f75165;
|
||||
--mars-warning-color: #ff8041;
|
||||
--mars-success-color: #18af92;
|
||||
--mars-base-color: #ffffff;
|
||||
--mars-content-color: #cdcdcd;
|
||||
--mars-text-color: #ffffff;
|
||||
--mars-hover-btn-bg: #3ea6ff;
|
||||
--mars-click-btn-bg: #015dab;
|
||||
--mars-disable-btn-bg: #cdcdcd;
|
||||
--mars-base-border: #ffffff;
|
||||
--mars-select-bg: rgba(0, 138, 255, 0.2);
|
||||
--mars-bg-base: rgba(23, 49, 71, 0.8);
|
||||
--mars-odd-table-bg: rgba(0, 138, 255, 0.06);
|
||||
--mars-bg-title: #0f3453;
|
||||
--mars-base-border-color: #b9b9b9;
|
||||
--mars-list-active: linear-gradient(90deg, rgba(0, 138, 255, 0) 0%, rgba(0, 138, 255, 0.58) 53%, rgba(0, 138, 255, 0.02) 100%);
|
||||
--mars-title-active: linear-gradient(0deg, rgba(0, 138, 255, 0.6) 0%, rgba(0, 138, 255, 0) 100%);
|
||||
--mars-title-text-active: #ffffff;
|
||||
--mars-menu-emb: url(../assets/images/sub-menu-emb.png);
|
||||
--mars-msg-title-bg: url(../assets/images/msg-title-bg.png);
|
||||
--mars-msg-title-color: #c7d3dd;
|
||||
--mars-msg-content-bg: url("../assets/images/border-image-base.png");
|
||||
--mars-alert-title-color: #0089fe;
|
||||
--mars-scrollbar-thumb: #134875;
|
||||
--mars-scrollbar-track: #173147;
|
||||
--mars-sub-title-color: #cdcdcd;
|
||||
--mars-collapse-title-bg: url("@/mars/components/mars-ui/assets/images/tab-title.png");
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// 综合态势css变量
|
||||
:root[data-theme="dark"] {
|
||||
--zhts-title-bg: url("../assets/images/header-bg.png");
|
||||
--zhts-title-img: url("../assets/images/heade-title-bg.png");
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import "./dark/index.less"
|
||||
import "./light/index.less"
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
@import url("./zhts.less");
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--mars-primary-color: rgb(0, 138, 255);
|
||||
--mars-primary-half-color: rgb(0, 138, 255);
|
||||
--mars-sub-color: #26ddff;
|
||||
--mars-danger-color: #f75165;
|
||||
--mars-warning-color: #ff8041;
|
||||
--mars-success-color: #18af92;
|
||||
--mars-base-color: #ffffff;
|
||||
--mars-content-color: #cdcdcd;
|
||||
--mars-text-color: #19212f;
|
||||
--mars-hover-btn-bg: #3ea6ff;
|
||||
--mars-click-btn-bg: #015dab;
|
||||
--mars-disable-btn-bg: #cdcdcd;
|
||||
--mars-base-border: #e9ecf3;
|
||||
--mars-select-bg: rgba(0, 138, 255, 0.2);
|
||||
--mars-bg-base: #ffffff;
|
||||
--mars-odd-table-bg: #f4faff; // 奇数表格背景
|
||||
--mars-bg-title: rgb(0, 138, 255); // 普通的头部背景色
|
||||
--mars-base-border-color: #b9b9b9;
|
||||
--mars-list-active: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 98%, rgb(0, 138, 255) 100%);
|
||||
|
||||
--mars-title-active: rgba(255, 255, 255, 0.8);
|
||||
--mars-title-text-active: #ffffff;
|
||||
|
||||
--mars-menu-emb: url(../assets/images/sub-menu-emb-light.png);
|
||||
|
||||
--mars-msg-title-bg: #008aff;
|
||||
--mars-msg-title-color: #1995ff;
|
||||
--mars-msg-content-bg: #ffffff;
|
||||
|
||||
--mars-alert-title-color: #ffffff;
|
||||
--mars-sub-title-color: #707782; // 小标题的颜色
|
||||
|
||||
--mars-scrollbar-thumb: rgba(0, 138, 255, 0.4);
|
||||
--mars-scrollbar-track: rgb(236, 236, 236);
|
||||
|
||||
--mars-collapse-title-bg: #008aff;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
// 综合态势css变量
|
||||
:root[data-theme="light"] {
|
||||
--zhts-title-bg: #008AFF;
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<template>
|
||||
<ConfigProvider :locale="locale">
|
||||
<div class="mars-main-view" id="mars-main-view">
|
||||
<div id="centerDiv" class="centerDiv-container">
|
||||
<mars-map :url="configUrl" :options="mapOptions" @onload="marsOnload" />
|
||||
</div>
|
||||
<template v-if="loaded">
|
||||
<template v-for="comp in widgets" :key="comp.key">
|
||||
<mars-widget v-if="openAtStart.includes(comp.name) && comp.visible" v-model:visible="comp.visible" :widget="comp" />
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 渲染主入口
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-02-19
|
||||
*/
|
||||
|
||||
import zhCN from "ant-design-vue/es/locale/zh_CN"
|
||||
import { computed, provide, ref } from "vue"
|
||||
import { ConfigProvider } from "ant-design-vue"
|
||||
import { useWidgetStore } from "@/mars/common/store/widget"
|
||||
import MarsMap from "@/mars/components/mars-work/mars-map.vue"
|
||||
import MarsWidget from "./widget.vue"
|
||||
|
||||
|
||||
const locale = zhCN
|
||||
|
||||
const widgetStore = useWidgetStore()
|
||||
|
||||
const widgets = computed(() => widgetStore.state.widgets)
|
||||
|
||||
const openAtStart = computed(() => widgetStore.state.openAtStart)
|
||||
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
mapOptions?: any
|
||||
url?:string
|
||||
}>(),
|
||||
{
|
||||
mapOptions: () => ({}),
|
||||
url: ""
|
||||
}
|
||||
)
|
||||
const configUrl = (props.url === "" || !props.url) ? `${process.env.BASE_URL}config/config.json?time=${new Date().getTime()}` : props.url
|
||||
|
||||
|
||||
let mapInstance: any = null
|
||||
provide("getMapInstance", () => {
|
||||
return mapInstance
|
||||
})
|
||||
|
||||
const emit = defineEmits(["mapLoaded"])
|
||||
|
||||
const loaded = ref(false)
|
||||
const marsOnload = (map: any) => {
|
||||
console.log("map构造完成", map)
|
||||
mapInstance = map
|
||||
emit("mapLoaded", mapInstance)
|
||||
loaded.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mars-main-view {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.centerDiv-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,378 +0,0 @@
|
|||
<template>
|
||||
<div :id="withKeyId" class="mars3d-container"></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 地图渲染组件
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-02-19
|
||||
*/
|
||||
import { computed, onUnmounted, onMounted, h, ref } from "vue"
|
||||
import * as mars3d from "mars3d"
|
||||
import { getQueryString } from "@/mars/utils/mars-util"
|
||||
import { getDefaultContextMenu } from "@/mars/utils/getDefaultContextMenu"
|
||||
import { $alert, $message } from "@/mars/components/mars-ui/index"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
url: string
|
||||
mapKey?: string
|
||||
options?: any
|
||||
}>(),
|
||||
{
|
||||
url: "",
|
||||
mapKey: "default",
|
||||
options: () => ({})
|
||||
}
|
||||
)
|
||||
|
||||
// 用于存放地球组件实例
|
||||
let map: mars3d.Map // 地图对象
|
||||
|
||||
// 使用用户传入的 mapKey 拼接生成 withKeyId 作为当前显示容器的id
|
||||
const withKeyId = computed(() => `mars3d-container-${props.mapKey}`)
|
||||
|
||||
console.log("URL",props.url)
|
||||
onMounted(() => {
|
||||
// 获取配置
|
||||
mars3d.Util.fetchJson({ url: props.url }).then((data: any) => {
|
||||
if (data.map3d) {
|
||||
initMars3d(data.map3d)
|
||||
} else {
|
||||
initMars3d(data)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// onload事件将在地图渲染后触发
|
||||
const emit = defineEmits(["onload"])
|
||||
const initMars3d = (option: any) => {
|
||||
option = mars3d.Util.merge(option, props.options) // 合并配置
|
||||
console.log("OPTIONS",option);
|
||||
|
||||
map = new mars3d.Map(withKeyId.value, option)
|
||||
|
||||
// 绑定当前项目的默认右键菜单
|
||||
map.bindContextMenu(getDefaultContextMenu(map))
|
||||
|
||||
// 如果有xyz传参，进行定位
|
||||
const lat = getQueryString("lat")
|
||||
const lng = getQueryString("lng")
|
||||
if (lat && lng) {
|
||||
map.flyToPoint(new mars3d.LngLatPoint(lng, lat), { duration: 0 })
|
||||
}
|
||||
|
||||
// 开场动画
|
||||
// map.openFlyAnimation();
|
||||
|
||||
// 针对不同终端的优化配置
|
||||
if (mars3d.Util.isPCBroswer()) {
|
||||
map.zoomFactor = 2.0 // 鼠标滚轮放大的步长参数
|
||||
|
||||
// IE浏览器优化
|
||||
if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
|
||||
map.viewer.targetFrameRate = 20 // 限制帧率
|
||||
map.scene.requestRenderMode = false // 取消实时渲染
|
||||
}
|
||||
} else {
|
||||
map.zoomFactor = 5.0 // 鼠标滚轮放大的步长参数
|
||||
|
||||
// 移动设备上禁掉以下几个选项，可以相对更加流畅
|
||||
map.scene.requestRenderMode = false // 取消实时渲染
|
||||
map.scene.fog.enabled = false
|
||||
map.scene.skyAtmosphere.show = false
|
||||
map.scene.globe.showGroundAtmosphere = false
|
||||
}
|
||||
|
||||
// //二三维切换不用动画
|
||||
if (map.viewer.sceneModePicker) {
|
||||
map.viewer.sceneModePicker.viewModel.duration = 0.0
|
||||
}
|
||||
|
||||
// webgl渲染失败后，刷新页面
|
||||
map.on(mars3d.EventType.renderError, async () => {
|
||||
await $alert("程序内存消耗过大，请重启浏览器")
|
||||
window.location.reload()
|
||||
})
|
||||
|
||||
// map构造完成后的一些处理
|
||||
onMapLoad()
|
||||
|
||||
emit("onload", map)
|
||||
}
|
||||
|
||||
// map构造完成后的一些处理
|
||||
function onMapLoad() {
|
||||
// Mars3D地图内部使用，如右键菜单弹窗
|
||||
// @ts-ignore
|
||||
window.globalAlert = $alert
|
||||
// @ts-ignore
|
||||
window.globalMsg = $message
|
||||
|
||||
// 用于 config.json 中 西藏垭口 图层的详情按钮 演示
|
||||
// @ts-ignore
|
||||
window.showPopupDetails = (item: any) => {
|
||||
$alert(item.NAME)
|
||||
}
|
||||
|
||||
// 用于 config.json中配置的图层，绑定额外方法和参数
|
||||
const tiles3dLayer = map.getLayerById(204012) // 上海市区
|
||||
if (tiles3dLayer) {
|
||||
tiles3dLayer.options.onSetOpacity = function (opacity: number) {
|
||||
tiles3dLayer.style = {
|
||||
color: {
|
||||
conditions: [
|
||||
["${floor} >= 200", "rgba(45, 0, 75," + 0.5 * opacity + ")"],
|
||||
["${floor} >= 100", "rgba(170, 162, 204," + opacity + ")"],
|
||||
["${floor} >= 50", "rgba(224, 226, 238," + opacity + ")"],
|
||||
["${floor} >= 25", "rgba(252, 230, 200," + opacity + ")"],
|
||||
["${floor} >= 10", "rgba(248, 176, 87," + opacity + ")"],
|
||||
["${floor} >= 5", "rgba(198, 106, 11," + opacity + ")"],
|
||||
["true", "rgba(127, 59, 8," + opacity + ")"]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 组件卸载之前销毁mars3d实例
|
||||
onUnmounted(() => {
|
||||
if (map) {
|
||||
map.destroy()
|
||||
map = null
|
||||
}
|
||||
console.log("map销毁完成", map)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/** cesium 工具按钮栏 */
|
||||
.cesium-viewer-toolbar {
|
||||
inset: auto auto 35px 12px !important;
|
||||
}
|
||||
|
||||
.cesium-toolbar-button img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cesium-viewer-toolbar > .cesium-toolbar-button,
|
||||
.cesium-navigationHelpButton-wrapper,
|
||||
.cesium-viewer-geocoderContainer {
|
||||
margin-bottom: 5px;
|
||||
float: left;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cesium-button {
|
||||
background-color: rgb(23 49 71 / 70%);
|
||||
box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
|
||||
fill: #e6e6e6;
|
||||
color: #e6e6e6;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.cesium-button:hover {
|
||||
background-color: rgb(0 138 255 / 70%);
|
||||
}
|
||||
|
||||
/** cesium 底图切换面板 */
|
||||
.cesium-baseLayerPicker-dropDown {
|
||||
bottom: 0;
|
||||
left: 40px;
|
||||
max-height: 700px;
|
||||
margin-bottom: 5px;
|
||||
background-color: rgb(23 49 71 / 70%);
|
||||
}
|
||||
|
||||
/** cesium 帮助面板 */
|
||||
.cesium-navigation-help {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 40px;
|
||||
transform-origin: left bottom;
|
||||
background: none;
|
||||
background-color: rgb(23 49 71 / 80%);
|
||||
|
||||
.cesium-navigation-help-instructions {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.cesium-navigation-button {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.cesium-navigation-button-selected,
|
||||
.cesium-navigation-button-unselected:hover {
|
||||
background-color: rgb(23 49 71 / 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/** cesium 二维三维切换 */
|
||||
.cesium-sceneModePicker-wrapper {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
|
||||
margin: 0 3px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/** cesium POI查询输入框 */
|
||||
.cesium-viewer-geocoderContainer .search-results {
|
||||
z-index: 9999;
|
||||
right: 40px;
|
||||
left: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cesium-geocoder-searchButton {
|
||||
background-color: rgb(23 49 71 / 80%);
|
||||
}
|
||||
|
||||
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
|
||||
background-color: rgb(63 72 84 / 70%);
|
||||
}
|
||||
|
||||
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
|
||||
background-color: var(--mars-bg-base, rgb(63 72 84 / 90%));
|
||||
}
|
||||
|
||||
.cesium-viewer-geocoderContainer .search-results {
|
||||
background-color: rgb(23 49 71 / 80%);
|
||||
}
|
||||
|
||||
/** cesium info信息框 */
|
||||
.cesium-infoBox {
|
||||
top: 50px;
|
||||
background: var(--mars-bg-base, rgb(63 72 84 / 90%));
|
||||
}
|
||||
|
||||
.cesium-infoBox-title {
|
||||
background-color: rgb(23 49 71 / 80%);
|
||||
}
|
||||
|
||||
/** cesium 任务栏的FPS信息 */
|
||||
.cesium-performanceDisplay-defaultContainer {
|
||||
top: auto;
|
||||
right: 50px;
|
||||
bottom: 35px;
|
||||
}
|
||||
|
||||
.cesium-performanceDisplay-ms,
|
||||
.cesium-performanceDisplay-fps {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/** cesium tileset调试信息面板 */
|
||||
.cesium-viewer-cesiumInspectorContainer {
|
||||
top: 10px;
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.cesium-cesiumInspector {
|
||||
background-color: rgb(23 49 71 / 80%);
|
||||
}
|
||||
|
||||
/** 覆盖mars3d内部控件的颜色等样式 */
|
||||
.mars3d-compass .mars3d-compass-outer {
|
||||
fill: rgb(23 49 71 / 80%);
|
||||
}
|
||||
|
||||
.mars3d-contextmenu-ul,
|
||||
.mars3d-sub-menu {
|
||||
background-color: rgb(23 49 71 / 80%);
|
||||
|
||||
> li > a:hover,
|
||||
> li > a:focus,
|
||||
> li > .active {
|
||||
background-color: var(--mars-hover-btn-bg, #3ea6ff);
|
||||
}
|
||||
|
||||
> .active > a,
|
||||
> .active > a:hover,
|
||||
> .active > a:focus {
|
||||
background-color: var(--mars-hover-btn-bg, #3ea6ff);
|
||||
}
|
||||
}
|
||||
|
||||
/* Popup样式 */
|
||||
.mars3d-popup-color {
|
||||
color: var(--mars-text-color, #fff);
|
||||
}
|
||||
|
||||
.mars3d-popup-background {
|
||||
background: var(--mars-bg-base, rgb(63 72 84 / 90%));
|
||||
}
|
||||
|
||||
.mars3d-popup-content {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.mars3d-popup-btn-custom {
|
||||
padding: 3px 10px;
|
||||
border: 1px solid #209ffd;
|
||||
background: #209ffd1c;
|
||||
}
|
||||
|
||||
.mars3d-tooltip {
|
||||
border: 1px solid var(--mars-bg-base, rgb(63 72 84 / 90%));
|
||||
background: var(--mars-bg-base, rgb(63 72 84 / 90%));
|
||||
color: var(--mars-text-color, #fff);
|
||||
}
|
||||
|
||||
.mars3d-tooltip-top::before {
|
||||
border-top-color: var(--mars-bg-base, rgb(23 49 71 / 80%));
|
||||
}
|
||||
|
||||
.mars3d-tooltip-bottom::before {
|
||||
border-bottom-color: var(--mars-bg-base, rgb(23 49 71 / 80%));
|
||||
}
|
||||
|
||||
.mars3d-tooltip-left::before {
|
||||
border-left-color: var(--mars-bg-base, rgb(23 49 71 / 80%));
|
||||
}
|
||||
|
||||
.mars3d-tooltip-right::before {
|
||||
border-right-color: var(--mars-bg-base, rgb(23 49 71 / 80%));
|
||||
}
|
||||
|
||||
/* all 中的html样式 */
|
||||
.mars3d-template-titile {
|
||||
border-bottom: 1px solid var(--mars-hover-btn-bg);
|
||||
color: var(--mars-base-color);
|
||||
|
||||
a {
|
||||
color: var(--mars-msg-title-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mars3d-template-content {
|
||||
label {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 4px 5px;
|
||||
background-color: transparent !important;
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #cdcdcd !important;
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 4px 5px;
|
||||
background-color: transparent !important;
|
||||
color: var(--mars-base-color);
|
||||
}
|
||||
|
||||
textarea::placeholder {
|
||||
color: #cdcdcd !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<component :is="widget.component" v-bind="getWidgetAttr(widget)" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { useAttrs, defineComponent, provide } from "vue"
|
||||
import type { Widget } from "@/mars/common/store/widget"
|
||||
|
||||
export default defineComponent({
|
||||
name: "mars-widget",
|
||||
props: ["widget"],
|
||||
setup(props) {
|
||||
const attrs = useAttrs()
|
||||
|
||||
provide("getCurrentWidget", () => {
|
||||
return props.widget.name
|
||||
})
|
||||
|
||||
const getWidgetAttr = (widget: Widget) => {
|
||||
let attr = {}
|
||||
if (widget.meta && widget.meta.props) {
|
||||
attr = {
|
||||
...attr,
|
||||
...widget.meta.props
|
||||
}
|
||||
}
|
||||
if (widget.data && widget.data.props) {
|
||||
attr = {
|
||||
...attr,
|
||||
...widget.data.props
|
||||
}
|
||||
}
|
||||
return attr
|
||||
}
|
||||
|
||||
return {
|
||||
attrs,
|
||||
getWidgetAttr
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
|
||||
import * as Cesium from "mars3d-cesium"
|
||||
|
||||
import "mars3d/dist/mars3d.css"
|
||||
import * as mars3d from "mars3d"
|
||||
|
||||
|
||||
import { App } from "vue"
|
||||
import { injectState, key } from "@/mars/common/store/widget"
|
||||
import store from "./widget-store"
|
||||
import MarsUIInstall from "@/mars/components/mars-ui"
|
||||
import "@/mars/components/mars-ui/common"
|
||||
|
||||
export default {
|
||||
install: (app: App) => {
|
||||
// mars3d sdk的挂载
|
||||
app.config.globalProperties.Cesium = Cesium
|
||||
app.config.globalProperties.mars3d = mars3d
|
||||
// mars3d基础项目
|
||||
MarsUIInstall(app)
|
||||
app.use(injectState(store), key)
|
||||
|
||||
return app
|
||||
}
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
/**
|
||||
* index页面的widget配置
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-02-19
|
||||
*/
|
||||
/*
|
||||
* @Author: 滕嵩
|
||||
* @Date: 2024-01-24 08:53:41
|
||||
* @LastEditors: 滕嵩
|
||||
* @LastEditTime: 2024-01-25 10:54:42
|
||||
* @FilePath: \vue-vben-admin\src\mars\install\widget-store.ts
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
import { defineAsyncComponent, markRaw } from "vue"
|
||||
import { WidgetState } from "@/mars/common/store/widget"
|
||||
import { StoreOptions } from "vuex"
|
||||
|
||||
/*
|
||||
export interface WidgetState {
|
||||
widgets: Widget[] // widget具体配置
|
||||
openAtStart: string[] // 默认加载的widget
|
||||
defaultOption ?: DefaultOption // 支持配置默认参数
|
||||
}
|
||||
*/
|
||||
const store: StoreOptions<WidgetState> = {
|
||||
state: {
|
||||
widgets:[
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/query-poi/index.vue"))),
|
||||
name: "query-poi",
|
||||
autoDisable: true
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/toolbar/index.vue"))),
|
||||
name: "toolbar",
|
||||
autoDisable: true
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-basemap/index.vue"))),
|
||||
name: "manage-basemap",
|
||||
group: "manage"
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/index.vue"))),
|
||||
name: "manage-layers",
|
||||
group: "manage",
|
||||
disableOther: ["roamLine"]
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/layer-tree.vue"))),
|
||||
name: "layer-tree"
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/layer-picture-heatmap.vue"))),
|
||||
name: "layer-picture-heatmap"
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/layer-picture-guihua.vue"))),
|
||||
name: "layer-picture-guihua"
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/location-point/index.vue"))),
|
||||
name: "location-point",
|
||||
group: "tools"
|
||||
}
|
||||
],
|
||||
openAtStart: ["query-poi", "toolbar"]
|
||||
}
|
||||
}
|
||||
|
||||
export default store
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
/**
|
||||
* index页面的widget配置
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-02-19
|
||||
*/
|
||||
/*
|
||||
* @Author: 滕嵩
|
||||
* @Date: 2024-01-24 08:53:41
|
||||
* @LastEditors: 滕嵩
|
||||
* @LastEditTime: 2024-01-25 10:54:42
|
||||
* @FilePath: \vue-vben-admin\src\mars\install\widget-store.ts
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
import { defineAsyncComponent, markRaw } from "vue"
|
||||
import { WidgetState } from "@/mars/common/store/widget"
|
||||
import { StoreOptions } from "vuex"
|
||||
|
||||
const store: StoreOptions<WidgetState> = {
|
||||
state: {
|
||||
widgets:[
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/query-poi/index.vue"))),
|
||||
name: "query-poi",
|
||||
autoDisable: true
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/toolbar/index.vue"))),
|
||||
name: "toolbar",
|
||||
autoDisable: true
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-basemap/index.vue"))),
|
||||
name: "manage-basemap",
|
||||
group: "manage"
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/index.vue"))),
|
||||
name: "manage-layers",
|
||||
group: "manage",
|
||||
disableOther: ["roamLine"]
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/layer-tree.vue"))),
|
||||
name: "layer-tree"
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/layer-picture-heatmap.vue"))),
|
||||
name: "layer-picture-heatmap"
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/layer-picture-guihua.vue"))),
|
||||
name: "layer-picture-guihua"
|
||||
},
|
||||
{
|
||||
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/location-point/index.vue"))),
|
||||
name: "location-point",
|
||||
group: "tools"
|
||||
}
|
||||
],
|
||||
openAtStart: ["query-poi", "toolbar"]
|
||||
}
|
||||
}
|
||||
|
||||
export default store
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
/// <reference types="vite/client" />
|
||||
/**
|
||||
* 统一定义ts模块类型
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
|
||||
declare module "*.vue" {
|
||||
import { DefineComponent } from "vue"
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
||||
declare module "nprogress" {
|
||||
const nprogress: any
|
||||
export default nprogress
|
||||
}
|
||||
|
||||
declare module "uuid" {
|
||||
export const v4: any
|
||||
}
|
||||
|
||||
declare module "mapv" {
|
||||
export const geojson: any
|
||||
export const DataSet: any
|
||||
export const utilCityCenter: any
|
||||
export const utilCurve: any
|
||||
}
|
||||
|
||||
declare module "kml-geojson" {
|
||||
export const toKml: (geojson:any, options:any) => any
|
||||
export const toGeoJSON: (doc:any) => any
|
||||
}
|
||||
|
||||
// declare module "*.svg" {
|
||||
// const svg: any
|
||||
// export default svg
|
||||
// }
|
||||
|
||||
// declare module "*.png" {
|
||||
// const png: string
|
||||
// export default png
|
||||
// }
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
/**
|
||||
* 文件处理相关 静态Util方法
|
||||
*
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
import { toKml } from "kml-geojson"
|
||||
import _ from "lodash"
|
||||
import { createApp } from "vue"
|
||||
|
||||
export function saveJSON(data: any[]) {
|
||||
if (data == null || !data) {
|
||||
alert("当前未标记任何数据！")
|
||||
} else {
|
||||
const strData = JSON.stringify(data)
|
||||
|
||||
const aLink = document.createElement("a")
|
||||
aLink.download = "我的标记点.json"
|
||||
const blob = new Blob([strData])
|
||||
aLink.href = URL.createObjectURL(blob)
|
||||
document.body.appendChild(aLink)
|
||||
aLink.click()
|
||||
document.body.removeChild(aLink)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 读取json文件内容
|
||||
*
|
||||
* @template T 返回的数据类型
|
||||
* @param {*} file 文件选择框选择的文件对象
|
||||
* @return {*} {Promise<T>}
|
||||
*/
|
||||
export function readJSON<T>(file: any): Promise<T> {
|
||||
return new Promise((resolve) => {
|
||||
const fileName = file.name
|
||||
const fileType = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase()
|
||||
if (fileType !== "json") {
|
||||
alert("文件类型不合法,请选择json格式标注文件！")
|
||||
return
|
||||
}
|
||||
|
||||
if (window.FileReader) {
|
||||
const reader = new FileReader()
|
||||
reader.readAsText(file, "UTF-8")
|
||||
reader.onloadend = function () {
|
||||
resolve(JSON.parse(this.result as string))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function saveGeoJSON2Kml(geojson: string, options: any): any {
|
||||
const geojsonObject = _.cloneDeep(geojson)
|
||||
|
||||
const kml = toKml(geojsonObject, {
|
||||
name: "Mars3D标绘数据",
|
||||
documentName: "Mars3D标绘数据文件",
|
||||
documentDescription: "标绘数据 by mars3d.cn",
|
||||
simplestyle: true,
|
||||
...options
|
||||
})
|
||||
return kml
|
||||
}
|
||||
|
||||
/**
|
||||
* Vue3组件示例化为Popup的DOM
|
||||
*
|
||||
* @param {*} comp 传入的vue组件
|
||||
* @param {*} para 传入的vue组件的参数
|
||||
* @return {*} HTMLElement
|
||||
*/
|
||||
export function initVue3Popup(comp, para) {
|
||||
const vNodeDom = document.createElement("div")
|
||||
document.body.appendChild(vNodeDom)
|
||||
|
||||
const vNode = createApp(comp, { ...para }) // vue2中可使用extend
|
||||
vNode.mount(vNodeDom)
|
||||
return vNode._container
|
||||
}
|
||||
|
||||
|
|
@ -1,840 +0,0 @@
|
|||
import * as mars3d from "mars3d"
|
||||
import { $alert as globalAlert } from "@/mars/components/mars-ui/index"
|
||||
import {
|
||||
Home,
|
||||
Local,
|
||||
PreviewOpen,
|
||||
AppSwitch,
|
||||
Forbid,
|
||||
Cube,
|
||||
MultiTriangular,
|
||||
Shovel,
|
||||
Close,
|
||||
MapDistance,
|
||||
Ruler,
|
||||
Texture,
|
||||
AutoHeightOne,
|
||||
Compass,
|
||||
DeleteKey,
|
||||
Mark,
|
||||
Label,
|
||||
Change,
|
||||
BringToFrontOne,
|
||||
Asterisk,
|
||||
Rectangle,
|
||||
Editor,
|
||||
Export,
|
||||
ClearFormat,
|
||||
Effects,
|
||||
LightRain,
|
||||
Snow,
|
||||
Fog,
|
||||
Halo,
|
||||
Brightness,
|
||||
DarkMode,
|
||||
Blackboard,
|
||||
HighLight,
|
||||
Config,
|
||||
LandSurveying,
|
||||
TwoTriangles,
|
||||
Sun,
|
||||
FlightAirflow,
|
||||
AddPicture,
|
||||
SwitchThemes,
|
||||
Agreement,
|
||||
TakeOff,
|
||||
KeyboardOne,
|
||||
RecentViewsSort,
|
||||
MoveInOne,
|
||||
ExclusiveGateway,
|
||||
CloseOne,
|
||||
LockOne,
|
||||
Box,
|
||||
MonitorOff,
|
||||
MapTwo,
|
||||
International,
|
||||
DatabaseForbid
|
||||
} from "@icon-park/svg"
|
||||
|
||||
const Cesium = mars3d.Cesium
|
||||
|
||||
// 获取平台内置的右键菜单
|
||||
export function getDefaultContextMenu(map) {
|
||||
const that = map.contextmenu
|
||||
return [
|
||||
{
|
||||
text: "查看此处坐标",
|
||||
icon: Local({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return Cesium.defined(e.cartesian)
|
||||
},
|
||||
callback: function (e) {
|
||||
// 经纬度
|
||||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
|
||||
const ptNew = mars3d.PointTrans.proj4Trans([mpt.lng, mpt.lat], "EPSG:4326", mars3d.CRS.CGCS2000_GK_Zone_3)
|
||||
|
||||
const inhtml = `
|
||||
经度:${mpt.lng}, 纬度:${mpt.lat}, 海拔:${mpt.alt},
|
||||
|
||||
横坐标:${ptNew[0].toFixed(1)}, 纵坐标:${ptNew[1].toFixed(1)} (CGCS2000)
|
||||
`
|
||||
globalAlert(inhtml, "位置信息")
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "查看当前视角",
|
||||
icon: PreviewOpen({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
const mpt = JSON.stringify(map.getCameraView())
|
||||
globalAlert(mpt, "当前视角信息")
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "视角切换",
|
||||
icon: SwitchThemes({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
children: [
|
||||
{
|
||||
text: "允许进入地下",
|
||||
icon: Agreement({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.scene.screenSpaceCameraController.enableCollisionDetection
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.screenSpaceCameraController.enableCollisionDetection = false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "禁止进入地下",
|
||||
icon: Forbid({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !map.scene.screenSpaceCameraController.enableCollisionDetection
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.screenSpaceCameraController.enableCollisionDetection = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "绕此处环绕飞行",
|
||||
icon: TakeOff({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return e.cartesian && (!that.rotatePoint || !that.rotatePoint?.isStart)
|
||||
},
|
||||
callback: function (e) {
|
||||
if (!that.rotatePoint) {
|
||||
that.rotatePoint = new mars3d.thing.RotatePoint()
|
||||
map.addThing(that.rotatePoint)
|
||||
}
|
||||
that.rotatePoint.start(e.cartesian)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭环绕飞行",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.rotatePoint?.isStart
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.rotatePoint) {
|
||||
that.rotatePoint.stop()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
text: "移动到此处",
|
||||
icon: MoveInOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return Cesium.defined(e.cartesian)
|
||||
},
|
||||
callback: function (e) {
|
||||
const cameraDistance = Cesium.Cartesian3.distance(e.cartesian, map.camera.positionWC) * 0.1
|
||||
|
||||
map.flyToPoint(e.cartesian, {
|
||||
radius: cameraDistance, // 距离目标点的距离
|
||||
maximumHeight: map.camera.positionCartographic.height
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "第一视角站到此处",
|
||||
icon: RecentViewsSort({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return Cesium.defined(e.cartesian)
|
||||
},
|
||||
callback: function (e) {
|
||||
map.camera.flyTo({
|
||||
destination: mars3d.PointUtil.addPositionsHeight(e.cartesian, 10), // 升高10米
|
||||
orientation: {
|
||||
heading: map.camera.heading,
|
||||
pitch: 0.0,
|
||||
roll: 0.0
|
||||
},
|
||||
maximumHeight: map.camera.positionCartographic.height
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "开启键盘漫游",
|
||||
icon: KeyboardOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !map.keyboardRoam.enabled
|
||||
},
|
||||
callback: function (e) {
|
||||
map.keyboardRoam.enabled = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭键盘漫游",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.keyboardRoam.enabled
|
||||
},
|
||||
callback: function (e) {
|
||||
map.keyboardRoam.enabled = false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "取消锁定",
|
||||
icon: LockOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.trackedEntity !== undefined
|
||||
},
|
||||
callback: function (e) {
|
||||
map.trackedEntity = undefined
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "三维模型",
|
||||
icon: Cube({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
|
||||
return Cesium.defined(model)
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: "显示三角网",
|
||||
icon: MultiTriangular({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
|
||||
return !model.debugWireframe
|
||||
},
|
||||
callback: function (e) {
|
||||
const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
|
||||
model.debugWireframe = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭三角网",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
|
||||
return model.debugWireframe
|
||||
},
|
||||
callback: function (e) {
|
||||
const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
|
||||
model.debugWireframe = false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "显示包围盒",
|
||||
icon: Box({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
|
||||
return !model.debugShowBoundingVolume
|
||||
},
|
||||
callback: function (e) {
|
||||
const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
|
||||
model.debugShowBoundingVolume = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭包围盒",
|
||||
icon: MonitorOff({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
|
||||
return model.debugShowBoundingVolume
|
||||
},
|
||||
callback: function (e) {
|
||||
const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
|
||||
model.debugShowBoundingVolume = false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "地形服务",
|
||||
icon: International({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return Cesium.defined(e.cartesian)
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: "开启地形",
|
||||
icon: MapTwo({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !map.hasTerrain
|
||||
},
|
||||
callback: function (e) {
|
||||
map.hasTerrain = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭地形",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.hasTerrain
|
||||
},
|
||||
callback: function (e) {
|
||||
map.hasTerrain = false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "显示三角网",
|
||||
icon: MultiTriangular({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !map.scene.globe._surface.tileProvider._debug.wireframe
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.globe._surface.tileProvider._debug.wireframe = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭三角网",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.scene.globe._surface.tileProvider._debug.wireframe
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.globe._surface.tileProvider._debug.wireframe = false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "图上量算",
|
||||
icon: Ruler({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
children: [
|
||||
{
|
||||
text: "距离",
|
||||
icon: MapDistance({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
if (!that.measure) {
|
||||
that.measure = new mars3d.thing.Measure()
|
||||
map.addThing(that.measure)
|
||||
}
|
||||
that.measure.distance()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "面积",
|
||||
icon: Texture({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
if (!that.measure) {
|
||||
that.measure = new mars3d.thing.Measure()
|
||||
map.addThing(that.measure)
|
||||
}
|
||||
that.measure.area()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "高度差",
|
||||
icon: AutoHeightOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
if (!that.measure) {
|
||||
that.measure = new mars3d.thing.Measure()
|
||||
map.addThing(that.measure)
|
||||
}
|
||||
that.measure.heightTriangle()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "角度",
|
||||
icon: Compass({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
if (!that.measure) {
|
||||
that.measure = new mars3d.thing.Measure()
|
||||
map.addThing(that.measure)
|
||||
}
|
||||
that.measure.angle()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "删除测量",
|
||||
icon: DeleteKey({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.measure && that.measure.hasMeasure
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.measure) {
|
||||
that.measure.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
text: "图上标记",
|
||||
icon: Mark({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
children: [
|
||||
{
|
||||
text: "标记点",
|
||||
icon: Label({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
map.graphicLayer.startDraw({
|
||||
type: "point",
|
||||
style: {
|
||||
pixelSize: 12,
|
||||
color: "#3388ff"
|
||||
},
|
||||
success: function (graphic) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(JSON.stringify(graphic.coordinates))
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "标记线",
|
||||
icon: Change({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
map.graphicLayer.startDraw({
|
||||
type: "polyline",
|
||||
style: {
|
||||
color: "#55ff33",
|
||||
width: 3
|
||||
},
|
||||
success: function (graphic) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(JSON.stringify(graphic.coordinates))
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "标记面",
|
||||
icon: BringToFrontOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
map.graphicLayer.startDraw({
|
||||
type: "polygon",
|
||||
style: {
|
||||
color: "#29cf34",
|
||||
opacity: 0.5,
|
||||
outline: true,
|
||||
outlineWidth: 2.0
|
||||
},
|
||||
success: function (graphic) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(JSON.stringify(graphic.coordinates))
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "标记圆",
|
||||
icon: Asterisk({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
map.graphicLayer.startDraw({
|
||||
type: "circle",
|
||||
style: {
|
||||
color: "#ffff00",
|
||||
opacity: 0.6
|
||||
},
|
||||
success: function (graphic) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(JSON.stringify(graphic.coordinates))
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "标记矩形",
|
||||
icon: Rectangle({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
map.graphicLayer.startDraw({
|
||||
type: "rectangle",
|
||||
style: {
|
||||
color: "#ffff00",
|
||||
opacity: 0.6
|
||||
},
|
||||
success: function (graphic) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(JSON.stringify(graphic.coordinates))
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "允许编辑",
|
||||
icon: Editor({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !map.graphicLayer.hasEdit
|
||||
},
|
||||
callback: function (e) {
|
||||
map.graphicLayer.hasEdit = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "禁止编辑",
|
||||
icon: DatabaseForbid({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.graphicLayer.hasEdit
|
||||
},
|
||||
callback: function (e) {
|
||||
map.graphicLayer.hasEdit = false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "导出GeoJSON",
|
||||
icon: Export({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.graphicLayer.length > 0
|
||||
},
|
||||
callback: function (e) {
|
||||
mars3d.Util.downloadFile("图上标记.json", JSON.stringify(map.graphicLayer.toGeoJSON()))
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "清除所有标记",
|
||||
icon: ClearFormat({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.graphicLayer.length > 0
|
||||
},
|
||||
callback: function (e) {
|
||||
map.graphicLayer.clear()
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "特效效果",
|
||||
icon: Effects({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
children: [
|
||||
{
|
||||
text: "开启下雨",
|
||||
icon: LightRain({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !that.rainEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (!that.rainEffect) {
|
||||
that.rainEffect = new mars3d.effect.RainEffect()
|
||||
map.addEffect(that.rainEffect)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭下雨",
|
||||
icon: Close({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.rainEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.rainEffect) {
|
||||
map.removeEffect(that.rainEffect, true)
|
||||
delete that.rainEffect
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "开启下雪",
|
||||
icon: Snow({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !that.snowEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (!that.snowEffect) {
|
||||
that.snowEffect = new mars3d.effect.SnowEffect()
|
||||
map.addEffect(that.snowEffect)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭下雪",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.snowEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.snowEffect) {
|
||||
map.removeEffect(that.snowEffect, true)
|
||||
delete that.snowEffect
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
text: "开启雾天气",
|
||||
icon: Fog({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !that.fogEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (!that.fogEffect) {
|
||||
const height = map.camera.positionCartographic.height * 2
|
||||
that.fogEffect = new mars3d.effect.FogEffect({
|
||||
fogByDistance: new Cesium.Cartesian4(0.1 * height, 0.1, height, 0.8)
|
||||
})
|
||||
map.addEffect(that.fogEffect)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭雾天气",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.fogEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.fogEffect) {
|
||||
map.removeEffect(that.fogEffect, true)
|
||||
delete that.fogEffect
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
text: "开启泛光",
|
||||
icon: Halo({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !that.bloomEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (!that.bloomEffect) {
|
||||
that.bloomEffect = new mars3d.effect.BloomEffect()
|
||||
map.addEffect(that.bloomEffect)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭泛光",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.bloomEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.bloomEffect) {
|
||||
map.removeEffect(that.bloomEffect, true)
|
||||
delete that.bloomEffect
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
text: "开启亮度",
|
||||
icon: Brightness({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !that.brightnessEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (!that.brightnessEffect) {
|
||||
that.brightnessEffect = new mars3d.effect.BrightnessEffect()
|
||||
map.addEffect(that.brightnessEffect)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭亮度",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.brightnessEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.brightnessEffect) {
|
||||
map.removeEffect(that.brightnessEffect, true)
|
||||
delete that.brightnessEffect
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
text: "开启夜视",
|
||||
icon: DarkMode({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !that.nightVisionEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (!that.nightVisionEffect) {
|
||||
that.nightVisionEffect = new mars3d.effect.NightVisionEffect()
|
||||
map.addEffect(that.nightVisionEffect)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭夜视",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.nightVisionEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.nightVisionEffect) {
|
||||
map.removeEffect(that.nightVisionEffect, true)
|
||||
delete that.nightVisionEffect
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
text: "开启黑白",
|
||||
icon: Blackboard({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !that.blackAndWhiteEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (!that.blackAndWhiteEffect) {
|
||||
that.blackAndWhiteEffect = new mars3d.effect.BlackAndWhiteEffect()
|
||||
map.addEffect(that.blackAndWhiteEffect)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭黑白",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.blackAndWhiteEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.blackAndWhiteEffect) {
|
||||
map.removeEffect(that.blackAndWhiteEffect, true)
|
||||
delete that.blackAndWhiteEffect
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
text: "开启拾取高亮",
|
||||
icon: HighLight({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !that.outlineEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (!that.outlineEffect) {
|
||||
that.outlineEffect = new mars3d.effect.OutlineEffect()
|
||||
map.addEffect(that.outlineEffect)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭拾取高亮",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return that.outlineEffect
|
||||
},
|
||||
callback: function (e) {
|
||||
if (that.outlineEffect) {
|
||||
map.removeEffect(that.outlineEffect, true)
|
||||
delete that.outlineEffect
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "场景设置",
|
||||
icon: Config({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
children: [
|
||||
{
|
||||
text: "开启深度监测",
|
||||
icon: LandSurveying({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !map.scene.globe.depthTestAgainstTerrain
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.globe.depthTestAgainstTerrain = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭深度监测",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.scene.globe.depthTestAgainstTerrain
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.globe.depthTestAgainstTerrain = false
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
text: "显示星空背景",
|
||||
icon: TwoTriangles({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !map.scene.skyBox.show
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.skyBox.show = true // 天空盒
|
||||
map.scene.moon.show = true // 太阳
|
||||
map.scene.sun.show = true // 月亮
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭星空背景",
|
||||
icon: ExclusiveGateway({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.scene.skyBox.show
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.skyBox.show = false // 天空盒
|
||||
map.scene.moon.show = false // 太阳
|
||||
map.scene.sun.show = false // 月亮
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "开启日照阴影",
|
||||
icon: Sun({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !map.viewer.shadows
|
||||
},
|
||||
callback: function (e) {
|
||||
map.viewer.shadows = true
|
||||
map.viewer.terrainShadows = Cesium.ShadowMode.ENABLED
|
||||
map.scene.globe.enableLighting = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭日照阴影",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.viewer.shadows
|
||||
},
|
||||
callback: function (e) {
|
||||
map.viewer.shadows = false
|
||||
map.viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY
|
||||
map.scene.globe.enableLighting = false
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "开启大气渲染",
|
||||
icon: FlightAirflow({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return !map.scene.skyAtmosphere.show
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.skyAtmosphere.show = true
|
||||
map.scene.globe.showGroundAtmosphere = true
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭大气渲染",
|
||||
icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
show: function (e) {
|
||||
return map.scene.skyAtmosphere.show
|
||||
},
|
||||
callback: function (e) {
|
||||
map.scene.skyAtmosphere.show = false
|
||||
map.scene.globe.showGroundAtmosphere = false
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
text: "场景出图",
|
||||
icon: AddPicture({ theme: "outline", fill: "#fff", size: "18" }),
|
||||
callback: function (e) {
|
||||
map.expImage()
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
/**
|
||||
* 项目内通用 静态Util方法
|
||||
*
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 木遥 2022-01-01
|
||||
*/
|
||||
import * as mars3d from "mars3d"
|
||||
|
||||
/**
|
||||
* 判断是否 "经度,纬度" 字符串值
|
||||
*
|
||||
* @export
|
||||
* @param {string} text 传入的字符串
|
||||
* @return {boolean} 是否 经度,纬度
|
||||
*/
|
||||
export function isLonLat(text: string): boolean {
|
||||
const reg = /^-?((0|1?[0-7]?[0-9]?)(([.][0-9]*)?)|180(([.][0]*)?)),-?((0|[1-8]?[0-9]?)(([.][0-9]*)?)|90(([.][0]*)?))$/
|
||||
return reg.test(text)
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置自动高度值
|
||||
* @param {function} callback 窗口大小变化时的回调,返回当前计算完成的高度
|
||||
* @param {number} [lose=0] 窗口高度基础上减少的值
|
||||
* @param {string} [container="sanbox-warpper"] 窗口id
|
||||
* @return {void}
|
||||
*/
|
||||
export function setAutoHeight(callback: (v: number) => void, lose = 0, container = "sanbox-warpper"): void {
|
||||
const wapper = document.getElementById(container) || document.body
|
||||
|
||||
let wapperHeight = wapper?.clientHeight || 0
|
||||
const result = wapperHeight - lose
|
||||
callback(result)
|
||||
|
||||
const resize = () => {
|
||||
wapperHeight = wapper?.clientHeight || 0
|
||||
const resizeHeight = wapperHeight - lose
|
||||
callback(resizeHeight)
|
||||
}
|
||||
|
||||
window.addEventListener("resize", resize)
|
||||
|
||||
resize()
|
||||
// return () => {
|
||||
// window.removeEventListener("resize", resize)
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取URL参数
|
||||
*
|
||||
* @export
|
||||
* @param {string} parameter url值
|
||||
* @return {string | null} 参数值
|
||||
*/
|
||||
export function getQueryString(parameter: string): string | null {
|
||||
return new URL(window.location.href).searchParams.get(parameter)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 将指定的异步方法转为Promise
|
||||
*
|
||||
* @param {*} context
|
||||
* @param {string} apiName
|
||||
* @param {string} [success="success"]
|
||||
* @param {string} [error="error"]
|
||||
* @return {*} Promise
|
||||
*/
|
||||
export function apiToSync(context: any, apiName: string, success = "success", error = "error") {
|
||||
return apiArrayToSync(context, [apiName], success, error)[0]
|
||||
}
|
||||
|
||||
/**
|
||||
* 将指定的多个异步方法转为Promise
|
||||
*
|
||||
* @param {*} context
|
||||
* @param {string[]} apiNames
|
||||
* @param {string} [success="success"]
|
||||
* @param {string} [error="error"]
|
||||
* @return {*} Promise[]
|
||||
*/
|
||||
export function apiArrayToSync(context: any, apiNames: string[], success = "success", error = "error") {
|
||||
return apiNames.map((name) => {
|
||||
const apiFunc = context[name]
|
||||
|
||||
return (options: any) =>
|
||||
new Promise((resolve, reject) => {
|
||||
options[success] = function (result: any) {
|
||||
resolve(result)
|
||||
}
|
||||
options[error] = function (error) {
|
||||
reject(error)
|
||||
}
|
||||
// console.log("zhix", options)
|
||||
apiFunc.call(context, options)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 地图打印，连接打印机，设置参数
|
||||
*
|
||||
* @param {*} base64 map.expImage方法的回调函数参数
|
||||
*/
|
||||
export function printImage(base64: any) {
|
||||
const iframe: HTMLIFrameElement = mars3d.DomUtil.create("iframe", "", document.body)
|
||||
let doc = null
|
||||
iframe.setAttribute("style", "position:absolute;width:0px;height:0px;left:-500px;top:-500px;")
|
||||
document.body.appendChild(iframe)
|
||||
doc = iframe.contentWindow.document
|
||||
doc.write(`<div><img src="${base64}" style="margin:0" /></div>`)
|
||||
doc.close()
|
||||
|
||||
iframe.focus()
|
||||
iframe.contentWindow.focus()
|
||||
setTimeout(() => {
|
||||
iframe.contentWindow.print()
|
||||
document.body.removeChild(iframe)
|
||||
}, 500)
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<KeepAlive>
|
||||
<div :style="{ height: height + 'px' }">
|
||||
<MainView />
|
||||
</div>
|
||||
</KeepAlive>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { ref, onMounted,onUnmounted } from "vue"
|
||||
import MainView from "@/mars/components/mars-work/main-view.vue"
|
||||
|
||||
const height = ref(600)
|
||||
|
||||
onMounted(() => {
|
||||
height.value = document.body.clientHeight - 80
|
||||
})
|
||||
|
||||
window.onresize = function () {
|
||||
height.value = document.body.clientHeight - 80
|
||||
}
|
||||
|
||||
onUnmounted(()=>{
|
||||
alert(111);
|
||||
})
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
|
|
@ -1,304 +0,0 @@
|
|||
<template>
|
||||
<mars-dialog title="坐标拾取" width="366" top="60" right="10" :min-width="357">
|
||||
<template #icon>
|
||||
<mars-icon icon="local" width="18" />
|
||||
</template>
|
||||
<div class="position-container">
|
||||
<a-form>
|
||||
<mars-gui ref="marsGuiRef" :options="options" labelCol="5"></mars-gui>
|
||||
</a-form>
|
||||
<div class="f-pt f-tac">
|
||||
<a-space>
|
||||
<mars-button @click="bindMourseClick">图上拾取</mars-button>
|
||||
<mars-button @click="submitCenter">坐标定位</mars-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</mars-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue"
|
||||
import useLifecycle from "@/mars/common/uses/use-lifecycle"
|
||||
import * as mapWork from "./map"
|
||||
import type { GuiItem } from "@/mars/components/mars-ui/mars-gui"
|
||||
|
||||
// 启用map.ts生命周期
|
||||
useLifecycle(mapWork)
|
||||
|
||||
const marsGuiRef = ref()
|
||||
|
||||
onMounted(() => {
|
||||
const defaultPoitn = mapWork.defultPoint()
|
||||
|
||||
marsUpdataPosition(defaultPoitn)
|
||||
marsPointTrans(defaultPoitn)
|
||||
marsProj4Trans(defaultPoitn)
|
||||
})
|
||||
const options: GuiItem[] = [
|
||||
{
|
||||
type: "radio",
|
||||
field: "type",
|
||||
label: "类型",
|
||||
value: "1",
|
||||
data: [
|
||||
{
|
||||
label: "十进制",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "度分秒",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label: "平面坐标",
|
||||
value: "3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
field: "lng",
|
||||
label: "经度",
|
||||
value: "",
|
||||
show(data) {
|
||||
return data.type === "1"
|
||||
},
|
||||
change(value, data) {
|
||||
changeDmsGk(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
field: "lat",
|
||||
label: "纬度",
|
||||
value: "",
|
||||
show(data) {
|
||||
return data.type === "1"
|
||||
},
|
||||
change(value, data) {
|
||||
changeDmsGk(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
field: "alt",
|
||||
label: "高程",
|
||||
value: "",
|
||||
show(data) {
|
||||
return data.type === "1"
|
||||
},
|
||||
change(value, data) {
|
||||
changeDmsGk(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "inputGroup",
|
||||
field: "lngDMS",
|
||||
label: "经度",
|
||||
value: [0, 0, 0],
|
||||
units: ["度", "分", "秒"],
|
||||
show(data) {
|
||||
return data.type === "2"
|
||||
},
|
||||
change(value, data) {
|
||||
changeGk(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "inputGroup",
|
||||
field: "latDMS",
|
||||
label: "纬度",
|
||||
value: [0, 0, 0],
|
||||
units: ["度", "分", "秒"],
|
||||
show(data) {
|
||||
return data.type === "2"
|
||||
},
|
||||
change(value, data) {
|
||||
changeGk(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
field: "altDMS",
|
||||
label: "高程",
|
||||
value: "",
|
||||
show(data) {
|
||||
return data.type === "2"
|
||||
},
|
||||
change(value, data) {
|
||||
changeGk(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "radio",
|
||||
field: "radioFendai",
|
||||
label: "分带",
|
||||
value: "1",
|
||||
data: [
|
||||
{
|
||||
label: "三度带",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "六度带",
|
||||
value: "2"
|
||||
}
|
||||
],
|
||||
change(value, data) {
|
||||
changeValue(data)
|
||||
},
|
||||
show(data) {
|
||||
return data.type === "3"
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
field: "gk6X",
|
||||
label: "纵坐标",
|
||||
value: "",
|
||||
show(data) {
|
||||
return data.type === "3"
|
||||
},
|
||||
change(value, data) {
|
||||
changeDms(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
field: "gk6Y",
|
||||
label: "横坐标",
|
||||
value: "",
|
||||
show(data) {
|
||||
return data.type === "3"
|
||||
},
|
||||
change(value, data) {
|
||||
changeDms(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
field: "gkAlt",
|
||||
label: "高度值",
|
||||
value: "",
|
||||
show(data) {
|
||||
return data.type === "3"
|
||||
},
|
||||
change(value, data) {
|
||||
changeDms(data)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 十进制转2000平面三分度六分度
|
||||
const changeValue = (data) => {
|
||||
marsZONEtoCRS(data)
|
||||
marsProj4Trans(data)
|
||||
}
|
||||
|
||||
// 界面一
|
||||
const changeDmsGk = (data) => {
|
||||
marsPointTrans(data)
|
||||
|
||||
marsProj4Trans(data)
|
||||
}
|
||||
|
||||
// 界面二
|
||||
const changeGk = (data) => {
|
||||
marsGuiRef.value.updateField(
|
||||
"lng",
|
||||
mapWork.marsDms2degree(
|
||||
mapWork.marsUtilFormtNum(data.lngDMS[0], 6),
|
||||
mapWork.marsUtilFormtNum(data.lngDMS[1], 6),
|
||||
mapWork.marsUtilFormtNum(data.lngDMS[2], 6)
|
||||
)
|
||||
)
|
||||
marsGuiRef.value.updateField(
|
||||
"lat",
|
||||
mapWork.marsDms2degree(
|
||||
mapWork.marsUtilFormtNum(data.latDMS[0], 6),
|
||||
mapWork.marsUtilFormtNum(data.latDMS[1], 6),
|
||||
mapWork.marsUtilFormtNum(data.latDMS[2], 6)
|
||||
)
|
||||
)
|
||||
marsGuiRef.value.updateField("alt", data.altDMS)
|
||||
|
||||
marsProj4Trans(data)
|
||||
}
|
||||
|
||||
// 界面三
|
||||
const changeDms = (data) => {
|
||||
marsZONEtoCRS(data)
|
||||
marsPointTrans(data)
|
||||
}
|
||||
|
||||
const bindMourseClick = () => {
|
||||
mapWork.bindMourseClick()
|
||||
}
|
||||
|
||||
// 图上拾取的坐标
|
||||
mapWork.eventTarget.on("clickMap", (event: any) => {
|
||||
const data = reactive({
|
||||
lng: event.point.lng,
|
||||
lat: event.point.lat,
|
||||
alt: event.point.alt
|
||||
})
|
||||
|
||||
marsUpdataPosition(data)
|
||||
marsPointTrans(data)
|
||||
marsProj4Trans(data)
|
||||
// 更新面板
|
||||
mapWork.updateMarker(false, data.lng, data.lat, data.alt)
|
||||
})
|
||||
|
||||
// 更新度分秒
|
||||
const marsUpdataPosition = (data) => {
|
||||
marsGuiRef.value.updateField("lng", mapWork.marsUtilFormtNum(data.lng, 6))
|
||||
marsGuiRef.value.updateField("lat", mapWork.marsUtilFormtNum(data.lat, 6))
|
||||
marsGuiRef.value.updateField("alt", mapWork.marsUtilFormtNum(data.alt, 6))
|
||||
}
|
||||
|
||||
// 平面坐标转经纬度并更新
|
||||
const marsZONEtoCRS = (data) => {
|
||||
const zone = mapWork.marsZONEtoCRS(Number(data.gk6X), Number(data.gk6Y), data.radioFendai)
|
||||
marsGuiRef.value.updateField("lng", mapWork.marsUtilFormtNum(zone[0], 6))
|
||||
marsGuiRef.value.updateField("lat", mapWork.marsUtilFormtNum(zone[1], 6))
|
||||
marsGuiRef.value.updateField("alt", data.gkAlt)
|
||||
}
|
||||
|
||||
// 经纬度转平面坐标并更新
|
||||
const marsProj4Trans = (data) => {
|
||||
const zone = mapWork.marsProj4Trans(
|
||||
mapWork.marsUtilFormtNum(data.lng, 6),
|
||||
mapWork.marsUtilFormtNum(data.lat, 6),
|
||||
marsGuiRef.value.getValue("radioFendai")
|
||||
)
|
||||
marsGuiRef.value.updateField("gk6X", mapWork.marsUtilFormtNum(zone[0], 1))
|
||||
marsGuiRef.value.updateField("gk6Y", mapWork.marsUtilFormtNum(zone[1], 1))
|
||||
marsGuiRef.value.updateField("gkAlt", mapWork.marsUtilFormtNum(data.alt, 6))
|
||||
}
|
||||
|
||||
// 经纬度转度分秒并更新
|
||||
const marsPointTrans = (data) => {
|
||||
const lngDMS = [mapWork.marsPointTrans(data.lng).degree, mapWork.marsPointTrans(data.lng).minute, mapWork.marsPointTrans(data.lng).second]
|
||||
const latDMS = [mapWork.marsPointTrans(data.lat).degree, mapWork.marsPointTrans(data.lat).minute, mapWork.marsPointTrans(data.lat).second]
|
||||
marsGuiRef.value.updateField("lngDMS", lngDMS)
|
||||
marsGuiRef.value.updateField("latDMS", latDMS)
|
||||
marsGuiRef.value.updateField("altDMS", mapWork.marsUtilFormtNum(data.alt, 6))
|
||||
}
|
||||
|
||||
// 坐标定位
|
||||
const submitCenter = () => {
|
||||
const data = marsGuiRef.value.getValues()
|
||||
mapWork.updateMarker(true, data.lng, data.lat, data.alt)
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.position-container {
|
||||
padding-top: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
:deep(.mars-input) {
|
||||
max-width: 192px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
/**
|
||||
* 图上选点
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星胡椒 2022-01-10
|
||||
*/
|
||||
import * as mars3d from "mars3d"
|
||||
let map: mars3d.Map // 地图对象
|
||||
|
||||
// 事件对象，用于抛出事件给vue
|
||||
export const eventTarget = new mars3d.BaseClass()
|
||||
|
||||
// 初始化当前业务
|
||||
export function onMounted(mapInstance: mars3d.Map): void {
|
||||
map = mapInstance // 记录map
|
||||
}
|
||||
|
||||
// 释放当前业务
|
||||
export function onUnmounted(): void {
|
||||
if (pointEntity) {
|
||||
pointEntity.remove()
|
||||
pointEntity = null
|
||||
}
|
||||
eventTarget.off()
|
||||
map = null
|
||||
}
|
||||
|
||||
// 获取默认point点
|
||||
export function defultPoint() {
|
||||
const point = map.getCenter()
|
||||
point.format()
|
||||
return {
|
||||
lng: point.lng,
|
||||
lat: point.lat,
|
||||
alt: point.alt
|
||||
}
|
||||
}
|
||||
|
||||
// 坐标转化的三种方法
|
||||
export function marsUtilFormtNum(item: number, num: number) {
|
||||
return mars3d.Util.formatNum(item, num)
|
||||
}
|
||||
|
||||
export function marsPointTrans(item: number) {
|
||||
return mars3d.PointTrans.degree2dms(item)
|
||||
}
|
||||
|
||||
export function marsProj4Trans(JD: number, WD: number, radio: string) {
|
||||
if (radio === "2") {
|
||||
return mars3d.PointTrans.proj4Trans([JD, WD], mars3d.CRS.EPSG4326, mars3d.CRS.CGCS2000_GK_Zone_6)
|
||||
} else {
|
||||
return mars3d.PointTrans.proj4Trans([JD, WD], mars3d.CRS.EPSG4326, mars3d.CRS.CGCS2000_GK_Zone_3)
|
||||
}
|
||||
}
|
||||
|
||||
// 转换成十进制的方法
|
||||
export function marsDms2degree(du: number, fen: number, miao: number) {
|
||||
return mars3d.PointTrans.dms2degree(du, fen, miao)
|
||||
}
|
||||
export function marsZONEtoCRS(jd: number, wd: number, radio: string) {
|
||||
if (radio === "2") {
|
||||
return mars3d.PointTrans.proj4Trans([jd, wd], mars3d.CRS.CGCS2000_GK_Zone_6, mars3d.CRS.EPSG4326)
|
||||
} else {
|
||||
return mars3d.PointTrans.proj4Trans([jd, wd], mars3d.CRS.CGCS2000_GK_Zone_3, mars3d.CRS.EPSG4326)
|
||||
}
|
||||
}
|
||||
|
||||
// 地图选点
|
||||
export function bindMourseClick() {
|
||||
map.setCursor("crosshair")
|
||||
map.once(mars3d.EventType.click, function (event: any) {
|
||||
map.setCursor("")
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format() // 经度、纬度、高度
|
||||
eventTarget.fire("clickMap", { point })
|
||||
updateMarker(false, point.lng, point.lat, point.alt)
|
||||
})
|
||||
}
|
||||
|
||||
let pointEntity: any
|
||||
export function updateMarker(hasCenter: boolean, jd: number, wd: number, alt: number) {
|
||||
const position = [jd, wd, alt]
|
||||
|
||||
if (pointEntity == null) {
|
||||
pointEntity = new mars3d.graphic.PointEntity({
|
||||
position: position,
|
||||
style: {
|
||||
color: "#3388ff",
|
||||
pixelSize: 10,
|
||||
outlineColor: "#ffffff",
|
||||
outlineWidth: 2
|
||||
}
|
||||
})
|
||||
map.graphicLayer.addGraphic(pointEntity)
|
||||
} else {
|
||||
pointEntity.position = position
|
||||
}
|
||||
|
||||
if (hasCenter) {
|
||||
pointEntity.flyTo({ radius: 1000 })
|
||||
}
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<template>
|
||||
<mars-dialog :draggable="true" title="底图" :width="380" :position="{ top: 60, right: 10 }">
|
||||
<ul class="basemap">
|
||||
<li v-for="(item, i) in baseMaps" :key="i" class="basemap-card" :class="{ 'active-card': active === item.id }" @click="changeBaseMaps(item)">
|
||||
<div><img class="icon" :src="`${item.options.icon || 'img/basemaps/bingAerial.png'}`" /></div>
|
||||
<div>{{ item.name }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<template #footer>
|
||||
<mars-switch v-model:checked="chkHasTerrain" @change="changeTerrain" />
|
||||
<span class="f-ml">显示地形</span>
|
||||
</template>
|
||||
</mars-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, markRaw, onMounted } from "vue"
|
||||
import useLifecycle from "@/mars/common/uses/use-lifecycle"
|
||||
import * as mapWork from "./map"
|
||||
|
||||
// 启用map.ts生命周期
|
||||
useLifecycle(mapWork)
|
||||
|
||||
const baseMaps = ref<any[]>([])
|
||||
const active = ref("")
|
||||
const chkHasTerrain = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
const layers = mapWork.getLayers()
|
||||
initData(layers)
|
||||
})
|
||||
|
||||
function initData(e: any) {
|
||||
baseMaps.value = e.baseMaps.map((m: any) => {
|
||||
if (m.isAdded && m.show) {
|
||||
active.value = m.id
|
||||
}
|
||||
return {
|
||||
name: m.name,
|
||||
id: m.id,
|
||||
options: markRaw(m.options)
|
||||
}
|
||||
})
|
||||
|
||||
chkHasTerrain.value = e.hasTerrain || false
|
||||
}
|
||||
|
||||
function changeBaseMaps(item: any) {
|
||||
mapWork.changeBaseMaps((active.value = item.id))
|
||||
}
|
||||
|
||||
function changeTerrain() {
|
||||
mapWork.changeTerrain(chkHasTerrain.value)
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.basemap {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.basemap-card {
|
||||
display: inline-block;
|
||||
width: 75px;
|
||||
list-style-type: none;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--mars-text-color);
|
||||
&:hover {
|
||||
.active-card();
|
||||
}
|
||||
.icon {
|
||||
border: 1px solid #4db3ff78;
|
||||
width: 75px;
|
||||
height: 70px;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.active-card {
|
||||
color: #337fe5 !important;
|
||||
.icon {
|
||||
border-color: #337fe5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
/**
|
||||
* 底图控制
|
||||
* @copyright 火星科技 mars3d.cn
|
||||
* @author 火星渣渣灰 2022-01-10
|
||||
*/
|
||||
import * as mars3d from "mars3d"
|
||||
|
||||
let map: mars3d.Map // 地图对象
|
||||
|
||||
// 初始化当前业务
|
||||
export function onMounted(mapInstance: mars3d.Map): void {
|
||||
map = mapInstance // 记录map
|
||||
}
|
||||
|
||||
// 释放当前业务
|
||||
export function onUnmounted(): void {
|
||||
map = null
|
||||
}
|
||||
|
||||
export function changeBaseMaps(id: string) {
|
||||
map.basemap = id
|
||||
}
|
||||
|
||||
export function changeTerrain(value: boolean) {
|
||||
map.hasTerrain = value
|
||||
}
|
||||
|
||||
export function getLayers() {
|
||||
return {
|
||||
baseMaps: map.getBasemaps(true),
|
||||
hasTerrain: map.hasTerrain
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
|
|
@ -1,332 +0,0 @@
|
|||
<template>
|
||||
<mars-dialog :draggable="true" title="图层" width="300" :min-width="250" top="60" right="10">
|
||||
<mars-tree checkable :tree-data="treeData" v-model:expandedKeys="expandedKeys" v-model:checkedKeys="checkedKeys" @check="checkedChange">
|
||||
<template #title="node">
|
||||
<mars-dropdown-menu :trigger="['contextmenu']">
|
||||
<span @dblclick="flyTo(node)">{{ node.title }}</span>
|
||||
<template #overlay v-if="node.hasZIndex">
|
||||
<a-menu @click="(menu) => onContextMenuClick(node, menu.key)">
|
||||
<a-menu-item key="1">图层置为顶层</a-menu-item>
|
||||
<a-menu-item key="2">图层上移一层</a-menu-item>
|
||||
<a-menu-item key="3">图层下移一层</a-menu-item>
|
||||
<a-menu-item key="4">图层置为底层</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</mars-dropdown-menu>
|
||||
<span v-if="node.hasOpacity" v-show="node.checked" class="tree-slider">
|
||||
<mars-slider v-model:value="opacityObj[node.id]" :min="0" :step="1" :max="100" @change="opcityChange(node)" />
|
||||
</span>
|
||||
</template>
|
||||
</mars-tree>
|
||||
</mars-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onUnmounted, nextTick, reactive, ref, onMounted } from "vue"
|
||||
import useLifecycle from "@/mars/common/uses/use-lifecycle"
|
||||
import * as mapWork from "./map"
|
||||
import { useWidget } from "@/mars/common/store/widget"
|
||||
|
||||
const { activate, disable, currentWidget } = useWidget()
|
||||
onMounted(() => {
|
||||
initTree()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
disable("layer-tree")
|
||||
})
|
||||
|
||||
useLifecycle(mapWork)
|
||||
|
||||
currentWidget.onUpdate(() => {
|
||||
treeData.value = []
|
||||
expandedKeys.value = []
|
||||
checkedKeys.value = []
|
||||
initTree()
|
||||
})
|
||||
|
||||
const treeData = ref<any[]>([])
|
||||
|
||||
const expandedKeys = ref<string[]>([])
|
||||
|
||||
const checkedKeys = ref<string[]>([])
|
||||
|
||||
const layersObj: any = {}
|
||||
|
||||
const opacityObj: any = reactive({})
|
||||
|
||||
let lastWidget: any
|
||||
const checkedChange = (keys: string[], e: any) => {
|
||||
const layer = layersObj[e.node.id]
|
||||
// console.log("点击的矢量图层", layer)
|
||||
if (layer) {
|
||||
if (!layer.isAdded) {
|
||||
mapWork.addLayer(layer)
|
||||
}
|
||||
|
||||
// 特殊处理同目录下的单选的互斥的节点，可在config对应图层节点中配置"radio":true即可
|
||||
if (layer.options?.radio && e.checked) {
|
||||
// 循环所有的图层
|
||||
for (const i in layersObj) {
|
||||
const item = layersObj[i]
|
||||
// 循环所有的打开的图层
|
||||
checkedKeys.value.forEach((key, index) => {
|
||||
// 在所有图层中筛选与打开图层对应key值的图层 以及 与当前操作的图层的pid相同的图层
|
||||
if (item === layersObj[key] && layer.pid === layersObj[key].pid) {
|
||||
// 筛选出不是当前的其他图层进行图层隐藏以及移除
|
||||
if (item !== layer) {
|
||||
checkedKeys.value.splice(index, 1)
|
||||
item.show = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 处理图层的关联事件
|
||||
if (layer.options?.onWidget) {
|
||||
if (e.checked) {
|
||||
if (lastWidget) {
|
||||
disable(lastWidget)
|
||||
}
|
||||
activate({
|
||||
name: layer.options.onWidget
|
||||
})
|
||||
lastWidget = layer.options.onWidget
|
||||
} else {
|
||||
disable(layer.options.onWidget)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理子节点
|
||||
if (e.node.children && e.node.children.length) {
|
||||
renderChildNode(keys, e.node.children)
|
||||
}
|
||||
if (keys.indexOf(e.node.id) !== -1) {
|
||||
layer.show = true
|
||||
if (!layer.options.noCenter) {
|
||||
// 在对应config.json图层节点配置 noCenter:true 可以不定位
|
||||
layer.readyPromise.then(function (layer) {
|
||||
layer.flyTo({ scale: 2 })
|
||||
})
|
||||
}
|
||||
} else {
|
||||
layer.show = false
|
||||
}
|
||||
|
||||
// 处理图层构件树控件
|
||||
if (layer.options?.scenetree) {
|
||||
initLayerTree(layer)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderChildNode(keys: string[], children: any[]) {
|
||||
children.forEach((child) => {
|
||||
const layer = layersObj[child.id]
|
||||
if (layer) {
|
||||
if (!layer.isAdded) {
|
||||
mapWork.addLayer(layer)
|
||||
}
|
||||
if (keys.indexOf(child.id) !== -1) {
|
||||
layer.show = true
|
||||
} else {
|
||||
layer.show = false
|
||||
}
|
||||
if (child.children) {
|
||||
renderChildNode(keys, child.children)
|
||||
}
|
||||
if (layer.options.scenetree) {
|
||||
initLayerTree(layer)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const opcityChange = (node: any) => {
|
||||
const id = node.id
|
||||
const layer = layersObj[id]
|
||||
if (layer) {
|
||||
layer.opacity = opacityObj[id] / 100
|
||||
}
|
||||
}
|
||||
|
||||
const onContextMenuClick = (node: any, type: string) => {
|
||||
const parent = node.parent
|
||||
const index = node.index
|
||||
switch (type) {
|
||||
case "1": {
|
||||
if (index !== 0) {
|
||||
parent.children[0].index = index
|
||||
parent.children[index].index = 0
|
||||
}
|
||||
break
|
||||
}
|
||||
case "2": {
|
||||
parent.children[index - 1].index = index
|
||||
parent.children[index].index = index - 1
|
||||
break
|
||||
}
|
||||
case "3": {
|
||||
parent.children[index + 1].index = index
|
||||
parent.children[index].index = index + 1
|
||||
break
|
||||
}
|
||||
case "4": {
|
||||
parent.children[parent.children.length - 1].index = index
|
||||
parent.children[index].index = parent.children.length - 1
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
parent.children = parent.children.sort((a: any, b: any) => a.index - b.index)
|
||||
}
|
||||
|
||||
function flyTo(item: any) {
|
||||
if (item.checked) {
|
||||
const layer = layersObj[item.id]
|
||||
layer.flyTo()
|
||||
}
|
||||
}
|
||||
|
||||
function initTree() {
|
||||
const layers = mapWork.getLayers()
|
||||
for (let i = layers.length - 1; i >= 0; i--) {
|
||||
const layer = layers[i] // 创建图层
|
||||
|
||||
if (layer == null || !layer.options || layer.isPrivate) {
|
||||
continue
|
||||
}
|
||||
const item = layer.options
|
||||
if (!item.name || item.name === "未命名") {
|
||||
console.log("未命名图层不加入图层管理", layer)
|
||||
continue
|
||||
}
|
||||
|
||||
if (!layer._hasMapInit && layer.pid === -1 && layer.id !== 99) {
|
||||
layer.pid = 99 // 示例中创建的图层都放到99分组下面
|
||||
}
|
||||
|
||||
layersObj[layer.id] = layer
|
||||
|
||||
if (layer && layer.pid === -1) {
|
||||
const node: any = reactive({
|
||||
index: i,
|
||||
title: layer.name || `未命名(${layer.type})`,
|
||||
key: layer.id,
|
||||
id: layer.id,
|
||||
pId: layer.pid,
|
||||
hasZIndex: layer.hasZIndex,
|
||||
hasOpacity: layer.hasOpacity,
|
||||
opacity: 100 * (layer.opacity || 0)
|
||||
})
|
||||
if (layer.hasOpacity) {
|
||||
opacityObj[layer.id] = 100 * (layer.opacity || 0)
|
||||
}
|
||||
node.children = findChild(node, layers)
|
||||
treeData.value.push(node)
|
||||
|
||||
if (layer.options.open !== false) {
|
||||
expandedKeys.value.push(node.key)
|
||||
}
|
||||
|
||||
if (layer.isAdded && layer.show) {
|
||||
nextTick(() => {
|
||||
checkedKeys.value.push(node.key)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
treeData.value.forEach((data: any) => {
|
||||
data.children.forEach((item: any) => {
|
||||
if (item.children) {
|
||||
item.children.forEach((chil: any) => {
|
||||
if (layersObj[chil.key].options.radio) {
|
||||
chil.parent.disabled = true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
function findChild(parent: any, list: any[]) {
|
||||
return list
|
||||
.filter((layer: any) => {
|
||||
if (layer == null || !layer.options || layer.isPrivate) {
|
||||
return false
|
||||
}
|
||||
const item = layer.options
|
||||
if (!item.name || item.name === "未命名") {
|
||||
return false
|
||||
}
|
||||
return layer.pid === parent.id
|
||||
})
|
||||
.reverse()
|
||||
.map((item: any, i: number) => {
|
||||
const node: any = {
|
||||
index: i,
|
||||
title: item.name || `未命名(${item.type})`,
|
||||
key: item.id,
|
||||
id: item.id,
|
||||
pId: item.pid,
|
||||
hasZIndex: item.hasZIndex,
|
||||
hasOpacity: item.hasOpacity,
|
||||
opacity: 100 * (item.opacity || 0),
|
||||
parent: parent
|
||||
}
|
||||
|
||||
if (item.hasOpacity) {
|
||||
opacityObj[item.id] = 100 * (item.opacity || 0)
|
||||
}
|
||||
layersObj[item.id] = item
|
||||
|
||||
node.children = findChild(node, list)
|
||||
|
||||
if (item.options.open !== false) {
|
||||
expandedKeys.value.push(node.key)
|
||||
}
|
||||
|
||||
if (item.isAdded && item.show) {
|
||||
nextTick(() => {
|
||||
checkedKeys.value.push(node.key)
|
||||
})
|
||||
}
|
||||
return node
|
||||
})
|
||||
}
|
||||
|
||||
function initLayerTree(layer: any) {
|
||||
disable("layer-tree")
|
||||
|
||||
if (lastBindClickLayer) {
|
||||
lastBindClickLayer.off("click", onClickBimLayer)
|
||||
lastBindClickLayer = null
|
||||
}
|
||||
|
||||
// 处理图层构件树控件
|
||||
if (layer.options.scenetree) {
|
||||
layer.on("click", onClickBimLayer)
|
||||
lastBindClickLayer = layer
|
||||
}
|
||||
}
|
||||
|
||||
let lastBindClickLayer
|
||||
|
||||
function onClickBimLayer(event: any) {
|
||||
const layer = event.layer
|
||||
const url = layer.options.url
|
||||
const id = layer.id
|
||||
activate({
|
||||
name: "layer-tree",
|
||||
data: { url, id }
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tree-slider {
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<div class="layer-pictrue">
|
||||
<img class="layer-picture_img" src="./img/guihua.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.layer-pictrue {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 60px;
|
||||
.layer-picture_img {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue