Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo
userName
commit
4b7e422519
81
package.json
81
package.json
|
|
@ -72,40 +72,61 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons-vue": "^7.0.1",
|
"@ant-design/icons-vue": "^7.0.1",
|
||||||
|
"@babel/types": "^7.23.9",
|
||||||
|
"@codemirror/basic-setup": "^0.20.0",
|
||||||
|
"@codemirror/lang-javascript": "^6.2.2",
|
||||||
|
"@codemirror/language": "^6.10.8",
|
||||||
|
"@codemirror/state": "^6.5.1",
|
||||||
|
"@codemirror/theme-one-dark": "^6.1.2",
|
||||||
|
"@codemirror/view": "^6.36.2",
|
||||||
"@iconify/iconify": "^3.1.1",
|
"@iconify/iconify": "^3.1.1",
|
||||||
"@logicflow/core": "^1.2.18",
|
"@logicflow/core": "^1.2.18",
|
||||||
"@logicflow/extension": "^1.2.19",
|
"@logicflow/extension": "^1.2.19",
|
||||||
"@microsoft/signalr": "^8.0.0",
|
"@microsoft/signalr": "^8.0.0",
|
||||||
|
"@shikijs/monaco": "^1.1.6",
|
||||||
|
"@turf/turf": "^7.1.0",
|
||||||
"@vben/hooks": "workspace:*",
|
"@vben/hooks": "workspace:*",
|
||||||
|
"@volar/cdn": "~1.11.1",
|
||||||
|
"@volar/monaco": "~1.11.1",
|
||||||
|
"@volar/typescript": "~1.11.1",
|
||||||
|
"@vue/language-service": "1.9.0-alpha.3",
|
||||||
"@vue/shared": "^3.4.5",
|
"@vue/shared": "^3.4.5",
|
||||||
"@vueuse/core": "^10.7.1",
|
"@vueuse/core": "^10.7.1",
|
||||||
"@zxcvbn-ts/core": "^3.0.4",
|
"@zxcvbn-ts/core": "^3.0.4",
|
||||||
"ant-design-vue": "^4.0.8",
|
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
|
"ant-design-vue": "^4.0.8",
|
||||||
"axios": "^1.6.4",
|
"axios": "^1.6.4",
|
||||||
"color": "^4.2.3",
|
|
||||||
"codemirror": "^5.65.16",
|
"codemirror": "^5.65.16",
|
||||||
|
"color": "^4.2.3",
|
||||||
"cropperjs": "^1.6.1",
|
"cropperjs": "^1.6.1",
|
||||||
"crypto-js": "^4.2.0",
|
"crypto-js": "^4.2.0",
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"driver.js": "^1.3.1",
|
|
||||||
"dom-helpers": "^5.2.1",
|
"dom-helpers": "^5.2.1",
|
||||||
|
"driver.js": "^1.3.1",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"echarts-liquidfill": "^3.1.0",
|
"echarts-liquidfill": "^3.1.0",
|
||||||
"echarts-stat": "^1.2.0",
|
"echarts-stat": "^1.2.0",
|
||||||
"echarts-wordcloud": "^2.0.0",
|
"echarts-wordcloud": "^2.0.0",
|
||||||
"element-plus": "^2.6.0",
|
"element-plus": "^2.6.0",
|
||||||
"exceljs": "^4.4.0",
|
"exceljs": "^4.4.0",
|
||||||
|
"fflate": "^0.8.2",
|
||||||
"gsap": "^3.11.3",
|
"gsap": "^3.11.3",
|
||||||
"js-md5": "^0.8.3",
|
"hash-sum": "^2.0.0",
|
||||||
"highlight.js": "^11.5.0",
|
"highlight.js": "^11.5.0",
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
"iconify-icon": "^1.0.8",
|
"iconify-icon": "^1.0.8",
|
||||||
"lodash-es": "^4.17.21",
|
"js-base64": "3.7.7",
|
||||||
|
"js-md5": "^0.8.3",
|
||||||
|
"jszip": "^3.10.1",
|
||||||
"keymaster": "^1.6.2",
|
"keymaster": "^1.6.2",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
|
"mars3d": "~3.8.8",
|
||||||
|
"mars3d-cesium": "~1.124.0",
|
||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"nprogress": "^0.2.0",
|
"monaco-editor": "^0.33.0",
|
||||||
|
"monaco-editor-core": "^0.46.0",
|
||||||
"naive-ui": "2.34.3",
|
"naive-ui": "2.34.3",
|
||||||
|
"nprogress": "^0.2.0",
|
||||||
"path-to-regexp": "^6.2.1",
|
"path-to-regexp": "^6.2.1",
|
||||||
"pinia": "2.1.7",
|
"pinia": "2.1.7",
|
||||||
"pinia-plugin-persistedstate": "^3.2.1",
|
"pinia-plugin-persistedstate": "^3.2.1",
|
||||||
|
|
@ -113,52 +134,32 @@
|
||||||
"qrcode": "^1.5.3",
|
"qrcode": "^1.5.3",
|
||||||
"qs": "^6.11.2",
|
"qs": "^6.11.2",
|
||||||
"resize-observer-polyfill": "^1.5.1",
|
"resize-observer-polyfill": "^1.5.1",
|
||||||
"three": "^0.145.0",
|
|
||||||
"screenfull": "^6.0.1",
|
"screenfull": "^6.0.1",
|
||||||
|
"shiki": "^1.1.6",
|
||||||
"showdown": "^2.1.0",
|
"showdown": "^2.1.0",
|
||||||
|
"shpjs": "^6.1.0",
|
||||||
"sortablejs": "^1.15.1",
|
"sortablejs": "^1.15.1",
|
||||||
|
"sucrase": "^3.35.0",
|
||||||
|
"three": "^0.145.0",
|
||||||
"tinymce": "^5.10.9",
|
"tinymce": "^5.10.9",
|
||||||
"unocss": "0.58.3",
|
"unocss": "0.58.3",
|
||||||
"uuid": "^9.0.1",
|
"uuid": "^9.0.1",
|
||||||
"vditor": "^3.9.8",
|
"vditor": "^3.9.8",
|
||||||
"vue": "3.3.4",
|
"vue": "3.3.4",
|
||||||
|
"vue-clipboard3": "^2.0.0",
|
||||||
|
"vue-codemirror": "^6.1.1",
|
||||||
"vue-color-kit": "^1.0.6",
|
"vue-color-kit": "^1.0.6",
|
||||||
"vue-i18n": "^9.8.0",
|
"vue-i18n": "^9.8.0",
|
||||||
"vue-json-pretty": "^2.3.0",
|
"vue-json-pretty": "^2.3.0",
|
||||||
"vue-router": "^4.2.5",
|
"vue-router": "^4.2.5",
|
||||||
"vue3-lazyload": "^0.2.5-beta",
|
|
||||||
"vue-types": "^5.1.1",
|
"vue-types": "^5.1.1",
|
||||||
|
"vue3-lazyload": "^0.2.5-beta",
|
||||||
"vue3-sfc-loader": "^0.9.5",
|
"vue3-sfc-loader": "^0.9.5",
|
||||||
"vue3-sketch-ruler": "^1.3.3",
|
"vue3-sketch-ruler": "^1.3.3",
|
||||||
"vuedraggable": "^4.1.0",
|
"vuedraggable": "^4.1.0",
|
||||||
"vuex": "^4.1.0",
|
"vuex": "^4.1.0",
|
||||||
"xe-utils": "^3.5.14",
|
"xe-utils": "^3.5.14",
|
||||||
"xlsx": "^0.18.5",
|
"xlsx": "^0.18.5"
|
||||||
"jszip":"^3.10.1",
|
|
||||||
"shpjs":"^6.1.0",
|
|
||||||
"js-base64":"3.7.7",
|
|
||||||
"monaco-editor": "^0.33.0",
|
|
||||||
"mars3d": "~3.8.8",
|
|
||||||
"@turf/turf": "^7.1.0",
|
|
||||||
"mars3d-cesium": "~1.124.0",
|
|
||||||
"@codemirror/lang-javascript": "^6.2.2",
|
|
||||||
"@codemirror/language": "^6.10.8",
|
|
||||||
"@codemirror/state": "^6.5.1",
|
|
||||||
"@codemirror/view": "^6.36.2",
|
|
||||||
"@codemirror/basic-setup": "^0.20.0",
|
|
||||||
"vue-codemirror": "^6.1.1",
|
|
||||||
"@codemirror/theme-one-dark": "^6.1.2",
|
|
||||||
"monaco-editor-core": "^0.46.0",
|
|
||||||
"fflate": "^0.8.2",
|
|
||||||
"@volar/cdn": "~1.11.1",
|
|
||||||
"@volar/monaco": "~1.11.1",
|
|
||||||
"@volar/typescript": "~1.11.1",
|
|
||||||
"sucrase": "^3.35.0",
|
|
||||||
"hash-sum": "^2.0.0",
|
|
||||||
"@vue/language-service": "1.9.0-alpha.3",
|
|
||||||
"shiki": "^1.1.6",
|
|
||||||
"@shikijs/monaco": "^1.1.6",
|
|
||||||
"@babel/types": "^7.23.9"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
|
|
@ -177,35 +178,35 @@
|
||||||
"@types/qs": "^6.9.11",
|
"@types/qs": "^6.9.11",
|
||||||
"@types/showdown": "^2.0.6",
|
"@types/showdown": "^2.0.6",
|
||||||
"@types/sortablejs": "^1.15.7",
|
"@types/sortablejs": "^1.15.7",
|
||||||
"@vicons/carbon": "^0.12.0",
|
|
||||||
"@vicons/ionicons5": "~0.11.0",
|
|
||||||
"@vben/eslint-config": "workspace:*",
|
"@vben/eslint-config": "workspace:*",
|
||||||
"@vben/stylelint-config": "workspace:*",
|
"@vben/stylelint-config": "workspace:*",
|
||||||
"@vben/ts-config": "workspace:*",
|
"@vben/ts-config": "workspace:*",
|
||||||
"@vben/types": "workspace:*",
|
"@vben/types": "workspace:*",
|
||||||
"@vben/vite-config": "workspace:*",
|
"@vben/vite-config": "workspace:*",
|
||||||
|
"@vicons/carbon": "^0.12.0",
|
||||||
|
"@vicons/ionicons5": "~0.11.0",
|
||||||
"@vue/compiler-sfc": "^3.4.5",
|
"@vue/compiler-sfc": "^3.4.5",
|
||||||
"@vue/test-utils": "^2.4.3",
|
"@vue/test-utils": "^2.4.3",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"cz-git": "^1.8.0",
|
"cz-git": "^1.8.0",
|
||||||
"czg": "^1.8.0",
|
"czg": "^1.8.0",
|
||||||
"husky": "^8.0.3",
|
"husky": "^8.0.3",
|
||||||
"lodash": "~4.17.21",
|
|
||||||
"lint-staged": "15.2.0",
|
"lint-staged": "15.2.0",
|
||||||
|
"lodash": "~4.17.21",
|
||||||
"prettier": "^3.1.1",
|
"prettier": "^3.1.1",
|
||||||
"prettier-plugin-packagejson": "^2.4.8",
|
"prettier-plugin-packagejson": "^2.4.8",
|
||||||
"rimraf": "^5.0.5",
|
"rimraf": "^5.0.5",
|
||||||
"turbo": "^1.11.3",
|
|
||||||
"sass": "^1.49.11",
|
"sass": "^1.49.11",
|
||||||
"sass-loader": "^12.6.0",
|
"sass-loader": "^12.6.0",
|
||||||
|
"turbo": "^1.11.3",
|
||||||
"typescript": "^5.3.3",
|
"typescript": "^5.3.3",
|
||||||
"unbuild": "^2.0.0",
|
"unbuild": "^2.0.0",
|
||||||
"vite": "^4.2.0",
|
"vite": "^4.2.0",
|
||||||
"vite-plugin-mars3d": "^3.1.3",
|
"vite-plugin-mars3d": "^3.1.3",
|
||||||
"vite-plugin-mock": "^2.9.6",
|
"vite-plugin-mock": "^2.9.6",
|
||||||
|
"vite-plugin-monaco-editor": "^1.1.0",
|
||||||
"vue-echarts": "^6.0.2",
|
"vue-echarts": "^6.0.2",
|
||||||
"vue-tsc": "^1.8.27",
|
"vue-tsc": "^1.8.27"
|
||||||
"vite-plugin-monaco-editor": "^1.1.0"
|
|
||||||
},
|
},
|
||||||
"packageManager": "pnpm@8.10.0",
|
"packageManager": "pnpm@8.10.0",
|
||||||
"engines": {
|
"engines": {
|
||||||
|
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="26px" height="28px" viewBox="0 0 26 28" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<defs>
|
|
||||||
<linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" id="linearGradient-1">
|
|
||||||
<stop stop-color="#00D586" offset="0%"></stop>
|
|
||||||
<stop stop-color="#00AB4E" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="6.17106015%" y1="0%" x2="67.7872653%" y2="117.560409%" id="linearGradient-2">
|
|
||||||
<stop stop-color="#007343" offset="0%"></stop>
|
|
||||||
<stop stop-color="#89E5A1" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1870, -733)">
|
|
||||||
<g id="可视化" transform="translate(-0.5, -1)">
|
|
||||||
<g id="模块" transform="translate(46, 88)">
|
|
||||||
<g id="标题模块--右侧1" transform="translate(1450, 285)">
|
|
||||||
<g id="底部背景" transform="translate(0, 0)">
|
|
||||||
<g id="边框"
|
|
||||||
transform="translate(199.8663, 194.0447) scale(-1, 1) translate(-199.8663, -194.0447)">
|
|
||||||
<g id="编组-22" transform="translate(0, 361.9394)">
|
|
||||||
<polygon id="路径-11" fill="url(#linearGradient-1)"
|
|
||||||
transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
|
|
||||||
points="0 18.8448966 0 26.1499885 7.30509189 18.8448966"></polygon>
|
|
||||||
<polygon id="装饰线段-" fill="url(#linearGradient-2)" fill-rule="nonzero"
|
|
||||||
points="3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14">
|
|
||||||
</polygon>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.3 KiB |
|
|
@ -358,7 +358,8 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore();
|
||||||
|
|
||||||
const themeSetting = computed(() => {
|
const themeSetting = computed(() => {
|
||||||
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
|
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
|
||||||
return chartThemeSetting
|
return chartThemeSetting
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,182 @@
|
||||||
export function mapFun() {
|
export function mapFun() {
|
||||||
const ceshiClick = () => {
|
const ceshiClick = () => {
|
||||||
console.log('ceshi');
|
console.log('ceshi');
|
||||||
|
alert('ceshi');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 根据坐标点跳转位置
|
||||||
|
const handlerFlyToPoint = (params) => {
|
||||||
|
window.globalMap.flyToPoint([118.000666,35.11987],
|
||||||
|
{"alt":4269.7,"heading":359.2,"pitch":-51.9});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const handlerAddEntity = (data) => {
|
||||||
|
|
||||||
|
let graphicOptions = {
|
||||||
|
id:data.id,
|
||||||
|
position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
|
||||||
|
style: {
|
||||||
|
image: data.image.generalIcon,
|
||||||
|
clampToGround: true,
|
||||||
|
scale: 0.5,
|
||||||
|
label: {
|
||||||
|
text: data.attribute.label,
|
||||||
|
font_size: 14,
|
||||||
|
color: "#ffffff",
|
||||||
|
pixelOffsetY: 10,
|
||||||
|
distanceDisplayCondition: true,
|
||||||
|
distanceDisplayCondition_far: 500000,
|
||||||
|
distanceDisplayCondition_near: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
popup: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||||
|
<div class="marsTiltPanel-wrap">
|
||||||
|
<div class="area">
|
||||||
|
<div class="arrow-lt"></div>
|
||||||
|
<div class="b-t"></div>
|
||||||
|
<div class="b-r"></div>
|
||||||
|
<div class="b-b"></div>
|
||||||
|
<div class="b-l"></div>
|
||||||
|
<div class="arrow-rb"></div>
|
||||||
|
<div class="label-wrap">
|
||||||
|
<div class="title">火点信息</div>
|
||||||
|
<div class="label-content">
|
||||||
|
<div class="data-li">
|
||||||
|
<div class="data-label">火点地址：${data.attribute.address}</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-li">
|
||||||
|
<div class="data-label">上报时间：</div>
|
||||||
|
<div class="data-value"><span id="lablYeWei" class="label-num">2025-2-11 12:00:00</span><span class="label-unit"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-li">
|
||||||
|
<div class="data-value">
|
||||||
|
<span id="lablCSFM3" onclick="aroundYuAn([${data.position.lng},${data.position.lat}])" class="label-tag data-value-status-2" >防灭火资源</span>
|
||||||
|
<span id="lablCSFM2" onclick="delFirePoint(${data.id})" class="label-tag data-value-status-3" title="删除火点">删除火点</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="b-t-l"></div>
|
||||||
|
<div class="b-b-r"></div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow" ></div>
|
||||||
|
</div>`,
|
||||||
|
popupOptions: {
|
||||||
|
offsetY: -30,
|
||||||
|
template: "{content}",
|
||||||
|
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||||
|
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
let graphic = window.graphicLayer.getGraphicById(data.id);
|
||||||
|
|
||||||
|
if(graphic){
|
||||||
|
graphic.setStyleOptions(graphicOptions);
|
||||||
|
}else{
|
||||||
|
graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
|
||||||
|
|
||||||
|
window.graphicLayer.addGraphic(graphic);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureSurfaceLength = async () => {
|
||||||
|
const graphic = await window.measureTool.distanceSurface({
|
||||||
|
showAddText: true,
|
||||||
|
exact: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureLength = async () => {
|
||||||
|
const graphic = await window.measureTool.distance({
|
||||||
|
showAddText: true,
|
||||||
|
label: {
|
||||||
|
type: "div",
|
||||||
|
updateText: function (text, graphic) {
|
||||||
|
graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
|
||||||
|
},
|
||||||
|
html: `<div class="marsGreenGradientPnl" ></div>`,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureSurfaceArea = async () => {
|
||||||
|
const graphic = await window.measureTool.areaSurface({
|
||||||
|
style: {
|
||||||
|
color: "#ffff00"
|
||||||
|
},
|
||||||
|
splitNum: 10, // step插值分割的个数
|
||||||
|
exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureArea = async () => {
|
||||||
|
const graphic = await window.measureTool.area({
|
||||||
|
style: {
|
||||||
|
color: '#00fff2',
|
||||||
|
opacity: 0.4,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: '#fafa5a',
|
||||||
|
outlineWidth: 1,
|
||||||
|
clampToGround: false //贴地
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasurePoint = async () => {
|
||||||
|
const graphic = await window.measureTool.point({
|
||||||
|
popupOptions: {
|
||||||
|
pointerEvents: false
|
||||||
|
},
|
||||||
|
popup: function (point, event) {
|
||||||
|
return `<div class="mars3d-template-title">位置信息</div>
|
||||||
|
<div class="mars3d-template-content">
|
||||||
|
<div><label>经度</label>${point.lng}</div>
|
||||||
|
<div><label>纬度</label>${point.lat}</div>
|
||||||
|
<div><label>海拔</label>${point.alt}米</div>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const handlerMeasureHeight = async () => {
|
||||||
|
const graphic = await window.measureTool.height();
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerClearMeasure = () => {
|
||||||
|
window.measureTool.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerDrawPolygon = async () => {
|
||||||
|
const graphic = await graphicLayer.startDraw({
|
||||||
|
type: "polygon",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
ceshiClick,
|
ceshiClick,
|
||||||
|
handlerFlyToPoint,
|
||||||
|
handlerAddEntity,
|
||||||
|
handlerMeasureSurfaceLength,
|
||||||
|
handlerMeasureLength,
|
||||||
|
handlerMeasureSurfaceArea,
|
||||||
|
handlerMeasureArea,
|
||||||
|
handlerMeasurePoint,
|
||||||
|
handlerMeasureHeight,
|
||||||
|
handlerClearMeasure,
|
||||||
|
handlerDrawPolygon
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -16,4 +189,104 @@ export const funSelectOptions = [
|
||||||
// 事件名(用于触发)
|
// 事件名(用于触发)
|
||||||
value: 'ceshiClick',
|
value: 'ceshiClick',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label:"根据坐标定位地图视角",
|
||||||
|
value: 'handlerFlyToPoint'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"添加任意类型图层",
|
||||||
|
value: 'handlerAddLayer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"隐藏任意类型图层",
|
||||||
|
value: 'handlerHiddenLayer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"删除任意类型图层",
|
||||||
|
value: 'handlerRemoveLayer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"添加单个矢量数据",
|
||||||
|
value: 'handlerAddEntity'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"隐藏单个矢量数据",
|
||||||
|
value:"handlerHiddenEntity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"移除单个矢量数据",
|
||||||
|
value:"handlerRemoveEntity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"定位和高亮矢量数据",
|
||||||
|
value:"handlerFlyToEntity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"清除全部矢量数据",
|
||||||
|
value:"handlerClearEntityLayer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"隐藏全部矢量数据",
|
||||||
|
value:"handlerHiddenEntityLayer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"点击地图拾取坐标",
|
||||||
|
value:"handlerDrawPoint"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地线",
|
||||||
|
value:"handlerDrawLine"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制图标点",
|
||||||
|
value:"handlerDrawIconPoint"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地线",
|
||||||
|
value:"handlerDrawLine"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地自由线",
|
||||||
|
value:"handlerDrawBrushLine"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地面",
|
||||||
|
value:"handlerDrawLine"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地矩形",
|
||||||
|
value:"handlerDrawRectangle"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地面",
|
||||||
|
value:"handlerDrawPolygon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"贴地距离测量",
|
||||||
|
value:"handlerMeasureSurfaceLength"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"空间距离测量",
|
||||||
|
value:"handlerMeasureLength"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"贴地面积测量",
|
||||||
|
value:"handlerMeasureSurfaceArea"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"水平面积测量",
|
||||||
|
value:"handlerMeasureArea"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"坐标点位测量",
|
||||||
|
value:"handlerMeasurePoint"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"高度差测量",
|
||||||
|
value:"handlerMeasureHeight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"清空测量数据",
|
||||||
|
value:"handlerClearMeasure"
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ const chartEditStore = useChartEditStore();
|
||||||
const ceshiFunction = mapFun();
|
const ceshiFunction = mapFun();
|
||||||
|
|
||||||
// 交互事件
|
// 交互事件
|
||||||
export const eventHandlerHook = (comonentList: any, elementList: any) => {
|
export const eventHandlerHook = (comonentList: any, elementList: any, params:any = null) => {
|
||||||
let obj: any = {};
|
let obj: any = {};
|
||||||
let index = 0;
|
let index = 0;
|
||||||
for (let i = 0; i < comonentList.length; i++) {
|
for (let i = 0; i < comonentList.length; i++) {
|
||||||
|
|
@ -37,7 +37,11 @@ export const eventHandlerHook = (comonentList: any, elementList: any) => {
|
||||||
// 地图事件联动
|
// 地图事件联动
|
||||||
for (let k = 0; k < elementList[j].elementId.length; k++) {
|
for (let k = 0; k < elementList[j].elementId.length; k++) {
|
||||||
if (comonentList[i].id == elementList[j].elementId[k]) {
|
if (comonentList[i].id == elementList[j].elementId[k]) {
|
||||||
ceshiFunction[elementList[j].funName]();
|
if(params){
|
||||||
|
ceshiFunction[elementList[j].funName](params);
|
||||||
|
}else{
|
||||||
|
ceshiFunction[elementList[j].funName]();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,12 @@ export enum MarkerEnum {
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
dataset: dataJson,
|
dataset: dataJson,
|
||||||
|
boxStyle:{
|
||||||
|
title:"",
|
||||||
|
borderColor:"",
|
||||||
|
backgroundColor:"",
|
||||||
|
fontColor:"",
|
||||||
|
},
|
||||||
mapOptions:{
|
mapOptions:{
|
||||||
"scene": {
|
"scene": {
|
||||||
"center": {"lat":30.074253,"lng":126.353311,"alt":21803924.9,"heading":360,"pitch":-90},
|
"center": {"lat":30.074253,"lng":126.353311,"alt":21803924.9,"heading":360,"pitch":-90},
|
||||||
|
|
@ -1991,7 +1997,7 @@ export const option = {
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
public key = MapLayerConfig.key
|
public key = MapLayerConfig.key
|
||||||
public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
|
public attr = { ...chartInitConfig, w: 300, h: 800, zIndex: -1 }
|
||||||
public chartConfig = cloneDeep(MapLayerConfig)
|
public chartConfig = cloneDeep(MapLayerConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,85 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<collapse-item name="地图场景" :expanded="true">
|
<collapse-item name="组件样式" :expanded="true">
|
||||||
|
|
||||||
|
|
||||||
<setting-item-box name="经度" :alone="true">
|
<setting-item-box name="标题" :alone="true">
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.lng" :show-button="false" size="small">
|
<n-input v-model:value="optionData.boxStyle.title" :min="0" size="small"></n-input>
|
||||||
<template #suffix>°</template>
|
|
||||||
</n-input-number>
|
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<setting-item-box name="纬度" :alone="true">
|
<setting-item-box name="字体颜色" :alone="true">
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.lat" :show-button="false" size="small">
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.fontColor"></n-color-picker>
|
||||||
<template #suffix>°</template>
|
|
||||||
</n-input-number>
|
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<setting-item-box name="高度值" :alone="true">
|
<setting-item-box name="边框颜色" :alone="true">
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.alt" :min="0" size="small"></n-input-number>
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.borderColor"></n-color-picker>
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<setting-item-box name="方向角度" :alone="true">
|
<setting-item-box name="背景颜色" :alone="true">
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.heading" :min="0" size="small"></n-input-number>
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.backgroundColor"></n-color-picker>
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="俯仰角" :alone="true">
|
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.pitch" :min="-90" size="small"></n-input-number>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
|
|
||||||
<setting-item-box name="是否显示太阳" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.showSun" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
|
|
||||||
<setting-item-box name="是否显示月亮" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.showMoon" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="是否显示默认天空盒" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.showSkyBox" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="是否显示地球大气层外光圈" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.showSkyAtmosphere" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="是否启用雾化效果" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.fog" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="是否开启快速抗锯齿" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
</collapse-item>
|
</collapse-item>
|
||||||
|
|
@ -138,13 +74,9 @@
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
</collapse-item>
|
</collapse-item>
|
||||||
<!--
|
|
||||||
<collapse-item name="底图图层" :expanded="true">
|
|
||||||
|
|
||||||
</collapse-item> -->
|
|
||||||
|
|
||||||
<collapse-item name="右键菜单" :expanded="true">
|
<collapse-item name="右键菜单" :expanded="true">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</collapse-item>
|
</collapse-item>
|
||||||
|
|
@ -156,14 +88,15 @@ import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, Fe
|
||||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
optionData: {
|
optionData: {
|
||||||
type: Object as PropType<typeof option>,
|
type: Object as PropType<typeof option>,
|
||||||
required: true
|
required: true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
)
|
)
|
||||||
|
|
||||||
console.log("props.optionData",props.optionData);
|
console.log("optionDatasss",props.optionData);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="vChartRef" >
|
<div ref="vChartRef" >
|
||||||
<div class="layer-container" @click="handlerMap">
|
<div class="layer-container" @click="handlerMap" :style="{'background-color':props.chartConfig.option.boxStyle.backgroundColor,'border-color':props.chartConfig.option.boxStyle.borderColor}">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
费县林业防火
|
{{ props.chartConfig.option.boxStyle.title }}
|
||||||
</div>
|
</div>
|
||||||
<div class="layer-item-container">
|
<div class="layer-item-container">
|
||||||
<div v-for="(item,index) in handlerLayers" :key="index" style="color:#fff;">
|
<div v-for="(item,index) in handlerLayers" :key="index" style="color:#fff;">
|
||||||
|
|
@ -58,6 +58,8 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
console.log("props123",props.chartConfig.option);
|
||||||
|
|
||||||
const layers = ref(null)
|
const layers = ref(null)
|
||||||
|
|
||||||
const handlerLayers = ref([]);
|
const handlerLayers = ref([]);
|
||||||
|
|
@ -237,7 +239,7 @@ const handlerChangeAllLayer = (group) =>{
|
||||||
if(group.show == false){
|
if(group.show == false){
|
||||||
group.children?.forEach((item,index)=>{
|
group.children?.forEach((item,index)=>{
|
||||||
item.show = true;
|
item.show = true;
|
||||||
|
|
||||||
})
|
})
|
||||||
}else{
|
}else{
|
||||||
group.children?.forEach((item,index)=>{
|
group.children?.forEach((item,index)=>{
|
||||||
|
|
@ -462,20 +464,21 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
padding:15px;
|
padding:15px;
|
||||||
|
padding-top:0px;
|
||||||
padding-right:5px;
|
padding-right:5px;
|
||||||
background:rgba(7,38,30,0.85);
|
background:rgba(7,38,30,0.85);
|
||||||
border:1px solid #088538;
|
border:1px solid #088538;
|
||||||
}
|
}
|
||||||
.layer-item-container{
|
.layer-item-container{
|
||||||
width:100%;
|
width:100%;
|
||||||
height: calc( 100% - 40px);
|
height: calc( 100% - 50px);
|
||||||
overflow-y:auto;
|
overflow-y:auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-container .title{
|
.layer-container .title{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:40px;
|
height:50px;
|
||||||
line-height:40px;
|
line-height:50px;
|
||||||
color:#CBE6CD;
|
color:#CBE6CD;
|
||||||
font-size:16px;
|
font-size:16px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,210 @@
|
||||||
|
<template>
|
||||||
|
<collapse-item name="组件样式" :expanded="true">
|
||||||
|
|
||||||
|
|
||||||
|
<setting-item-box name="标题" :alone="true">
|
||||||
|
<n-input v-model:value="optionData.boxStyle.title" :min="0" size="small"></n-input>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="字体颜色" :alone="true">
|
||||||
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.fontColor"></n-color-picker>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="边框颜色" :alone="true">
|
||||||
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.borderColor"></n-color-picker>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="背景颜色" :alone="true">
|
||||||
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.backgroundColor"></n-color-picker>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
</collapse-item>
|
||||||
|
|
||||||
|
<collapse-item name="地图控件" :expanded="true">
|
||||||
|
|
||||||
|
<setting-item-box name="底图切换按钮" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.control.baseLayerPicker" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="视角复位按钮" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.control.homeButton" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="二三维切换按钮" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.control.sceneModePicker" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="全屏按钮" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.control.fullscreenButton" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</collapse-item>
|
||||||
|
|
||||||
|
<collapse-item name="地形设置" :expanded="true">
|
||||||
|
|
||||||
|
<setting-item-box name="是否开启地形" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.terrain.show" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
</collapse-item>
|
||||||
|
|
||||||
|
|
||||||
|
<collapse-item name="右键菜单" :expanded="true">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</collapse-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
|
||||||
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<typeof option>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
console.log("optionDatasss",props.optionData);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const themeOptions = [
|
||||||
|
{
|
||||||
|
value: ThemeEnum.NORMAL,
|
||||||
|
label: '标准'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.DARK,
|
||||||
|
label: '幻影黑'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.LIGHT,
|
||||||
|
label: '月光银'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.WHITES_MOKE,
|
||||||
|
label: '远山黛'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.FRESH,
|
||||||
|
label: '草色青'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.GREY,
|
||||||
|
label: '雅士灰'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.GRAFFITI,
|
||||||
|
label: '涂鸦'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.MACARON,
|
||||||
|
label: '马卡龙'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.BLUE,
|
||||||
|
label: '靛青蓝'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.DARKBLUE,
|
||||||
|
label: '极夜蓝'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.WINE,
|
||||||
|
label: '酱籽'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const langOptions = [
|
||||||
|
{
|
||||||
|
value: LangEnum.ZH_CN,
|
||||||
|
label: '中文简体'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: LangEnum.EN,
|
||||||
|
label: '英文'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: LangEnum.ZH_EN,
|
||||||
|
label: '中英文对照'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const viewModeOptions = [
|
||||||
|
{
|
||||||
|
value: ViewModeEnum.PLANE,
|
||||||
|
label: '2D'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ViewModeEnum.STEREOSCOPIC,
|
||||||
|
label: '3D'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const featuresOptions = [
|
||||||
|
{
|
||||||
|
value: FeaturesEnum.BG,
|
||||||
|
label: '区域面'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: FeaturesEnum.POINT,
|
||||||
|
label: '标注'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: FeaturesEnum.ROAD,
|
||||||
|
label: '道路'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: FeaturesEnum.BUILDING,
|
||||||
|
label: '建筑物'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const MarkerOptions = [
|
||||||
|
{
|
||||||
|
value: MarkerEnum.CIRCLE_MARKER,
|
||||||
|
label: '圆形标点'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: MarkerEnum.MARKER,
|
||||||
|
label: '定位标点'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: MarkerEnum.NONE,
|
||||||
|
label: '隐藏标点'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"markers": [
|
||||||
|
{
|
||||||
|
"name": "某某地市",
|
||||||
|
"value": 10,
|
||||||
|
"position": [116.300467, 39.907761]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "某某地市",
|
||||||
|
"value": 15,
|
||||||
|
"position": [116.400567, 39.908761]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "某某地市",
|
||||||
|
"value": 20,
|
||||||
|
"position": [116.200467, 39.937761]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const MapLayerConfig: ConfigType = {
|
||||||
|
key: 'MapLayer',
|
||||||
|
chartKey: 'VMapLayer',
|
||||||
|
conKey: 'VCMapLayer',
|
||||||
|
title: '图层管理',
|
||||||
|
category: ChatCategoryEnum.MAP,
|
||||||
|
categoryName: ChatCategoryEnumName.MAP,
|
||||||
|
package: PackagesCategoryEnum.CHARTS,
|
||||||
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
|
image: 'map-layer.png'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,539 @@
|
||||||
|
<template>
|
||||||
|
<div ref="vChartRef" >
|
||||||
|
<div class="layer-container" @click="handlerMap" :style="{'background-color':props.chartConfig.option.boxStyle.backgroundColor,'border-color':props.chartConfig.option.boxStyle.borderColor}">
|
||||||
|
<div class="title">
|
||||||
|
{{ props.chartConfig.option.boxStyle.title }}
|
||||||
|
</div>
|
||||||
|
<div class="layer-item-container">
|
||||||
|
<div v-for="(item,index) in handlerLayers" :key="index" style="color:#fff;">
|
||||||
|
<div class="layer-category">
|
||||||
|
<div class="arrow" @click="handnlerFoldGroupLayer(item)">
|
||||||
|
<CaretDownOutlined v-show="item.fold" />
|
||||||
|
<CaretRightOutlined v-show="!item.fold" />
|
||||||
|
</div>
|
||||||
|
<div class="layer-category-checkbox" :style="{'background':item.show ? '#00E832':'#fff'}" @click="handlerChangeAllLayer(item)">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="layer-category-name">
|
||||||
|
{{ item.name }}（{{item.children.length}}）
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer-item" v-for="(it,idx) in item.children" :key="idx" v-show="item.fold">
|
||||||
|
<div class="layer-checkbox" :style="{'background':it.show ? '#00E832':'#fff'}" @click="handlerChangeLayer(it,item)">
|
||||||
|
<!-- <CheckOutlined v-show="it.show" /> -->
|
||||||
|
</div>
|
||||||
|
<div class="layer-name" @click="handlerChangeLayer(it,item)">
|
||||||
|
{{ it.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, PropType, toRefs, watch,onMounted,nextTick } from 'vue'
|
||||||
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { MarkerEnum, ThemeEnum } from './config'
|
||||||
|
import { isArray } from '@/utils';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { CaretDownOutlined, StarFilled, StarTwoTone,CheckOutlined,CaretRightOutlined } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
|
import * as mars3d from "mars3d";
|
||||||
|
import { option } from '@/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions'
|
||||||
|
|
||||||
|
let map: mars3d.Map; // 地图对象
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log("props123",props.chartConfig.option);
|
||||||
|
|
||||||
|
const layers = ref(null)
|
||||||
|
|
||||||
|
const handlerLayers = ref([]);
|
||||||
|
|
||||||
|
|
||||||
|
const handlerGetLayerTree = ()=>{
|
||||||
|
axios.get('http://221.2.83.254:9006/applicationMars/getApplicationInfo/feixian').then((res)=>{
|
||||||
|
layers.value = res.data.data
|
||||||
|
console.log("res",layers.value);
|
||||||
|
let configLayers = [];
|
||||||
|
let GEOSERVER_BASE_API = "http://221.2.83.254:9007/";
|
||||||
|
res.data.data.forEach((item, index) => {
|
||||||
|
let group = null;
|
||||||
|
group = {
|
||||||
|
id: parseInt(Math.random() * 10000000),
|
||||||
|
name: item.serverName,
|
||||||
|
type: "group",
|
||||||
|
fold:true,
|
||||||
|
show:false,
|
||||||
|
};
|
||||||
|
|
||||||
|
let layerGroup = group;
|
||||||
|
layerGroup.children = [];
|
||||||
|
configLayers.unshift(group);
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
item.children.forEach((it, idx) => {
|
||||||
|
|
||||||
|
let attribute = JSON.parse(it.attribute);
|
||||||
|
|
||||||
|
// 处理根据字段分类渲染样式的图层
|
||||||
|
if(attribute && attribute.symbol && attribute.symbol.styleField && attribute.symbol.styleFieldOptions && Object.keys(attribute.symbol.styleFieldOptions).length>0){
|
||||||
|
// console.log(attribute.layers,attribute)
|
||||||
|
attribute.type = 'geojson';
|
||||||
|
if(attribute.layers){
|
||||||
|
attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+attribute.layers+"&maxFeatures=1000000&outputFormat=application%2Fjson";
|
||||||
|
}
|
||||||
|
|
||||||
|
// delete attribute.layers;
|
||||||
|
delete attribute.parameters;
|
||||||
|
delete attribute.highlight;
|
||||||
|
console.log("图层属性信息:",attribute.url,attribute);
|
||||||
|
|
||||||
|
|
||||||
|
if(!attribute.symbol.styleOptions){
|
||||||
|
attribute.symbol.styleOptions = {
|
||||||
|
"opacity": 0.8,
|
||||||
|
"color": "",
|
||||||
|
"width": 2,
|
||||||
|
"clampToGround": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
attribute.zIndex = 10000000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if(attribute.dynamic){
|
||||||
|
attribute.type = 'geojson';
|
||||||
|
if(attribute.layers){
|
||||||
|
attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+attribute.layers+"&maxFeatures=1000000&outputFormat=application%2Fjson";
|
||||||
|
attribute.symbol = {
|
||||||
|
type: "polyline",
|
||||||
|
styleOptions: {
|
||||||
|
clampToGround:true,
|
||||||
|
width: 5,
|
||||||
|
materialType: mars3d.MaterialType.LineFlow,
|
||||||
|
materialOptions: {
|
||||||
|
// color: Cesium.Color.CHARTREUSE,
|
||||||
|
image: "img/textures/line-color-yellow.png",
|
||||||
|
speed: 8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 设置标签文字偏移量
|
||||||
|
if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label){
|
||||||
|
attribute.symbol.styleOptions.label.pixelOffsetY = -40
|
||||||
|
let oldText = attribute.symbol.styleOptions.label.text;
|
||||||
|
attribute.symbol.styleOptions.label = {
|
||||||
|
text: oldText,
|
||||||
|
font_size: 14,
|
||||||
|
// color: Cesium.Color.AZURE,
|
||||||
|
outline: true,
|
||||||
|
// outlineColor: Cesium.Color.BLACK,
|
||||||
|
outlineWidth: 2,
|
||||||
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
// pixelOffset: new Cesium.Cartesian2(10, -25) // 偏移量
|
||||||
|
pixelOffsetY:-40
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
attribute.pid = group.id;
|
||||||
|
|
||||||
|
// 去掉所有图层点击选中样式
|
||||||
|
delete attribute.highlight;
|
||||||
|
|
||||||
|
// 如果不为空
|
||||||
|
if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label && attribute.symbol.styleOptions.label.text){
|
||||||
|
/**
|
||||||
|
* 图标标题显示情况：
|
||||||
|
key：字段中文名称，value：字段英文名称
|
||||||
|
* 1. key:value
|
||||||
|
* 2. key:value@key:value
|
||||||
|
* 3. key:value@,@key:value
|
||||||
|
* 4. @value
|
||||||
|
* 5. @value1@value2
|
||||||
|
* 6. @value1@,@value2
|
||||||
|
* 7. key:value1@value2
|
||||||
|
* */
|
||||||
|
let text = "";
|
||||||
|
if(attribute.symbol.styleOptions.label.text.match("@")){
|
||||||
|
let arr = attribute.symbol.styleOptions.label.text.split("@");
|
||||||
|
if(arr.length>0){
|
||||||
|
arr.forEach((item,index)=>{
|
||||||
|
if(item.match(":")){
|
||||||
|
let garr = item.split(":")
|
||||||
|
text = text+garr[0]+":{"+garr[1]+"}"
|
||||||
|
}else if(item.length==1){
|
||||||
|
text = text+item
|
||||||
|
}else if(item.length>1){
|
||||||
|
text = text+"{"+item+"}"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}else if(attribute.symbol.styleOptions.label.text.length>1 && attribute.symbol.styleOptions.label.text.match(":") ){
|
||||||
|
let garr = attribute.symbol.styleOptions.label.text.split(":")
|
||||||
|
text = text+garr[0]+":{"+garr[1]+"}"
|
||||||
|
}else if(attribute.symbol.styleOptions.label.text.length>1 && !attribute.symbol.styleOptions.label.text.match(":")){
|
||||||
|
text = "{"+attribute.symbol.styleOptions.label.text+"}";
|
||||||
|
}
|
||||||
|
attribute.symbol.styleOptions.label.text = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
let ipinfo = matchHttpIpPort(attribute.url);
|
||||||
|
|
||||||
|
if(ipinfo){ // 如果匹配得到则替换为配置文件中的
|
||||||
|
attribute.url = attribute.url.replace(ipinfo[0],GEOSERVER_BASE_API);
|
||||||
|
}else{ //如果没有匹配到则直接拼接
|
||||||
|
attribute.url = GEOSERVER_BASE_API+attribute.url
|
||||||
|
}
|
||||||
|
if(attribute.type == 'geojson'){
|
||||||
|
attribute.url = attribute.url + "&cql_filter=is_del%20=0"
|
||||||
|
}else if(attribute.type == 'wms'){
|
||||||
|
attribute.parameters.cql_filter="is_del=0"
|
||||||
|
}
|
||||||
|
|
||||||
|
if(attribute.name == '防火驿站'){
|
||||||
|
attribute.show = true;
|
||||||
|
}
|
||||||
|
configLayers.unshift(attribute);
|
||||||
|
attribute.show = attribute.show ? true : false;
|
||||||
|
|
||||||
|
layerGroup.children.push(attribute)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handlerLayers.value.push(layerGroup);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("configlayers",configLayers);
|
||||||
|
// window.globalMap.setLayersOptions(configLayers);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const matchHttpIpPort = (url) => { // 匹配“ http://ip:port ”
|
||||||
|
const ipRegex = /^http\:\/\/\b(?:[0-9]{1,3}\.){3}[0-9]{1,3}\b\:\b[0-9]{1,5}\//;
|
||||||
|
const match = url.match(ipRegex)
|
||||||
|
if (match) {
|
||||||
|
return match;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const handlerChangeAllLayer = (group) =>{
|
||||||
|
if(group.show == false){
|
||||||
|
group.children?.forEach((item,index)=>{
|
||||||
|
item.show = true;
|
||||||
|
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
group.children?.forEach((item,index)=>{
|
||||||
|
item.show = false;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
group.show = !group.show;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerChangeLayer = (options,group)=>{
|
||||||
|
if(options.show == true){
|
||||||
|
group.show = false;
|
||||||
|
}
|
||||||
|
options.show = !options.show;
|
||||||
|
let layer = window.globalMap.getLayerById(options.id);
|
||||||
|
|
||||||
|
if(layer){
|
||||||
|
layer.show = !layer.show
|
||||||
|
}else{
|
||||||
|
if(options.type == "geojson"){
|
||||||
|
layer = new mars3d.layer.GeoJsonLayer(options);
|
||||||
|
layer.show = true;
|
||||||
|
}else if(options.type == "wms"){
|
||||||
|
layer = new mars3d.layer.WmsLayer(options);
|
||||||
|
layer.show = true;
|
||||||
|
}
|
||||||
|
window.globalMap.addLayer(layer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handnlerFoldGroupLayer = (item)=>{
|
||||||
|
item.fold = !item.fold;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ch = ()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMap = ()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
let {
|
||||||
|
amapKey,
|
||||||
|
amapStyleKey,
|
||||||
|
amapLon,
|
||||||
|
amapLat,
|
||||||
|
amapZindex,
|
||||||
|
mapMarkerType,
|
||||||
|
lang,
|
||||||
|
amapStyleKeyCustom,
|
||||||
|
features,
|
||||||
|
viewMode,
|
||||||
|
showLabel,
|
||||||
|
pitch,
|
||||||
|
skyColor,
|
||||||
|
marker,
|
||||||
|
satelliteTileLayer,
|
||||||
|
roadNetTileLayer,
|
||||||
|
trafficTileLayer
|
||||||
|
} = toRefs(props.chartConfig.option.mapOptions)
|
||||||
|
|
||||||
|
let mapIns: any = null
|
||||||
|
let markers: any = []
|
||||||
|
let AMapIns: any = null
|
||||||
|
|
||||||
|
const vChartRef = ref<HTMLElement>()
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
handlerGetLayerTree();
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const isFirstLoad = ref(true);
|
||||||
|
const initMap = (newData: any) => {
|
||||||
|
// 第一次加载
|
||||||
|
if(isFirstLoad.value){
|
||||||
|
map = new mars3d.Map(vChartRef.value, newData);
|
||||||
|
}else{ // 之后更新
|
||||||
|
// map.setOptions(newData);
|
||||||
|
map.setSceneOptions(newData.scene);
|
||||||
|
}
|
||||||
|
isFirstLoad.value = false;
|
||||||
|
|
||||||
|
window.globalMap = map;
|
||||||
|
|
||||||
|
return null;
|
||||||
|
// 初始化
|
||||||
|
AMapLoader.load({
|
||||||
|
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
|
||||||
|
version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
|
||||||
|
}).then(AMap => {
|
||||||
|
AMapIns = AMap
|
||||||
|
mapIns = new AMap.Map(vChartRef.value, {
|
||||||
|
resizeEnable: true,
|
||||||
|
zoom: amapZindex.value, // 地图显示的缩放级别
|
||||||
|
center: [amapLon.value, amapLat.value],
|
||||||
|
lang: lang.value,
|
||||||
|
features: features.value,
|
||||||
|
pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
|
||||||
|
skyColor: skyColor.value,
|
||||||
|
viewMode: viewMode.value, // 地图模式
|
||||||
|
showLabel: showLabel.value, // 是否显示地图文字标记
|
||||||
|
willReadFrequently: true
|
||||||
|
})
|
||||||
|
dataHandle(props.chartConfig.option.dataset)
|
||||||
|
|
||||||
|
let satelliteLayer = new AMap.TileLayer.Satellite({
|
||||||
|
zIndex: satelliteTileLayer.value.zIndex,
|
||||||
|
opacity: satelliteTileLayer.value.opacity,
|
||||||
|
zooms: satelliteTileLayer.value.zooms
|
||||||
|
})
|
||||||
|
let roadNetLayer = new AMap.TileLayer.RoadNet({
|
||||||
|
zIndex: roadNetTileLayer.value.zIndex,
|
||||||
|
opacity: roadNetTileLayer.value.opacity,
|
||||||
|
zooms: roadNetTileLayer.value.zooms
|
||||||
|
})
|
||||||
|
let trafficLayer = new AMap.TileLayer.Traffic({
|
||||||
|
zIndex: trafficTileLayer.value.zIndex,
|
||||||
|
opacity: trafficTileLayer.value.opacity,
|
||||||
|
zooms: trafficTileLayer.value.zooms
|
||||||
|
})
|
||||||
|
mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
|
||||||
|
if (satelliteTileLayer.value.show) {
|
||||||
|
mapIns.add([satelliteLayer])
|
||||||
|
}
|
||||||
|
if (roadNetTileLayer.value.show) {
|
||||||
|
mapIns.add([roadNetLayer])
|
||||||
|
}
|
||||||
|
if (trafficTileLayer.value.show) {
|
||||||
|
mapIns.add([trafficLayer])
|
||||||
|
}
|
||||||
|
|
||||||
|
mapIns.setMapStyle(
|
||||||
|
`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.catch(e => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const dataHandle = (newData: any) => {
|
||||||
|
if (!mapIns && !AMapIns) {
|
||||||
|
// initMap(props.chartConfig.option)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (isArray(newData.markers)) {
|
||||||
|
// 先清除旧标记
|
||||||
|
mapIns.remove(markers)
|
||||||
|
markers = []
|
||||||
|
// 记录新标记
|
||||||
|
if (mapMarkerType.value === MarkerEnum.MARKER) {
|
||||||
|
newData.markers.forEach((markerItem: any) => {
|
||||||
|
const markerInstance = new AMapIns.Marker({
|
||||||
|
position: [markerItem.position[0], markerItem.position[1]],
|
||||||
|
offset: new AMapIns.Pixel(-13, -30)
|
||||||
|
})
|
||||||
|
markers.push(markerInstance)
|
||||||
|
markerInstance.setMap(mapIns)
|
||||||
|
})
|
||||||
|
} else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
|
||||||
|
newData.markers.forEach((markerItem: any) => {
|
||||||
|
const markerInstance = new AMapIns.CircleMarker({
|
||||||
|
center: [markerItem.position[0], markerItem.position[1]],
|
||||||
|
radius: markerItem.value,
|
||||||
|
...marker.value
|
||||||
|
})
|
||||||
|
markers.push(markerInstance)
|
||||||
|
markerInstance.setMap(mapIns)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const stopWatch = watch(
|
||||||
|
() => props.chartConfig.option.mapOptions,
|
||||||
|
async option => {
|
||||||
|
let options = JSON.parse(JSON.stringify(props.chartConfig.option.mapOptions))
|
||||||
|
console.log("props.chartConfig.option.mapOptions",);
|
||||||
|
|
||||||
|
await nextTick();
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.chartConfig.option.dataset,
|
||||||
|
newData => {
|
||||||
|
try {
|
||||||
|
dataHandle(newData)
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 预览
|
||||||
|
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
stopWatch()
|
||||||
|
dataHandle(newData)
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.layer-container{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
padding:15px;
|
||||||
|
padding-top:0px;
|
||||||
|
padding-right:5px;
|
||||||
|
background:rgba(7,38,30,0.85);
|
||||||
|
border:1px solid #088538;
|
||||||
|
}
|
||||||
|
.layer-item-container{
|
||||||
|
width:100%;
|
||||||
|
height: calc( 100% - 50px);
|
||||||
|
overflow-y:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-container .title{
|
||||||
|
width:100%;
|
||||||
|
height:50px;
|
||||||
|
line-height:50px;
|
||||||
|
color:#CBE6CD;
|
||||||
|
font-size:16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-category{
|
||||||
|
width:100%;
|
||||||
|
height:36px;
|
||||||
|
color:#CBE6CD;
|
||||||
|
font-size:16px;
|
||||||
|
line-height:36px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow{
|
||||||
|
font-size:22px;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
.layer-category-checkbox{
|
||||||
|
width:14px;
|
||||||
|
height:14px;
|
||||||
|
background:#fff;
|
||||||
|
margin-top:11px;
|
||||||
|
cursor:pointer;
|
||||||
|
border-radius:2px;
|
||||||
|
}
|
||||||
|
.layer-category-name{
|
||||||
|
flex:auto;
|
||||||
|
text-indent: 12px;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-item{
|
||||||
|
width:100%;
|
||||||
|
height:24px;
|
||||||
|
line-height:24px;
|
||||||
|
font-size:14px;
|
||||||
|
color: #CBE6CD;
|
||||||
|
display:flex;
|
||||||
|
padding-left:40px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-checkbox{
|
||||||
|
width:14px;
|
||||||
|
height:14px;
|
||||||
|
background:#fff;
|
||||||
|
margin-top:5px;
|
||||||
|
cursor:pointer;
|
||||||
|
border-radius:2px;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-name{
|
||||||
|
flex:auto;
|
||||||
|
text-indent: 12px;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -28,7 +28,6 @@
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
console.log(props.chartConfig.option);
|
|
||||||
const { w, h } = toRefs(props.chartConfig.attr);
|
const { w, h } = toRefs(props.chartConfig.attr);
|
||||||
const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
|
const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
|
||||||
// 单击交互
|
// 单击交互
|
||||||
|
|
@ -67,24 +66,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const clickBtn = () => {
|
const clickBtn = () => {
|
||||||
console.log('单击');
|
|
||||||
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
|
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
|
||||||
};
|
};
|
||||||
const dblclickBtn = () => {
|
const dblclickBtn = () => {
|
||||||
console.log('双击');
|
|
||||||
eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
|
eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
|
||||||
};
|
};
|
||||||
const rightclickBtn = (event) => {
|
const rightclickBtn = (event) => {
|
||||||
console.log('右击');
|
|
||||||
event.preventDefault(); // 阻止默认的右键菜单
|
event.preventDefault(); // 阻止默认的右键菜单
|
||||||
eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
|
eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
|
||||||
};
|
};
|
||||||
const mouseenterBtn = () => {
|
const mouseenterBtn = () => {
|
||||||
console.log('鼠标移入');
|
|
||||||
eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
|
eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
|
||||||
};
|
};
|
||||||
const mouseleaveBtn = () => {
|
const mouseleaveBtn = () => {
|
||||||
console.log('鼠标移出');
|
|
||||||
eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
|
eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<svg
|
<svg
|
||||||
:width="props.w"
|
:width="props.w"
|
||||||
:height="props.h"
|
:height="props.h"
|
||||||
:viewBox="`0 0 ${props.w} ${props.h}`"
|
viewBox="0 0 400 40"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,8 @@ import { chartInitConfig } from '@/settings/designSetting'
|
||||||
import { LowerLeftConfig } from './index'
|
import { LowerLeftConfig } from './index'
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
imageStyle: {
|
dataStyle: {
|
||||||
|
backgroud: '#FFFFFF00',
|
||||||
imageWidth: 26,
|
imageWidth: 26,
|
||||||
imageHeight: 28,
|
imageHeight: 28,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,32 @@
|
||||||
<template>
|
<template>
|
||||||
<CollapseItem name="图标设置" :expanded="true">
|
<CollapseItem name="图标设置" :expanded="true">
|
||||||
<SettingItemBox name="属性设置">
|
<SettingItemBox name="属性设置">
|
||||||
|
<SettingItem name="背景颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
:modes="['rgb']"
|
||||||
|
v-model:value="optionData.dataStyle.backgroud"
|
||||||
|
></n-color-picker>
|
||||||
|
</SettingItem>
|
||||||
<SettingItem name="图标宽度">
|
<SettingItem name="图标宽度">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.imageStyle.imageWidth"
|
v-model:value="optionData.dataStyle.imageWidth"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="图标宽度"
|
placeholder="图标宽度"
|
||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="图标高度">
|
<!-- <SettingItem name="图标高度">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.imageStyle.imageHeight"
|
v-model:value="optionData.dataStyle.imageHeight"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="图标高度"
|
placeholder="图标高度"
|
||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem> -->
|
||||||
<SettingItem name="图标距离右侧的距离">
|
<SettingItem name="图标距离右侧的距离">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.imageStyle.right"
|
v-model:value="optionData.dataStyle.right"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="高度"
|
placeholder="高度"
|
||||||
|
|
@ -27,7 +34,7 @@
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="图标距离底部的距离">
|
<SettingItem name="图标距离底部的距离">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.imageStyle.bottom"
|
v-model:value="optionData.dataStyle.bottom"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="宽度"
|
placeholder="宽度"
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="lowerLeft">
|
<div class="lowerLeft">
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<n-image
|
<Icon :dataStyle="option.dataStyle" />
|
||||||
:width="option.imageStyle.imageWidth"
|
|
||||||
:height="option.imageStyle.imageHeight"
|
|
||||||
src="src/assets/images/chart/zhigan/component/lowerLeft.svg"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -16,6 +12,7 @@
|
||||||
import { icon } from '@/plugins';
|
import { icon } from '@/plugins';
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
import { useChartDataFetch } from '@/hooks';
|
import { useChartDataFetch } from '@/hooks';
|
||||||
|
import Icon from './svg/icon.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
chartConfig: {
|
chartConfig: {
|
||||||
|
|
@ -27,26 +24,20 @@
|
||||||
const { w, h } = toRefs(props.chartConfig.attr);
|
const { w, h } = toRefs(props.chartConfig.attr);
|
||||||
|
|
||||||
const option = reactive({
|
const option = reactive({
|
||||||
imageStyle: props.chartConfig.option.imageStyle,
|
dataStyle: props.chartConfig.option.dataStyle,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.lowerLeft {
|
.lowerLeft {
|
||||||
|
background: v-bind('`${option.dataStyle.backgroud}`');
|
||||||
width: v-bind('`${w}px`');
|
width: v-bind('`${w}px`');
|
||||||
height: v-bind('`${h}px`');
|
height: v-bind('`${h}px`');
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
// height: 32px;
|
|
||||||
}
|
|
||||||
.image {
|
.image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
right: v-bind('`${option.dataStyle.right}px`');
|
||||||
|
bottom: v-bind('`${option.dataStyle.bottom}px`');
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
right: v-bind('`${option.imageStyle.right}px`');
|
|
||||||
bottom: v-bind('`${option.imageStyle.bottom}px`');
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
:width="props.dataStyle.imageWidth"
|
||||||
|
:height="props.dataStyle.imageHeight"
|
||||||
|
viewBox="0 0 26 28"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#00D586" offset="0%"></stop>
|
||||||
|
<stop stop-color="#00AB4E" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
x1="6.17106015%"
|
||||||
|
y1="0%"
|
||||||
|
x2="67.7872653%"
|
||||||
|
y2="117.560409%"
|
||||||
|
id="linearGradient-2"
|
||||||
|
>
|
||||||
|
<stop stop-color="#007343" offset="0%"></stop>
|
||||||
|
<stop stop-color="#89E5A1" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1870, -733)">
|
||||||
|
<g id="可视化" transform="translate(-0.5, -1)">
|
||||||
|
<g id="模块" transform="translate(46, 88)">
|
||||||
|
<g id="标题模块--右侧1" transform="translate(1450, 285)">
|
||||||
|
<g id="底部背景" transform="translate(0, 0)">
|
||||||
|
<g
|
||||||
|
id="边框"
|
||||||
|
transform="translate(199.8663, 194.0447) scale(-1, 1) translate(-199.8663, -194.0447)"
|
||||||
|
>
|
||||||
|
<g id="编组-22" transform="translate(0, 361.9394)">
|
||||||
|
<polygon
|
||||||
|
id="路径-11"
|
||||||
|
fill="url(#linearGradient-1)"
|
||||||
|
transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
|
||||||
|
points="0 18.8448966 0 26.1499885 7.30509189 18.8448966"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="装饰线段-"
|
||||||
|
fill="url(#linearGradient-2)"
|
||||||
|
fill-rule="nonzero"
|
||||||
|
points="3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14"
|
||||||
|
></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps(['dataStyle']);
|
||||||
|
</script>
|
||||||
|
|
@ -10,18 +10,18 @@ const { source } = dataJson;
|
||||||
export const option = {
|
export const option = {
|
||||||
dataset: source,
|
dataset: source,
|
||||||
dataStyle: {
|
dataStyle: {
|
||||||
width: 400,
|
listWidth: 363,
|
||||||
height: 300,
|
listHeight: 28,
|
||||||
sortOrder: true,
|
sortOrder: true,
|
||||||
listStyle: {
|
titleColor: '#FFFFFF',
|
||||||
titleColor: '#FFFFFF',
|
titleFontSize: 16,
|
||||||
titleFontSize: 16,
|
timeColor: '#16E795',
|
||||||
timeColor: '#16E795',
|
timeFontSize: 16,
|
||||||
timeFontSize: 16,
|
numColor: '#73FF73',
|
||||||
numColor: '#73FF73',
|
numFontSize: 16,
|
||||||
numFontSize: 16,
|
marginbottom: 5,
|
||||||
marginbottom: 5,
|
marginleft: 20,
|
||||||
}
|
marginright: 20,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,12 @@
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['rgb']"
|
:modes="['rgb']"
|
||||||
v-model:value="optionData.dataStyle.listStyle.titleColor"
|
v-model:value="optionData.dataStyle.titleColor"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="标题字体大小">
|
<SettingItem name="标题字体大小">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.listStyle.titleFontSize"
|
v-model:value="optionData.dataStyle.titleFontSize"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="标题字体大小"
|
placeholder="标题字体大小"
|
||||||
|
|
@ -20,12 +20,12 @@
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['rgb']"
|
:modes="['rgb']"
|
||||||
v-model:value="optionData.dataStyle.listStyle.timeColor"
|
v-model:value="optionData.dataStyle.timeColor"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="时间字体大小">
|
<SettingItem name="时间字体大小">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.listStyle.timeFontSize"
|
v-model:value="optionData.dataStyle.timeFontSize"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="时间字体大小"
|
placeholder="时间字体大小"
|
||||||
|
|
@ -35,12 +35,12 @@
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['rgb']"
|
:modes="['rgb']"
|
||||||
v-model:value="optionData.dataStyle.listStyle.numColor"
|
v-model:value="optionData.dataStyle.numColor"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="类型字体大小">
|
<SettingItem name="类型字体大小">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.listStyle.numFontSize"
|
v-model:value="optionData.dataStyle.numFontSize"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="类型字体大小"
|
placeholder="类型字体大小"
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
<SettingItemBox>
|
<SettingItemBox>
|
||||||
<SettingItem name="间隔距离">
|
<SettingItem name="间隔距离">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.listStyle.marginbottom"
|
v-model:value="optionData.dataStyle.marginbottom"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="间隔距离"
|
placeholder="间隔距离"
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,9 @@
|
||||||
@mouseleave="item.mouseFlag = true"
|
@mouseleave="item.mouseFlag = true"
|
||||||
>
|
>
|
||||||
<Xinxi
|
<Xinxi
|
||||||
:style="{ marginBottom: `${option.dataStyle.listStyle.marginbottom}px` }"
|
:style="{ marginBottom: `${option.dataStyle.marginbottom}px` }"
|
||||||
:item="item"
|
:item="item"
|
||||||
:listStyle="option.dataStyle.listStyle"
|
:dataStyle="option.dataStyle"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -75,6 +75,29 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => w,
|
||||||
|
() => {
|
||||||
|
option.dataStyle.listWidth =
|
||||||
|
w.value - option.dataStyle.marginleft - option.dataStyle.marginright;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => option.dataStyle.listWidth,
|
||||||
|
() => {
|
||||||
|
option.dataStyle.listHeight = 28 * (option.dataStyle.listWidth / 360);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@
|
||||||
<div>
|
<div>
|
||||||
<svg
|
<svg
|
||||||
v-if="props.item.mouseFlag"
|
v-if="props.item.mouseFlag"
|
||||||
width="363px"
|
:width="props.dataStyle.listWidth"
|
||||||
height="28px"
|
:height="props.dataStyle.listHeight"
|
||||||
viewBox="0 0 363 28"
|
viewBox="0 0 363 28"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -72,24 +72,24 @@
|
||||||
v-else
|
v-else
|
||||||
x="5%"
|
x="5%"
|
||||||
y="20"
|
y="20"
|
||||||
:fill="props.listStyle.titleColor"
|
:fill="props.dataStyle.titleColor"
|
||||||
:font-size="props.listStyle.titleFontSize"
|
:font-size="props.dataStyle.titleFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.key }}
|
{{ props.item.key }}
|
||||||
</text>
|
</text>
|
||||||
<text
|
<text
|
||||||
x="15%"
|
x="15%"
|
||||||
y="20"
|
y="20"
|
||||||
:fill="props.listStyle.titleColor"
|
:fill="props.dataStyle.titleColor"
|
||||||
:font-size="props.listStyle.titleFontSize"
|
:font-size="props.dataStyle.titleFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.title }}
|
{{ props.item.title }}
|
||||||
</text>
|
</text>
|
||||||
<text
|
<text
|
||||||
x="37%"
|
x="37%"
|
||||||
y="20"
|
y="20"
|
||||||
:fill="props.listStyle.timeColor"
|
:fill="props.dataStyle.timeColor"
|
||||||
:font-size="props.listStyle.timeFontSize"
|
:font-size="props.dataStyle.timeFontSize"
|
||||||
>
|
>
|
||||||
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
|
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
|
||||||
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
|
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
|
||||||
|
|
@ -98,16 +98,16 @@
|
||||||
<text
|
<text
|
||||||
x="85%"
|
x="85%"
|
||||||
y="20"
|
y="20"
|
||||||
:fill="props.listStyle.numColor"
|
:fill="props.dataStyle.numColor"
|
||||||
:font-size="props.listStyle.numFontSize"
|
:font-size="props.dataStyle.numFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.num }}
|
{{ props.item.num }}
|
||||||
</text>
|
</text>
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg
|
||||||
v-if="!props.item.mouseFlag"
|
v-if="!props.item.mouseFlag"
|
||||||
width="363px"
|
:width="props.dataStyle.listWidth"
|
||||||
height="28px"
|
:height="props.dataStyle.listHeight"
|
||||||
viewBox="0 0 363 28"
|
viewBox="0 0 363 28"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -182,24 +182,24 @@
|
||||||
v-else
|
v-else
|
||||||
x="5%"
|
x="5%"
|
||||||
y="20"
|
y="20"
|
||||||
:fill="props.listStyle.titleColor"
|
:fill="props.dataStyle.titleColor"
|
||||||
:font-size="props.listStyle.titleFontSize"
|
:font-size="props.dataStyle.titleFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.key }}
|
{{ props.item.key }}
|
||||||
</text>
|
</text>
|
||||||
<text
|
<text
|
||||||
x="15%"
|
x="15%"
|
||||||
y="20"
|
y="20"
|
||||||
:fill="props.listStyle.titleColor"
|
:fill="props.dataStyle.titleColor"
|
||||||
:font-size="props.listStyle.titleFontSize"
|
:font-size="props.dataStyle.titleFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.title }}
|
{{ props.item.title }}
|
||||||
</text>
|
</text>
|
||||||
<text
|
<text
|
||||||
x="37%"
|
x="37%"
|
||||||
y="20"
|
y="20"
|
||||||
:fill="props.listStyle.timeColor"
|
:fill="props.dataStyle.timeColor"
|
||||||
:font-size="props.listStyle.timeFontSize"
|
:font-size="props.dataStyle.timeFontSize"
|
||||||
>
|
>
|
||||||
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
|
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
|
||||||
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
|
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
|
||||||
|
|
@ -208,8 +208,8 @@
|
||||||
<text
|
<text
|
||||||
x="85%"
|
x="85%"
|
||||||
y="20"
|
y="20"
|
||||||
:fill="props.listStyle.numColor"
|
:fill="props.dataStyle.numColor"
|
||||||
:font-size="props.listStyle.numFontSize"
|
:font-size="props.dataStyle.numFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.num }}
|
{{ props.item.num }}
|
||||||
</text>
|
</text>
|
||||||
|
|
@ -219,5 +219,5 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
const props = defineProps(['item', 'listStyle']);
|
const props = defineProps(['item', 'dataStyle']);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ export const option = {
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
public key = ModalButtonConfig.key
|
public key = ModalButtonConfig.key
|
||||||
public attr = { ...chartInitConfig, w: 125, h: 45, zIndex: 5 }
|
public attr = { ...chartInitConfig, w: 121, h: 44, zIndex: 5 }
|
||||||
public chartConfig = cloneDeep(ModalButtonConfig)
|
public chartConfig = cloneDeep(ModalButtonConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ModalButton">
|
<div class="ModalButton">
|
||||||
<n-button text>
|
<n-button text>
|
||||||
<Button :buttonName="option.buttonName" :buttonStyle="option.buttonStyle" />
|
<Button :w="w" :h="h" :buttonName="option.buttonName" :buttonStyle="option.buttonStyle" />
|
||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
<!-- 黄色 -->
|
<!-- 黄色 -->
|
||||||
<svg
|
<svg
|
||||||
v-if="props.buttonStyle.color == 'yellow'"
|
v-if="props.buttonStyle.color == 'yellow'"
|
||||||
width="121px"
|
:width="props.w"
|
||||||
height="44px"
|
:height="props.h"
|
||||||
viewBox="0 0 121 44"
|
viewBox="0 0 121 44"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -121,9 +121,9 @@
|
||||||
<!-- 绿色 -->
|
<!-- 绿色 -->
|
||||||
<svg
|
<svg
|
||||||
v-if="props.buttonStyle.color == 'green'"
|
v-if="props.buttonStyle.color == 'green'"
|
||||||
width="141px"
|
:width="props.w"
|
||||||
height="44px"
|
:height="props.h"
|
||||||
viewBox="0 0 141 44"
|
viewBox="0 0 121 44"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
|
@ -240,8 +240,8 @@
|
||||||
<!-- 红色 -->
|
<!-- 红色 -->
|
||||||
<svg
|
<svg
|
||||||
v-if="props.buttonStyle.color == 'red'"
|
v-if="props.buttonStyle.color == 'red'"
|
||||||
width="121px"
|
:width="props.w"
|
||||||
height="44px"
|
:height="props.h"
|
||||||
viewBox="0 0 121 44"
|
viewBox="0 0 121 44"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -359,5 +359,5 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps(['buttonName', 'buttonStyle']);
|
const props = defineProps(['buttonName', 'buttonStyle', 'w', 'h']);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,10 @@ import { chartInitConfig } from '@/settings/designSetting'
|
||||||
import { ModalFrameCloseConfig } from './index'
|
import { ModalFrameCloseConfig } from './index'
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
|
dataStyle:{
|
||||||
|
color: '#005516',
|
||||||
|
fontColor: '#FFFFFF'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,23 @@
|
||||||
<template></template>
|
<template>
|
||||||
|
<CollapseItem name="按钮设置" :expanded="true">
|
||||||
|
<SettingItemBox name="内容设置">
|
||||||
|
<SettingItem name="按钮颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
:modes="['hex']"
|
||||||
|
v-model:value="optionData.dataStyle.color"
|
||||||
|
></n-color-picker>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="X的颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
:modes="['hex']"
|
||||||
|
v-model:value="optionData.dataStyle.fontColor"
|
||||||
|
></n-color-picker>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType, watch, ref } from 'vue';
|
import { PropType, watch, ref } from 'vue';
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ModalFrameClose">
|
<div class="ModalFrameClose">
|
||||||
<n-button text>
|
<n-button text>
|
||||||
<Button :w="w" :h="h" />
|
<Button :w="w" :h="h" :dataStyle="option.dataStyle" />
|
||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -23,7 +23,9 @@
|
||||||
|
|
||||||
const { w, h } = toRefs(props.chartConfig.attr);
|
const { w, h } = toRefs(props.chartConfig.attr);
|
||||||
|
|
||||||
const option = reactive({});
|
const option = reactive({
|
||||||
|
dataStyle: props.chartConfig.option.dataStyle,
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<svg
|
<svg
|
||||||
:width="props.w"
|
:width="props.w"
|
||||||
:height="props.h"
|
:height="props.h"
|
||||||
:viewBox="`0 0 ${props.w} ${props.h}`"
|
viewBox="0 0 52 30"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
<path
|
<path
|
||||||
d="M0,0 L16.4866044,27.8390432 C17.0497068,28.627131 18.0567376,29.1100832 19.1444648,29.1137009 L47.7125903,29.1137009 C49.4244221,29.1137009 50.812136,27.9385478 50.812136,26.4889231 L50.812136,0 L0,0 Z"
|
d="M0,0 L16.4866044,27.8390432 C17.0497068,28.627131 18.0567376,29.1100832 19.1444648,29.1137009 L47.7125903,29.1137009 C49.4244221,29.1137009 50.812136,27.9385478 50.812136,26.4889231 L50.812136,0 L0,0 Z"
|
||||||
id="形状"
|
id="形状"
|
||||||
fill="#005516"
|
:fill="props.dataStyle.color"
|
||||||
></path>
|
></path>
|
||||||
<g id="路径">
|
<g id="路径">
|
||||||
<use
|
<use
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
filter="url(#filter-2)"
|
filter="url(#filter-2)"
|
||||||
xlink:href="#path-1"
|
xlink:href="#path-1"
|
||||||
></use>
|
></use>
|
||||||
<use fill="#FFFFFF" xlink:href="#path-1"></use>
|
<use :fill="props.dataStyle.fontColor" xlink:href="#path-1"></use>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
|
@ -67,5 +67,5 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps(['w', 'h']);
|
const props = defineProps(['w', 'h', 'dataStyle']);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ export const option = {
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
public key = ModalHeadConfig.key
|
public key = ModalHeadConfig.key
|
||||||
public attr = { ...chartInitConfig, w: 321, h: 31, zIndex: -1 }
|
public attr = { ...chartInitConfig, w: 320, h: 31, zIndex: -1 }
|
||||||
public chartConfig = cloneDeep(ModalHeadConfig)
|
public chartConfig = cloneDeep(ModalHeadConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<svg
|
<svg
|
||||||
:width="props.w"
|
:width="props.w"
|
||||||
:height="props.h"
|
:height="props.h"
|
||||||
:viewBox="`0 0 ${props.w} ${props.h}`"
|
viewBox="0 0 320 31"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,6 @@
|
||||||
<div v-for="item in option.dataset" :key="item.key">
|
<div v-for="item in option.dataset" :key="item.key">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- <n-image
|
|
||||||
:width="option.dataStyle.dotSize"
|
|
||||||
:height="option.dataStyle.dotSize"
|
|
||||||
src="src/assets/images/chart/zhigan/component/modalInfoDot.svg"
|
|
||||||
/> -->
|
|
||||||
<Dot :dotSize="option.titleStyle.dotSize" :dotColor="option.titleStyle.dotColor" />
|
<Dot :dotSize="option.titleStyle.dotSize" :dotColor="option.titleStyle.dotColor" />
|
||||||
<span class="dot">{{ item.title }}</span>
|
<span class="dot">{{ item.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -42,6 +37,27 @@
|
||||||
titleStyle: props.chartConfig.option.titleStyle,
|
titleStyle: props.chartConfig.option.titleStyle,
|
||||||
contentStyle: props.chartConfig.option.contentStyle,
|
contentStyle: props.chartConfig.option.contentStyle,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => w.value,
|
||||||
|
() => {
|
||||||
|
option.contentStyle.width = w.value - option.dataStyle.marginLeft - option.titleStyle.width;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => option.titleStyle.width,
|
||||||
|
() => {
|
||||||
|
option.contentStyle.width = w.value - option.dataStyle.marginLeft - option.titleStyle.width;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -14,17 +14,17 @@ export const option = {
|
||||||
marginbottom: 20,
|
marginbottom: 20,
|
||||||
marginleft: 20,
|
marginleft: 20,
|
||||||
marginright: 20,
|
marginright: 20,
|
||||||
listStyle: {
|
listWidth: 360,
|
||||||
titleColor: '#ffffff',
|
listHeight: 110,
|
||||||
titleFontSize: 20,
|
titleColor: '#ffffff',
|
||||||
typeColor: '#FA521D',
|
titleFontSize: 20,
|
||||||
typeFontSize: 16,
|
typeColor: '#FA521D',
|
||||||
positionColor: '#ffffff',
|
typeFontSize: 16,
|
||||||
positionFontSize: 16,
|
positionColor: '#ffffff',
|
||||||
timeColor: '#ffffff',
|
positionFontSize: 16,
|
||||||
timeFontSize: 16,
|
timeColor: '#ffffff',
|
||||||
marginbottom: 5,
|
timeFontSize: 16,
|
||||||
}
|
listMarginbottom: 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -39,12 +39,12 @@
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['rgb']"
|
:modes="['rgb']"
|
||||||
v-model:value="optionData.dataStyle.listStyle.titleColor"
|
v-model:value="optionData.dataStyle.titleColor"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="标题字体大小">
|
<SettingItem name="标题字体大小">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.listStyle.titleFontSize"
|
v-model:value="optionData.dataStyle.titleFontSize"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="标题字体大小"
|
placeholder="标题字体大小"
|
||||||
|
|
@ -54,12 +54,12 @@
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['rgb']"
|
:modes="['rgb']"
|
||||||
v-model:value="optionData.dataStyle.listStyle.typeColor"
|
v-model:value="optionData.dataStyle.typeColor"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="类型字体大小">
|
<SettingItem name="类型字体大小">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.listStyle.typeFontSize"
|
v-model:value="optionData.dataStyle.typeFontSize"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="类型字体大小"
|
placeholder="类型字体大小"
|
||||||
|
|
@ -69,12 +69,12 @@
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['rgb']"
|
:modes="['rgb']"
|
||||||
v-model:value="optionData.dataStyle.listStyle.positionColor"
|
v-model:value="optionData.dataStyle.positionColor"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="位置字体大小">
|
<SettingItem name="位置字体大小">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.listStyle.positionFontSize"
|
v-model:value="optionData.dataStyle.positionFontSize"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="位置字体大小"
|
placeholder="位置字体大小"
|
||||||
|
|
@ -84,12 +84,12 @@
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['rgb']"
|
:modes="['rgb']"
|
||||||
v-model:value="optionData.dataStyle.listStyle.timeColor"
|
v-model:value="optionData.dataStyle.timeColor"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="时间字体大小">
|
<SettingItem name="时间字体大小">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.listStyle.timeFontSize"
|
v-model:value="optionData.dataStyle.timeFontSize"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="时间字体大小"
|
placeholder="时间字体大小"
|
||||||
|
|
@ -97,7 +97,7 @@
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="间隔距离">
|
<SettingItem name="间隔距离">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.listStyle.marginbottom"
|
v-model:value="optionData.dataStyle.listMarginbottom"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="间隔距离"
|
placeholder="间隔距离"
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div v-for="item in option.dataset" :key="item.key">
|
<div v-for="item in option.dataset" :key="item.key">
|
||||||
<Xinxi
|
<Xinxi
|
||||||
:style="{ marginBottom: `${option.dataStyle.listStyle.marginbottom}px` }"
|
:style="{ marginBottom: `${option.dataStyle.listMarginbottom}px` }"
|
||||||
:item="item"
|
:item="item"
|
||||||
:listStyle="option.dataStyle.listStyle"
|
:dataStyle="option.dataStyle"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -33,6 +33,28 @@
|
||||||
dataset: props.chartConfig.option.dataset,
|
dataset: props.chartConfig.option.dataset,
|
||||||
dataStyle: props.chartConfig.option.dataStyle,
|
dataStyle: props.chartConfig.option.dataStyle,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => w,
|
||||||
|
() => {
|
||||||
|
option.dataStyle.listWidth =
|
||||||
|
w.value - option.dataStyle.marginleft - option.dataStyle.marginright;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => option.dataStyle.listWidth,
|
||||||
|
() => {
|
||||||
|
option.dataStyle.listHeight = 110 * (option.dataStyle.listWidth / 360);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
@ -58,7 +80,7 @@
|
||||||
margin-right: v-bind('`${option.dataStyle.marginright}px`');
|
margin-right: v-bind('`${option.dataStyle.marginright}px`');
|
||||||
}
|
}
|
||||||
|
|
||||||
.xinxi {
|
// .xinxi {
|
||||||
margin-bottom: v-bind('`${option.dataStyle.listStyle.marginbottom}px`');
|
// margin-bottom: v-bind('`${option.dataStyle.listMarginbottom}px`');
|
||||||
}
|
// }
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<svg
|
<svg
|
||||||
width="356px"
|
:width="props.dataStyle.listWidth"
|
||||||
height="105px"
|
:height="props.dataStyle.listHeight"
|
||||||
viewBox="0 0 356 105"
|
viewBox="0 0 356 105"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -202,32 +202,32 @@
|
||||||
<text
|
<text
|
||||||
x="20"
|
x="20"
|
||||||
y="30"
|
y="30"
|
||||||
:fill="props.listStyle.titleColor"
|
:fill="props.dataStyle.titleColor"
|
||||||
:font-size="props.listStyle.titleFontSize"
|
:font-size="props.dataStyle.titleFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.title }}
|
{{ props.item.title }}
|
||||||
</text>
|
</text>
|
||||||
<text
|
<text
|
||||||
x="270"
|
x="270"
|
||||||
y="30"
|
y="30"
|
||||||
:fill="props.listStyle.typeColor"
|
:fill="props.dataStyle.typeColor"
|
||||||
:font-size="props.listStyle.typeFontSize"
|
:font-size="props.dataStyle.typeFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.type }}
|
{{ props.item.type }}
|
||||||
</text>
|
</text>
|
||||||
<text
|
<text
|
||||||
x="40"
|
x="40"
|
||||||
y="60"
|
y="60"
|
||||||
:fill="props.listStyle.positionColor"
|
:fill="props.dataStyle.positionColor"
|
||||||
:font-size="props.listStyle.positionFontSize"
|
:font-size="props.dataStyle.positionFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.position }}
|
{{ props.item.position }}
|
||||||
</text>
|
</text>
|
||||||
<text
|
<text
|
||||||
x="40"
|
x="40"
|
||||||
y="85"
|
y="85"
|
||||||
:fill="props.listStyle.timeColor"
|
:fill="props.dataStyle.timeColor"
|
||||||
:font-size="props.listStyle.timeFontSize"
|
:font-size="props.dataStyle.timeFontSize"
|
||||||
>
|
>
|
||||||
{{ props.item.time }}
|
{{ props.item.time }}
|
||||||
</text>
|
</text>
|
||||||
|
|
@ -236,5 +236,5 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps(['item', 'listStyle']);
|
const props = defineProps(['item', 'dataStyle']);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -29,15 +29,15 @@ export const option = {
|
||||||
bottomFontColor3: '#FFFFFF',
|
bottomFontColor3: '#FFFFFF',
|
||||||
bottomFontSize3: 12,
|
bottomFontSize3: 12,
|
||||||
lineColor: '#A4F9AB',
|
lineColor: '#A4F9AB',
|
||||||
bottomMarginTop: 0,
|
bottomMarginTop: 16,
|
||||||
bottomWidth: 80,
|
bottomWidth: 80,
|
||||||
bottomHeight: 120,
|
bottomHeight: 80 * 97 / 71,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
public key = WuRenJiFeiXingShuJuConfig.key
|
public key = WuRenJiFeiXingShuJuConfig.key
|
||||||
public attr = { ...chartInitConfig, w: 400, h: 200, zIndex: -1 }
|
public attr = { ...chartInitConfig, w: 400, h: 240, zIndex: -1 }
|
||||||
public chartConfig = cloneDeep(WuRenJiFeiXingShuJuConfig)
|
public chartConfig = cloneDeep(WuRenJiFeiXingShuJuConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,14 @@
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
|
<SettingItem name="组件宽度">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="optionData.dataStyle.topWidth"
|
||||||
|
min="0"
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
<SettingItem name="组件间隔">
|
<SettingItem name="组件间隔">
|
||||||
<n-input-number v-model:value="optionData.dataStyle.gap" min="0" type="text" size="small" />
|
<n-input-number v-model:value="optionData.dataStyle.gap" min="0" type="text" size="small" />
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
|
|
@ -62,7 +70,7 @@
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="组件宽度">
|
<!-- <SettingItem name="组件宽度">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.topWidth"
|
v-model:value="optionData.dataStyle.topWidth"
|
||||||
min="0"
|
min="0"
|
||||||
|
|
@ -77,7 +85,7 @@
|
||||||
type="text"
|
type="text"
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem> -->
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
|
|
||||||
<SettingItemBox name="下方组件设置">
|
<SettingItemBox name="下方组件设置">
|
||||||
|
|
@ -130,7 +138,7 @@
|
||||||
v-model:value="optionData.dataStyle.lineColor"
|
v-model:value="optionData.dataStyle.lineColor"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="距离上方组件的距离">
|
<SettingItem name="距离上方组件距离">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.bottomMarginTop"
|
v-model:value="optionData.dataStyle.bottomMarginTop"
|
||||||
min="0"
|
min="0"
|
||||||
|
|
@ -139,7 +147,7 @@
|
||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
|
|
||||||
<SettingItem name="组件宽度">
|
<!-- <SettingItem name="组件宽度">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.bottomWidth"
|
v-model:value="optionData.dataStyle.bottomWidth"
|
||||||
min="0"
|
min="0"
|
||||||
|
|
@ -154,7 +162,7 @@
|
||||||
type="text"
|
type="text"
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem> -->
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
</CollapseItem>
|
</CollapseItem>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,19 @@
|
||||||
dataset: props.chartConfig.option.dataset,
|
dataset: props.chartConfig.option.dataset,
|
||||||
dataStyle: props.chartConfig.option.dataStyle,
|
dataStyle: props.chartConfig.option.dataStyle,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => option.dataStyle.topWidth,
|
||||||
|
() => {
|
||||||
|
option.dataStyle.topHeight = option.dataStyle.topWidth;
|
||||||
|
option.dataStyle.bottomWidth = option.dataStyle.topWidth;
|
||||||
|
option.dataStyle.bottomHeight = 97 * (option.dataStyle.bottomWidth / 71);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<svg
|
<svg
|
||||||
:width="props.dataStyle.bottomWidth"
|
:width="props.dataStyle.bottomWidth"
|
||||||
:height="props.dataStyle.bottomHeight"
|
:height="props.dataStyle.bottomHeight"
|
||||||
:viewBox="`0 0 ${props.dataStyle.bottomWidth} ${props.dataStyle.bottomHeight}`"
|
viewBox="0 0 71 97"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<svg
|
<svg
|
||||||
:width="props.dataStyle.topWidth"
|
:width="props.dataStyle.topWidth"
|
||||||
:height="props.dataStyle.topHeight"
|
:height="props.dataStyle.topHeight"
|
||||||
:viewBox="`0 0 ${props.dataStyle.topWidth} ${props.dataStyle.topHeight}`"
|
viewBox="0 0 71 71"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ export const option = {
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
public key = WuRenJiImageConfig.key
|
public key = WuRenJiImageConfig.key
|
||||||
public attr = { ...chartInitConfig, w: 401, h: 273, zIndex: -1 }
|
public attr = { ...chartInitConfig, w: 400, h: 273, zIndex: -1 }
|
||||||
public chartConfig = cloneDeep(WuRenJiImageConfig)
|
public chartConfig = cloneDeep(WuRenJiImageConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Tupian :w="w" :h="h" :dataset="option.dataset" />
|
<n-image :width="w" :height="h" :src="option.dataset.url" preview-disabled />
|
||||||
|
<span class="Tupian">
|
||||||
|
<Tupian :w="w" :h="h" />
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -31,4 +34,10 @@
|
||||||
width: v-bind('`${w}px`');
|
width: v-bind('`${w}px`');
|
||||||
height: v-bind('`${h}px`');
|
height: v-bind('`${h}px`');
|
||||||
}
|
}
|
||||||
|
.Tupian {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,11 @@
|
||||||
<svg
|
<svg
|
||||||
:width="props.w"
|
:width="props.w"
|
||||||
:height="props.h"
|
:height="props.h"
|
||||||
:viewBox="`0 0 ${props.w} ${props.h}`"
|
viewBox="0 0 400 273"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<image x="0" y="0" :width="props.w" :height="props.h" :href="props.dataset.url" />
|
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient
|
<linearGradient
|
||||||
x1="44.8535648%"
|
x1="44.8535648%"
|
||||||
|
|
@ -91,5 +90,5 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps(['w', 'h', 'dataset']);
|
const props = defineProps(['w', 'h']);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
placeholder="标题字体大小"
|
placeholder="标题字体大小"
|
||||||
></n-input-number>
|
></n-input-number>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="标题宽度">
|
<!-- <SettingItem name="标题宽度">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dataStyle.titleWidth"
|
v-model:value="optionData.dataStyle.titleWidth"
|
||||||
min="0"
|
min="0"
|
||||||
|
|
@ -89,7 +89,7 @@
|
||||||
type="text"
|
type="text"
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem> -->
|
||||||
|
|
||||||
<SettingItem name="与标题的间隔距离">
|
<SettingItem name="与标题的间隔距离">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,18 @@
|
||||||
dataset: props.chartConfig.option.dataset,
|
dataset: props.chartConfig.option.dataset,
|
||||||
dataStyle: props.chartConfig.option.dataStyle,
|
dataStyle: props.chartConfig.option.dataStyle,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => option.dataStyle.videowidth,
|
||||||
|
() => {
|
||||||
|
option.dataStyle.titleWidth = option.dataStyle.videowidth;
|
||||||
|
option.dataStyle.titleHeight = 30 * (option.dataStyle.titleWidth / 181);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<svg
|
<svg
|
||||||
:height="props.dataStyle.titleHeight"
|
:height="props.dataStyle.titleHeight"
|
||||||
:width="props.dataStyle.titleWidth"
|
:width="props.dataStyle.titleWidth"
|
||||||
:viewBox="`0 0 ${props.dataStyle.titleWidth} ${props.dataStyle.titleHeight}`"
|
viewBox="0 0 181 30"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,9 @@ import {
|
||||||
RequestGlobalConfigType,
|
RequestGlobalConfigType,
|
||||||
EditCanvasConfigType,
|
EditCanvasConfigType,
|
||||||
} from './chartEditStore.d';
|
} from './chartEditStore.d';
|
||||||
|
import useClipboard from 'vue-clipboard3';
|
||||||
|
|
||||||
|
const { toClipboard } = useClipboard();
|
||||||
|
|
||||||
const chartHistoryStore = useChartHistoryStore();
|
const chartHistoryStore = useChartHistoryStore();
|
||||||
const settingStore = useSettingStore();
|
const settingStore = useSettingStore();
|
||||||
|
|
@ -513,7 +516,7 @@ export const useChartEditStore = defineStore({
|
||||||
this.wrap(true, isHistory);
|
this.wrap(true, isHistory);
|
||||||
},
|
},
|
||||||
// * 复制
|
// * 复制
|
||||||
setCopy(isCut = false) {
|
async setCopy(isCut = false) {
|
||||||
try {
|
try {
|
||||||
// 暂不支持多选
|
// 暂不支持多选
|
||||||
if (this.getTargetChart.selectId.length > 1) return;
|
if (this.getTargetChart.selectId.length > 1) return;
|
||||||
|
|
@ -528,7 +531,7 @@ export const useChartEditStore = defineStore({
|
||||||
type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY,
|
type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY,
|
||||||
};
|
};
|
||||||
this.setRecordChart(copyData);
|
this.setRecordChart(copyData);
|
||||||
localStorage.setItem('copyData', JSON.stringify(copyData));
|
await toClipboard(JSON.stringify(copyData));
|
||||||
window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！');
|
window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！');
|
||||||
loadingFinish();
|
loadingFinish();
|
||||||
}
|
}
|
||||||
|
|
@ -542,12 +545,9 @@ export const useChartEditStore = defineStore({
|
||||||
},
|
},
|
||||||
// * 粘贴
|
// * 粘贴
|
||||||
setParse() {
|
setParse() {
|
||||||
console.log('setParse');
|
|
||||||
try {
|
try {
|
||||||
loadingStart();
|
loadingStart();
|
||||||
const recordCharts = this.getRecordChart
|
const recordCharts = this.getRecordChart;
|
||||||
? this.getRecordChart
|
|
||||||
: JSON.parse(localStorage.getItem('copyData'));
|
|
||||||
|
|
||||||
if (recordCharts === undefined) {
|
if (recordCharts === undefined) {
|
||||||
loadingFinish();
|
loadingFinish();
|
||||||
|
|
@ -587,6 +587,52 @@ export const useChartEditStore = defineStore({
|
||||||
loadingError();
|
loadingError();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 导入画布
|
||||||
|
setCopyData(data: any) {
|
||||||
|
try {
|
||||||
|
loadingStart();
|
||||||
|
const recordCharts = JSON.parse(data);
|
||||||
|
|
||||||
|
if (recordCharts === undefined) {
|
||||||
|
loadingFinish();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
|
||||||
|
e = cloneDeep(e);
|
||||||
|
e.attr.x = this.getMousePosition.startX;
|
||||||
|
e.attr.y = this.getMousePosition.startY;
|
||||||
|
// 外层生成新 id
|
||||||
|
e.id = getUUID();
|
||||||
|
// 分组列表生成新 id
|
||||||
|
if (e.isGroup) {
|
||||||
|
(e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
|
||||||
|
item.id = getUUID();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return e;
|
||||||
|
};
|
||||||
|
const isCut = recordCharts.type === HistoryActionTypeEnum.CUT;
|
||||||
|
const targetList = Array.isArray(recordCharts.charts)
|
||||||
|
? recordCharts.charts
|
||||||
|
: [recordCharts.charts];
|
||||||
|
// 多项
|
||||||
|
targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
|
||||||
|
this.addComponentList(parseHandle(e), undefined, true);
|
||||||
|
// 剪切需删除原数据
|
||||||
|
if (isCut) {
|
||||||
|
this.setTargetSelectChart(e.id);
|
||||||
|
this.removeComponentList(undefined, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (isCut) this.setRecordChart(undefined);
|
||||||
|
window['$message'].success('导入成功！');
|
||||||
|
loadingFinish();
|
||||||
|
} catch (value) {
|
||||||
|
window['$message'].error('导入失败，请检查数据是否正确！');
|
||||||
|
loadingError();
|
||||||
|
}
|
||||||
|
},
|
||||||
// * 撤回/前进 目标处理
|
// * 撤回/前进 目标处理
|
||||||
setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) {
|
setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) {
|
||||||
// 处理画布
|
// 处理画布
|
||||||
|
|
|
||||||
|
|
@ -93,9 +93,76 @@
|
||||||
const { chartEditStore } = useTargetData();
|
const { chartEditStore } = useTargetData();
|
||||||
const funSelectOptions = ref([
|
const funSelectOptions = ref([
|
||||||
{
|
{
|
||||||
|
// 事件名称（用于选择显示）
|
||||||
label: 'ceshi点击',
|
label: 'ceshi点击',
|
||||||
|
// 事件名(用于触发)
|
||||||
value: 'ceshiClick',
|
value: 'ceshiClick',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label:"根据坐标定位地图视角",
|
||||||
|
value: 'handlerFlyToPoint'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"添加任意类型图层",
|
||||||
|
value: 'handlerAddLayer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"隐藏任意类型图层",
|
||||||
|
value: 'handlerHiddenLayer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"删除任意类型图层",
|
||||||
|
value: 'handlerRemoveLayer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"添加单个矢量数据",
|
||||||
|
value: 'handlerAddEntity'
|
||||||
|
},{
|
||||||
|
label:"隐藏单个矢量数据",
|
||||||
|
value:"handlerHiddenEntity"
|
||||||
|
},{
|
||||||
|
label:"移除单个矢量数据",
|
||||||
|
value:"handlerRemoveEntity"
|
||||||
|
},{
|
||||||
|
label:"定位和高亮矢量数据",
|
||||||
|
value:"handlerFlyToEntity"
|
||||||
|
},{
|
||||||
|
label:"清除全部矢量数据",
|
||||||
|
value:"handlerClearEntityLayer"
|
||||||
|
},{
|
||||||
|
label:"隐藏全部矢量数据",
|
||||||
|
value:"handlerHiddenEntityLayer"
|
||||||
|
},{
|
||||||
|
label:"点击地图拾取坐标",
|
||||||
|
value:"handlerDrawPoint"
|
||||||
|
},{
|
||||||
|
label:"绘制贴地线",
|
||||||
|
value:"handlerDrawLine"
|
||||||
|
},{
|
||||||
|
label:"绘制贴地面",
|
||||||
|
value:"handlerDrawPolygon"
|
||||||
|
},{
|
||||||
|
label:"贴地距离测量",
|
||||||
|
value:"handlerMeasureSurfaceLength"
|
||||||
|
},{
|
||||||
|
label:"空间距离测量",
|
||||||
|
value:"handlerMeasureLength"
|
||||||
|
},{
|
||||||
|
label:"贴地面积测量",
|
||||||
|
value:"handlerMeasureSurfaceArea"
|
||||||
|
},{
|
||||||
|
label:"水平面积测量",
|
||||||
|
value:"handlerMeasureArea"
|
||||||
|
},{
|
||||||
|
label:"坐标点位测量",
|
||||||
|
value:"handlerMeasurePoint"
|
||||||
|
},{
|
||||||
|
label:"高度差测量",
|
||||||
|
value:"handlerMeasureHeight"
|
||||||
|
},{
|
||||||
|
label:"清空测量数据",
|
||||||
|
value:"handlerClearMeasure"
|
||||||
|
}
|
||||||
]);
|
]);
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
eventData: {
|
eventData: {
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,13 @@
|
||||||
</n-tabs>
|
</n-tabs>
|
||||||
|
|
||||||
<!-- 编辑 -->
|
<!-- 编辑 -->
|
||||||
<n-tabs v-if="selectTarget" v-model:value="tabsSelect" class="tabs-box" size="small" type="segment">
|
<n-tabs
|
||||||
|
v-if="selectTarget"
|
||||||
|
v-model:value="tabsSelect"
|
||||||
|
class="tabs-box"
|
||||||
|
size="small"
|
||||||
|
type="segment"
|
||||||
|
>
|
||||||
<n-tab-pane
|
<n-tab-pane
|
||||||
v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
|
v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
|
||||||
:key="item.key"
|
:key="item.key"
|
||||||
|
|
@ -62,111 +68,119 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, toRefs, watch, computed } from 'vue'
|
import { ref, toRefs, watch, computed } from 'vue';
|
||||||
import { icon } from '@/plugins'
|
import { icon } from '@/plugins';
|
||||||
import { loadAsyncComponent ,acquiesceAsyncComponent} from '@/utils'
|
import { loadAsyncComponent, acquiesceAsyncComponent } from '@/utils';
|
||||||
import { ContentBox } from '../ContentBox/index'
|
import { ContentBox } from '../ContentBox/index';
|
||||||
import { TabsEnum } from './index.d'
|
import { TabsEnum } from './index.d';
|
||||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
|
||||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
|
|
||||||
const { getDetails } = toRefs(useChartLayoutStore())
|
const { getDetails } = toRefs(useChartLayoutStore());
|
||||||
const { setItem } = useChartLayoutStore()
|
const { setItem } = useChartLayoutStore();
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore();
|
||||||
|
|
||||||
const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5
|
const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5;
|
||||||
|
|
||||||
const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
|
const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'));
|
||||||
const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'))
|
const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'));
|
||||||
const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
|
const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'));
|
||||||
const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
|
const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'));
|
||||||
const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
|
const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'));
|
||||||
const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
|
const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'));
|
||||||
|
|
||||||
const collapsed = ref<boolean>(getDetails.value)
|
const collapsed = ref<boolean>(getDetails.value);
|
||||||
const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING)
|
const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING);
|
||||||
|
|
||||||
const collapsedHandle = () => {
|
const collapsedHandle = () => {
|
||||||
collapsed.value = true
|
collapsed.value = true;
|
||||||
setItem(ChartLayoutStoreEnum.DETAILS, true)
|
setItem(ChartLayoutStoreEnum.DETAILS, true);
|
||||||
}
|
};
|
||||||
|
|
||||||
const expandHandle = () => {
|
const expandHandle = () => {
|
||||||
collapsed.value = false
|
collapsed.value = false;
|
||||||
setItem(ChartLayoutStoreEnum.DETAILS, false)
|
setItem(ChartLayoutStoreEnum.DETAILS, false);
|
||||||
}
|
};
|
||||||
|
|
||||||
const selectTarget = computed(() => {
|
const selectTarget = computed(() => {
|
||||||
const selectId = chartEditStore.getTargetChart.selectId
|
const selectId = chartEditStore.getTargetChart.selectId;
|
||||||
// 排除多个
|
// 排除多个
|
||||||
if (selectId.length !== 1) return undefined
|
if (selectId.length !== 1) return undefined;
|
||||||
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
|
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
|
||||||
if (target?.isGroup) {
|
if (target?.isGroup) {
|
||||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||||
tabsSelect.value = TabsEnum.CHART_SETTING
|
tabsSelect.value = TabsEnum.CHART_SETTING;
|
||||||
}
|
}
|
||||||
return target
|
return target;
|
||||||
})
|
});
|
||||||
|
|
||||||
watch(getDetails, newData => {
|
watch(getDetails, (newData) => {
|
||||||
if (newData) {
|
if (newData) {
|
||||||
collapsedHandle()
|
collapsedHandle();
|
||||||
} else {
|
} else {
|
||||||
expandHandle()
|
expandHandle();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
// 页面设置
|
// 页面设置
|
||||||
const globalTabList = [
|
const globalTabList = [
|
||||||
{
|
{
|
||||||
key: TabsEnum.PAGE_SETTING,
|
key: TabsEnum.PAGE_SETTING,
|
||||||
title: '页面配置',
|
title: '页面配置',
|
||||||
icon: DesktopOutlineIcon,
|
icon: DesktopOutlineIcon,
|
||||||
render: CanvasPage
|
render: CanvasPage,
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
|
const defaultTabList = [
|
||||||
|
{
|
||||||
|
key: TabsEnum.CHART_SETTING,
|
||||||
|
title: '定制',
|
||||||
|
icon: ConstructIcon,
|
||||||
|
render: ChartSetting,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: TabsEnum.CHART_ANIMATION,
|
||||||
|
title: '动画',
|
||||||
|
icon: LeafIcon,
|
||||||
|
render: ChartAnimation,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const chartsDefaultTabList = [
|
||||||
|
...defaultTabList,
|
||||||
|
{
|
||||||
|
key: TabsEnum.CHART_EVENT,
|
||||||
|
title: '事件',
|
||||||
|
icon: RocketIcon,
|
||||||
|
render: ChartEvent,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const chartsDefaultTabList = [
|
const chartsTabList = [
|
||||||
{
|
...defaultTabList,
|
||||||
key: TabsEnum.CHART_SETTING,
|
{
|
||||||
title: '定制',
|
key: TabsEnum.CHART_DATA,
|
||||||
icon: ConstructIcon,
|
title: '数据',
|
||||||
render: ChartSetting
|
icon: FlashIcon,
|
||||||
},
|
render: ChartData,
|
||||||
{
|
},
|
||||||
key: TabsEnum.CHART_ANIMATION,
|
{
|
||||||
title: '动画',
|
key: TabsEnum.CHART_EVENT,
|
||||||
icon: LeafIcon,
|
title: '事件',
|
||||||
render: ChartAnimation
|
icon: RocketIcon,
|
||||||
}
|
render: ChartEvent,
|
||||||
]
|
},
|
||||||
|
];
|
||||||
const chartsTabList = [
|
|
||||||
...chartsDefaultTabList,
|
|
||||||
{
|
|
||||||
key: TabsEnum.CHART_DATA,
|
|
||||||
title: '数据',
|
|
||||||
icon: FlashIcon,
|
|
||||||
render: ChartData
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: TabsEnum.CHART_EVENT,
|
|
||||||
title: '事件',
|
|
||||||
icon: RocketIcon,
|
|
||||||
render: ChartEvent
|
|
||||||
}
|
|
||||||
]
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@include go(content-configurations) {
|
@include go(content-configurations) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.tabs-box {
|
.tabs-box {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
.icon-position {
|
.icon-position {
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
...useSizeStyle(groupData.attr),
|
...useSizeStyle(groupData.attr),
|
||||||
...getFilterStyle(groupData.styles),
|
...getFilterStyle(groupData.styles),
|
||||||
...getTransformStyle(groupData.styles),
|
...getTransformStyle(groupData.styles),
|
||||||
...getBlendModeStyle(groupData.styles) as any
|
...(getBlendModeStyle(groupData.styles) as any),
|
||||||
}"
|
}"
|
||||||
@click="mouseClickHandle($event, groupData)"
|
@click="mouseClickHandle($event, groupData)"
|
||||||
@mousedown="mousedownHandle($event, groupData)"
|
@mousedown="mousedownHandle($event, groupData)"
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
:item="item"
|
:item="item"
|
||||||
:hiddenPoint="true"
|
:hiddenPoint="true"
|
||||||
:style="{
|
:style="{
|
||||||
...useComponentStyle(item.attr, groupIndex)
|
...useComponentStyle(item.attr, groupIndex),
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
:style="{
|
:style="{
|
||||||
...useSizeStyle(item.attr),
|
...useSizeStyle(item.attr),
|
||||||
...getFilterStyle(item.styles),
|
...getFilterStyle(item.styles),
|
||||||
...getTransformStyle(item.styles)
|
...getTransformStyle(item.styles),
|
||||||
}"
|
}"
|
||||||
></component>
|
></component>
|
||||||
</edit-shape-box>
|
</edit-shape-box>
|
||||||
|
|
@ -51,79 +51,88 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, PropType } from 'vue'
|
import { computed, PropType } from 'vue';
|
||||||
import { MenuEnum } from '@/enums/editPageEnum'
|
import { MenuEnum } from '@/enums/editPageEnum';
|
||||||
import { chartColors } from '@/settings/chartThemes/index'
|
import { chartColors } from '@/settings/chartThemes/index';
|
||||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d';
|
||||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
|
import {
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
animationsClass,
|
||||||
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
|
getFilterStyle,
|
||||||
import { useMouseHandle } from '../../hooks/useDrag.hook'
|
getTransformStyle,
|
||||||
import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
|
getBlendModeStyle,
|
||||||
import { EditShapeBox } from '../../components/EditShapeBox'
|
colorCustomMerge,
|
||||||
|
} from '@/utils';
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
|
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook';
|
||||||
|
import { useMouseHandle } from '../../hooks/useDrag.hook';
|
||||||
|
import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook';
|
||||||
|
import { EditShapeBox } from '../../components/EditShapeBox';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
groupData: {
|
groupData: {
|
||||||
type: Object as PropType<CreateComponentGroupType>,
|
type: Object as PropType<CreateComponentGroupType>,
|
||||||
required: true
|
required: true,
|
||||||
},
|
},
|
||||||
groupIndex: {
|
groupIndex: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore();
|
||||||
const { handleContextMenu } = useContextMenu()
|
const { handleContextMenu } = useContextMenu();
|
||||||
|
|
||||||
// 点击事件
|
// 点击事件
|
||||||
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
|
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } =
|
||||||
|
useMouseHandle();
|
||||||
|
|
||||||
// 右键
|
// 右键
|
||||||
const optionsHandle = (
|
const optionsHandle = (
|
||||||
targetList: MenuOptionsItemType[],
|
targetList: MenuOptionsItemType[],
|
||||||
allList: MenuOptionsItemType[],
|
allList: MenuOptionsItemType[],
|
||||||
targetInstance: CreateComponentType
|
targetInstance: CreateComponentType,
|
||||||
) => {
|
) => {
|
||||||
const filter = (menulist: MenuEnum[]) => {
|
const filter = (menulist: MenuEnum[]) => {
|
||||||
return allList.filter(i => menulist.includes(i.key as MenuEnum))
|
return allList.filter((i) => menulist.includes(i.key as MenuEnum));
|
||||||
}
|
};
|
||||||
|
|
||||||
// 多选处理
|
// 多选处理
|
||||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||||
return filter([MenuEnum.GROUP, MenuEnum.DELETE])
|
return filter([MenuEnum.GROUP, MenuEnum.DELETE]);
|
||||||
} else {
|
|
||||||
const statusMenuEnums: MenuEnum[] = []
|
|
||||||
if (targetInstance.status.lock) {
|
|
||||||
statusMenuEnums.push(MenuEnum.LOCK)
|
|
||||||
} else {
|
} else {
|
||||||
statusMenuEnums.push(MenuEnum.UNLOCK)
|
const statusMenuEnums: MenuEnum[] = [];
|
||||||
|
if (targetInstance.status.lock) {
|
||||||
|
statusMenuEnums.push(MenuEnum.LOCK);
|
||||||
|
} else {
|
||||||
|
statusMenuEnums.push(MenuEnum.UNLOCK);
|
||||||
|
}
|
||||||
|
if (targetInstance.status.hide) {
|
||||||
|
statusMenuEnums.push(MenuEnum.HIDE);
|
||||||
|
} else {
|
||||||
|
statusMenuEnums.push(MenuEnum.SHOW);
|
||||||
|
}
|
||||||
|
// 单选
|
||||||
|
const singleMenuEnums = [MenuEnum.UN_GROUP];
|
||||||
|
return [
|
||||||
|
...filter(singleMenuEnums),
|
||||||
|
divider(),
|
||||||
|
...targetList.filter((i) => !statusMenuEnums.includes(i.key as MenuEnum)),
|
||||||
|
];
|
||||||
}
|
}
|
||||||
if (targetInstance.status.hide) {
|
};
|
||||||
statusMenuEnums.push(MenuEnum.HIDE)
|
|
||||||
} else {
|
|
||||||
statusMenuEnums.push(MenuEnum.SHOW)
|
|
||||||
}
|
|
||||||
// 单选
|
|
||||||
const singleMenuEnums = [MenuEnum.UN_GROUP]
|
|
||||||
return [
|
|
||||||
...filter(singleMenuEnums),
|
|
||||||
divider(),
|
|
||||||
...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 配置项
|
// 配置项
|
||||||
const themeColor = computed(() => {
|
const themeColor = computed(() => {
|
||||||
const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
|
const colorCustomMergeData = colorCustomMerge(
|
||||||
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
|
chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo,
|
||||||
})
|
);
|
||||||
|
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor];
|
||||||
|
});
|
||||||
|
|
||||||
// 主题色
|
// 主题色
|
||||||
const themeSetting = computed(() => {
|
const themeSetting = computed(() => {
|
||||||
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
|
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting;
|
||||||
return chartThemeSetting
|
return chartThemeSetting;
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -21,149 +21,149 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, PropType } from 'vue'
|
import { computed, PropType } from 'vue';
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
|
||||||
|
|
||||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
import { useDesignStore } from '@/store/modules/designStore/designStore';
|
||||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||||
import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
|
import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook';
|
||||||
import { useMousePointHandle } from '../../hooks/useDrag.hook'
|
import { useMousePointHandle } from '../../hooks/useDrag.hook';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
|
type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
|
||||||
required: true
|
required: true,
|
||||||
},
|
},
|
||||||
hiddenPoint: {
|
hiddenPoint: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false
|
required: false,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
const designStore = useDesignStore()
|
const designStore = useDesignStore();
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore();
|
||||||
|
|
||||||
// 锚点
|
// 锚点
|
||||||
const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
|
const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb'];
|
||||||
|
|
||||||
// 光标朝向
|
// 光标朝向
|
||||||
const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']
|
const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se'];
|
||||||
|
|
||||||
// 颜色
|
// 颜色
|
||||||
const themeColor = computed(() => {
|
const themeColor = computed(() => {
|
||||||
return designStore.getAppTheme
|
return designStore.getAppTheme;
|
||||||
})
|
});
|
||||||
|
|
||||||
// 计算当前选中目标
|
// 计算当前选中目标
|
||||||
const hover = computed(() => {
|
const hover = computed(() => {
|
||||||
const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
|
const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG];
|
||||||
if (isDrag) return false
|
if (isDrag) return false;
|
||||||
|
|
||||||
if (props.item.status.lock) return false
|
if (props.item.status.lock) return false;
|
||||||
return props.item.id === chartEditStore.getTargetChart.hoverId
|
return props.item.id === chartEditStore.getTargetChart.hoverId;
|
||||||
})
|
});
|
||||||
|
|
||||||
// 兼容多值场景
|
// 兼容多值场景
|
||||||
const select = computed(() => {
|
const select = computed(() => {
|
||||||
const id = props.item.id
|
const id = props.item.id;
|
||||||
if (props.item.status.lock) return false
|
if (props.item.status.lock) return false;
|
||||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id);
|
||||||
})
|
});
|
||||||
|
|
||||||
// 锁定
|
// 锁定
|
||||||
const lock = computed(() => {
|
const lock = computed(() => {
|
||||||
return props.item.status.lock
|
return props.item.status.lock;
|
||||||
})
|
});
|
||||||
|
|
||||||
// 隐藏
|
// 隐藏
|
||||||
const hide = computed(() => {
|
const hide = computed(() => {
|
||||||
return props.item.status.hide
|
return props.item.status.hide;
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@include go(shape-box) {
|
@include go(shape-box) {
|
||||||
position: absolute;
|
|
||||||
cursor: move;
|
|
||||||
|
|
||||||
&.lock {
|
|
||||||
cursor: default !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 锚点 */
|
|
||||||
.shape-point {
|
|
||||||
z-index: 1;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 7px;
|
cursor: move;
|
||||||
height: 7px;
|
|
||||||
border: 3px solid v-bind('themeColor');
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #fff;
|
|
||||||
transform: translate(-40%, -30%);
|
|
||||||
&.t {
|
|
||||||
width: 30px;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
&.b {
|
|
||||||
width: 30px;
|
|
||||||
transform: translate(-50%, -30%);
|
|
||||||
}
|
|
||||||
&.l,
|
|
||||||
&.r {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
&.r {
|
|
||||||
transform: translate(-20%, -50%);
|
|
||||||
}
|
|
||||||
&.l {
|
|
||||||
transform: translate(-45%, -50%);
|
|
||||||
}
|
|
||||||
&.rt,
|
|
||||||
&.rb {
|
|
||||||
transform: translate(-30%, -30%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 选中 */
|
|
||||||
.shape-modal {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
.shape-modal-select,
|
&.lock {
|
||||||
.shape-modal-change {
|
cursor: default !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 锚点 */
|
||||||
|
.shape-point {
|
||||||
|
z-index: 1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 7px;
|
||||||
height: 100%;
|
height: 7px;
|
||||||
border-radius: 4px;
|
border: 3px solid v-bind('themeColor');
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #fff;
|
||||||
|
transform: translate(-40%, -30%);
|
||||||
|
&.t {
|
||||||
|
width: 30px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
&.b {
|
||||||
|
width: 30px;
|
||||||
|
transform: translate(-50%, -30%);
|
||||||
|
}
|
||||||
|
&.l,
|
||||||
|
&.r {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
&.r {
|
||||||
|
transform: translate(-20%, -50%);
|
||||||
|
}
|
||||||
|
&.l {
|
||||||
|
transform: translate(-45%, -50%);
|
||||||
|
}
|
||||||
|
&.rt,
|
||||||
|
&.rb {
|
||||||
|
transform: translate(-30%, -30%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
/* 选中 */
|
||||||
|
.shape-modal {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
.shape-modal-select {
|
.shape-modal-select,
|
||||||
opacity: 0.1;
|
.shape-modal-change {
|
||||||
top: 2px;
|
position: absolute;
|
||||||
left: 2px;
|
width: 100%;
|
||||||
&.active {
|
height: 100%;
|
||||||
background-color: v-bind('themeColor');
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.shape-modal-change {
|
.shape-modal-select {
|
||||||
border: 2px solid rgba(0, 0, 0, 0);
|
opacity: 0.1;
|
||||||
&.selectActive,
|
top: 2px;
|
||||||
&.hoverActive {
|
left: 2px;
|
||||||
border-color: v-bind('themeColor');
|
&.active {
|
||||||
border-width: 2px;
|
background-color: v-bind('themeColor');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.hoverActive {
|
.shape-modal-change {
|
||||||
border-style: dotted;
|
border: 2px solid rgba(0, 0, 0, 0);
|
||||||
}
|
&.selectActive,
|
||||||
&.selectActive {
|
&.hoverActive {
|
||||||
border-style: solid;
|
border-color: v-bind('themeColor');
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
&.hoverActive {
|
||||||
|
border-style: dotted;
|
||||||
|
}
|
||||||
|
&.selectActive {
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,49 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 系统设置 model -->
|
<!-- 系统设置 model -->
|
||||||
<go-system-set v-model:modelShow="globalSettingModel"></go-system-set>
|
<go-system-set v-model:modelShow="globalSettingModel"></go-system-set>
|
||||||
|
<!-- 跨页面粘贴 -->
|
||||||
|
<n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
|
||||||
|
<n-card
|
||||||
|
:bordered="false"
|
||||||
|
role="dialog"
|
||||||
|
size="small"
|
||||||
|
aria-modal="true"
|
||||||
|
style="width: 1200px; height: 700px"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<n-space>
|
||||||
|
<n-text>跨页面粘贴</n-text>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #header-extra> </template>
|
||||||
|
<n-layout has-sider sider-placement="right">
|
||||||
|
<n-layout style="height: 580px; padding-right: 20px">
|
||||||
|
<!-- 编辑主体 -->
|
||||||
|
<monaco-editor v-model:modelValue="copyValue" height="480px" language="json" />
|
||||||
|
</n-layout>
|
||||||
|
</n-layout>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
<div class="go-flex-items-center">
|
||||||
|
<n-tag :bordered="false" type="primary">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon :component="DocumentTextIcon" />
|
||||||
|
</template>
|
||||||
|
说明
|
||||||
|
</n-tag>
|
||||||
|
<n-text class="go-ml-2" depth="2">粘贴复制的组件内容，导入画布</n-text>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<n-space>
|
||||||
|
<n-button size="medium" @click="closeModel">取消</n-button>
|
||||||
|
<n-button size="medium" type="primary" @click="saveCopyData">导入画布</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-card>
|
||||||
|
</n-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
@ -87,8 +130,17 @@
|
||||||
import { useSyncUpdate } from './hooks/useSyncUpdate.hook';
|
import { useSyncUpdate } from './hooks/useSyncUpdate.hook';
|
||||||
import { BtnListType, TypeEnum } from './index.d';
|
import { BtnListType, TypeEnum } from './index.d';
|
||||||
import { icon } from '@/plugins';
|
import { icon } from '@/plugins';
|
||||||
|
import { MonacoEditor } from '@/components/Pages/MonacoEditor';
|
||||||
|
|
||||||
const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon, CreateIcon } = icon.ionicons5;
|
const {
|
||||||
|
DownloadIcon,
|
||||||
|
ShareIcon,
|
||||||
|
PawIcon,
|
||||||
|
SettingsSharpIcon,
|
||||||
|
CreateIcon,
|
||||||
|
CopyIcon,
|
||||||
|
DocumentTextIcon,
|
||||||
|
} = icon.ionicons5;
|
||||||
const settingStore = useSettingStore();
|
const settingStore = useSettingStore();
|
||||||
const chartEditStore = useChartEditStore();
|
const chartEditStore = useChartEditStore();
|
||||||
const routerParamsInfo = useRoute();
|
const routerParamsInfo = useRoute();
|
||||||
|
|
@ -179,7 +231,21 @@
|
||||||
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...storageInfo, id }]);
|
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...storageInfo, id }]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const copyValue = ref('');
|
||||||
|
const showModal = ref(false);
|
||||||
|
const copyPageHandle = () => {
|
||||||
|
showModal.value = true;
|
||||||
|
};
|
||||||
|
// 关闭弹窗
|
||||||
|
const closeModel = () => {
|
||||||
|
copyValue.value = '';
|
||||||
|
showModal.value = false;
|
||||||
|
};
|
||||||
|
// 导入画布
|
||||||
|
const saveCopyData = () => {
|
||||||
|
chartEditStore.setCopyData(copyValue.value);
|
||||||
|
closeModel();
|
||||||
|
};
|
||||||
// 配置列表
|
// 配置列表
|
||||||
const btnList: BtnListType[] = [
|
const btnList: BtnListType[] = [
|
||||||
{
|
{
|
||||||
|
|
@ -211,6 +277,13 @@
|
||||||
globalSettingModel.value = true;
|
globalSettingModel.value = true;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: 'copy',
|
||||||
|
type: TypeEnum.BUTTON,
|
||||||
|
name: '跨页面粘贴',
|
||||||
|
icon: CopyIcon,
|
||||||
|
handle: copyPageHandle,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -234,6 +307,7 @@
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
@include fetch-border-color('hover-border-color-shallow');
|
@include fetch-border-color('hover-border-color-shallow');
|
||||||
|
height: 240px !important;
|
||||||
&.aside {
|
&.aside {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,11 @@
|
||||||
...getSizeStyle(groupData.attr),
|
...getSizeStyle(groupData.attr),
|
||||||
...getFilterStyle(groupData.styles),
|
...getFilterStyle(groupData.styles),
|
||||||
}"
|
}"
|
||||||
|
@click="clickBtn"
|
||||||
|
@dblclick="dblclickBtn"
|
||||||
|
@contextmenu="rightclickBtn"
|
||||||
|
@mouseenter="mouseenterBtn"
|
||||||
|
@mouseleave="mouseleaveBtn"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="chart-item"
|
class="chart-item"
|
||||||
|
|
@ -36,7 +41,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType } from 'vue';
|
import { PropType, ref } from 'vue';
|
||||||
import { CreateComponentGroupType } from '@/packages/index.d';
|
import { CreateComponentGroupType } from '@/packages/index.d';
|
||||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils';
|
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils';
|
||||||
import {
|
import {
|
||||||
|
|
@ -46,7 +51,10 @@
|
||||||
getPreviewConfigStyle,
|
getPreviewConfigStyle,
|
||||||
} from '../../utils';
|
} from '../../utils';
|
||||||
import { useLifeHandler } from '@/hooks';
|
import { useLifeHandler } from '@/hooks';
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
|
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
|
||||||
|
|
||||||
|
const chartEditStore = useChartEditStore();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
groupData: {
|
groupData: {
|
||||||
type: Object as PropType<CreateComponentGroupType>,
|
type: Object as PropType<CreateComponentGroupType>,
|
||||||
|
|
@ -65,6 +73,58 @@
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
console.log(props.groupData);
|
||||||
|
// 单击交互
|
||||||
|
const clickElementItem = ref([]);
|
||||||
|
// 双击交互
|
||||||
|
const dbclickElementItem = ref([]);
|
||||||
|
// 右击交互
|
||||||
|
const rightclickElementItem = ref([]);
|
||||||
|
// 鼠标移入交互
|
||||||
|
const mouseenterElementItem = ref([]);
|
||||||
|
// 鼠标移出交互
|
||||||
|
const mouseleaveElementItem = ref([]);
|
||||||
|
|
||||||
|
const list = props.groupData.events.interactConfigEvents;
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
if (list[i].type == 'click') {
|
||||||
|
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||||
|
clickElementItem.value.push(list[i].movementList[j]);
|
||||||
|
}
|
||||||
|
} else if (list[i].type == 'dblclick') {
|
||||||
|
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||||
|
dbclickElementItem.value.push(list[i].movementList[j]);
|
||||||
|
}
|
||||||
|
} else if (list[i].type == 'rightclick') {
|
||||||
|
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||||
|
rightclickElementItem.value.push(list[i].movementList[j]);
|
||||||
|
}
|
||||||
|
} else if (list[i].type == 'mousein') {
|
||||||
|
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||||
|
mouseenterElementItem.value.push(list[i].movementList[j]);
|
||||||
|
}
|
||||||
|
} else if (list[i].type == 'mouseout') {
|
||||||
|
for (let j = 0; j < list[i].movementList.length; j++) {
|
||||||
|
mouseleaveElementItem.value.push(list[i].movementList[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const clickBtn = () => {
|
||||||
|
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
|
||||||
|
};
|
||||||
|
const dblclickBtn = () => {
|
||||||
|
eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
|
||||||
|
};
|
||||||
|
const rightclickBtn = (event) => {
|
||||||
|
event.preventDefault(); // 阻止默认的右键菜单
|
||||||
|
eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
|
||||||
|
};
|
||||||
|
const mouseenterBtn = () => {
|
||||||
|
eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
|
||||||
|
};
|
||||||
|
const mouseleaveBtn = () => {
|
||||||
|
eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue