mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-30 00:29:16 +08:00
fix: 修复gd地图无法生成缩略图的bug 修复位置错误的bug
This commit is contained in:
huanghao1412
parent
e93473917d
commit
3e5139a52a
@ -46,6 +46,12 @@ export enum MenuEnum {
|
||||
GROUP = 'group',
|
||||
// 解组
|
||||
UN_GROUP = 'unGroup',
|
||||
// 水平对齐
|
||||
H_ALIGN = 'hAlign',
|
||||
// 垂直对齐
|
||||
V_ALIGN = 'vAlign',
|
||||
// 水平平均分布
|
||||
// 垂直平均分布
|
||||
// 后退
|
||||
BACK = 'back',
|
||||
FORWORD = 'forward',
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -93,7 +93,9 @@
|
||||
</svg>
|
||||
<!-- img标签出来的图不完整 所以换background-url background-reapt object-fit: contain不支持 -->
|
||||
<!-- <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>-->
|
||||
<div id="img" :style="{backgroundImage: `url(${gdMap.propValue})`, transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></div>
|
||||
<!-- <div id="img" :style="{backgroundImage: `url(${gdMap.propValue})`, transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></div>-->
|
||||
<!-- background-url出来的截图还是不行 会变大 用canvas可以-->
|
||||
<canvas ref="canvas" width="870" height="560" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></canvas>
|
||||
<div :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top">
|
||||
<div
|
||||
v-for="(item, i) in point"
|
||||
@ -134,6 +136,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
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<HTMLCanvasElement>
|
||||
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})
|
||||
}
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -1,104 +1,126 @@
|
||||
<template>
|
||||
<div :style="getStyle(borderRadius)" class="Theme1">
|
||||
<div id="fullscreenButton" class="full-screen-btn" @click="toggleFullscreen">
|
||||
<i class="iconfont icon-quanping full-screen" :title="showMoreMenuBts ? '全屏' : '退出全屏'"></i>
|
||||
{{ showMoreMenuBts ? '全屏' : '退出全屏' }}
|
||||
</div>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 60" style="enable-background:new 0 0 1920 60;" xml:space="preserve">
|
||||
<g id="顶栏">
|
||||
<g>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="960" y1="60" x2="960" y2="0">
|
||||
<stop offset="0" style="stop-color:#0D2952;stop-opacity:0.1" />
|
||||
<stop offset="1" style="stop-color:#0D2952;stop-opacity:0.8" />
|
||||
</linearGradient>
|
||||
<rect style="fill:url(#SVGID_1_);" width="1920" height="60" />
|
||||
<g id="系统抬头">
|
||||
<!-- <image v-if="systemConfig.system_logo_url" width="240" height="40" :xlink:href="systemConfig.system_logo_url" /> -->
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="960" y1="-729.2512" x2="960" y2="-789.2512" gradientTransform="matrix(1 0 0 -1 0 -729.2512)">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_2_);" d="M600,0l54.3,54.3c3.1,3.1,9.3,5.7,13.7,5.7h584c4.4,0,10.5-2.5,13.7-5.7L1320,0" />
|
||||
</g>
|
||||
<g>
|
||||
<!-- <text transform="matrix(1 0 0 1 697.4991 43)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:30px;text-align: center;"></text>-->
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="770" y1="58" x2="1150" y2="58">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="0.5" style="stop-color:#4196FF" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_3_);" d="M770,56c0,0,0.9,0.9,2,2s3.8,2,6,2h364c2.2,0,4.9-0.9,6-2s2-2,2-2" />
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="3591" y1="5" x2="4188.75" y2="5" gradientTransform="matrix(1 0 0 1 -3584 0)">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
|
||||
</linearGradient>
|
||||
<polygon style="opacity:0.4;fill:url(#SVGID_4_);" points="604.8,8 7,8 13,2 598.8,2" />
|
||||
<svg
|
||||
ref="svg"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 1920 60"
|
||||
style="enable-background:new 0 0 1920 60;"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<g id="顶栏">
|
||||
<g>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="960" y1="60" x2="960" y2="0">
|
||||
<stop offset="0" style="stop-color:#0D2952;stop-opacity:0.1" />
|
||||
<stop offset="1" style="stop-color:#0D2952;stop-opacity:0.8" />
|
||||
</linearGradient>
|
||||
<rect style="fill:url(#SVGID_1_);" width="1920" height="60" />
|
||||
<g id="系统抬头">
|
||||
<!-- <image v-if="systemConfig.system_logo_url" width="240" height="40" :xlink:href="systemConfig.system_logo_url" /> -->
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="960" y1="-729.2512" x2="960" y2="-789.2512" gradientTransform="matrix(1 0 0 -1 0 -729.2512)">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_2_);" d="M600,0l54.3,54.3c3.1,3.1,9.3,5.7,13.7,5.7h584c4.4,0,10.5-2.5,13.7-5.7L1320,0" />
|
||||
</g>
|
||||
<g>
|
||||
<!-- <text transform="matrix(1 0 0 1 697.4991 43)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:30px;">-->
|
||||
<!-- {{chartConfig?.customData?.title}}-->
|
||||
<!-- </text>-->
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="770" y1="58" x2="1150" y2="58">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="0.5" style="stop-color:#4196FF" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_3_);" d="M770,56c0,0,0.9,0.9,2,2s3.8,2,6,2h364c2.2,0,4.9-0.9,6-2s2-2,2-2" />
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="3591" y1="5" x2="4188.75" y2="5" gradientTransform="matrix(1 0 0 1 -3584 0)">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
|
||||
</linearGradient>
|
||||
<polygon style="opacity:0.4;fill:url(#SVGID_4_);" points="604.8,8 7,8 13,2 598.8,2" />
|
||||
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-6698.249" y1="4" x2="-6592.999" y2="4" gradientTransform="matrix(-1 0 0 1 -6094.999 0)">
|
||||
<stop offset="0" style="stop-color:#00FFFF" />
|
||||
<stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_5_);" d="M563,0l8.3,8h2L565,0H563z M553,0l8.3,8h2L555,0H553z M568,0l8.3,8h2L570,0H568z M548,0 l8.3,8h2L550,0H548z M558,0l8.3,8h2L560,0H558z M588,0l8.3,8h2L590,0H588z M593,0l8.3,8h2L595,0H593z M578,0l8.3,8h2L580,0H578z M573,0l8.3,8h2L575,0H573z M583,0l8.3,8h2L585,0H583z M528,0l8.3,8h2L530,0H528z M508,0l8.3,8h2L510,0H508z M503,0l8.3,8h2 L505,0H503z M498,0l8.3,8h2L500,0H498z M543,0l8.3,8h2L545,0H543z M513,0l8.3,8h2L515,0H513z M533,0l8.3,8h2L535,0H533z M538,0 l8.3,8h2L540,0H538z M518,0l8.3,8h2L520,0H518z M523,0l8.3,8h2L525,0H523z" />
|
||||
</g>
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-6698.249" y1="4" x2="-6592.999" y2="4" gradientTransform="matrix(-1 0 0 1 -6094.999 0)">
|
||||
<stop offset="0" style="stop-color:#00FFFF" />
|
||||
<stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_5_);" d="M563,0l8.3,8h2L565,0H563z M553,0l8.3,8h2L555,0H553z M568,0l8.3,8h2L570,0H568z M548,0 l8.3,8h2L550,0H548z M558,0l8.3,8h2L560,0H558z M588,0l8.3,8h2L590,0H588z M593,0l8.3,8h2L595,0H593z M578,0l8.3,8h2L580,0H578z M573,0l8.3,8h2L575,0H573z M583,0l8.3,8h2L585,0H583z M528,0l8.3,8h2L530,0H528z M508,0l8.3,8h2L510,0H508z M503,0l8.3,8h2 L505,0H503z M498,0l8.3,8h2L500,0H498z M543,0l8.3,8h2L545,0H543z M513,0l8.3,8h2L515,0H513z M533,0l8.3,8h2L535,0H533z M538,0 l8.3,8h2L540,0H538z M518,0l8.3,8h2L520,0H518z M523,0l8.3,8h2L525,0H523z" />
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-4423.999" y1="5" x2="-3826.2493" y2="5" gradientTransform="matrix(-1 0 0 1 -2510.9993 0)">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
|
||||
</linearGradient>
|
||||
<polygon style="opacity:0.4;fill:url(#SVGID_6_);" points="1315.3,8 1913,8 1907,2 1321.3,2 " />
|
||||
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1316.75" y1="4" x2="1422" y2="4">
|
||||
<stop offset="0" style="stop-color:#00FFFF" />
|
||||
<stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_7_);" d="M1355,0l-8.3,8h2l8.3-8H1355z M1365,0l-8.3,8h2l8.3-8H1365z M1350,0l-8.3,8h2l8.3-8H1350z M1370,0l-8.3,8h2l8.3-8H1370z M1360,0l-8.3,8h2l8.3-8H1360z M1330,0l-8.3,8h2l8.3-8H1330z M1325,0l-8.3,8h2l8.3-8H1325z M1340,0 l-8.3,8h2l8.3-8H1340z M1345,0l-8.3,8h2l8.3-8H1345z M1335,0l-8.3,8h2l8.3-8H1335z M1390,0l-8.3,8h2l8.3-8H1390z M1410,0l-8.3,8 h2l8.3-8H1410z M1415,0l-8.3,8h2l8.3-8H1415z M1420,0l-8.3,8h2l8.3-8H1420z M1375,0l-8.3,8h2l8.3-8H1375z M1405,0l-8.3,8h2l8.3-8 H1405z M1385,0l-8.3,8h2l8.3-8H1385z M1380,0l-8.3,8h2l8.3-8H1380z M1400,0l-8.3,8h2l8.3-8H1400z M1395,0l-8.3,8h2l8.3-8H1395z" />
|
||||
</g>
|
||||
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="760.5" y1="59" x2="1159.5" y2="59">
|
||||
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0" />
|
||||
<stop offset="0.5" style="stop-color:#FFFFFF" />
|
||||
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
<rect x="760.5" y="58" style="fill:url(#SVGID_8_);" width="399" height="2" />
|
||||
<rect x="1760" style="opacity:0;fill:#091C38;" width="160" height="60" />
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 1808.9991 45)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:14px;">{{ time }}</text>
|
||||
</g>
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 1808.9991 27)" style="fill:#9CA4AF; font-family:'PingFang-SC-Regular'; font-size:14px;">{{ date }}</text>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-4423.999" y1="5" x2="-3826.2493" y2="5" gradientTransform="matrix(-1 0 0 1 -2510.9993 0)">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
|
||||
</linearGradient>
|
||||
<polygon style="opacity:0.4;fill:url(#SVGID_6_);" points="1315.3,8 1913,8 1907,2 1321.3,2 " />
|
||||
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1316.75" y1="4" x2="1422" y2="4">
|
||||
<stop offset="0" style="stop-color:#00FFFF" />
|
||||
<stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_7_);" d="M1355,0l-8.3,8h2l8.3-8H1355z M1365,0l-8.3,8h2l8.3-8H1365z M1350,0l-8.3,8h2l8.3-8H1350z M1370,0l-8.3,8h2l8.3-8H1370z M1360,0l-8.3,8h2l8.3-8H1360z M1330,0l-8.3,8h2l8.3-8H1330z M1325,0l-8.3,8h2l8.3-8H1325z M1340,0 l-8.3,8h2l8.3-8H1340z M1345,0l-8.3,8h2l8.3-8H1345z M1335,0l-8.3,8h2l8.3-8H1335z M1390,0l-8.3,8h2l8.3-8H1390z M1410,0l-8.3,8 h2l8.3-8H1410z M1415,0l-8.3,8h2l8.3-8H1415z M1420,0l-8.3,8h2l8.3-8H1420z M1375,0l-8.3,8h2l8.3-8H1375z M1405,0l-8.3,8h2l8.3-8 H1405z M1385,0l-8.3,8h2l8.3-8H1385z M1380,0l-8.3,8h2l8.3-8H1380z M1400,0l-8.3,8h2l8.3-8H1400z M1395,0l-8.3,8h2l8.3-8H1395z" />
|
||||
</g>
|
||||
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="760.5" y1="59" x2="1159.5" y2="59">
|
||||
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0" />
|
||||
<stop offset="0.5" style="stop-color:#FFFFFF" />
|
||||
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
<rect x="760.5" y="58" style="fill:url(#SVGID_8_);" width="399" height="2" />
|
||||
<rect x="1760" style="opacity:0;fill:#091C38;" width="160" height="60" />
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 1808.9991 45)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:14px;">{{ time }}</text>
|
||||
</g>
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 1808.9991 27)" style="fill:#9CA4AF; font-family:'PingFang-SC-Regular'; font-size:14px;">{{ date }}</text>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#234B9B;" d="M1780,17c7.2,0,13,5.8,13,13s-5.8,13-13,13s-13-5.8-13-13S1772.8,17,1780,17 M1780,16 c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S1787.7,16,1780,16L1780,16z" />
|
||||
</g>
|
||||
<polyline style="fill:none;stroke:#234B9B;stroke-miterlimit:10;" points="1780,21 1780,31 1785,36" />
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-3831.3499" y1="-785.323" x2="-3110.6487" y2="-785.323" gradientTransform="matrix(-1 0 0 -1 -2510.9993 -755.2512)">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0.8" />
|
||||
<stop offset="0.4462" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.8" />
|
||||
</linearGradient>
|
||||
<path style="fill:none;stroke:url(#SVGID_9_);stroke-miterlimit:10;" d="M1320,0.5l-54.3,53.4c-3.1,3.1-9.3,5.6-13.7,5.6H668 c-4.4,0-10.6-2.5-13.7-5.6L600,0.5" />
|
||||
<path style="fill:#234B9B;" d="M1780,17c7.2,0,13,5.8,13,13s-5.8,13-13,13s-13-5.8-13-13S1772.8,17,1780,17 M1780,16 c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S1787.7,16,1780,16L1780,16z" />
|
||||
</g>
|
||||
<polyline style="fill:none;stroke:#234B9B;stroke-miterlimit:10;" points="1780,21 1780,31 1785,36" />
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-3831.3499" y1="-785.323" x2="-3110.6487" y2="-785.323" gradientTransform="matrix(-1 0 0 -1 -2510.9993 -755.2512)">
|
||||
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0.8" />
|
||||
<stop offset="0.4462" style="stop-color:#4196FF;stop-opacity:0" />
|
||||
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.8" />
|
||||
</linearGradient>
|
||||
<path style="fill:none;stroke:url(#SVGID_9_);stroke-miterlimit:10;" d="M1320,0.5l-54.3,53.4c-3.1,3.1-9.3,5.6-13.7,5.6H668 c-4.4,0-10.6-2.5-13.7-5.6L600,0.5" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div style="font: 30px PingFang-SC-Bold;color: #fff;width: 1920px;height: 60px;line-height: 60px;text-align: center;position: absolute;top: 0;">{{chartConfig?.customData?.title}}</div>
|
||||
</g>
|
||||
</svg>
|
||||
<div
|
||||
:style="{height: `${svgHeight}px`,lineHeight: `${svgHeight}px`, fontSize: `${svgHeight / 2}px`}"
|
||||
style="position: absolute;top: 0;width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="font-family: PingFang-SC-Bold;color: #fff;width: 50%;height: 100%;text-align: center;position: absolute;top: 0;left: 50%;transform: translateX(-50%)"
|
||||
>
|
||||
{{chartConfig?.customData?.title}}
|
||||
</div>
|
||||
<div id="fullscreenButton" :style="{'--height': `${svgHeight}px`}" class="full-screen-btn" @click="toggleFullscreen">
|
||||
<i class="iconfont icon-quanping full-screen" :title="showMoreMenuBts ? '全屏' : '退出全屏'"></i>
|
||||
{{ showMoreMenuBts ? '全屏' : '退出全屏' }}
|
||||
</div>
|
||||
</div>
|
||||
<n-image
|
||||
:object-fit="fit"
|
||||
object-fit="fill"
|
||||
preview-disabled
|
||||
:src="background"
|
||||
:fallback-src="requireErrorImg()"
|
||||
:width="w"
|
||||
:height="h"
|
||||
lazy
|
||||
:style="{height, top: `${svgHeight}px`}"
|
||||
style="position: absolute;left: 0;width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -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;
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<!-- 位置 -->
|
||||
<position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig" />
|
||||
<!-- 滤镜 -->
|
||||
<!-- <styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>-->
|
||||
<styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>
|
||||
<!-- 自定义配置项 -->
|
||||
<component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
|
||||
</div>
|
||||
|
||||
@ -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 = [
|
||||
|
||||
@ -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)
|
||||
|
||||
// 隐藏旧列表
|
||||
|
||||
@ -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()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user