diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts index 9d0cf5bc..21ecb5a1 100644 --- a/src/enums/editPageEnum.ts +++ b/src/enums/editPageEnum.ts @@ -46,6 +46,12 @@ export enum MenuEnum { GROUP = 'group', // 解组 UN_GROUP = 'unGroup', + // 水平对齐 + H_ALIGN = 'hAlign', + // 垂直对齐 + V_ALIGN = 'vAlign', + // 水平平均分布 + // 垂直平均分布 // 后退 BACK = 'back', FORWORD = 'forward', diff --git a/src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/config.ts b/src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/config.ts index 79332d0f..5b762d2a 100644 --- a/src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/config.ts +++ b/src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/config.ts @@ -15,6 +15,12 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { + constructor() { + super(); + this.attr.w = 450 + this.attr.h = 300 + this.request.requestInterval = 15 + } public key = ComprehensivePUEConfig.key public chartConfig = cloneDeep(ComprehensivePUEConfig) public option = cloneDeep(option) diff --git a/src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/index.vue b/src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/index.vue index a8c8d839..8141a0bb 100644 --- a/src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/index.vue @@ -44,10 +44,6 @@ const props = defineProps({ required: true } }) -if(!isPreview()) { - Object.assign(props.chartConfig.attr, { w: 450, h: 300 }) - Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND }) -} const { w, h } = toRefs(props.chartConfig.attr) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) diff --git a/src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/config.ts b/src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/config.ts index 13bc4522..dccc5df3 100644 --- a/src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/config.ts +++ b/src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/config.ts @@ -15,6 +15,12 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { + constructor() { + super(); + this.attr.w = 450 + this.attr.h = 300 + this.request.requestInterval = 15 + } public key = DeviceAlarmOverviewConfig.key public chartConfig = cloneDeep(DeviceAlarmOverviewConfig) public option = cloneDeep(option) diff --git a/src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/index.vue b/src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/index.vue index 123a9e45..4f022229 100644 --- a/src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/index.vue @@ -52,10 +52,6 @@ const props = defineProps({ required: true } }) -if(!isPreview()) { - Object.assign(props.chartConfig.attr, { w: 450, h: 300 }) - Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND }) -} const { w, h } = toRefs(props.chartConfig.attr) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) diff --git a/src/packages/components/CustomComponents/CustomComponents/GDMap/config.ts b/src/packages/components/CustomComponents/CustomComponents/GDMap/config.ts index ba1b149f..d678a767 100644 --- a/src/packages/components/CustomComponents/CustomComponents/GDMap/config.ts +++ b/src/packages/components/CustomComponents/CustomComponents/GDMap/config.ts @@ -15,6 +15,12 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { + constructor() { + super(); + this.attr.w = 950 + this.attr.h = 820 + this.request.requestInterval = 15 + } public key = GDMapConfig.key public chartConfig = cloneDeep(GDMapConfig) public option = cloneDeep(option) diff --git a/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue b/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue index bdb5e3d7..2f51547b 100644 --- a/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue @@ -93,7 +93,9 @@ -
+ + +
import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref, computed } from 'vue' +import type { Ref } from 'vue' import { CreateComponentType } from '@/packages/index.d' import { publicInterface } from '@/api/path/business.api' import { isPreview } from '@/utils' @@ -152,10 +155,6 @@ const props = defineProps({ required: true } }) -if(!isPreview()) { - Object.assign(props.chartConfig.attr, { w: 950, h: 820 }) - Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND }) -} // Object.assign(props.chartConfig.attr, { w: 870, h: 560 }) const { w, h } = toRefs(props.chartConfig.attr) @@ -190,6 +189,7 @@ const abnormalNumber = computed(() => point.filter(_ => _.color === '#f00').leng let safeDaysList = reactive(['0', '0', '0', '0', '0', '0']) +const canvas = ref() as Ref const getData = () => { safeDaysList.splice(0, safeDaysList.length, ...(moment().diff(moment(systemConfig.overview_dglt_idc_operation_date), 'days') + 1).toString().padStart(6, '0').split('')) publicInterface('/dcim/space_page', 'get_one_no_permission', { id: props.chartConfig.customData!.mapId }).then(res => { @@ -197,6 +197,14 @@ const getData = () => { const arr:[] = JSON.parse(res.data.canvas_data) for (const key in gdMap) delete gdMap[key] Object.assign(gdMap, arr.find((_:any) => _.component === 'Picture') || {}) + if(canvas.value){ + const ctx = canvas.value.getContext('2d'); + const img = new Image(); + img.onload = function() { + if(ctx) ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height); + }; + img.src = gdMap.propValue; + } text.splice(0, text.length, ...arr.filter((_:any) => _.component === 'v-text')) point.splice(0, point.length, ...arr.filter((_:any) => _.component === 'svg-shape')) const activeAlarmData = { @@ -228,13 +236,11 @@ const getData = () => { }) } }) - console.log(point) } }) } const pointJump = (item:any) => { - console.log(item) postMessageToParent({type: 'changeRouterV1', url: '/' + item.dataBind.skipPath}) } diff --git a/src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/config.ts b/src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/config.ts index a73767c5..00d8643f 100644 --- a/src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/config.ts +++ b/src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/config.ts @@ -15,6 +15,12 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { + constructor() { + super(); + this.attr.w = 450 + this.attr.h = 300 + this.request.requestInterval = 15 + } public key = MonitorRealTimeEventsConfig.key public chartConfig = cloneDeep(MonitorRealTimeEventsConfig) public option = cloneDeep(option) diff --git a/src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/index.vue b/src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/index.vue index 0643f64d..6edccb94 100644 --- a/src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/index.vue @@ -52,11 +52,6 @@ const props = defineProps({ } }) -if(!isPreview()){ - Object.assign(props.chartConfig.attr, { w: 450, h: 300 }) - Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND }) -} - const { w, h } = toRefs(props.chartConfig.attr) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) diff --git a/src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/config.ts b/src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/config.ts index 19de6e7f..850f2601 100644 --- a/src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/config.ts +++ b/src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/config.ts @@ -15,6 +15,12 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { + constructor() { + super(); + this.attr.w = 450 + this.attr.h = 300 + this.request.requestInterval = 15 + } public key = OverviewOfComputingNodesConfig.key public chartConfig = cloneDeep(OverviewOfComputingNodesConfig) public option = cloneDeep(option) diff --git a/src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/index.vue b/src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/index.vue index ae5e31bd..7b4e1fe7 100644 --- a/src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/index.vue @@ -102,10 +102,6 @@ const props = defineProps({ required: true } }) -if(!isPreview()) { - Object.assign(props.chartConfig.attr, { w: 450, h: 300 }) - Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND }) -} const { w, h } = toRefs(props.chartConfig.attr) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) diff --git a/src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/config.ts b/src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/config.ts index b2e2a00f..0843a773 100644 --- a/src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/config.ts +++ b/src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/config.ts @@ -15,6 +15,12 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { + constructor() { + super(); + this.attr.w = 450 + this.attr.h = 300 + this.request.requestInterval = 15 + } public key = RealTimeAlarmStatisticsConfig.key public chartConfig = cloneDeep(RealTimeAlarmStatisticsConfig) public option = cloneDeep(option) diff --git a/src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/index.vue b/src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/index.vue index c3d8dc2a..63c22413 100644 --- a/src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/index.vue @@ -37,11 +37,6 @@ const props = defineProps({ } }) -if(!isPreview()) { - Object.assign(props.chartConfig.attr, {w: 450, h: 300}) - Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND }) -} - const { w, h } = toRefs(props.chartConfig.attr) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) diff --git a/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/config.ts b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/config.ts index b94d26a1..3cfe5efe 100644 --- a/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/config.ts +++ b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/config.ts @@ -15,6 +15,12 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { + constructor() { + super(); + this.attr.w = 950 + this.attr.h = 300 + this.request.requestInterval = 15 + } public key = RealTimeEventConfig.key public chartConfig = cloneDeep(RealTimeEventConfig) public option = cloneDeep(option) diff --git a/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/index.vue b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/index.vue index f64abcf1..d436a907 100644 --- a/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/index.vue @@ -61,11 +61,6 @@ const props = defineProps({ required: true } }) -if(!isPreview()){ - Object.assign(props.chartConfig.attr, { w: 950, h: 300 }) - Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND }) -} - const { w, h } = toRefs(props.chartConfig.attr) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) diff --git a/src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/config.ts b/src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/config.ts index 09d702bd..a63a6567 100644 --- a/src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/config.ts +++ b/src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/config.ts @@ -15,6 +15,12 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { + constructor() { + super(); + this.attr.w = 450 + this.attr.h = 300 + this.request.requestInterval = 15 + } public key = RealTimeTrafficConfig.key public chartConfig = cloneDeep(RealTimeTrafficConfig) public option = cloneDeep(option) diff --git a/src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue b/src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue index d53eb8a0..be0b8119 100644 --- a/src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue @@ -34,10 +34,6 @@ const props = defineProps({ required: true } }) -if(!isPreview()) { - Object.assign(props.chartConfig.attr, { w: 450, h: 300 }) - Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND }) -} const { w, h } = toRefs(props.chartConfig.attr) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme1/config.ts b/src/packages/components/CustomComponents/CustomComponents/Theme1/config.ts index 3ab95622..6f28cf7d 100644 --- a/src/packages/components/CustomComponents/CustomComponents/Theme1/config.ts +++ b/src/packages/components/CustomComponents/CustomComponents/Theme1/config.ts @@ -15,6 +15,16 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { + constructor() { + super(); + this.attr = { + ...this.attr, + w: 1920, + h: 1080, + x: 0, + y: 0, + } + } public key = Theme1Config.key public chartConfig = cloneDeep(Theme1Config) public option = cloneDeep(option) diff --git a/src/packages/components/CustomComponents/CustomComponents/Theme1/index.vue b/src/packages/components/CustomComponents/CustomComponents/Theme1/index.vue index 54136aa2..4de9bc4f 100644 --- a/src/packages/components/CustomComponents/CustomComponents/Theme1/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/Theme1/index.vue @@ -1,104 +1,126 @@ @@ -110,7 +132,7 @@ import { CreateComponentType } from '@/packages/index.d' import moment from 'moment' import background from '@/assets/customComponents/theme1/backgrond.jpg' import { isPreview } from '@/utils/router' -import { postMessageToParent } from "@/utils"; +import { postMessageToParent, ResizeObserverELE } from "@/utils"; const props = defineProps({ chartConfig: { @@ -119,8 +141,6 @@ const props = defineProps({ } }) -if(!isPreview()) Object.assign(props.chartConfig.attr, {w: 1920, h: 1080, x: 0, y: 0}) - const { w, h } = toRefs(props.chartConfig.attr) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) @@ -200,6 +220,20 @@ const getStyle = (radius: number) => { } } +let svgHeight = ref(60) +let height = ref('100%') +const observer = ResizeObserverELE((w, h) => { + svgHeight.value = h + height.value = `calc(100% - ${h}px)` +}) +const svg = ref() +onMounted(() => { + if(svg.value) observer.observe(svg.value); +}) +onUnmounted(() => { + observer.disconnect(); +}) + // // 编辑更新 // watch( // () => props.chartConfig.option.dataset, @@ -242,10 +276,12 @@ const getStyle = (radius: number) => { padding: 3px 10px; cursor: pointer; position: absolute; - top: 16px; + top: 50%; right: 9.6%; + transform: translateY(-50%); color: #4396fd; - font-size: 14px; + font-size: calc(var(--height) / 4); + height: calc(var(--height) / 3); .full-screen { font-size: 16px; margin-right: 5px; diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index acc6e589..a2fbccb3 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -109,7 +109,9 @@ import { } from '@vicons/carbon' import { - Apps20Regular as Apps20RegularIcon + Apps20Regular as Apps20RegularIcon, + AlignSpaceEvenlyHorizontal20Filled as AlignSpaceEvenlyHorizontal20FilledIcon, + AlignSpaceEvenlyVertical20Filled as AlignSpaceEvenlyVertical20FilledIcon } from '@vicons/fluent' import { @@ -323,7 +325,9 @@ const carbon = { const fluent = { // 主题 - Apps20RegularIcon + Apps20RegularIcon, + AlignSpaceEvenlyHorizontal20FilledIcon, + AlignSpaceEvenlyVertical20FilledIcon, } const material = { diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 34fee0e5..f63a9264 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -863,6 +863,16 @@ export const useChartEditStore = defineStore({ loadingFinish() } }, + // * 水平对齐 + setHAlign(id: string[], isHistory = true) { + try { + const selectIds = this.idPreFormat(id) || this.getTargetChart.selectId + if (selectIds.length < 2) return + console.log(selectIds) + } catch(e) { + console.log(e) + } + }, // * 锁定 setLock(status: boolean = true, isHistory: boolean = true) { try { diff --git a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue index ba269b68..21c7d96a 100644 --- a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue @@ -7,7 +7,7 @@ - +
diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index 6724928f..110a3c2f 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -134,12 +134,12 @@ const chartsDefaultTabList = [ icon: ConstructIcon, render: ChartSetting }, - // { - // key: TabsEnum.CHART_ANIMATION, - // title: '动画', - // icon: LeafIcon, - // render: ChartAnimation - // } + { + key: TabsEnum.CHART_ANIMATION, + title: '动画', + icon: LeafIcon, + render: ChartAnimation + } ] const chartsTabList = [ diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts index e0aa782e..93ac2cfa 100644 --- a/src/views/chart/hooks/useContextMenu.hook.ts +++ b/src/views/chart/hooks/useContextMenu.hook.ts @@ -20,6 +20,7 @@ const { EyeOffOutlineIcon } = icon.ionicons5 const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon +const { AlignSpaceEvenlyHorizontal20FilledIcon, AlignSpaceEvenlyVertical20FilledIcon } = icon.fluent const chartEditStore = useChartEditStore() @@ -142,6 +143,12 @@ export const defaultMultiSelectOptions: MenuOptionsItemType[] = [ key: MenuEnum.UN_GROUP, icon: renderIcon(Carbon3DCursorIcon), fnHandle: chartEditStore.setUnGroup + }, + { + label: '水平对齐', + key: MenuEnum.H_ALIGN, + icon: renderIcon(AlignSpaceEvenlyHorizontal20FilledIcon), + fnHandle: chartEditStore.setHAlign } ] @@ -198,7 +205,7 @@ const handleContextMenu = ( while (target instanceof SVGElement) { target = target.parentNode } - + console.log(targetInstance) chartEditStore.setTargetSelectChart(targetInstance && targetInstance.id) // 隐藏旧列表 diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue index 856ddea2..993e23ee 100644 --- a/src/views/chart/index.vue +++ b/src/views/chart/index.vue @@ -44,6 +44,7 @@ import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro' import { useContextMenu } from './hooks/useContextMenu.hook' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' +import { watch } from 'vue' const chartHistoryStoreStore = useChartHistoryStore() const chartEditStore = useChartEditStore()