mirror of
https://gitee.com/dromara/go-view.git
synced 2025-10-13 22:12:11 +08:00
feat: 新增两个背景
This commit is contained in:
huanghao1412
parent
f21e459ff5
commit
be5da4ceff
BIN
src/assets/customComponents/Theme2/background.jpg
Normal file
BIN
src/assets/customComponents/Theme2/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
src/assets/customComponents/Theme3/background.png
Normal file
BIN
src/assets/customComponents/Theme3/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
@ -0,0 +1,34 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { Theme2Config } from './index'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
// import background from '@/assets/customComponents/theme1/backgrond.jpg'
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
// 图片路径
|
||||||
|
dataset: '',
|
||||||
|
// 适应方式
|
||||||
|
fit: 'contain',
|
||||||
|
// 圆角
|
||||||
|
borderRadius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||||
|
{
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.attr = {
|
||||||
|
...this.attr,
|
||||||
|
w: 1920,
|
||||||
|
h: 1080,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
public key = Theme2Config.key
|
||||||
|
public chartConfig = cloneDeep(Theme2Config)
|
||||||
|
public option = cloneDeep(option)
|
||||||
|
public customData = cloneDeep({
|
||||||
|
title: '',
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
<template>
|
||||||
|
<collapse-item name="属性" :expanded="true">
|
||||||
|
<setting-item-box name="路径" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-input v-model:value="optionData.dataset" size="small"></n-input>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
<setting-item-box name="样式">
|
||||||
|
<setting-item name="类型">
|
||||||
|
<n-select
|
||||||
|
v-model:value="optionData.fit"
|
||||||
|
size="small"
|
||||||
|
:options="fitList"
|
||||||
|
></n-select>
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="圆角">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="optionData.borderRadius"
|
||||||
|
size="small"
|
||||||
|
:min="0"
|
||||||
|
placeholder="圆角"
|
||||||
|
></n-input-number>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
</collapse-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { option } from './config'
|
||||||
|
import {
|
||||||
|
CollapseItem,
|
||||||
|
SettingItemBox,
|
||||||
|
SettingItem,
|
||||||
|
} from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<typeof option>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// 适应类型
|
||||||
|
const fitList = [
|
||||||
|
{
|
||||||
|
value: 'fill',
|
||||||
|
label: 'fill'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'contain',
|
||||||
|
label: 'contain'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'cover',
|
||||||
|
label: 'cover'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'scale-down',
|
||||||
|
label: 'scale-down'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'none',
|
||||||
|
label: 'none'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<n-space vertical>
|
||||||
|
<setting-item-box name="标题" :alone="true">
|
||||||
|
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
|
||||||
|
</setting-item-box>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
const props = defineProps(['customData', 'request'])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/CUSTOMCOMPONENTS/index.d'
|
||||||
|
|
||||||
|
export const Theme2Config: ConfigType = {
|
||||||
|
key: 'Theme2',
|
||||||
|
chartKey: 'VTheme2',
|
||||||
|
conKey: 'VCTheme2',
|
||||||
|
conDataKey: 'VCDTheme2',
|
||||||
|
title: '背景2',
|
||||||
|
// category: ChatCategoryEnum.THEMES,
|
||||||
|
// categoryName: ChatCategoryEnumName.THEMES,
|
||||||
|
// package: PackagesCategoryEnum.THEMESANDLAYOUTS,
|
||||||
|
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||||
|
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
|
image: 'theme2.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,291 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="getStyle(borderRadius)" class="Theme1">
|
||||||
|
<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>
|
||||||
|
<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" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</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="fill"
|
||||||
|
preview-disabled
|
||||||
|
:src="background"
|
||||||
|
:fallback-src="requireErrorImg()"
|
||||||
|
:width="w"
|
||||||
|
lazy
|
||||||
|
:style="{height, top: `${svgHeight}px`}"
|
||||||
|
style="position: absolute;left: 0;width: 100%;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, shallowReactive, watch, toRefs, onMounted, onUnmounted, ref, computed } from 'vue'
|
||||||
|
import { requireErrorImg } from '@/utils'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import moment from 'moment'
|
||||||
|
import background from '@/assets/customComponents/Theme2/background.jpg'
|
||||||
|
import { isPreview } from '@/utils/router'
|
||||||
|
import { postMessageToParent, ResizeObserverELE } from "@/utils";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
|
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
|
||||||
|
|
||||||
|
let date = ref(moment().format('yyyy-MM-DD'))
|
||||||
|
const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
let time = ref(moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))])
|
||||||
|
let timer: unknown
|
||||||
|
onMounted(() => {
|
||||||
|
// document.getElementById('fullscreenButton')!.addEventListener('click', function() {
|
||||||
|
// showMoreMenuBts.value = !showMoreMenuBts.value
|
||||||
|
// // 检查是否已经处于全屏模式
|
||||||
|
// if (document.fullscreenElement ||
|
||||||
|
// (document as any).webkitFullscreenElement ||
|
||||||
|
// (document as any).mozFullScreenElement ||
|
||||||
|
// (document as any).msFullscreenElement) {
|
||||||
|
// // 当前处于全屏，尝试退出全屏
|
||||||
|
// if (document.exitFullscreen) {
|
||||||
|
// document.exitFullscreen();
|
||||||
|
// } else if ((document as any).mozCancelFullScreen) { // Firefox
|
||||||
|
// (document as any).mozCancelFullScreen();
|
||||||
|
// } else if ((document as any).webkitExitFullscreen) { // Chrome, Safari and Opera
|
||||||
|
// (document as any).webkitExitFullscreen();
|
||||||
|
// } else if ((document as any).msExitFullscreen) { // IE/Edge
|
||||||
|
// (document as any).msExitFullscreen();
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// // 当前非全屏，尝试进入全屏
|
||||||
|
// if (document.documentElement.requestFullscreen) {
|
||||||
|
// document.documentElement.requestFullscreen();
|
||||||
|
// } else if ((document.documentElement as any).mozRequestFullScreen) { // Firefox
|
||||||
|
// (document.documentElement as any).mozRequestFullScreen();
|
||||||
|
// } else if ((document.documentElement as any).webkitRequestFullscreen) { // Chrome, Safari and Opera
|
||||||
|
// (document.documentElement as any).webkitRequestFullscreen();
|
||||||
|
// } else if ((document.documentElement as any).msRequestFullscreen) { // IE/Edge
|
||||||
|
// (document.documentElement as any).msRequestFullscreen();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
if(!isPreview()) return
|
||||||
|
timer = setInterval(() => {
|
||||||
|
date.value = moment().format('yyyy-MM-DD')
|
||||||
|
time.value = moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))]
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer as number)
|
||||||
|
})
|
||||||
|
|
||||||
|
const showMoreMenuBts = ref(true)
|
||||||
|
// 切换全屏函数
|
||||||
|
function toggleFullscreen() {
|
||||||
|
postMessageToParent({type: 'fullScreen'})
|
||||||
|
|
||||||
|
// console.log(document.documentElement)
|
||||||
|
showMoreMenuBts.value = !showMoreMenuBts.value
|
||||||
|
//
|
||||||
|
// if (document.fullscreenElement) {
|
||||||
|
// // 如果当前已经是全屏状态，则退出全屏
|
||||||
|
// document.exitFullscreen();
|
||||||
|
// } else {
|
||||||
|
// // 否则，进入全屏
|
||||||
|
// document.documentElement.requestFullscreen()
|
||||||
|
// .catch(err => {
|
||||||
|
// console.error('Error attempting to enable full-screen mode:', err);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
const option = shallowReactive({
|
||||||
|
dataset: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const getStyle = (radius: number) => {
|
||||||
|
return {
|
||||||
|
borderRadius: `${radius}px`,
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
// async (newData: any) => {
|
||||||
|
// try {
|
||||||
|
// // const img = await import(newData);
|
||||||
|
// // option.dataset = img.default
|
||||||
|
// option.dataset = newData
|
||||||
|
// } catch(e) {
|
||||||
|
// console.log(e)
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// immediate: true
|
||||||
|
// }
|
||||||
|
// )
|
||||||
|
//
|
||||||
|
// // 预览更新
|
||||||
|
// useChartDataFetch(props.chartConfig, useChartEditStore, async (newData: any) => {
|
||||||
|
// try {
|
||||||
|
// // const img = await import(newData);
|
||||||
|
// // option.dataset = img.default
|
||||||
|
// option.dataset = newData
|
||||||
|
// } catch(e) {
|
||||||
|
// console.log(e)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Theme1{
|
||||||
|
position: relative;
|
||||||
|
.full-screen-btn {
|
||||||
|
z-index: 999;
|
||||||
|
border: #4396fd 1px solid;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 3px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 9.6%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #4396fd;
|
||||||
|
font-size: calc(var(--height) / 4);
|
||||||
|
height: calc(var(--height) / 3);
|
||||||
|
.full-screen {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { Theme3Config } from './index'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
// import background from '@/assets/customComponents/theme1/backgrond.jpg'
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
// 图片路径
|
||||||
|
dataset: '',
|
||||||
|
// 适应方式
|
||||||
|
fit: 'contain',
|
||||||
|
// 圆角
|
||||||
|
borderRadius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||||
|
{
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.attr = {
|
||||||
|
...this.attr,
|
||||||
|
w: 1920,
|
||||||
|
h: 1080,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
public key = Theme3Config.key
|
||||||
|
public chartConfig = cloneDeep(Theme3Config)
|
||||||
|
public option = cloneDeep(option)
|
||||||
|
public customData = cloneDeep({
|
||||||
|
title: '',
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
<template>
|
||||||
|
<collapse-item name="属性" :expanded="true">
|
||||||
|
<setting-item-box name="路径" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-input v-model:value="optionData.dataset" size="small"></n-input>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
<setting-item-box name="样式">
|
||||||
|
<setting-item name="类型">
|
||||||
|
<n-select
|
||||||
|
v-model:value="optionData.fit"
|
||||||
|
size="small"
|
||||||
|
:options="fitList"
|
||||||
|
></n-select>
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="圆角">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="optionData.borderRadius"
|
||||||
|
size="small"
|
||||||
|
:min="0"
|
||||||
|
placeholder="圆角"
|
||||||
|
></n-input-number>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
</collapse-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { option } from './config'
|
||||||
|
import {
|
||||||
|
CollapseItem,
|
||||||
|
SettingItemBox,
|
||||||
|
SettingItem,
|
||||||
|
} from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<typeof option>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// 适应类型
|
||||||
|
const fitList = [
|
||||||
|
{
|
||||||
|
value: 'fill',
|
||||||
|
label: 'fill'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'contain',
|
||||||
|
label: 'contain'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'cover',
|
||||||
|
label: 'cover'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'scale-down',
|
||||||
|
label: 'scale-down'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'none',
|
||||||
|
label: 'none'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<n-space vertical>
|
||||||
|
<setting-item-box name="标题" :alone="true">
|
||||||
|
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
|
||||||
|
</setting-item-box>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
const props = defineProps(['customData', 'request'])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/CUSTOMCOMPONENTS/index.d'
|
||||||
|
|
||||||
|
export const Theme3Config: ConfigType = {
|
||||||
|
key: 'Theme3',
|
||||||
|
chartKey: 'VTheme3',
|
||||||
|
conKey: 'VCTheme3',
|
||||||
|
conDataKey: 'VCDTheme3',
|
||||||
|
title: '背景3',
|
||||||
|
// category: ChatCategoryEnum.THEMES,
|
||||||
|
// categoryName: ChatCategoryEnumName.THEMES,
|
||||||
|
// package: PackagesCategoryEnum.THEMESANDLAYOUTS,
|
||||||
|
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||||
|
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
|
image: 'theme3.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,291 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="getStyle(borderRadius)" class="Theme1">
|
||||||
|
<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>
|
||||||
|
<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" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</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="fill"
|
||||||
|
preview-disabled
|
||||||
|
:src="background"
|
||||||
|
:fallback-src="requireErrorImg()"
|
||||||
|
:width="w"
|
||||||
|
lazy
|
||||||
|
:style="{height, top: `${svgHeight}px`}"
|
||||||
|
style="position: absolute;left: 0;width: 100%;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, shallowReactive, watch, toRefs, onMounted, onUnmounted, ref, computed } from 'vue'
|
||||||
|
import { requireErrorImg } from '@/utils'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import moment from 'moment'
|
||||||
|
import background from '@/assets/customComponents/Theme3/background.png'
|
||||||
|
import { isPreview } from '@/utils/router'
|
||||||
|
import { postMessageToParent, ResizeObserverELE } from "@/utils";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
|
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
|
||||||
|
|
||||||
|
let date = ref(moment().format('yyyy-MM-DD'))
|
||||||
|
const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
let time = ref(moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))])
|
||||||
|
let timer: unknown
|
||||||
|
onMounted(() => {
|
||||||
|
// document.getElementById('fullscreenButton')!.addEventListener('click', function() {
|
||||||
|
// showMoreMenuBts.value = !showMoreMenuBts.value
|
||||||
|
// // 检查是否已经处于全屏模式
|
||||||
|
// if (document.fullscreenElement ||
|
||||||
|
// (document as any).webkitFullscreenElement ||
|
||||||
|
// (document as any).mozFullScreenElement ||
|
||||||
|
// (document as any).msFullscreenElement) {
|
||||||
|
// // 当前处于全屏，尝试退出全屏
|
||||||
|
// if (document.exitFullscreen) {
|
||||||
|
// document.exitFullscreen();
|
||||||
|
// } else if ((document as any).mozCancelFullScreen) { // Firefox
|
||||||
|
// (document as any).mozCancelFullScreen();
|
||||||
|
// } else if ((document as any).webkitExitFullscreen) { // Chrome, Safari and Opera
|
||||||
|
// (document as any).webkitExitFullscreen();
|
||||||
|
// } else if ((document as any).msExitFullscreen) { // IE/Edge
|
||||||
|
// (document as any).msExitFullscreen();
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// // 当前非全屏，尝试进入全屏
|
||||||
|
// if (document.documentElement.requestFullscreen) {
|
||||||
|
// document.documentElement.requestFullscreen();
|
||||||
|
// } else if ((document.documentElement as any).mozRequestFullScreen) { // Firefox
|
||||||
|
// (document.documentElement as any).mozRequestFullScreen();
|
||||||
|
// } else if ((document.documentElement as any).webkitRequestFullscreen) { // Chrome, Safari and Opera
|
||||||
|
// (document.documentElement as any).webkitRequestFullscreen();
|
||||||
|
// } else if ((document.documentElement as any).msRequestFullscreen) { // IE/Edge
|
||||||
|
// (document.documentElement as any).msRequestFullscreen();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
if(!isPreview()) return
|
||||||
|
timer = setInterval(() => {
|
||||||
|
date.value = moment().format('yyyy-MM-DD')
|
||||||
|
time.value = moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))]
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer as number)
|
||||||
|
})
|
||||||
|
|
||||||
|
const showMoreMenuBts = ref(true)
|
||||||
|
// 切换全屏函数
|
||||||
|
function toggleFullscreen() {
|
||||||
|
postMessageToParent({type: 'fullScreen'})
|
||||||
|
|
||||||
|
// console.log(document.documentElement)
|
||||||
|
showMoreMenuBts.value = !showMoreMenuBts.value
|
||||||
|
//
|
||||||
|
// if (document.fullscreenElement) {
|
||||||
|
// // 如果当前已经是全屏状态，则退出全屏
|
||||||
|
// document.exitFullscreen();
|
||||||
|
// } else {
|
||||||
|
// // 否则，进入全屏
|
||||||
|
// document.documentElement.requestFullscreen()
|
||||||
|
// .catch(err => {
|
||||||
|
// console.error('Error attempting to enable full-screen mode:', err);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
const option = shallowReactive({
|
||||||
|
dataset: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const getStyle = (radius: number) => {
|
||||||
|
return {
|
||||||
|
borderRadius: `${radius}px`,
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
// async (newData: any) => {
|
||||||
|
// try {
|
||||||
|
// // const img = await import(newData);
|
||||||
|
// // option.dataset = img.default
|
||||||
|
// option.dataset = newData
|
||||||
|
// } catch(e) {
|
||||||
|
// console.log(e)
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// immediate: true
|
||||||
|
// }
|
||||||
|
// )
|
||||||
|
//
|
||||||
|
// // 预览更新
|
||||||
|
// useChartDataFetch(props.chartConfig, useChartEditStore, async (newData: any) => {
|
||||||
|
// try {
|
||||||
|
// // const img = await import(newData);
|
||||||
|
// // option.dataset = img.default
|
||||||
|
// option.dataset = newData
|
||||||
|
// } catch(e) {
|
||||||
|
// console.log(e)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Theme1{
|
||||||
|
position: relative;
|
||||||
|
.full-screen-btn {
|
||||||
|
z-index: 999;
|
||||||
|
border: #4396fd 1px solid;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 3px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 9.6%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #4396fd;
|
||||||
|
font-size: calc(var(--height) / 4);
|
||||||
|
height: calc(var(--height) / 3);
|
||||||
|
.full-screen {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,4 +1,6 @@
|
|||||||
import { Theme1Config } from './Theme1/index'
|
import { Theme1Config } from './Theme1/index'
|
||||||
|
import { Theme2Config } from './Theme2/index'
|
||||||
|
import { Theme3Config } from './Theme3/index'
|
||||||
import { ComprehensivePUEConfig } from './ComprehensivePUE'
|
import { ComprehensivePUEConfig } from './ComprehensivePUE'
|
||||||
import { DeviceAlarmOverviewConfig } from './DeviceAlarmOverview'
|
import { DeviceAlarmOverviewConfig } from './DeviceAlarmOverview'
|
||||||
import { RealTimeTrafficConfig } from './RealTimeTraffic'
|
import { RealTimeTrafficConfig } from './RealTimeTraffic'
|
||||||
@ -10,6 +12,8 @@ import { MonitorRealTimeEventsConfig } from './MonitorRealTimeEvents'
|
|||||||
|
|
||||||
export default [
|
export default [
|
||||||
Theme1Config,
|
Theme1Config,
|
||||||
|
Theme2Config,
|
||||||
|
Theme3Config,
|
||||||
ComprehensivePUEConfig,
|
ComprehensivePUEConfig,
|
||||||
DeviceAlarmOverviewConfig,
|
DeviceAlarmOverviewConfig,
|
||||||
RealTimeTrafficConfig,
|
RealTimeTrafficConfig,
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
<n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
|
<n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
|
||||||
<n-input
|
<n-input
|
||||||
:value="item.value"
|
:value="item.value"
|
||||||
@update:value="v => handleChange(v, i)"
|
@update:value="(v: string) => handleChange(v, i)"
|
||||||
placeholder="请输入测点ID"
|
placeholder="请输入测点ID"
|
||||||
size="small"
|
size="small"
|
||||||
clearable
|
clearable
|
||||||
@ -57,12 +57,12 @@ import { useTargetData } from '../../hooks/useTargetData.hook'
|
|||||||
import { DateOptions, MethodsOptions } from './ChartDataPointHistory.d'
|
import { DateOptions, MethodsOptions } from './ChartDataPointHistory.d'
|
||||||
import { nanoid } from 'nanoid'
|
import { nanoid } from 'nanoid'
|
||||||
import { icon } from '@/plugins/icon'
|
import { icon } from '@/plugins/icon'
|
||||||
import { commonDataType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
import { commonDataType, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||||
import { selectTimeOptions } from '../index.d'
|
import { selectTimeOptions } from '../index.d'
|
||||||
|
|
||||||
const { CloseIcon } = icon.ionicons5
|
const { CloseIcon } = icon.ionicons5
|
||||||
|
|
||||||
const { targetData } = useTargetData()
|
const { targetData } = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string, request: RequestConfigType }> }
|
||||||
|
|
||||||
const templateValue = ref('')
|
const templateValue = ref('')
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user