gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

svg图片配置

main
userName 2025-02-07 16:53:55 +08:00
parent 06f497e2e4
commit aa33730345
18 changed files with 955 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/chart/decorates/title01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
src/assets/images/chart/decorates/title02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
src/assets/images/chart/decorates/title03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 KiB

23
src/packages/components/Decorates/Titles/Titles01/config.ts Normal file
View File

@ -0,0 +1,23 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { Titles01Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
dur: 0.5,
borderTitle: '费县林业防火平台',
borderTitleWidth: 1920,
borderTitleHeight: 98,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#8aaafb', '#1f33a2'],
backgroundColor: '#00000000'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = Titles01Config.key
public attr = { ...chartInitConfig, w: 1920, h: 98, zIndex: 1 }
public chartConfig = cloneDeep(Titles01Config)
public option = cloneDeep(option)
}

111
src/packages/components/Decorates/Titles/Titles01/config.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<CollapseItem name="标题" :expanded="true">
<SettingItemBox name="内容" :alone="true">
<n-input
size="small"
v-model:value="optionData.borderTitle"
:minlength="1"
type="text"
placeholder="请输入标题内容"
/>
</SettingItemBox>
<SettingItemBox name="样式">
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.borderTitleColor"
></n-color-picker>
</SettingItem>
<SettingItem name="文字大小">
<n-input-number
size="small"
v-model:value="optionData.borderTitleSize"
:min="12"
/>
</SettingItem>
<SettingItem name="高度">
<n-input-number
size="small"
v-model:value="optionData.borderTitleHeight"
:min="24"
/>
</SettingItem>
<SettingItem name="宽度">
<n-input-number
size="small"
v-model:value="optionData.borderTitleWidth"
:min="50"
:step="10"
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="边框" :expanded="true">
<SettingItemBox
:name="`颜色-${index + 1}`"
v-for="(item, index) in optionData.colors"
:key="index"
>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.colors[index]"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.colors[index] = option.colors[index]"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="动画" :expanded="true">
<SettingItemBox name="速度(s)">
<SettingItem>
<n-input-number
v-model:value="optionData.dur"
size="small"
:step="0.5"
:min="0.5"
></n-input-number>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="背景" :expanded="true">
<SettingItemBox name="颜色">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.backgroundColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

14
src/packages/components/Decorates/Titles/Titles01/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
export const Titles01Config: ConfigType = {
key: 'Titles01',
chartKey: 'VTitles01',
conKey: 'VCTitles01',
title: '标题-01',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'title01.png',
};

382
src/packages/components/Decorates/Titles/Titles01/index.vue Normal file
View File

