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": {
|
||||
"@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",
|
||||
"@logicflow/core": "^1.2.18",
|
||||
"@logicflow/extension": "^1.2.19",
|
||||
"@microsoft/signalr": "^8.0.0",
|
||||
"@shikijs/monaco": "^1.1.6",
|
||||
"@turf/turf": "^7.1.0",
|
||||
"@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",
|
||||
"@vueuse/core": "^10.7.1",
|
||||
"@zxcvbn-ts/core": "^3.0.4",
|
||||
"ant-design-vue": "^4.0.8",
|
||||
"animate.css": "^4.1.1",
|
||||
"ant-design-vue": "^4.0.8",
|
||||
"axios": "^1.6.4",
|
||||
"color": "^4.2.3",
|
||||
"codemirror": "^5.65.16",
|
||||
"color": "^4.2.3",
|
||||
"cropperjs": "^1.6.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"driver.js": "^1.3.1",
|
||||
"dom-helpers": "^5.2.1",
|
||||
"driver.js": "^1.3.1",
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"echarts-stat": "^1.2.0",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "^2.6.0",
|
||||
"exceljs": "^4.4.0",
|
||||
"fflate": "^0.8.2",
|
||||
"gsap": "^3.11.3",
|
||||
"js-md5": "^0.8.3",
|
||||
"hash-sum": "^2.0.0",
|
||||
"highlight.js": "^11.5.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"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",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mars3d": "~3.8.8",
|
||||
"mars3d-cesium": "~1.124.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",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-to-regexp": "^6.2.1",
|
||||
"pinia": "2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
|
|
@ -113,52 +134,32 @@
|
|||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"three": "^0.145.0",
|
||||
"screenfull": "^6.0.1",
|
||||
"shiki": "^1.1.6",
|
||||
"showdown": "^2.1.0",
|
||||
"shpjs": "^6.1.0",
|
||||
"sortablejs": "^1.15.1",
|
||||
"sucrase": "^3.35.0",
|
||||
"three": "^0.145.0",
|
||||
"tinymce": "^5.10.9",
|
||||
"unocss": "0.58.3",
|
||||
"uuid": "^9.0.1",
|
||||
"vditor": "^3.9.8",
|
||||
"vue": "3.3.4",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-codemirror": "^6.1.1",
|
||||
"vue-color-kit": "^1.0.6",
|
||||
"vue-i18n": "^9.8.0",
|
||||
"vue-json-pretty": "^2.3.0",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue3-lazyload": "^0.2.5-beta",
|
||||
"vue-types": "^5.1.1",
|
||||
"vue3-lazyload": "^0.2.5-beta",
|
||||
"vue3-sfc-loader": "^0.9.5",
|
||||
"vue3-sketch-ruler": "^1.3.3",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuex": "^4.1.0",
|
||||
"xe-utils": "^3.5.14",
|
||||
"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"
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
|
|
@ -177,35 +178,35 @@
|
|||
"@types/qs": "^6.9.11",
|
||||
"@types/showdown": "^2.0.6",
|
||||
"@types/sortablejs": "^1.15.7",
|
||||
"@vicons/carbon": "^0.12.0",
|
||||
"@vicons/ionicons5": "~0.11.0",
|
||||
"@vben/eslint-config": "workspace:*",
|
||||
"@vben/stylelint-config": "workspace:*",
|
||||
"@vben/ts-config": "workspace:*",
|
||||
"@vben/types": "workspace:*",
|
||||
"@vben/vite-config": "workspace:*",
|
||||
"@vicons/carbon": "^0.12.0",
|
||||
"@vicons/ionicons5": "~0.11.0",
|
||||
"@vue/compiler-sfc": "^3.4.5",
|
||||
"@vue/test-utils": "^2.4.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"cz-git": "^1.8.0",
|
||||
"czg": "^1.8.0",
|
||||
"husky": "^8.0.3",
|
||||
"lodash": "~4.17.21",
|
||||
"lint-staged": "15.2.0",
|
||||
"lodash": "~4.17.21",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-packagejson": "^2.4.8",
|
||||
"rimraf": "^5.0.5",
|
||||
"turbo": "^1.11.3",
|
||||
"sass": "^1.49.11",
|
||||
"sass-loader": "^12.6.0",
|
||||
"turbo": "^1.11.3",
|
||||
"typescript": "^5.3.3",
|
||||
"unbuild": "^2.0.0",
|
||||
"vite": "^4.2.0",
|
||||
"vite-plugin-mars3d": "^3.1.3",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-monaco-editor": "^1.1.0",
|
||||
"vue-echarts": "^6.0.2",
|
||||
"vue-tsc": "^1.8.27",
|
||||
"vite-plugin-monaco-editor": "^1.1.0"
|
||||
"vue-tsc": "^1.8.27"
|
||||
},
|
||||
"packageManager": "pnpm@8.10.0",
|
||||
"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 chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
|
||||
return chartThemeSetting
|
||||
|
|
|
|||
|
|
@ -2,9 +2,182 @@
|
|||
export function mapFun() {
|
||||
const ceshiClick = () => {
|
||||
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 {
|
||||
ceshiClick,
|
||||
handlerFlyToPoint,
|
||||
handlerAddEntity,
|
||||
handlerMeasureSurfaceLength,
|
||||
handlerMeasureLength,
|
||||
handlerMeasureSurfaceArea,
|
||||
handlerMeasureArea,
|
||||
handlerMeasurePoint,
|
||||
handlerMeasureHeight,
|
||||
handlerClearMeasure,
|
||||
handlerDrawPolygon
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -16,4 +189,104 @@ export const funSelectOptions = [
|
|||
// 事件名(用于触发)
|
||||
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();
|
||||
|
||||
// 交互事件
|
||||
export const eventHandlerHook = (comonentList: any, elementList: any) => {
|
||||
export const eventHandlerHook = (comonentList: any, elementList: any, params:any = null) => {
|
||||
let obj: any = {};
|
||||
let index = 0;
|
||||
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++) {
|
||||
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 = {
|
||||
dataset: dataJson,
|
||||
boxStyle:{
|
||||
title:"",
|
||||
borderColor:"",
|
||||
backgroundColor:"",
|
||||
fontColor:"",
|
||||
},
|
||||
mapOptions:{
|
||||
"scene": {
|
||||
"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 {
|
||||
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 option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,85 +1,21 @@
|
|||
<template>
|
||||
<collapse-item name="地图场景" :expanded="true">
|
||||
<collapse-item name="组件样式" :expanded="true">
|
||||
|
||||
|
||||
<setting-item-box name="经度" :alone="true">
|
||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.lng" :show-button="false" size="small">
|
||||
<template #suffix>°</template>
|
||||
</n-input-number>
|
||||
<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-input-number v-model:value="optionData.mapOptions.scene.center.lat" :show-button="false" size="small">
|
||||
<template #suffix>°</template>
|
||||
</n-input-number>
|
||||
<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-input-number v-model:value="optionData.mapOptions.scene.center.alt" :min="0" size="small"></n-input-number>
|
||||
<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-input-number v-model:value="optionData.mapOptions.scene.center.heading" :min="0" size="small"></n-input-number>
|
||||
</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 name="背景颜色" :alone="true">
|
||||
<n-color-picker size="small" v-model:value="optionData.boxStyle.backgroundColor"></n-color-picker>
|
||||
</setting-item-box>
|
||||
|
||||
</collapse-item>
|
||||
|
|
@ -138,13 +74,9 @@
|
|||
</setting-item-box>
|
||||
|
||||
</collapse-item>
|
||||
<!--
|
||||
<collapse-item name="底图图层" :expanded="true">
|
||||
|
||||
</collapse-item> -->
|
||||
|
||||
<collapse-item name="右键菜单" :expanded="true">
|
||||
|
||||
|
||||
|
||||
</collapse-item>
|
||||
|
|
@ -156,14 +88,15 @@ import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, Fe
|
|||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
console.log("props.optionData",props.optionData);
|
||||
console.log("optionDatasss",props.optionData);
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<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">
|
||||
费县林业防火
|
||||
{{ props.chartConfig.option.boxStyle.title }}
|
||||
</div>
|
||||
<div class="layer-item-container">
|
||||
<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 handlerLayers = ref([]);
|
||||
|
|
@ -237,7 +239,7 @@ const handlerChangeAllLayer = (group) =>{
|
|||
if(group.show == false){
|
||||
group.children?.forEach((item,index)=>{
|
||||
item.show = true;
|
||||
|
||||
|
||||
})
|
||||
}else{
|
||||
group.children?.forEach((item,index)=>{
|
||||
|
|
@ -462,20 +464,21 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
|||
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% - 40px);
|
||||
height: calc( 100% - 50px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.layer-container .title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#CBE6CD;
|
||||
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,
|
||||
},
|
||||
});
|
||||
console.log(props.chartConfig.option);
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
|
||||
// 单击交互
|
||||
|
|
@ -67,24 +66,19 @@
|
|||
}
|
||||
}
|
||||
const clickBtn = () => {
|
||||
console.log('单击');
|
||||
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
|
||||
};
|
||||
const dblclickBtn = () => {
|
||||
console.log('双击');
|
||||
eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
|
||||
};
|
||||
const rightclickBtn = (event) => {
|
||||
console.log('右击');
|
||||
event.preventDefault(); // 阻止默认的右键菜单
|
||||
eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
|
||||
};
|
||||
const mouseenterBtn = () => {
|
||||
console.log('鼠标移入');
|
||||
eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
|
||||
};
|
||||
const mouseleaveBtn = () => {
|
||||
console.log('鼠标移出');
|
||||
eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<svg
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
:viewBox="`0 0 ${props.w} ${props.h}`"
|
||||
viewBox="0 0 400 40"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import { chartInitConfig } from '@/settings/designSetting'
|
|||
import { LowerLeftConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
imageStyle: {
|
||||
dataStyle: {
|
||||
backgroud: '#FFFFFF00',
|
||||
imageWidth: 26,
|
||||
imageHeight: 28,
|
||||
bottom: 0,
|
||||
|
|
|
|||
|
|
@ -1,25 +1,32 @@
|
|||
<template>
|
||||
<CollapseItem name="图标设置" :expanded="true">
|
||||
<SettingItemBox name="属性设置">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.backgroud"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="图标宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.imageStyle.imageWidth"
|
||||
v-model:value="optionData.dataStyle.imageWidth"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="图标宽度"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="图标高度">
|
||||
<!-- <SettingItem name="图标高度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.imageStyle.imageHeight"
|
||||
v-model:value="optionData.dataStyle.imageHeight"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="图标高度"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItem> -->
|
||||
<SettingItem name="图标距离右侧的距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.imageStyle.right"
|
||||
v-model:value="optionData.dataStyle.right"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="高度"
|
||||
|
|
@ -27,7 +34,7 @@
|
|||
</SettingItem>
|
||||
<SettingItem name="图标距离底部的距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.imageStyle.bottom"
|
||||
v-model:value="optionData.dataStyle.bottom"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="宽度"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
<template>
|
||||
<div class="lowerLeft">
|
||||
<div class="image">
|
||||
<n-image
|
||||
:width="option.imageStyle.imageWidth"
|
||||
:height="option.imageStyle.imageHeight"
|
||||
src="src/assets/images/chart/zhigan/component/lowerLeft.svg"
|
||||
/>
|
||||
<Icon :dataStyle="option.dataStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -16,6 +12,7 @@
|
|||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import Icon from './svg/icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
|
|
@ -27,26 +24,20 @@
|
|||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
|
||||
const option = reactive({
|
||||
imageStyle: props.chartConfig.option.imageStyle,
|
||||
dataStyle: props.chartConfig.option.dataStyle,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lowerLeft {
|
||||
background: v-bind('`${option.dataStyle.backgroud}`');
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// height: 32px;
|
||||
}
|
||||
.image {
|
||||
position: absolute;
|
||||
right: v-bind('`${option.dataStyle.right}px`');
|
||||
bottom: v-bind('`${option.dataStyle.bottom}px`');
|
||||
bottom: 0px;
|
||||
right: v-bind('`${option.imageStyle.right}px`');
|
||||
bottom: v-bind('`${option.imageStyle.bottom}px`');
|
||||
}
|
||||
</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 = {
|
||||
dataset: source,
|
||||
dataStyle: {
|
||||
width: 400,
|
||||
height: 300,
|
||||
listWidth: 363,
|
||||
listHeight: 28,
|
||||
sortOrder: true,
|
||||
listStyle: {
|
||||
titleColor: '#FFFFFF',
|
||||
titleFontSize: 16,
|
||||
timeColor: '#16E795',
|
||||
timeFontSize: 16,
|
||||
numColor: '#73FF73',
|
||||
numFontSize: 16,
|
||||
marginbottom: 5,
|
||||
}
|
||||
titleColor: '#FFFFFF',
|
||||
titleFontSize: 16,
|
||||
timeColor: '#16E795',
|
||||
timeFontSize: 16,
|
||||
numColor: '#73FF73',
|
||||
numFontSize: 16,
|
||||
marginbottom: 5,
|
||||
marginleft: 20,
|
||||
marginright: 20,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listStyle.titleColor"
|
||||
v-model:value="optionData.dataStyle.titleColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listStyle.titleFontSize"
|
||||
v-model:value="optionData.dataStyle.titleFontSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="标题字体大小"
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listStyle.timeColor"
|
||||
v-model:value="optionData.dataStyle.timeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="时间字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listStyle.timeFontSize"
|
||||
v-model:value="optionData.dataStyle.timeFontSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="时间字体大小"
|
||||
|
|
@ -35,12 +35,12 @@
|
|||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listStyle.numColor"
|
||||
v-model:value="optionData.dataStyle.numColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listStyle.numFontSize"
|
||||
v-model:value="optionData.dataStyle.numFontSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="类型字体大小"
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<SettingItemBox>
|
||||
<SettingItem name="间隔距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listStyle.marginbottom"
|
||||
v-model:value="optionData.dataStyle.marginbottom"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="间隔距离"
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
@mouseleave="item.mouseFlag = true"
|
||||
>
|
||||
<Xinxi
|
||||
:style="{ marginBottom: `${option.dataStyle.listStyle.marginbottom}px` }"
|
||||
:style="{ marginBottom: `${option.dataStyle.marginbottom}px` }"
|
||||
:item="item"
|
||||
:listStyle="option.dataStyle.listStyle"
|
||||
:dataStyle="option.dataStyle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -75,6 +75,29 @@
|
|||
},
|
||||
{
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div>
|
||||
<svg
|
||||
v-if="props.item.mouseFlag"
|
||||
width="363px"
|
||||
height="28px"
|
||||
:width="props.dataStyle.listWidth"
|
||||
:height="props.dataStyle.listHeight"
|
||||
viewBox="0 0 363 28"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -72,24 +72,24 @@
|
|||
v-else
|
||||
x="5%"
|
||||
y="20"
|
||||
:fill="props.listStyle.titleColor"
|
||||
:font-size="props.listStyle.titleFontSize"
|
||||
:fill="props.dataStyle.titleColor"
|
||||
:font-size="props.dataStyle.titleFontSize"
|
||||
>
|
||||
{{ props.item.key }}
|
||||
</text>
|
||||
<text
|
||||
x="15%"
|
||||
y="20"
|
||||
:fill="props.listStyle.titleColor"
|
||||
:font-size="props.listStyle.titleFontSize"
|
||||
:fill="props.dataStyle.titleColor"
|
||||
:font-size="props.dataStyle.titleFontSize"
|
||||
>
|
||||
{{ props.item.title }}
|
||||
</text>
|
||||
<text
|
||||
x="37%"
|
||||
y="20"
|
||||
:fill="props.listStyle.timeColor"
|
||||
:font-size="props.listStyle.timeFontSize"
|
||||
:fill="props.dataStyle.timeColor"
|
||||
:font-size="props.dataStyle.timeFontSize"
|
||||
>
|
||||
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
|
||||
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
|
||||
|
|
@ -98,16 +98,16 @@
|
|||
<text
|
||||
x="85%"
|
||||
y="20"
|
||||
:fill="props.listStyle.numColor"
|
||||
:font-size="props.listStyle.numFontSize"
|
||||
:fill="props.dataStyle.numColor"
|
||||
:font-size="props.dataStyle.numFontSize"
|
||||
>
|
||||
{{ props.item.num }}
|
||||
</text>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="!props.item.mouseFlag"
|
||||
width="363px"
|
||||
height="28px"
|
||||
:width="props.dataStyle.listWidth"
|
||||
:height="props.dataStyle.listHeight"
|
||||
viewBox="0 0 363 28"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -182,24 +182,24 @@
|
|||
v-else
|
||||
x="5%"
|
||||
y="20"
|
||||
:fill="props.listStyle.titleColor"
|
||||
:font-size="props.listStyle.titleFontSize"
|
||||
:fill="props.dataStyle.titleColor"
|
||||
:font-size="props.dataStyle.titleFontSize"
|
||||
>
|
||||
{{ props.item.key }}
|
||||
</text>
|
||||
<text
|
||||
x="15%"
|
||||
y="20"
|
||||
:fill="props.listStyle.titleColor"
|
||||
:font-size="props.listStyle.titleFontSize"
|
||||
:fill="props.dataStyle.titleColor"
|
||||
:font-size="props.dataStyle.titleFontSize"
|
||||
>
|
||||
{{ props.item.title }}
|
||||
</text>
|
||||
<text
|
||||
x="37%"
|
||||
y="20"
|
||||
:fill="props.listStyle.timeColor"
|
||||
:font-size="props.listStyle.timeFontSize"
|
||||
:fill="props.dataStyle.timeColor"
|
||||
:font-size="props.dataStyle.timeFontSize"
|
||||
>
|
||||
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
|
||||
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
|
||||
|
|
@ -208,8 +208,8 @@
|
|||
<text
|
||||
x="85%"
|
||||
y="20"
|
||||
:fill="props.listStyle.numColor"
|
||||
:font-size="props.listStyle.numFontSize"
|
||||
:fill="props.dataStyle.numColor"
|
||||
:font-size="props.dataStyle.numFontSize"
|
||||
>
|
||||
{{ props.item.num }}
|
||||
</text>
|
||||
|
|
@ -219,5 +219,5 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
const props = defineProps(['item', 'listStyle']);
|
||||
const props = defineProps(['item', 'dataStyle']);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export const option = {
|
|||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
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 option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="ModalButton">
|
||||
<n-button text>
|
||||
<Button :buttonName="option.buttonName" :buttonStyle="option.buttonStyle" />
|
||||
<Button :w="w" :h="h" :buttonName="option.buttonName" :buttonStyle="option.buttonStyle" />
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<!-- 黄色 -->
|
||||
<svg
|
||||
v-if="props.buttonStyle.color == 'yellow'"
|
||||
width="121px"
|
||||
height="44px"
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
viewBox="0 0 121 44"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -121,9 +121,9 @@
|
|||
<!-- 绿色 -->
|
||||
<svg
|
||||
v-if="props.buttonStyle.color == 'green'"
|
||||
width="141px"
|
||||
height="44px"
|
||||
viewBox="0 0 141 44"
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
viewBox="0 0 121 44"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
@ -240,8 +240,8 @@
|
|||
<!-- 红色 -->
|
||||
<svg
|
||||
v-if="props.buttonStyle.color == 'red'"
|
||||
width="121px"
|
||||
height="44px"
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
viewBox="0 0 121 44"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -359,5 +359,5 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['buttonName', 'buttonStyle']);
|
||||
const props = defineProps(['buttonName', 'buttonStyle', 'w', 'h']);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ import { chartInitConfig } from '@/settings/designSetting'
|
|||
import { ModalFrameCloseConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
dataStyle:{
|
||||
color: '#005516',
|
||||
fontColor: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
import { PropType, watch, ref } from 'vue';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="ModalFrameClose">
|
||||
<n-button text>
|
||||
<Button :w="w" :h="h" />
|
||||
<Button :w="w" :h="h" :dataStyle="option.dataStyle" />
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -23,7 +23,9 @@
|
|||
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
|
||||
const option = reactive({});
|
||||
const option = reactive({
|
||||
dataStyle: props.chartConfig.option.dataStyle,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<svg
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
:viewBox="`0 0 ${props.w} ${props.h}`"
|
||||
viewBox="0 0 52 30"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<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"
|
||||
id="形状"
|
||||
fill="#005516"
|
||||
:fill="props.dataStyle.color"
|
||||
></path>
|
||||
<g id="路径">
|
||||
<use
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
filter="url(#filter-2)"
|
||||
xlink:href="#path-1"
|
||||
></use>
|
||||
<use fill="#FFFFFF" xlink:href="#path-1"></use>
|
||||
<use :fill="props.dataStyle.fontColor" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
|
@ -67,5 +67,5 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['w', 'h']);
|
||||
const props = defineProps(['w', 'h', 'dataStyle']);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const option = {
|
|||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
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 option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<svg
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
:viewBox="`0 0 ${props.w} ${props.h}`"
|
||||
viewBox="0 0 320 31"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
|
|||
|
|
@ -4,11 +4,6 @@
|
|||
<div v-for="item in option.dataset" :key="item.key">
|
||||
<div class="item">
|
||||
<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" />
|
||||
<span class="dot">{{ item.title }}</span>
|
||||
</div>
|
||||
|
|
@ -42,6 +37,27 @@
|
|||
titleStyle: props.chartConfig.option.titleStyle,
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -14,17 +14,17 @@ export const option = {
|
|||
marginbottom: 20,
|
||||
marginleft: 20,
|
||||
marginright: 20,
|
||||
listStyle: {
|
||||
titleColor: '#ffffff',
|
||||
titleFontSize: 20,
|
||||
typeColor: '#FA521D',
|
||||
typeFontSize: 16,
|
||||
positionColor: '#ffffff',
|
||||
positionFontSize: 16,
|
||||
timeColor: '#ffffff',
|
||||
timeFontSize: 16,
|
||||
marginbottom: 5,
|
||||
}
|
||||
listWidth: 360,
|
||||
listHeight: 110,
|
||||
titleColor: '#ffffff',
|
||||
titleFontSize: 20,
|
||||
typeColor: '#FA521D',
|
||||
typeFontSize: 16,
|
||||
positionColor: '#ffffff',
|
||||
positionFontSize: 16,
|
||||
timeColor: '#ffffff',
|
||||
timeFontSize: 16,
|
||||
listMarginbottom: 0,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,12 +39,12 @@
|
|||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listStyle.titleColor"
|
||||
v-model:value="optionData.dataStyle.titleColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listStyle.titleFontSize"
|
||||
v-model:value="optionData.dataStyle.titleFontSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="标题字体大小"
|
||||
|
|
@ -54,12 +54,12 @@
|
|||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listStyle.typeColor"
|
||||
v-model:value="optionData.dataStyle.typeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listStyle.typeFontSize"
|
||||
v-model:value="optionData.dataStyle.typeFontSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="类型字体大小"
|
||||
|
|
@ -69,12 +69,12 @@
|
|||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listStyle.positionColor"
|
||||
v-model:value="optionData.dataStyle.positionColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="位置字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listStyle.positionFontSize"
|
||||
v-model:value="optionData.dataStyle.positionFontSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="位置字体大小"
|
||||
|
|
@ -84,12 +84,12 @@
|
|||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listStyle.timeColor"
|
||||
v-model:value="optionData.dataStyle.timeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="时间字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listStyle.timeFontSize"
|
||||
v-model:value="optionData.dataStyle.timeFontSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="时间字体大小"
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
</SettingItem>
|
||||
<SettingItem name="间隔距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.listStyle.marginbottom"
|
||||
v-model:value="optionData.dataStyle.listMarginbottom"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="间隔距离"
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
<div class="list">
|
||||
<div v-for="item in option.dataset" :key="item.key">
|
||||
<Xinxi
|
||||
:style="{ marginBottom: `${option.dataStyle.listStyle.marginbottom}px` }"
|
||||
:style="{ marginBottom: `${option.dataStyle.listMarginbottom}px` }"
|
||||
:item="item"
|
||||
:listStyle="option.dataStyle.listStyle"
|
||||
:dataStyle="option.dataStyle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,6 +33,28 @@
|
|||
dataset: props.chartConfig.option.dataset,
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -58,7 +80,7 @@
|
|||
margin-right: v-bind('`${option.dataStyle.marginright}px`');
|
||||
}
|
||||
|
||||
.xinxi {
|
||||
margin-bottom: v-bind('`${option.dataStyle.listStyle.marginbottom}px`');
|
||||
}
|
||||
// .xinxi {
|
||||
// margin-bottom: v-bind('`${option.dataStyle.listMarginbottom}px`');
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
width="356px"
|
||||
height="105px"
|
||||
:width="props.dataStyle.listWidth"
|
||||
:height="props.dataStyle.listHeight"
|
||||
viewBox="0 0 356 105"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -202,32 +202,32 @@
|
|||
<text
|
||||
x="20"
|
||||
y="30"
|
||||
:fill="props.listStyle.titleColor"
|
||||
:font-size="props.listStyle.titleFontSize"
|
||||
:fill="props.dataStyle.titleColor"
|
||||
:font-size="props.dataStyle.titleFontSize"
|
||||
>
|
||||
{{ props.item.title }}
|
||||
</text>
|
||||
<text
|
||||
x="270"
|
||||
y="30"
|
||||
:fill="props.listStyle.typeColor"
|
||||
:font-size="props.listStyle.typeFontSize"
|
||||
:fill="props.dataStyle.typeColor"
|
||||
:font-size="props.dataStyle.typeFontSize"
|
||||
>
|
||||
{{ props.item.type }}
|
||||
</text>
|
||||
<text
|
||||
x="40"
|
||||
y="60"
|
||||
:fill="props.listStyle.positionColor"
|
||||
:font-size="props.listStyle.positionFontSize"
|
||||
:fill="props.dataStyle.positionColor"
|
||||
:font-size="props.dataStyle.positionFontSize"
|
||||
>
|
||||
{{ props.item.position }}
|
||||
</text>
|
||||
<text
|
||||
x="40"
|
||||
y="85"
|
||||
:fill="props.listStyle.timeColor"
|
||||
:font-size="props.listStyle.timeFontSize"
|
||||
:fill="props.dataStyle.timeColor"
|
||||
:font-size="props.dataStyle.timeFontSize"
|
||||
>
|
||||
{{ props.item.time }}
|
||||
</text>
|
||||
|
|
@ -236,5 +236,5 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['item', 'listStyle']);
|
||||
const props = defineProps(['item', 'dataStyle']);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -29,15 +29,15 @@ export const option = {
|
|||
bottomFontColor3: '#FFFFFF',
|
||||
bottomFontSize3: 12,
|
||||
lineColor: '#A4F9AB',
|
||||
bottomMarginTop: 0,
|
||||
bottomMarginTop: 16,
|
||||
bottomWidth: 80,
|
||||
bottomHeight: 120,
|
||||
bottomHeight: 80 * 97 / 71,
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
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 option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,14 @@
|
|||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="组件宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.topWidth"
|
||||
min="0"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="组件间隔">
|
||||
<n-input-number v-model:value="optionData.dataStyle.gap" min="0" type="text" size="small" />
|
||||
</SettingItem>
|
||||
|
|
@ -62,7 +70,7 @@
|
|||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="组件宽度">
|
||||
<!-- <SettingItem name="组件宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.topWidth"
|
||||
min="0"
|
||||
|
|
@ -77,7 +85,7 @@
|
|||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItem> -->
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="下方组件设置">
|
||||
|
|
@ -130,7 +138,7 @@
|
|||
v-model:value="optionData.dataStyle.lineColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="距离上方组件的距离">
|
||||
<SettingItem name="距离上方组件距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.bottomMarginTop"
|
||||
min="0"
|
||||
|
|
@ -139,7 +147,7 @@
|
|||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem name="组件宽度">
|
||||
<!-- <SettingItem name="组件宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.bottomWidth"
|
||||
min="0"
|
||||
|
|
@ -154,7 +162,7 @@
|
|||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItem> -->
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,19 @@
|
|||
dataset: props.chartConfig.option.dataset,
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<svg
|
||||
:width="props.dataStyle.bottomWidth"
|
||||
:height="props.dataStyle.bottomHeight"
|
||||
:viewBox="`0 0 ${props.dataStyle.bottomWidth} ${props.dataStyle.bottomHeight}`"
|
||||
viewBox="0 0 71 97"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<svg
|
||||
:width="props.dataStyle.topWidth"
|
||||
:height="props.dataStyle.topHeight"
|
||||
:viewBox="`0 0 ${props.dataStyle.topWidth} ${props.dataStyle.topHeight}`"
|
||||
viewBox="0 0 71 71"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export const option = {
|
|||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
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 option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -31,4 +34,10 @@
|
|||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
.Tupian {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@
|
|||
<svg
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
:viewBox="`0 0 ${props.w} ${props.h}`"
|
||||
viewBox="0 0 400 273"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<image x="0" y="0" :width="props.w" :height="props.h" :href="props.dataset.url" />
|
||||
<defs>
|
||||
<linearGradient
|
||||
x1="44.8535648%"
|
||||
|
|
@ -91,5 +90,5 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['w', 'h', 'dataset']);
|
||||
const props = defineProps(['w', 'h']);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
placeholder="标题字体大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题宽度">
|
||||
<!-- <SettingItem name="标题宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.titleWidth"
|
||||
min="0"
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItem> -->
|
||||
|
||||
<SettingItem name="与标题的间隔距离">
|
||||
<n-input-number
|
||||
|
|
|
|||
|
|
@ -45,6 +45,18 @@
|
|||
dataset: props.chartConfig.option.dataset,
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<svg
|
||||
:height="props.dataStyle.titleHeight"
|
||||
:width="props.dataStyle.titleWidth"
|
||||
:viewBox="`0 0 ${props.dataStyle.titleWidth} ${props.dataStyle.titleHeight}`"
|
||||
viewBox="0 0 181 30"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@ import {
|
|||
RequestGlobalConfigType,
|
||||
EditCanvasConfigType,
|
||||
} from './chartEditStore.d';
|
||||
import useClipboard from 'vue-clipboard3';
|
||||
|
||||
const { toClipboard } = useClipboard();
|
||||
|
||||
const chartHistoryStore = useChartHistoryStore();
|
||||
const settingStore = useSettingStore();
|
||||
|
|
@ -513,7 +516,7 @@ export const useChartEditStore = defineStore({
|
|||
this.wrap(true, isHistory);
|
||||
},
|
||||
// * 复制
|
||||
setCopy(isCut = false) {
|
||||
async setCopy(isCut = false) {
|
||||
try {
|
||||
// 暂不支持多选
|
||||
if (this.getTargetChart.selectId.length > 1) return;
|
||||
|
|
@ -528,7 +531,7 @@ export const useChartEditStore = defineStore({
|
|||
type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY,
|
||||
};
|
||||
this.setRecordChart(copyData);
|
||||
localStorage.setItem('copyData', JSON.stringify(copyData));
|
||||
await toClipboard(JSON.stringify(copyData));
|
||||
window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！');
|
||||
loadingFinish();
|
||||
}
|
||||
|
|
@ -542,12 +545,9 @@ export const useChartEditStore = defineStore({
|
|||
},
|
||||
// * 粘贴
|
||||
setParse() {
|
||||
console.log('setParse');
|
||||
try {
|
||||
loadingStart();
|
||||
const recordCharts = this.getRecordChart
|
||||
? this.getRecordChart
|
||||
: JSON.parse(localStorage.getItem('copyData'));
|
||||
const recordCharts = this.getRecordChart;
|
||||
|
||||
if (recordCharts === undefined) {
|
||||
loadingFinish();
|
||||
|
|
@ -587,6 +587,52 @@ export const useChartEditStore = defineStore({
|
|||
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) {
|
||||
// 处理画布
|
||||
|
|
|
|||
|
|
@ -93,9 +93,76 @@
|
|||
const { chartEditStore } = useTargetData();
|
||||
const funSelectOptions = ref([
|
||||
{
|
||||
// 事件名称（用于选择显示）
|
||||
label: 'ceshi点击',
|
||||
// 事件名(用于触发)
|
||||
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({
|
||||
eventData: {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,13 @@
|
|||
</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
|
||||
v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
|
||||
:key="item.key"
|
||||
|
|
@ -62,111 +68,119 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRefs, watch, computed } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { loadAsyncComponent ,acquiesceAsyncComponent} from '@/utils'
|
||||
import { ContentBox } from '../ContentBox/index'
|
||||
import { TabsEnum } from './index.d'
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { ref, toRefs, watch, computed } from 'vue';
|
||||
import { icon } from '@/plugins';
|
||||
import { loadAsyncComponent, acquiesceAsyncComponent } from '@/utils';
|
||||
import { ContentBox } from '../ContentBox/index';
|
||||
import { TabsEnum } from './index.d';
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
|
||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const { getDetails } = toRefs(useChartLayoutStore())
|
||||
const { setItem } = useChartLayoutStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { getDetails } = toRefs(useChartLayoutStore());
|
||||
const { setItem } = useChartLayoutStore();
|
||||
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 CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'))
|
||||
const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
|
||||
const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
|
||||
const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
|
||||
const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
|
||||
const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'));
|
||||
const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'));
|
||||
const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'));
|
||||
const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'));
|
||||
const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'));
|
||||
const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'));
|
||||
|
||||
const collapsed = ref<boolean>(getDetails.value)
|
||||
const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING)
|
||||
const collapsed = ref<boolean>(getDetails.value);
|
||||
const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING);
|
||||
|
||||
const collapsedHandle = () => {
|
||||
collapsed.value = true
|
||||
setItem(ChartLayoutStoreEnum.DETAILS, true)
|
||||
}
|
||||
const collapsedHandle = () => {
|
||||
collapsed.value = true;
|
||||
setItem(ChartLayoutStoreEnum.DETAILS, true);
|
||||
};
|
||||
|
||||
const expandHandle = () => {
|
||||
collapsed.value = false
|
||||
setItem(ChartLayoutStoreEnum.DETAILS, false)
|
||||
}
|
||||
const expandHandle = () => {
|
||||
collapsed.value = false;
|
||||
setItem(ChartLayoutStoreEnum.DETAILS, false);
|
||||
};
|
||||
|
||||
const selectTarget = computed(() => {
|
||||
const selectId = chartEditStore.getTargetChart.selectId
|
||||
// 排除多个
|
||||
if (selectId.length !== 1) return undefined
|
||||
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
|
||||
if (target?.isGroup) {
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
tabsSelect.value = TabsEnum.CHART_SETTING
|
||||
}
|
||||
return target
|
||||
})
|
||||
const selectTarget = computed(() => {
|
||||
const selectId = chartEditStore.getTargetChart.selectId;
|
||||
// 排除多个
|
||||
if (selectId.length !== 1) return undefined;
|
||||
const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
|
||||
if (target?.isGroup) {
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
tabsSelect.value = TabsEnum.CHART_SETTING;
|
||||
}
|
||||
return target;
|
||||
});
|
||||
|
||||
watch(getDetails, newData => {
|
||||
if (newData) {
|
||||
collapsedHandle()
|
||||
} else {
|
||||
expandHandle()
|
||||
}
|
||||
})
|
||||
watch(getDetails, (newData) => {
|
||||
if (newData) {
|
||||
collapsedHandle();
|
||||
} else {
|
||||
expandHandle();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面设置
|
||||
const globalTabList = [
|
||||
{
|
||||
key: TabsEnum.PAGE_SETTING,
|
||||
title: '页面配置',
|
||||
icon: DesktopOutlineIcon,
|
||||
render: CanvasPage
|
||||
}
|
||||
]
|
||||
// 页面设置
|
||||
const globalTabList = [
|
||||
{
|
||||
key: TabsEnum.PAGE_SETTING,
|
||||
title: '页面配置',
|
||||
icon: DesktopOutlineIcon,
|
||||
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 = [
|
||||
{
|
||||
key: TabsEnum.CHART_SETTING,
|
||||
title: '定制',
|
||||
icon: ConstructIcon,
|
||||
render: ChartSetting
|
||||
},
|
||||
{
|
||||
key: TabsEnum.CHART_ANIMATION,
|
||||
title: '动画',
|
||||
icon: LeafIcon,
|
||||
render: ChartAnimation
|
||||
}
|
||||
]
|
||||
|
||||
const chartsTabList = [
|
||||
...chartsDefaultTabList,
|
||||
{
|
||||
key: TabsEnum.CHART_DATA,
|
||||
title: '数据',
|
||||
icon: FlashIcon,
|
||||
render: ChartData
|
||||
},
|
||||
{
|
||||
key: TabsEnum.CHART_EVENT,
|
||||
title: '事件',
|
||||
icon: RocketIcon,
|
||||
render: ChartEvent
|
||||
}
|
||||
]
|
||||
const chartsTabList = [
|
||||
...defaultTabList,
|
||||
{
|
||||
key: TabsEnum.CHART_DATA,
|
||||
title: '数据',
|
||||
icon: FlashIcon,
|
||||
render: ChartData,
|
||||
},
|
||||
{
|
||||
key: TabsEnum.CHART_EVENT,
|
||||
title: '事件',
|
||||
icon: RocketIcon,
|
||||
render: ChartEvent,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(content-configurations) {
|
||||
overflow: hidden;
|
||||
.tabs-box {
|
||||
padding: 10px;
|
||||
.icon-position {
|
||||
padding-top: 2px;
|
||||
@include go(content-configurations) {
|
||||
overflow: hidden;
|
||||
.tabs-box {
|
||||
padding: 10px;
|
||||
.icon-position {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
...useSizeStyle(groupData.attr),
|
||||
...getFilterStyle(groupData.styles),
|
||||
...getTransformStyle(groupData.styles),
|
||||
...getBlendModeStyle(groupData.styles) as any
|
||||
...(getBlendModeStyle(groupData.styles) as any),
|
||||
}"
|
||||
@click="mouseClickHandle($event, groupData)"
|
||||
@mousedown="mousedownHandle($event, groupData)"
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
:item="item"
|
||||
:hiddenPoint="true"
|
||||
:style="{
|
||||
...useComponentStyle(item.attr, groupIndex)
|
||||
...useComponentStyle(item.attr, groupIndex),
|
||||
}"
|
||||
>
|
||||
<component
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
:style="{
|
||||
...useSizeStyle(item.attr),
|
||||
...getFilterStyle(item.styles),
|
||||
...getTransformStyle(item.styles)
|
||||
...getTransformStyle(item.styles),
|
||||
}"
|
||||
></component>
|
||||
</edit-shape-box>
|
||||
|
|
@ -51,79 +51,88 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import { MenuEnum } from '@/enums/editPageEnum'
|
||||
import { chartColors } from '@/settings/chartThemes/index'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, 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'
|
||||
import { computed, PropType } from 'vue';
|
||||
import { MenuEnum } from '@/enums/editPageEnum';
|
||||
import { chartColors } from '@/settings/chartThemes/index';
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d';
|
||||
import {
|
||||
animationsClass,
|
||||
getFilterStyle,
|
||||
getTransformStyle,
|
||||
getBlendModeStyle,
|
||||
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({
|
||||
groupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
required: true
|
||||
},
|
||||
groupIndex: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const props = defineProps({
|
||||
groupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
required: true,
|
||||
},
|
||||
groupIndex: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { handleContextMenu } = useContextMenu()
|
||||
const chartEditStore = useChartEditStore();
|
||||
const { handleContextMenu } = useContextMenu();
|
||||
|
||||
// 点击事件
|
||||
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
|
||||
// 点击事件
|
||||
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } =
|
||||
useMouseHandle();
|
||||
|
||||
// 右键
|
||||
const optionsHandle = (
|
||||
targetList: MenuOptionsItemType[],
|
||||
allList: MenuOptionsItemType[],
|
||||
targetInstance: CreateComponentType
|
||||
) => {
|
||||
const filter = (menulist: MenuEnum[]) => {
|
||||
return allList.filter(i => menulist.includes(i.key as MenuEnum))
|
||||
}
|
||||
// 右键
|
||||
const optionsHandle = (
|
||||
targetList: MenuOptionsItemType[],
|
||||
allList: MenuOptionsItemType[],
|
||||
targetInstance: CreateComponentType,
|
||||
) => {
|
||||
const filter = (menulist: MenuEnum[]) => {
|
||||
return allList.filter((i) => menulist.includes(i.key as MenuEnum));
|
||||
};
|
||||
|
||||
// 多选处理
|
||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||
return filter([MenuEnum.GROUP, MenuEnum.DELETE])
|
||||
} else {
|
||||
const statusMenuEnums: MenuEnum[] = []
|
||||
if (targetInstance.status.lock) {
|
||||
statusMenuEnums.push(MenuEnum.LOCK)
|
||||
// 多选处理
|
||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||
return filter([MenuEnum.GROUP, MenuEnum.DELETE]);
|
||||
} 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 colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
|
||||
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
|
||||
})
|
||||
// 配置项
|
||||
const themeColor = computed(() => {
|
||||
const colorCustomMergeData = colorCustomMerge(
|
||||
chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo,
|
||||
);
|
||||
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor];
|
||||
});
|
||||
|
||||
// 主题色
|
||||
const themeSetting = computed(() => {
|
||||
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
|
||||
return chartThemeSetting
|
||||
})
|
||||
// 主题色
|
||||
const themeSetting = computed(() => {
|
||||
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting;
|
||||
return chartThemeSetting;
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -21,149 +21,149 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { computed, PropType } from 'vue';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
|
||||
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
|
||||
import { useMousePointHandle } from '../../hooks/useDrag.hook'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore';
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||
import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook';
|
||||
import { useMousePointHandle } from '../../hooks/useDrag.hook';
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
|
||||
required: true
|
||||
},
|
||||
hiddenPoint: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
}
|
||||
})
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
|
||||
required: true,
|
||||
},
|
||||
hiddenPoint: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const designStore = useDesignStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
const designStore = useDesignStore();
|
||||
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(() => {
|
||||
return designStore.getAppTheme
|
||||
})
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
return designStore.getAppTheme;
|
||||
});
|
||||
|
||||
// 计算当前选中目标
|
||||
const hover = computed(() => {
|
||||
const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
|
||||
if (isDrag) return false
|
||||
// 计算当前选中目标
|
||||
const hover = computed(() => {
|
||||
const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG];
|
||||
if (isDrag) return false;
|
||||
|
||||
if (props.item.status.lock) return false
|
||||
return props.item.id === chartEditStore.getTargetChart.hoverId
|
||||
})
|
||||
if (props.item.status.lock) return false;
|
||||
return props.item.id === chartEditStore.getTargetChart.hoverId;
|
||||
});
|
||||
|
||||
// 兼容多值场景
|
||||
const select = computed(() => {
|
||||
const id = props.item.id
|
||||
if (props.item.status.lock) return false
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
||||
})
|
||||
// 兼容多值场景
|
||||
const select = computed(() => {
|
||||
const id = props.item.id;
|
||||
if (props.item.status.lock) return false;
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id);
|
||||
});
|
||||
|
||||
// 锁定
|
||||
const lock = computed(() => {
|
||||
return props.item.status.lock
|
||||
})
|
||||
// 锁定
|
||||
const lock = computed(() => {
|
||||
return props.item.status.lock;
|
||||
});
|
||||
|
||||
// 隐藏
|
||||
const hide = computed(() => {
|
||||
return props.item.status.hide
|
||||
})
|
||||
// 隐藏
|
||||
const hide = computed(() => {
|
||||
return props.item.status.hide;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(shape-box) {
|
||||
position: absolute;
|
||||
cursor: move;
|
||||
|
||||
&.lock {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 锚点 */
|
||||
.shape-point {
|
||||
z-index: 1;
|
||||
@include go(shape-box) {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
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;
|
||||
cursor: move;
|
||||
|
||||
.shape-modal-select,
|
||||
.shape-modal-change {
|
||||
&.lock {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 锚点 */
|
||||
.shape-point {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
width: 7px;
|
||||
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 {
|
||||
opacity: 0.1;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
&.active {
|
||||
background-color: v-bind('themeColor');
|
||||
.shape-modal-select,
|
||||
.shape-modal-change {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.shape-modal-change {
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
&.selectActive,
|
||||
&.hoverActive {
|
||||
border-color: v-bind('themeColor');
|
||||
border-width: 2px;
|
||||
|
||||
.shape-modal-select {
|
||||
opacity: 0.1;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
&.active {
|
||||
background-color: v-bind('themeColor');
|
||||
}
|
||||
}
|
||||
&.hoverActive {
|
||||
border-style: dotted;
|
||||
}
|
||||
&.selectActive {
|
||||
border-style: solid;
|
||||
.shape-modal-change {
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
&.selectActive,
|
||||
&.hoverActive {
|
||||
border-color: v-bind('themeColor');
|
||||
border-width: 2px;
|
||||
}
|
||||
&.hoverActive {
|
||||
border-style: dotted;
|
||||
}
|
||||
&.selectActive {
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,49 @@
|
|||
</div>
|
||||
<!-- 系统设置 model -->
|
||||
<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>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -87,8 +130,17 @@
|
|||
import { useSyncUpdate } from './hooks/useSyncUpdate.hook';
|
||||
import { BtnListType, TypeEnum } from './index.d';
|
||||
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 chartEditStore = useChartEditStore();
|
||||
const routerParamsInfo = useRoute();
|
||||
|
|
@ -179,7 +231,21 @@
|
|||
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[] = [
|
||||
{
|
||||
|
|
@ -211,6 +277,13 @@
|
|||
globalSettingModel.value = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'copy',
|
||||
type: TypeEnum.BUTTON,
|
||||
name: '跨页面粘贴',
|
||||
icon: CopyIcon,
|
||||
handle: copyPageHandle,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
|
|
@ -234,6 +307,7 @@
|
|||
border-radius: 25px;
|
||||
border: 1px solid;
|
||||
@include fetch-border-color('hover-border-color-shallow');
|
||||
height: 240px !important;
|
||||
&.aside {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,11 @@
|
|||
...getSizeStyle(groupData.attr),
|
||||
...getFilterStyle(groupData.styles),
|
||||
}"
|
||||
@click="clickBtn"
|
||||
@dblclick="dblclickBtn"
|
||||
@contextmenu="rightclickBtn"
|
||||
@mouseenter="mouseenterBtn"
|
||||
@mouseleave="mouseleaveBtn"
|
||||
>
|
||||
<div
|
||||
class="chart-item"
|
||||
|
|
@ -36,7 +41,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
import { PropType, ref } from 'vue';
|
||||
import { CreateComponentGroupType } from '@/packages/index.d';
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils';
|
||||
import {
|
||||
|
|
@ -46,7 +51,10 @@
|
|||
getPreviewConfigStyle,
|
||||
} from '../../utils';
|
||||
import { useLifeHandler } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
|
||||
|
||||
const chartEditStore = useChartEditStore();
|
||||
const props = defineProps({
|
||||
groupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
|
|
@ -65,6 +73,58 @@
|
|||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue