mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-30 00:29:16 +08:00
feat: 新增背景
This commit is contained in:
huanghao1412
parent
e36022a9d0
commit
0a3cbab613
BIN
src/assets/images/chart/backgrounds/theme1.png
Normal file
BIN
src/assets/images/chart/backgrounds/theme1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/images/chart/customponents/Background1.jpg
Normal file
BIN
src/assets/images/chart/customponents/Background1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 878 KiB |
BIN
src/assets/images/chart/customponents/Background2.jpg
Normal file
BIN
src/assets/images/chart/customponents/Background2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
BIN
src/assets/images/chart/customponents/Background3.jpg
Normal file
BIN
src/assets/images/chart/customponents/Background3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 382 KiB |
BIN
src/assets/images/chart/customponents/Background4.jpg
Normal file
BIN
src/assets/images/chart/customponents/Background4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
src/assets/images/chart/customponents/Background5.jpg
Normal file
BIN
src/assets/images/chart/customponents/Background5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 684 KiB |
BIN
src/assets/images/chart/customponents/Background6.jpg
Normal file
BIN
src/assets/images/chart/customponents/Background6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 340 KiB |
@ -36,7 +36,7 @@ export const useChartCommonData = (
|
||||
// if (vChartRef.value) {
|
||||
// setOption(vChartRef.value, { dataset: dataset })
|
||||
// }
|
||||
if(!dataset.dimensions) return
|
||||
// if(!dataset.dimensions) return
|
||||
if(targetComponent.option){
|
||||
let seriesItem = cloneDeep(targetComponent.option.series[0])
|
||||
let series = []
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Theme2Config } from './index'
|
||||
import { BackgroundsConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
// import background from '@/assets/customComponents/theme1/backgrond.jpg'
|
||||
|
||||
export const option = {
|
||||
// 图片路径
|
||||
// 图片
|
||||
dataset: '',
|
||||
// 适应方式
|
||||
fit: 'contain',
|
||||
fit: 'fill',
|
||||
// 圆角
|
||||
borderRadius: 0
|
||||
}
|
||||
@ -25,10 +24,7 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
y: 0,
|
||||
}
|
||||
}
|
||||
public key = Theme2Config.key
|
||||
public chartConfig = cloneDeep(Theme2Config)
|
||||
public key = BackgroundsConfig.key
|
||||
public chartConfig = cloneDeep(BackgroundsConfig)
|
||||
public option = cloneDeep(option)
|
||||
public customData = cloneDeep({
|
||||
title: '',
|
||||
})
|
||||
}
|
||||
@ -1,10 +1,5 @@
|
||||
<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
|
||||
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
|
||||
|
||||
export const BackgroundsConfig: ConfigType = {
|
||||
key: 'Backgrounds',
|
||||
chartKey: 'VBackgrounds',
|
||||
conKey: 'VCBackgrounds',
|
||||
title: '背景',
|
||||
category: ChatCategoryEnum.BACKGROUNDS,
|
||||
categoryName: ChatCategoryEnumName.BACKGROUNDS,
|
||||
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: ''
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div :style="getStyle(borderRadius)">
|
||||
<n-image
|
||||
:object-fit="fit"
|
||||
preview-disabled
|
||||
:src="`/src/assets/images/chart/customponents/${dataset}`"
|
||||
:fallback-src="requireErrorImg()"
|
||||
:width="w"
|
||||
lazy
|
||||
style="position: absolute;left: 0;width: 100%;height: 100%"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { requireErrorImg } from '@/utils'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
// import background from '@/assets/customComponents/theme1/backgrond.jpg'
|
||||
|
||||
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)
|
||||
|
||||
const getStyle = (radius: number) => {
|
||||
return {
|
||||
borderRadius: `${radius}px`,
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
import { BackgroundsConfig } from './Backgrounds/index'
|
||||
import { PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
|
||||
|
||||
const backgroundNames = [
|
||||
'Background1.jpg',
|
||||
'Background2.jpg',
|
||||
'Background3.jpg',
|
||||
'Background4.jpg',
|
||||
'Background5.jpg',
|
||||
'Background6.jpg',
|
||||
]
|
||||
const backgrounds = backgroundNames.map((name, i) => ({
|
||||
...BackgroundsConfig,
|
||||
category: ChatCategoryEnum.BACKGROUNDS,
|
||||
categoryName: ChatCategoryEnumName.BACKGROUNDS,
|
||||
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||
dataset: name,
|
||||
// 既是缩略图 又是背景图
|
||||
image: name,
|
||||
title: `背景${i + 1}`,
|
||||
redirectComponent: `${BackgroundsConfig.package}/${BackgroundsConfig.category}/${BackgroundsConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
|
||||
}))
|
||||
|
||||
export default backgrounds
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :style="getStyle(borderRadius)" class="box" style="overflow: visible;position: relative">
|
||||
<div v-if="chartConfig.customData?.mapId" :style="getStyle(borderRadius)" class="box" style="overflow: visible;position: relative">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
@ -92,10 +92,10 @@
|
||||
</g>
|
||||
</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>-->
|
||||
<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> -->
|
||||
<!-- 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>
|
||||
<!-- <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"
|
||||
@ -132,6 +132,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;align-items: center;justify-content: center;" v-else>
|
||||
<img src="@/assets/images/exception/nodata.svg" style="width: 100%;height: 30%" alt="">
|
||||
<div style="color: #fff;text-align: center;font-size: 40px;">请输入地图ID</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -192,20 +196,21 @@ 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(''))
|
||||
if(!props.chartConfig.customData!.mapId) return
|
||||
publicInterface('/dcim/space_page', 'get_one_no_permission', { id: props.chartConfig.customData!.mapId }).then(res => {
|
||||
if(res && res.data){
|
||||
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');
|
||||
ctx?.clearRect(0, 0, canvas.value.width, canvas.value.height);
|
||||
const img = new Image();
|
||||
img.onload = function() {
|
||||
if(ctx) ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height);
|
||||
};
|
||||
img.src = gdMap.propValue;
|
||||
}
|
||||
// if(canvas.value){
|
||||
// const ctx = canvas.value.getContext('2d');
|
||||
// ctx?.clearRect(0, 0, canvas.value.width, canvas.value.height);
|
||||
// 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 = {
|
||||
@ -260,7 +265,7 @@ watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.reques
|
||||
})
|
||||
const fn = debounce(() => {
|
||||
getData()
|
||||
}, 200)
|
||||
}, 1000)
|
||||
watch(() => props.chartConfig.customData!.mapId, fn)
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
<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>
|
||||
@ -1,16 +0,0 @@
|
||||
<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>
|
||||
@ -1,18 +0,0 @@
|
||||
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'
|
||||
}
|
||||
@ -1,291 +0,0 @@
|
||||
<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>
|
||||
@ -1,34 +0,0 @@
|
||||
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: '',
|
||||
})
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
<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>
|
||||
@ -1,18 +0,0 @@
|
||||
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'
|
||||
}
|
||||
@ -1,291 +0,0 @@
|
||||
<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,6 +1,4 @@
|
||||
import { Theme1Config } from './Theme1/index'
|
||||
import { Theme2Config } from './Theme2/index'
|
||||
import { Theme3Config } from './Theme3/index'
|
||||
// import { Theme1Config } from './Theme1/index'
|
||||
import { ComprehensivePUEConfig } from './ComprehensivePUE'
|
||||
import { DeviceAlarmOverviewConfig } from './DeviceAlarmOverview'
|
||||
import { RealTimeTrafficConfig } from './RealTimeTraffic'
|
||||
@ -11,9 +9,7 @@ import { GDMapConfig } from './GDMap'
|
||||
import { MonitorRealTimeEventsConfig } from './MonitorRealTimeEvents'
|
||||
|
||||
export default [
|
||||
Theme1Config,
|
||||
Theme2Config,
|
||||
Theme3Config,
|
||||
// Theme1Config,
|
||||
ComprehensivePUEConfig,
|
||||
DeviceAlarmOverviewConfig,
|
||||
RealTimeTrafficConfig,
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
export enum ChatCategoryEnum {
|
||||
CUSTOMCOMPONENTS = 'CustomComponents',
|
||||
BACKGROUNDS = 'Backgrounds',
|
||||
}
|
||||
|
||||
export enum ChatCategoryEnumName {
|
||||
CUSTOMCOMPONENTS = '自定义组件',
|
||||
CUSTOMCOMPONENTS = '自定义',
|
||||
BACKGROUNDS = '背景'
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import Backgrounds from './Backgrounds'
|
||||
import CustomComponents from './CustomComponents'
|
||||
|
||||
export const CustomComponentsList = [...CustomComponents]
|
||||
export const CustomComponentsList = [...Backgrounds, ...CustomComponents]
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
// import { Theme1Config } from './Theme1/index'
|
||||
|
||||
export default []
|
||||
@ -1,7 +0,0 @@
|
||||
export enum ChatCategoryEnum {
|
||||
THEMES = 'Themes',
|
||||
}
|
||||
|
||||
export enum ChatCategoryEnumName {
|
||||
THEMES = '主题',
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
import Themes from './Themes'
|
||||
|
||||
export const ThemesAndLayoutsList = [...Themes]
|
||||
4
src/packages/index.d.ts
vendored
4
src/packages/index.d.ts
vendored
@ -188,6 +188,7 @@ export enum PackagesCategoryEnum {
|
||||
DECORATES = 'Decorates',
|
||||
THEMESANDLAYOUTS = 'ThemesAndLayouts',
|
||||
CUSTOMCOMPONENTS = 'CustomComponents',
|
||||
BACKGROUNDS = 'Backgrounds',
|
||||
}
|
||||
|
||||
// 包分类名称
|
||||
@ -199,7 +200,8 @@ export enum PackagesCategoryName {
|
||||
ICONS = '图标',
|
||||
DECORATES = '小组件',
|
||||
THEMESANDLAYOUTS = '主题',
|
||||
CUSTOMCOMPONENTS = '自定义组件',
|
||||
CUSTOMCOMPONENTS = '自定义',
|
||||
BACKGROUNDS = '背景',
|
||||
}
|
||||
|
||||
// 获取组件
|
||||
|
||||
@ -4,7 +4,6 @@ import { InformationList } from '@/packages/components/Informations/index'
|
||||
// import { TableList } from '@/packages/components/Tables/index'
|
||||
// import { PhotoList } from '@/packages/components/Photos/index'
|
||||
import { IconList } from '@/packages/components/Icons/index'
|
||||
// import { ThemesAndLayoutsList } from '@/packages/components/ThemesAndLayouts/index'
|
||||
import { CustomComponentsList } from '@/packages/components/CustomComponents/index'
|
||||
import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
|
||||
|
||||
@ -29,7 +28,6 @@ export let packagesList: PackagesType = {
|
||||
[PackagesCategoryEnum.DECORATES]: DecorateList,
|
||||
// [PackagesCategoryEnum.PHOTOS]: PhotoList,
|
||||
[PackagesCategoryEnum.ICONS]: IconList,
|
||||
// [PackagesCategoryEnum.THEMESANDLAYOUTS]: ThemesAndLayoutsList,
|
||||
[PackagesCategoryEnum.CUSTOMCOMPONENTS]: CustomComponentsList,
|
||||
}
|
||||
|
||||
|
||||
@ -116,7 +116,8 @@ import {
|
||||
|
||||
import {
|
||||
AssignmentTurnedInRound as AssignmentTurnedInRoundIcon,
|
||||
CheckCircleOutlined as CheckCircleOutlinedIcon
|
||||
CheckCircleOutlined as CheckCircleOutlinedIcon,
|
||||
InsertPhotoSharp as InsertPhotoSharpIcon,
|
||||
} from '@vicons/material'
|
||||
|
||||
const ionicons5 = {
|
||||
@ -334,7 +335,9 @@ const material = {
|
||||
// 批量确认
|
||||
AssignmentTurnedInRoundIcon,
|
||||
// 圆圈 勾
|
||||
CheckCircleOutlinedIcon
|
||||
CheckCircleOutlinedIcon,
|
||||
// 背景图
|
||||
InsertPhotoSharpIcon,
|
||||
}
|
||||
|
||||
// https://www.xicons.org/#/ 还有很多
|
||||
|
||||
@ -9,6 +9,7 @@ import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayo
|
||||
const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
|
||||
const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon, AreaCustomIcon } = icon.carbon
|
||||
const { Apps20RegularIcon } = icon.fluent
|
||||
const { InsertPhotoSharpIcon } = icon.material
|
||||
|
||||
// 图表
|
||||
export type MenuOptionsType = {
|
||||
@ -50,6 +51,10 @@ const packagesListObj = {
|
||||
[PackagesCategoryEnum.CUSTOMCOMPONENTS]: {
|
||||
icon: renderIcon(AreaCustomIcon),
|
||||
label: PackagesCategoryName.CUSTOMCOMPONENTS
|
||||
},
|
||||
[PackagesCategoryEnum.BACKGROUNDS]: {
|
||||
icon: renderIcon(InsertPhotoSharpIcon),
|
||||
label: PackagesCategoryName.BACKGROUNDS
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,10 +76,10 @@ export const useAsideHook = () => {
|
||||
})
|
||||
}
|
||||
menuOptions.sort((a, b) => {
|
||||
if(a.key === 'ThemesAndLayouts') return -1
|
||||
else if(b.key === 'ThemesAndLayouts') return 1
|
||||
if(a.key === 'CustomComponents') return -1
|
||||
else if(b.key === 'CustomComponents') return 1
|
||||
if(a.key === PackagesCategoryEnum.BACKGROUNDS) return -1
|
||||
else if(b.key === PackagesCategoryEnum.BACKGROUNDS) return 1
|
||||
if(a.key === PackagesCategoryEnum.CUSTOMCOMPONENTS) return -1
|
||||
else if(b.key === PackagesCategoryEnum.CUSTOMCOMPONENTS) return 1
|
||||
else return 0
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="go-chart-configurations-data" v-if="targetData && !targetData.chartConfig.conDataKey">
|
||||
<div v-if="!IsStatic() && !targetData.chartConfig.conDataKey" class="go-chart-configurations-data">
|
||||
<setting-item-box name="数据源" :alone="true">
|
||||
<n-select v-model:value="targetData.commonData.currentSource" :options="sourceOptions" size="small"/>
|
||||
</setting-item-box>
|
||||
@ -22,7 +22,7 @@
|
||||
</n-input-group>
|
||||
</setting-item-box>
|
||||
</div>
|
||||
<div v-if="targetData && targetData.chartConfig.conDataKey">
|
||||
<div v-else-if="!IsStatic() && targetData.chartConfig.conDataKey">
|
||||
<component :is="targetData.chartConfig.conDataKey" :customData="targetData.customData" :request="targetData.request"></component>
|
||||
<setting-item-box v-if="targetData?.customData?.showInterval" name="更新间隔" :alone="true">
|
||||
<n-input-group>
|
||||
@ -40,6 +40,9 @@
|
||||
</n-input-group>
|
||||
</setting-item-box>
|
||||
</div>
|
||||
<div v-else-if="IsStatic()">
|
||||
暂无数据
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -52,10 +55,24 @@ import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
import { useTargetData } from '../hooks/useTargetData.hook'
|
||||
import { sourceOptions, selectTimeOptions } from './index.d'
|
||||
import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { PackagesCategoryEnum, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
|
||||
|
||||
// const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
|
||||
|
||||
const { targetData } = useTargetData() as { targetData: Ref<CreateComponentType | CreateComponentGroupType> }
|
||||
|
||||
/*
|
||||
* 通用组件: 通用数据
|
||||
* 自定义组件: 自定义数据
|
||||
* 静态组件: 无数据
|
||||
* */
|
||||
// 通用组件 自定义组件 静态组件
|
||||
|
||||
const IsStatic = () => {
|
||||
let arr = [
|
||||
PackagesCategoryEnum.BACKGROUNDS
|
||||
]
|
||||
return arr.some(_ => _ === targetData.value.chartConfig.category)
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user