@ -0,0 +1,382 @@
<template>
<div class="go-border-06">
<span class="text">{{ borderTitle }}</span>
<svg :width="w" :height="h">
<defs>
<radialGradient cx="50%" cy="155.043268%" fx="50%" fy="155.043268%" r="100.482374%" gradientTransform="translate(0.5, 1.5504), scale(0.0963, 1), rotate(90), scale(1, 4.0569), translate(-0.5, -1.5504)" id="radialGradient-1">
<stop stop-color="#608561" offset="0%"></stop>
<stop stop-color="#608561" stop-opacity="0.276934003" offset="48.9346591%"></stop>
<stop stop-color="#608561" stop-opacity="0" offset="100%"></stop>
</radialGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-2">
<stop stop-color="#EEEEEE" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#EAEAEA" offset="24.5007328%"></stop>
<stop stop-color="#DCDCDC" offset="74.8333658%"></stop>
<stop stop-color="#D8D8D8" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<rect id="path-3" x="0" y="0" width="899" height="54.0955035"></rect>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
<stop stop-color="#374536" offset="0%"></stop>
<stop stop-color="#98B394" offset="100%"></stop>
</linearGradient>
<rect id="path-6" x="0" y="0" width="899" height="54.0955035"></rect>
<linearGradient x1="102.302587%" y1="50%" x2="-24.4700794%" y2="50%" id="linearGradient-8">
<stop stop-color="#DCFFD9" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#DCFFD9" offset="12.3606862%"></stop>
<stop stop-color="#DCFFD9" stop-opacity="0.4" offset="99.9262456%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-9">
<stop stop-color="#374536" offset="0%"></stop>
<stop stop-color="#687B66" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
<stop stop-color="#374536" offset="0%"></stop>
<stop stop-color="#687B66" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0.641936189%" y2="50%" id="linearGradient-11">
<stop stop-color="#A1E6AC" offset="0%"></stop>
<stop stop-color="#3D6644" offset="36.0686189%"></stop>
<stop stop-color="#122115" stop-opacity="0.8" offset="99.9808785%"></stop>
</linearGradient>
<polygon
id="path-12"
:fill="colors[0]"
points="-7.8938096e-15 -2.62257315e-13 11 -2.62257315e-13 13.1616243 1.5 2.1616243 1.5"
>
<animate
attributeName="fill"
:values="`${colors[0]};${colors[1]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<!-- <polygon id="path-12" points="-7.8938096e-15 -2.62257315e-13 11 -2.62257315e-13 13.1616243 1.5 2.1616243 1.5"></polygon> -->
<filter x="-119.2%" y="-900.0%" width="338.5%" height="1900.0%" filterUnits="objectBoundingBox" id="filter-13">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<!-- <polygon id="path-14" points="15.6938967 3.81916286e-14 26.6938967 3.81916286e-14 28.855521 1.5 17.855521 1.5"></polygon> -->
<polygon
id="path-14"
:fill="colors[0]"
points="15.6938967 3.81916286e-14 26.6938967 3.81916286e-14 28.855521 1.5 17.855521 1.5"
>
<animate
attributeName="fill"
:values="`${colors[0]};${colors[1]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<filter x="-119.2%" y="-900.0%" width="338.5%" height="1900.0%" filterUnits="objectBoundingBox" id="filter-15">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<linearGradient x1="100%" y1="50%" x2="0.641936189%" y2="50%" id="linearGradient-16">
<stop stop-color="#A1E6AC" offset="0%"></stop>
<stop stop-color="#3D6644" offset="36.0686189%"></stop>
<stop stop-color="#122115" stop-opacity="0.8" offset="99.9808785%"></stop>
</linearGradient>
<!-- <polygon id="path-17" points="4.12319693e-14 3.81916286e-14 11 3.81916286e-14 13.1616243 1.5 2.1616243 1.5"></polygon> -->
<polygon
id="path-17"
:fill="colors[0]"
points="4.12319693e-14 3.81916286e-14 11 3.81916286e-14 13.1616243 1.5 2.1616243 1.5"
>
<animate
attributeName="fill"
:values="`${colors[0]};${colors[1]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<filter x="-119.2%" y="-900.0%" width="338.5%" height="1900.0%" filterUnits="objectBoundingBox" id="filter-18">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<!-- <polygon id="path-19" points="15.6938967 3.81916286e-14 26.6938967 3.81916286e-14 28.855521 1.5 17.855521 1.5"></polygon> -->
<polygon
id="path-19"
:fill="colors[0]"
points="15.6938967 3.81916286e-14 26.6938967 3.81916286e-14 28.855521 1.5 17.855521 1.5"
>
<animate
attributeName="fill"
:values="`${colors[0]};${colors[1]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<filter x="-119.2%" y="-900.0%" width="338.5%" height="1900.0%" filterUnits="objectBoundingBox" id="filter-20">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-导航页" transform="translate(0, 12)">
<g id="大标题" transform="translate(0, -12)">
<!-- <polygon id="路径-2" fill="#0D1A1A" opacity="0.398131" points="0 0 1920 0 1920 60.175159 1267.03384 60.175159 1229.01799 98.1910069 690.982007 98.1910069 652.966159 60.175159 0 60.175159"></polygon> -->
<polygon
id="路径-2"
:fill="colors[0]"
opacity="0.398131"
points="0 0 1920 0 1920 60.175159 1267.03384 60.175159 1229.01799 98.1910069 690.982007 98.1910069 652.966159 60.175159 0 60.175159"
>
<animate
attributeName="fill"
:values="`${colors[0]};${colors[1]};transparent`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<!-- <polygon id="路径-7" points="592.087862 51.8923346 656.687848 51.8923346 692.984451 90.1910069 1227.46256 90.1910069 1264.15332 51.8923346 1328.75331 51.8923346 1368.84881 11.7968311 552.71249 11.7968311"></polygon> -->
<polygon
id="路径-7"
:fill="colors[0]"
opacity="0.398131"
points="592.087862 51.8923346 656.687848 51.8923346 692.984451 90.1910069 1227.46256 90.1910069 1264.15332 51.8923346 1328.75331 51.8923346 1368.84881 11.7968311 552.71249 11.7968311"
>
<animate
attributeName="fill"
:values="`${colors[0]};${colors[1]};transparent`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<!-- <polygon id="路径-7" fill="url(#radialGradient-1)" transform="translate(960.073, 59.9939) scale(1, -1) translate(-960.073, -59.9939)" points="561.380192 57.8923346 625.980177 57.8923346 657.276781 91.1910069 857.883673 91.1910069 869.566445 102.191007 1048.45704 102.191007 1061.16622 91.1910069 1261.75488 91.1910069 1293.44565 57.8923346 1358.04564 57.8923346 1398.14114 17.7968311 522.00482 17.7968311"></polygon> -->
<polygon
id="路径-7"
fill="url(#radialGradient-1)"
transform="translate(960.073, 59.9939) scale(1, -1) translate(-960.073, -59.9939)"
points="561.380192 57.8923346 625.980177 57.8923346 657.276781 91.1910069 857.883673 91.1910069 869.566445 102.191007 1048.45704 102.191007 1061.16622 91.1910069 1261.75488 91.1910069 1293.44565 57.8923346 1358.04564 57.8923346 1398.14114 17.7968311 522.00482 17.7968311"
>
<animate
attributeName="fill"
:values="`${colors[0]};${colors[1]};transparent`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<g id="路径-5" transform="translate(1021.146, 42.0955)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="蒙版" fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
<path d="M-5.68434189e-14,48.3858482 L200.324958,48.3858482 C202.977123,48.3858482 205.520662,47.3322798 207.396025,45.456916 L239.106747,13.7461941 C240.982111,11.8708303 243.52565,10.8172619 246.177815,10.8172619 L898.854039,10.8172619 L898.854039,10.8172619" stroke="url(#linearGradient-5)" mask="url(#mask-4)"></path>
</g>
<g id="路径-5" transform="translate(449.5, 69.1433) scale(-1, 1) translate(-449.5, -69.1433)translate(0, 42.0955)">
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="蒙版" fill="url(#linearGradient-2)" xlink:href="#path-6"></use>
<path d="M0,48.3858482 L200.324958,48.3858482 C202.977123,48.3858482 205.520662,47.3322798 207.396025,45.456916 L239.106747,13.7461941 C240.982111,11.8708303 243.52565,10.8172619 246.177815,10.8172619 L898.854039,10.8172619 L898.854039,10.8172619" stroke="url(#linearGradient-5)" mask="url(#mask-7)"></path>
</g>
<g id="编组-4" transform="translate(1216.043, 48.8848)" fill="#808080">
<!-- <polygon id="矩形" opacity="0.25" transform="translate(27.1616, 1.4403) scale(-1, 1) translate(-27.1616, -1.4403)" points="19.5808122 1.54985187e-13 31.5808122 1.54985187e-13 34.7424365 2.88067666 22.7424365 2.88067666"></polygon> -->
<polygon
id="矩形"
opacity="0.25"
transform="translate(27.1616, 1.4403) scale(-1, 1) translate(-27.1616, -1.4403)"
points="19.5808122 1.54985187e-13 31.5808122 1.54985187e-13 34.7424365 2.88067666 22.7424365 2.88067666"
>
<animate
attributeName="fill"
:values="`${colors[1]};${colors[0]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<!-- <polygon id="矩形备份" opacity="0.5" transform="translate(17.5808, 11.1403) scale(-1, 1) translate(-17.5808, -11.1403)" points="10 9.7 22 9.7 25.1616243 12.5806767 13.1616243 12.5806767"></polygon> -->
<polygon
id="矩形备份"
opacity="0.5"
transform="translate(17.5808, 11.1403) scale(-1, 1) translate(-17.5808, -11.1403)"
points="10 9.7 22 9.7 25.1616243 12.5806767 13.1616243 12.5806767"
>
<animate
attributeName="fill"
:values="`${colors[1]};${colors[0]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<!-- <polygon id="矩形备份-2" transform="translate(7.5808, 21.1403) scale(-1, 1) translate(-7.5808, -21.1403)" points="-2.12736765e-14 19.7 12 19.7 15.1616243 22.5806767 3.1616243 22.5806767"></polygon> -->
<polygon
id="矩形备份-2"
transform="translate(7.5808, 21.1403) scale(-1, 1) translate(-7.5808, -21.1403)"
points="-2.12736765e-14 19.7 12 19.7 15.1616243 22.5806767 3.1616243 22.5806767"
>
<animate
attributeName="fill"
:values="`${colors[1]};${colors[0]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
</g>
<g id="编组-4" transform="translate(687.7357, 60.1752) scale(-1, 1) translate(-687.7357, -60.1752)translate(670.3645, 48.8848)" fill="#808080">
<!-- <polygon id="矩形" opacity="0.25" transform="translate(27.1616, 1.4403) scale(-1, 1) translate(-27.1616, -1.4403)" points="19.5808122 -2.17302961e-13 31.5808122 -2.17302961e-13 34.7424365 2.88067666 22.7424365 2.88067666"></polygon> -->
<polygon
id="矩形"
opacity="0.25"
transform="translate(27.1616, 1.4403) scale(-1, 1) translate(-27.1616, -1.4403)"
points="19.5808122 -2.17302961e-13 31.5808122 -2.17302961e-13 34.7424365 2.88067666 22.7424365 2.88067666"
>
<animate
attributeName="fill"
:values="`${colors[1]};${colors[0]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<!-- <polygon id="矩形备份" opacity="0.5" transform="translate(17.5808, 11.1403) scale(-1, 1) translate(-17.5808, -11.1403)" points="10 9.7 22 9.7 25.1616243 12.5806767 13.1616243 12.5806767"></polygon> -->
<polygon
id="矩形备份"
opacity="0.5"
transform="translate(17.5808, 11.1403) scale(-1, 1) translate(-17.5808, -11.1403)"
points="10 9.7 22 9.7 25.1616243 12.5806767 13.1616243 12.5806767"
>
<animate
attributeName="fill"
:values="`${colors[1]};${colors[0]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<!-- <polygon id="矩形备份-2" transform="translate(7.5808, 21.1403) scale(-1, 1) translate(-7.5808, -21.1403)" points="-9.70605424e-15 19.7 12 19.7 15.1616243 22.5806767 3.1616243 22.5806767"></polygon> -->
<polygon
id="矩形备份-2"
transform="translate(7.5808, 21.1403) scale(-1, 1) translate(-7.5808, -21.1403)"
points="-2.12736765e-14 19.7 12 19.7 15.1616243 22.5806767 3.1616243 22.5806767"
>
<animate
attributeName="fill"
:values="`${colors[1]};${colors[0]};transparent`"
:dur="`${dur + 1}s`"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
</g>
<path d="M986.203603,60.175159 L1634.1992,60.175159 C1637.3818,60.175159 1640.43404,61.4394411 1642.68448,63.6898776 L1673.67089,94.6762883 C1675.92133,96.9267248 1678.97357,98.1910069 1682.15617,98.1910069 L1896.9182,98.1910069 L1896.9182,98.1910069 L1905.14781,91.4206194 L1920,91.4206194" id="路径" stroke="url(#linearGradient-8)" transform="translate(1453.1018, 79.1831) scale(-1, 1) translate(-1453.1018, -79.1831)"></path>
<path d="M0,60.175159 L647.995597,60.175159 C651.178194,60.175159 654.230441,61.4394411 656.480878,63.6898776 L687.467289,94.6762883 C689.717725,96.9267248 692.769972,98.1910069 695.95257,98.1910069 L910.714599,98.1910069 L910.714599,98.1910069 L918.944212,91.4206194 L933.796397,91.4206194" id="路径" stroke="url(#linearGradient-8)"></path>
<circle id="椭圆形" fill="#60715C" cx="933.796397" cy="91.6910069" r="1.5"></circle>
<circle id="椭圆形备份" fill="#60715C" cx="986.203603" cy="91.6910069" r="1.5"></circle>
<g id="编组-5" transform="translate(797.7707, 107.191)">
<line x1="0" y1="1.5" x2="91.5306326" y2="1.5" id="路径-6" stroke="url(#linearGradient-9)" opacity="0.6"></line>
<circle id="椭圆形" fill="#6C8069" cx="58.0306326" cy="1.5" r="1.5"></circle>
</g>
<g id="编组-5" transform="translate(1079.3551, 108.691) scale(-1, 1) translate(-1079.3551, -108.691)translate(1033.5898, 107.191)">
<line x1="0" y1="1.5" x2="91.5306326" y2="1.5" id="路径-6" stroke="url(#linearGradient-9)" opacity="0.6"></line>
<circle id="椭圆形" fill="#6C8069" cx="28.0306326" cy="1.5" r="1.5"></circle>
<circle id="椭圆形" fill="#6C8069" cx="90.0306326" cy="1.5" r="1.5"></circle>
</g>
<g id="编组-5" transform="translate(277.3287, 74.1433)">
<line x1="2.1801759e-14" y1="1.5" x2="365.462877" y2="1.5" id="路径-6" stroke="url(#linearGradient-10)" opacity="0.399999976"></line>
<path d="M301.962877,3 C302.791304,3 303.462877,2.32842712 303.462877,1.5 C303.462877,0.671572875 302.791304,0 301.962877,0 C301.13445,0 300.462877,0.671572875 300.462877,1.5 C300.462877,2.32842712 301.13445,3 301.962877,3 Z" id="椭圆形" fill="#4E5C4C"></path>
<circle id="椭圆形" fill="#4E5C4C" cx="131.962877" cy="1.5" r="1.5"></circle>
<path d="M363.962877,3 C364.791304,3 365.462877,2.32842712 365.462877,1.5 C365.462877,0.671572875 364.791304,0 363.962877,0 C363.13445,0 362.462877,0.671572875 362.462877,1.5 C362.462877,2.32842712 363.13445,3 363.962877,3 Z" id="椭圆形" fill="#4E5C4C"></path>
</g>
<g id="编组-5" transform="translate(1461.7682, 75.6433) scale(-1, 1) translate(-1461.7682, -75.6433)translate(1279.0368, 74.1433)">
<line x1="-6.61995048e-15" y1="1.5" x2="365.462877" y2="1.5" id="路径-6" stroke="url(#linearGradient-10)" opacity="0.399999976"></line>
<path d="M273.962877,3 C274.791304,3 275.462877,2.32842712 275.462877,1.5 C275.462877,0.671572875 274.791304,0 273.962877,0 C273.13445,0 272.462877,0.671572875 272.462877,1.5 C272.462877,2.32842712 273.13445,3 273.962877,3 Z" id="椭圆形" fill="#4E5C4C"></path>
<circle id="椭圆形" fill="#4E5C4C" cx="47.9628773" cy="1.5" r="1.5"></circle>
</g>
<g id="编组-3" transform="translate(591.0082, 48.0955)">
<path d="M0,5.07965553 L5.07965553,0 L64.7090785,-8.8817842e-15 C67.8916764,-1.22931327e-14 70.9439234,1.26428208 73.1943599,3.51471863 L104.538881,34.85924 C106.039172,36.359531 108.074004,37.2023858 110.195736,37.2023858 L170.93164,37.2023858 L170.93164,37.2023858 L176.824757,42.0955035 L107.225226,42.0955035 C105.140415,42.0955035 103.13796,41.2816494 101.644261,39.8272415 L69.4522629,8.48204842 C67.2117139,6.30043667 64.2080318,5.07965553 61.0808143,5.07965553 L0,5.07965553 L0,5.07965553 Z" id="路径-4" fill="url(#linearGradient-11)"></path>
<g id="编组" transform="translate(178.9918, 36.9045)">
<g id="矩形">
<use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-12"></use>
</g>
<g id="矩形" opacity="0.399999976">
<use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-14"></use>
</g>
</g>
</g>
<g id="编组-2" transform="translate(1122, 48.0955)">
<path d="M30.5867884,5.07965553 L35.6664439,0 L96.9527212,3.55271368e-15 C99.0744531,3.16295785e-15 101.109284,0.842854723 102.609575,2.34314575 L135.12567,34.85924 C136.625961,36.359531 138.660792,37.2023858 140.782524,37.2023858 L201.939846,37.2023858 L201.939846,37.2023858 L207.832964,42.0955035 L137.812015,42.0955035 C135.727203,42.0955035 133.724748,41.2816494 132.231049,39.8272415 L98.8742812,7.34791746 C97.3805819,5.89350962 95.3781272,5.07965553 93.2933155,5.07965553 L30.5867884,5.07965553 L30.5867884,5.07965553 Z" id="路径-4" fill="url(#linearGradient-16)" transform="translate(119.2099, 21.0478) scale(-1, 1) translate(-119.2099, -21.0478)"></path>
<g id="编组" transform="translate(14.4278, 37.6545) scale(-1, 1) translate(-14.4278, -37.6545)translate(0, 36.9045)">
<g id="矩形">
<use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-17"></use>
</g>
<g id="矩形" opacity="0.399999976">
<use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-19"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</template>
<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { getUUID } from '@/utils'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const {
colors,
dur,
borderTitle,
borderTitleColor,
borderTitleSize,
borderTitleHeight,
borderTitleWidth,
backgroundColor
} = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>
@include go('border-06') {
position: relative;
display: flex;
justify-content: center;
align-items: center;
svg {
position: absolute;
z-index: -1;
}
.text {
color: v-bind('borderTitleColor');
font-size: v-bind('borderTitleSize+"px"');
}
}
</style>

23
src/packages/components/Decorates/Titles/Titles02/config.ts Normal file
View File

@ -0,0 +1,23 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { Titles02Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
dur: 0.5,
borderTitle: '电子沙盘',
borderTitleWidth: 458,
borderTitleHeight: 183,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#8aaafb', '#1f33a2'],
backgroundColor: '#00000000'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = Titles02Config.key
public attr = { ...chartInitConfig, w: 458, h: 183, zIndex: 1 }
public chartConfig = cloneDeep(Titles02Config)
public option = cloneDeep(option)
}

111
src/packages/components/Decorates/Titles/Titles02/config.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<CollapseItem name="标题" :expanded="true">
<SettingItemBox name="内容" :alone="true">
<n-input
size="small"
v-model:value="optionData.borderTitle"
:minlength="1"
type="text"
placeholder="请输入标题内容"
/>
</SettingItemBox>
<SettingItemBox name="样式">
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.borderTitleColor"
></n-color-picker>
</SettingItem>
<SettingItem name="文字大小">
<n-input-number
size="small"
v-model:value="optionData.borderTitleSize"
:min="12"
/>
</SettingItem>
<SettingItem name="高度">
<n-input-number
size="small"
v-model:value="optionData.borderTitleHeight"
:min="24"
/>
</SettingItem>
<SettingItem name="宽度">
<n-input-number
size="small"
v-model:value="optionData.borderTitleWidth"
:min="50"
:step="10"
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="边框" :expanded="true">
<SettingItemBox
:name="`颜色-${index + 1}`"
v-for="(item, index) in optionData.colors"
:key="index"
>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.colors[index]"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.colors[index] = option.colors[index]"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="动画" :expanded="true">
<SettingItemBox name="速度(s)">
<SettingItem>
<n-input-number
v-model:value="optionData.dur"
size="small"
:step="0.5"
:min="0.5"
></n-input-number>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="背景" :expanded="true">
<SettingItemBox name="颜色">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.backgroundColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

14
src/packages/components/Decorates/Titles/Titles02/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
export const Titles02Config: ConfigType = {
key: 'Titles02',
chartKey: 'VTitles02',
conKey: 'VCTitles02',
title: '标题-02',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'title02.png',
};

58
src/packages/components/Decorates/Titles/Titles02/index.vue Normal file
View File

File diff suppressed because one or more lines are too long

23
src/packages/components/Decorates/Titles/Titles03/config.ts Normal file
View File

@ -0,0 +1,23 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { Titles02Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
dur: 0.5,
borderTitle: '数据中心',
borderTitleWidth: 458,
borderTitleHeight: 183,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#8aaafb', '#1f33a2'],
backgroundColor: '#00000000'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = Titles03Config.key
public attr = { ...chartInitConfig, w: 458, h: 183, zIndex: 1 }
public chartConfig = cloneDeep(Titles03Config)
public option = cloneDeep(option)
}

111
src/packages/components/Decorates/Titles/Titles03/config.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<CollapseItem name="标题" :expanded="true">
<SettingItemBox name="内容" :alone="true">
<n-input
size="small"
v-model:value="optionData.borderTitle"
:minlength="1"
type="text"
placeholder="请输入标题内容"
/>
</SettingItemBox>
<SettingItemBox name="样式">
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.borderTitleColor"
></n-color-picker>
</SettingItem>
<SettingItem name="文字大小">
<n-input-number
size="small"
v-model:value="optionData.borderTitleSize"
:min="12"
/>
</SettingItem>
<SettingItem name="高度">
<n-input-number
size="small"
v-model:value="optionData.borderTitleHeight"
:min="24"
/>
</SettingItem>
<SettingItem name="宽度">
<n-input-number
size="small"
v-model:value="optionData.borderTitleWidth"
:min="50"
:step="10"
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="边框" :expanded="true">
<SettingItemBox
:name="`颜色-${index + 1}`"
v-for="(item, index) in optionData.colors"
:key="index"
>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.colors[index]"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.colors[index] = option.colors[index]"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="动画" :expanded="true">
<SettingItemBox name="速度(s)">
<SettingItem>
<n-input-number
v-model:value="optionData.dur"
size="small"
:step="0.5"
:min="0.5"
></n-input-number>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="背景" :expanded="true">
<SettingItemBox name="颜色">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.backgroundColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

14
src/packages/components/Decorates/Titles/Titles03/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
export const Titles03Config: ConfigType = {
key: 'Titles03',
chartKey: 'VTitles03',
conKey: 'VCTitles03',
title: '标题-03',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.DECORATES,
chartFrame: ChartFrameEnum.STATIC,
image: 'title03.png',
};

58
src/packages/components/Decorates/Titles/Titles03/index.vue Normal file
View File

File diff suppressed because one or more lines are too long

9
src/packages/components/Decorates/Titles/index.ts Normal file
View File

@ -0,0 +1,9 @@
import { Titles01Config } from './Titles01/index';
import { Titles02Config } from './Titles02/index';
import { Titles03Config } from './Titles03/index';
export default [
Titles01Config,
Titles02Config,
Titles03Config
];

2
src/packages/components/Decorates/index.d.ts vendored
View File

@ -5,6 +5,7 @@ export enum ChatCategoryEnum {
THREE = 'Three',
MORE = 'Mores',
SVG = 'Svg',
TITLE = 'Titles',
}
export enum ChatCategoryEnumName {
@ -14,4 +15,5 @@ export enum ChatCategoryEnumName {
THREE = '三维',
MORE = '更多',
SVG = 'svg',
TITLE = '标题',
}

3
src/packages/components/Decorates/index.ts
View File

@ -4,5 +4,6 @@ import FlowChart from './FlowChart';
import Three from './Three';
import Mores from './Mores';
import Svg from './Svg';
import Titles from './Titles';
export const DecorateList = [...Borders, ...Decorates, ...FlowChart, ...Three, ...Svg, ...Mores];
export const DecorateList = [...Borders, ...Decorates, ...FlowChart, ...Three, ...Svg, ...Titles, ...Mores];