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

组件封装修改

main
userName 2025-02-13 16:58:32 +08:00
parent 98faea32bb
commit 6a61f178b7
29 changed files with 694 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/chart/units/titlebtnleft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/chart/units/titlebtnleftactive.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/chart/units/titlebtnright.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/images/chart/units/titlebtnrightactive.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/assets/images/chart/units/toptitle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 508 KiB

2
src/packages/components/Decorates/Titles/Titles02/config.ts
View File

@ -5,7 +5,7 @@ import { Titles02Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
dur: 0.5,
boxId: 'linearGradientColorLeft',
borderTitle: '电子沙盘',
borderTitleWidth: 456,
borderTitleHeight: 190,

9
src/packages/components/Decorates/Titles/Titles02/config.vue
View File

@ -1,5 +1,14 @@
<template>
<CollapseItem name="标题" :expanded="true">
<SettingItemBox name="Id" :alone="true">
<n-input
size="small"
v-model:value="optionData.boxId"
:minlength="1"
type="text"
placeholder="请输入Id"
/>
</SettingItemBox>
<SettingItemBox name="内容" :alone="true">
<n-input
size="small"

75
src/packages/components/Decorates/Titles/Titles02/index.vue
View File

@ -2,42 +2,70 @@
<div class="go-title-02">
<svg :width="w" :height="h">
<defs>
<linearGradient x1="101.442215%" y1="50%" x2="17.1246178%" y2="50%" id="linearGradient02-1">
<linearGradient x1="101.442215%" y1="50%" x2="17.1246178%" y2="50%" :id="`1-${boxId}`" >
<stop :stop-color="colors[1]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[1]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient02-2">
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`2-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[0]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient02-3">
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`3-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[0]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4839755%" id="linearGradient02-4">
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4839755%" :id="`4-${boxId}`">
<stop :stop-color="colors[0]" offset="0%"></stop>
<stop :stop-color="colors[0]" offset="50.0147947%"></stop>
<stop :stop-color="colors[0]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient02-5">
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`5-${boxId}`">
<stop :stop-color="colors[1]" offset="0%"></stop>
<stop :stop-color="colors[1]" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-导航页-图标区" transform="translate(-138, -5)">
<g id="图形-左" transform="translate(138, 8)">
<polygon id="矩形" class="fill" opacity="0.4" stroke-width="2" points="128 22 455 22 455 162 128 162 186 89.8917957"></polygon>
<polygon id="矩形" class="fill" opacity="0.1" points="128 22 455 22 455 162 128 162 128 89.637655"></polygon>
<rect id="矩形" class="fill" opacity="0.752117339" x="276" y="60" width="123" height="65"></rect>
<rect id="矩形" class="fill" opacity="0.752117339" transform="translate(214.5, 92.5) scale(-1, 1) translate(-214.5, -92.5)" x="153" y="60" width="123" height="65"></rect>
<g id="编组-6" >
<polygon id="多边形" class="fill" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon>
<polygon id="多边形" class="stroke" stroke-width="4" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon>
</g>
</g>
</g>
</g>
<g id="林业防火-导航页-图标区" transform="translate(-138, -5)">
<g id="图形-左" transform="translate(138, 8)">
<polygon class="polychild1" id="矩形" :stroke="`url(#1-${boxId})`" stroke-width="2" points="128 22 455 22 455 162 128 162 186 89.8917957"></polygon>
<polygon id="矩形" :fill="`url(#2-${boxId})`" points="128 22 455 22 455 162 128 162 128 89.637655"></polygon>
<!-- w: 456, h: 190 -->
<!-- <polygon
id="矩形" stroke-width="2"
:stroke="`url(#1-${boxId})`"
:points="`128 ${h - 22} 455 ${h - 22} 455 ${h - 162} 128 ${h - 162} 186 ${h - 89.8917957}`"
/>
<polygon
id="矩形"
:fill="`url(#2-${boxId})`"
:points="`${w - 128} 22 ${w - 455} 22 ${w - 455} 162 ${w - 128} 162 ${w - 128} 89.637655`"
/> -->
<rect id="矩形" :fill="`url(#3-${boxId})`" opacity="0.752117339" x="276" y="60" width="123" height="65"></rect>
<rect id="矩形" :fill="`url(#3-${boxId})`" opacity="0.752117339" transform="translate(214.5, 92.5) scale(-1, 1) translate(-214.5, -92.5)" x="153" y="60" width="123" height="65"></rect>
<g id="编组-6">
<!-- w: 456, h: 190 -->
<polygon id="多边形" :fill="`url(#4-${boxId})`" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon>
<polygon id="多边形" :stroke="`url(#5-${boxId})`" stroke-width="4" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon>
<!-- w: 456, h: 190 -->
<!-- <polygon
id="多边形"
:fill="`url(#4-${boxId})`"
:points="`${w - 92} 0 ${w - 171.674337} 46 ${w - 171.674337} 138 ${w - 92} 184 ${w - 12.3256629} 138 ${w - 12.3256629} 46`"
/> -->
<!-- <polygon
id="多边形"
:fill="`url(#4-${boxId})`"
:points="`${w/4.8} 5 ${w/2.6} ${h/4} ${w/2.6} ${h/4*3} ${w/4.8} ${h-5} 12.3256629 ${h/4*3} 12.3256629 ${h/4}`"
/>
<polygon
id="多边形" stroke-width="4"
:stroke="`url(#5-${boxId})`"
:points="`${w/4.8} 5 ${w/2.6} ${h/4} ${w/2.6} ${h/4*3} ${w/4.8} ${h-5} 12.3256629 ${h/4*3} 12.3256629 ${h/4}`"
/> -->
</g>
</g>
</g>
</g>
</svg>
</div>
</template>
@ -58,7 +86,7 @@ const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const {
colors,
dur,
boxId,
borderTitle,
borderTitleColor,
borderTitleSize,
@ -79,15 +107,6 @@ const {
position: absolute;
z-index: -1;
}
.fill {
fill: v-bind('colors[0]');
}
.fill-none {
fill: none;
}
.stroke {
stroke: v-bind('colors[1]');
}
.text {
color: v-bind('borderTitleColor');
font-size: v-bind('borderTitleSize+"px"');

4
src/packages/components/Decorates/Titles/Titles03/config.ts
View File

@ -5,8 +5,8 @@ import { Titles03Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
dur: 0.5,
borderTitle: '数据中心',
boxId: "linearGradientColorRight",
borderTitle: '',
borderTitleWidth: 456,
borderTitleHeight: 190,
borderTitleSize: 18,

9
src/packages/components/Decorates/Titles/Titles03/config.vue
View File

@ -1,5 +1,14 @@
<template>
<CollapseItem name="标题" :expanded="true">
<SettingItemBox name="Id" :alone="true">
<n-input
size="small"
v-model:value="optionData.boxId"
:minlength="1"
type="text"
placeholder="请输入Id"
/>
</SettingItemBox>
<SettingItemBox name="内容" :alone="true">
<n-input
size="small"

23
src/packages/components/Decorates/Titles/Titles03/index.vue
View File

@ -3,24 +3,24 @@
<svg :width="w" :height="h">
<title>图形-右@2x</title>
<defs>
<linearGradient x1="101.442215%" y1="50%" x2="17.1246178%" y2="50%" id="linearGradient03-1">
<linearGradient x1="101.442215%" y1="50%" x2="17.1246178%" y2="50%" :id="`11-${boxId}`">
<stop :stop-color="colors[1]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[1]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient03-2">
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`22-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[0]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient03-3">
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`33-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[0]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4839755%" id="linearGradient03-4">
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4839755%" :id="`44-${boxId}`">
<stop :stop-color="colors[0]" offset="0%"></stop>
<stop :stop-color="colors[0]" offset="50.0147947%"></stop>
<stop :stop-color="colors[0]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient03-5">
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`55-${boxId}`">
<stop :stop-color="colors[1]" offset="0%"></stop>
<stop :stop-color="colors[1]" offset="100%"></stop>
</linearGradient>
@ -28,13 +28,13 @@
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-导航页-图标区" transform="translate(-747, -5)">
<g id="图形-右" transform="translate(975.5, 100) scale(-1, 1) translate(-975.5, -100)translate(748, 8)">
<polygon id="矩形" class="fill" opacity="0.4" stroke-width="2" points="128 22 455 22 455 162 128 162 186 89.8917957"></polygon>
<polygon id="矩形" class="fill" opacity="0.1" points="128 22 455 22 455 162 128 162 128 89.637655"></polygon>
<rect id="矩形" class="fill" opacity="0.752117339" x="276" y="60" width="123" height="65"></rect>
<rect id="矩形" class="fill" opacity="0.752117339" transform="translate(214.5, 92.5) scale(-1, 1) translate(-214.5, -92.5)" x="153" y="60" width="123" height="65"></rect>
<polygon id="矩形" :stroke="`url(#11-${boxId})`" stroke-width="2" points="128 22 455 22 455 162 128 162 186 89.8917957"></polygon>
<polygon id="矩形" :fill="`url(#22-${boxId})`" points="128 22 455 22 455 162 128 162 128 89.637655"></polygon>
<rect id="矩形" :fill="`url(#33-${boxId})`" x="276" y="60" width="123" height="65"></rect>
<rect id="矩形" :fill="`url(#33-${boxId})`" transform="translate(214.5, 92.5) scale(-1, 1) translate(-214.5, -92.5)" x="153" y="60" width="123" height="65"></rect>
<g id="编组-6">
<polygon id="多边形" class="fill" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon>
<polygon id="多边形" class="stroke" stroke-width="4" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon>
<polygon id="多边形" :fill="`url(#44-${boxId})`" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon>
<polygon id="多边形" :stroke="`url(#55-${boxId})`" stroke-width="4" points="92 0 171.674337 46 171.674337 138 92 184 12.3256629 138 12.3256629 46"></polygon>
</g>
</g>
</g>
@ -58,6 +58,7 @@ const props = defineProps({
const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const {
boxId,
colors,
borderTitle,
borderTitleColor,

23
src/packages/components/Units/Titles/TitlesBtn/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 { TitlesBtnConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
dur: 0.5,
borderTitle: '按钮',
borderTitleWidth: 124,
borderTitleHeight: 30,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#0E8A6D', '#02261C'],
backgroundColor: '#00000000'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TitlesBtnConfig.key
public attr = { ...chartInitConfig, w: 124, h: 30, zIndex: 1 }
public chartConfig = cloneDeep(TitlesBtnConfig)
public option = cloneDeep(option)
}

111
src/packages/components/Units/Titles/TitlesBtn/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/Units/Titles/TitlesBtn/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 TitlesBtnConfig: ConfigType = {
key: 'TitlesBtn',
chartKey: 'VTitlesBtn',
conKey: 'VCTitlesBtn',
title: '标题按钮',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
image: 'titlebtnleft.png',
};

109
src/packages/components/Units/Titles/TitlesBtn/index.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<div class="go-title-03">
<svg :width="w" :height="h">
<title>编组 39</title>
<defs>
<linearGradient x1="-48.389998%" y1="50%" x2="76.7832982%" y2="50%" id="linearGradientTitlesBtn-1">
<stop stop-color="#131415" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#008C47" stop-opacity="0.950850141" offset="95.0850141%"></stop>
<stop stop-color="#008C47" offset="100%"></stop>
</linearGradient>
<linearGradient x1="97.1573557%" y1="50%" x2="4.12707014%" y2="50%" id="linearGradientTitlesBtn-2">
<stop stop-color="#02C175" offset="0%"></stop>
<stop stop-color="#02AD69" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="47.4330881%" x2="94.7041474%" y2="52.5669119%" id="linearGradientTitlesBtn-3">
<stop stop-color="#008C46" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#06C869" offset="100%"></stop>
</linearGradient>
<linearGradient x1="99.7047264%" y1="50%" x2="0%" y2="50%" id="linearGradientTitlesBtn-4">
<stop stop-color="#02B56D" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#008C47" offset="53.8476904%"></stop>
<stop stop-color="#02B56D" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="99.7177871%" y1="62.6696413%" x2="3.44509591%" y2="36.1238825%" id="linearGradientTitlesBtn-5">
<stop stop-color="#009045" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#009045" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="49.88411%" x2="0%" y2="50%" id="linearGradientTitlesBtn-6">
<stop stop-color="#02C175" stop-opacity="0.64290827" offset="0%"></stop>
<stop stop-color="#02C074" offset="54.9861881%"></stop>
<stop stop-color="#02C175" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-智览-切图版" transform="translate(-389, -44)">
<g id="可视化" transform="translate(-11, -21)">
<g id="大标题top" transform="translate(8, 22)">
<g id="切换" transform="translate(392, 43)">
<g id="编组-39" transform="translate(0.8348, 0.6849)">
<polygon id="路径-3" stroke="url(#linearGradientTitlesBtn-2)" stroke-width="0.816425121" fill="url(#linearGradientTitlesBtn-1)" fill-rule="nonzero" points="106.495637 0.315087917 71.7901188 0.315087917 74.9936791 3.39393432 38.2223926 3.39393432 35.1245933 0.315087917 -1.40971679e-11 0.315087917 17.5010743 27.9924201 115.594079 27.9924201 120.538296 22.1090638"></polygon>
<polygon id="路径-3" stroke="url(#linearGradientTitlesBtn-3)" stroke-width="0.189140595" fill-rule="nonzero" points="103.868366 0.315087917 99.7006719 0.315087917 96.697343 3.39393432 32.3823889 4.55198029 38.6045823 0.315087917 1.88621157 0.315087917 18.7107718 26.5927674 113.818559 26.5927674 117.861786 21.8195602"></polygon>
<polyline id="路径-3" stroke="url(#linearGradientTitlesBtn-4)" stroke-width="0.226968714" points="2.79998169 2.31508792 34.8046006 2.31508792 38.9023999 5.39393432 77.5021144 5.39393432 71.7198883 2.31508792"></polyline>
<polygon id="矩形" fill="#02B56D" fill-rule="nonzero" points="37.398018 0 69.1753804 0 71.4939791 2.31508792 39.7434169 2.31508792"></polygon>
<g id="编组-20" transform="translate(92.3751, 19.6168)" fill="url(#linearGradientTitlesBtn-5)" fill-rule="nonzero">
<path d="M2.17437277,0 L6.46572278,6.94827586 L4.29135001,6.94827586 L0,0 L2.17437277,0 Z M8.46860977,0 L12.7599597,6.94827586 L8.75453622,6.94827586 L4.46318621,0 L8.46860977,0 Z M3.66210151,0 L7.95345152,6.94827586 L7.26680749,6.94827586 L2.97545747,0 L3.66210151,0 Z" id="形状结合"></path>
</g>
<polyline id="路径-117" stroke="url(#linearGradientTitlesBtn-6)" stroke-width="0.226968714" points="13.6235024 20.8195602 32.6726743 20.8195602 36.5953008 25.8195602 104.453167 25.8195602 107.820646 20.8195602 117.479623 20.8195602"></polyline>
<polygon id="矩形" fill="#EBBE10" points="121.658691 23.3287147 123.16516 25.8219013 120.895552 28.3050479 117.479623 28.3150879"></polygon>
</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,
borderTitle,
borderTitleColor,
borderTitleSize,
borderTitleHeight,
borderTitleWidth,
backgroundColor
} = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>
@include go('title-03') {
position: relative;
display: flex;
justify-content: center;
align-items: center;
svg {
position: absolute;
z-index: -1;
}
.fill {
fill: v-bind('colors[0]');
}
.fill-none {
fill: none;
}
.stroke {
stroke: v-bind('colors[1]');
}
.text {
color: v-bind('borderTitleColor');
font-size: v-bind('borderTitleSize+"px"');
}
}
</style>

23
src/packages/components/Units/Titles/TitlesBtnActive/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 { TitlesBtnActiveConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
dur: 0.5,
borderTitle: '按钮选中',
borderTitleWidth: 124,
borderTitleHeight: 30,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#0E8A6D', '#02261C'],
backgroundColor: '#00000000'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TitlesBtnActiveConfig.key
public attr = { ...chartInitConfig, w: 124, h: 30, zIndex: 1 }
public chartConfig = cloneDeep(TitlesBtnActiveConfig)
public option = cloneDeep(option)
}

111
src/packages/components/Units/Titles/TitlesBtnActive/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/Units/Titles/TitlesBtnActive/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 TitlesBtnActiveConfig: ConfigType = {
key: 'TitlesBtnActive',
chartKey: 'VTitlesBtnActive',
conKey: 'VCTitlesBtnActive',
title: '标题按钮',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
image: 'titlebtnleftactive.png',
};

109
src/packages/components/Units/Titles/TitlesBtnActive/index.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<div class="go-title-03">
<svg :width="w" :height="h">
<title>编组 39</title>
<defs>
<linearGradient x1="-48.389998%" y1="50%" x2="76.7832982%" y2="50%" id="linearGradientTitlesBtn-1">
<stop stop-color="#131415" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#008C47" stop-opacity="0.950850141" offset="95.0850141%"></stop>
<stop stop-color="#008C47" offset="100%"></stop>
</linearGradient>
<linearGradient x1="97.1573557%" y1="50%" x2="4.12707014%" y2="50%" id="linearGradientTitlesBtn-2">
<stop stop-color="#02C175" offset="0%"></stop>
<stop stop-color="#02AD69" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="47.4330881%" x2="94.7041474%" y2="52.5669119%" id="linearGradientTitlesBtn-3">
<stop stop-color="#008C46" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#06C869" offset="100%"></stop>
</linearGradient>
<linearGradient x1="99.7047264%" y1="50%" x2="0%" y2="50%" id="linearGradientTitlesBtn-4">
<stop stop-color="#02B56D" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#008C47" offset="53.8476904%"></stop>
<stop stop-color="#02B56D" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="99.7177871%" y1="62.6696413%" x2="3.44509591%" y2="36.1238825%" id="linearGradientTitlesBtn-5">
<stop stop-color="#009045" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#009045" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="49.88411%" x2="0%" y2="50%" id="linearGradientTitlesBtn-6">
<stop stop-color="#02C175" stop-opacity="0.64290827" offset="0%"></stop>
<stop stop-color="#02C074" offset="54.9861881%"></stop>
<stop stop-color="#02C175" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-智览-切图版" transform="translate(-389, -44)">
<g id="可视化" transform="translate(-11, -21)">
<g id="大标题top" transform="translate(8, 22)">
<g id="切换" transform="translate(392, 43)">
<g id="编组-39" transform="translate(0.8348, 0.6849)">
<polygon id="路径-3" stroke="url(#linearGradientTitlesBtn-2)" stroke-width="0.816425121" fill="url(#linearGradientTitlesBtn-1)" fill-rule="nonzero" points="106.495637 0.315087917 71.7901188 0.315087917 74.9936791 3.39393432 38.2223926 3.39393432 35.1245933 0.315087917 -1.40971679e-11 0.315087917 17.5010743 27.9924201 115.594079 27.9924201 120.538296 22.1090638"></polygon>
<polygon id="路径-3" stroke="url(#linearGradientTitlesBtn-3)" stroke-width="0.189140595" fill-rule="nonzero" points="103.868366 0.315087917 99.7006719 0.315087917 96.697343 3.39393432 32.3823889 4.55198029 38.6045823 0.315087917 1.88621157 0.315087917 18.7107718 26.5927674 113.818559 26.5927674 117.861786 21.8195602"></polygon>
<polyline id="路径-3" stroke="url(#linearGradientTitlesBtn-4)" stroke-width="0.226968714" points="2.79998169 2.31508792 34.8046006 2.31508792 38.9023999 5.39393432 77.5021144 5.39393432 71.7198883 2.31508792"></polyline>
<polygon id="矩形" fill="#02B56D" fill-rule="nonzero" points="37.398018 0 69.1753804 0 71.4939791 2.31508792 39.7434169 2.31508792"></polygon>
<g id="编组-20" transform="translate(92.3751, 19.6168)" fill="url(#linearGradientTitlesBtn-5)" fill-rule="nonzero">
<path d="M2.17437277,0 L6.46572278,6.94827586 L4.29135001,6.94827586 L0,0 L2.17437277,0 Z M8.46860977,0 L12.7599597,6.94827586 L8.75453622,6.94827586 L4.46318621,0 L8.46860977,0 Z M3.66210151,0 L7.95345152,6.94827586 L7.26680749,6.94827586 L2.97545747,0 L3.66210151,0 Z" id="形状结合"></path>
</g>
<polyline id="路径-117" stroke="url(#linearGradientTitlesBtn-6)" stroke-width="0.226968714" points="13.6235024 20.8195602 32.6726743 20.8195602 36.5953008 25.8195602 104.453167 25.8195602 107.820646 20.8195602 117.479623 20.8195602"></polyline>
<polygon id="矩形" fill="#EBBE10" points="121.658691 23.3287147 123.16516 25.8219013 120.895552 28.3050479 117.479623 28.3150879"></polygon>
</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,
borderTitle,
borderTitleColor,
borderTitleSize,
borderTitleHeight,
borderTitleWidth,
backgroundColor
} = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>
@include go('title-03') {
position: relative;
display: flex;
justify-content: center;
align-items: center;
svg {
position: absolute;
z-index: -1;
}
.fill {
fill: v-bind('colors[0]');
}
.fill-none {
fill: none;
}
.stroke {
stroke: v-bind('colors[1]');
}
.text {
color: v-bind('borderTitleColor');
font-size: v-bind('borderTitleSize+"px"');
}
}
</style>

16
src/packages/components/Units/Titles/TopTitles/config.ts Normal file
View File

@ -0,0 +1,16 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { TopTitlesConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TopTitlesConfig.key
public attr = { ...chartInitConfig, w: 1920, h: 98, zIndex: 1 }
public chartConfig = cloneDeep(TopTitlesConfig)
public option = cloneDeep(option)
}

7
src/packages/components/Units/Titles/TopTitles/config.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
</template>
<script setup lang="ts">
</script>

14
src/packages/components/Units/Titles/TopTitles/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 TopTitlesConfig: ConfigType = {
key: 'TopTitles',
chartKey: 'VTopTitles',
conKey: 'VCTopTitles',
title: '标题',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
image: 'toptitle.png',
};

34
src/packages/components/Units/Titles/TopTitles/index.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="go-title-09">
<img :width="w" :height="h" src="/src/assets/images/chart/units/toptitle.png" />
</div>
</template>
<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr)
</script>
<style lang="scss" scoped>
@include go('title-09') {
position: relative;
display: flex;
justify-content: center;
align-items: center;
svg {
position: absolute;
z-index: -1;
}
}
</style>

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

@ -0,0 +1,9 @@
import { TopTitlesConfig } from './TopTitles/index';
import { TitlesBtnConfig } from './TitlesBtn/index';
import { TitlesBtnActiveConfig } from './TitlesBtnActive/index';
export default [
TopTitlesConfig,
TitlesBtnConfig,
TitlesBtnActiveConfig
];

7
src/packages/components/Units/index.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
export enum ChatCategoryEnum {
TITLE = 'Titles',
}
export enum ChatCategoryEnumName {
TITLE = '标题',
}

3
src/packages/components/Units/index.ts Normal file
View File

@ -0,0 +1,3 @@
import Titles from './Titles'
export const UnitsList = [...Titles]

3
src/packages/index.d.ts vendored
View File

@ -201,6 +201,7 @@ export enum PackagesCategoryEnum {
DECORATES = 'Decorates',
CUSTOM = 'Custom',
DIY = 'Diy',
UNITS = 'Units',
}
// 包分类名称
@ -214,6 +215,7 @@ export enum PackagesCategoryName {
DECORATES = '小组件',
CUSTOM = '预警信息',
DIY = 'DIY',
UNITS = '组件'
}
// 获取组件
@ -233,4 +235,5 @@ export type PackagesType = {
[PackagesCategoryEnum.DECORATES]: ConfigType[];
[PackagesCategoryEnum.CUSTOM]: ConfigType[];
[PackagesCategoryEnum.DIY]: ConfigType[];
[PackagesCategoryEnum.UNITS]: ConfigType[];
};

4
src/packages/index.ts
View File

@ -5,6 +5,7 @@ import { TableList } from '@/packages/components/Tables/index'
import { PhotoList } from '@/packages/components/Photos/index'
import { IconList } from '@/packages/components/Icons/index'
import { DiyList } from '@/packages/components/Diy/index'
import { UnitsList } from '@/packages/components/Units/index'
import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
@ -25,7 +26,8 @@ export let packagesList: PackagesType = {
[PackagesCategoryEnum.DECORATES]: DecorateList,
[PackagesCategoryEnum.PHOTOS]: PhotoList,
[PackagesCategoryEnum.ICONS]: IconList,
[PackagesCategoryEnum.DIY]: DiyList
[PackagesCategoryEnum.DIY]: DiyList,
[PackagesCategoryEnum.UNITS]: UnitsList
}
// 组件缓存, 可以大幅度提升组件加载速度

4
src/views/chart/ContentCharts/hooks/useAside.hook.ts
View File

@ -53,6 +53,10 @@ const packagesListObj = {
[PackagesCategoryEnum.DIY]: {
icon: renderIcon(AirPlaneOutlineIcon),
label: PackagesCategoryName.DIY
},
[PackagesCategoryEnum.UNITS]: {
icon: renderIcon(AirPlaneOutlineIcon),
label: PackagesCategoryName.UNITS
}
}