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

Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

main
刘妍 2025-02-18 09:24:03 +08:00
parent 21e63903bf 2a2cc2f7f2
commit 58656f930e
43 changed files with 1037 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

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

@ -6,13 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
export const option = {
boxId: 'linearGradientColorLeft',
borderTitle: '电子沙盘',
borderTitleWidth: 456,
borderTitleHeight: 190,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#0E8A6D', '#02261C'],
backgroundColor: '#00000000'
colors: ['#0E8A6D','#0F9F73','#054E3C','#02261C','#098965','#052C31','#031F1A','#073128','#1F926B','#FEFEFE']
}
export default class Config extends PublicConfigClass implements CreateComponentType {

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

@ -1,6 +1,6 @@
<template>
<CollapseItem name="标题" :expanded="true">
<SettingItemBox name="Id" :alone="true">
<CollapseItem name="内容" :expanded="true">
<SettingItemBox name="ID" :alone="true">
<n-input
size="small"
v-model:value="optionData.boxId"
@ -9,47 +9,7 @@
placeholder="请输入Id"
/>
</SettingItemBox>
<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">
@ -76,30 +36,6 @@
</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">

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

@ -2,31 +2,31 @@
<div class="go-title-02">
<svg :width="w" :height="h">
<defs>
<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="`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="`3-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[0]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="50%" x2="100%" 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="`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="`5-${boxId}`">
<stop :stop-color="colors[1]" offset="0%"></stop>
<stop :stop-color="colors[1]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="101.442215%" y1="50%" x2="17.1246178%" y2="50%" :id="`1-${boxId}`">
<stop :stop-color="colors[0]" 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="`2-${boxId}`">
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[3]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`3-${boxId}`">
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[4]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`33-${boxId}`">
<stop :stop-color="colors[2]" stop-opacity="0" offset="0"></stop>
<stop :stop-color="colors[4]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4839755%" :id="`4-${boxId}`">
<stop :stop-color="colors[5]" offset="0%"></stop>
<stop :stop-color="colors[6]" offset="50.0147947%"></stop>
<stop :stop-color="colors[7]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`5-${boxId}`">
<stop :stop-color="colors[8]" offset="0%"></stop>
<stop :stop-color="colors[9]" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-导航页-图标区" transform="translate(-138, -5)">
@ -84,12 +84,6 @@ const { w, h } = toRefs(props.chartConfig.attr)
const {
colors,
boxId,
borderTitle,
borderTitleColor,
borderTitleSize,
borderTitleHeight,
borderTitleWidth,
backgroundColor
} = toRefs(props.chartConfig.option)
</script>
@ -104,9 +98,5 @@ const {
position: absolute;
z-index: -1;
}
.text {
color: v-bind('borderTitleColor');
font-size: v-bind('borderTitleSize+"px"');
}
}
</style>

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

@ -6,13 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
export const option = {
boxId: "linearGradientColorRight",
borderTitle: '',
borderTitleWidth: 456,
borderTitleHeight: 190,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#0E8A6D', '#02261C'],
backgroundColor: '#00000000'
colors: ['#0E8A6D','#0F9F73','#054E3C','#02261C','#098965','#052C31','#031F1A','#073128','#1F926B','#FEFEFE']
}
export default class Config extends PublicConfigClass implements CreateComponentType {

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

@ -1,6 +1,6 @@
<template>
<CollapseItem name="标题" :expanded="true">
<SettingItemBox name="Id" :alone="true">
<CollapseItem name="内容" :expanded="true">
<SettingItemBox name="ID" :alone="true">
<n-input
size="small"
v-model:value="optionData.boxId"
@ -8,48 +8,7 @@
type="text"
placeholder="请输入Id"
/>
</SettingItemBox>
<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>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="边框" :expanded="true">
@ -76,30 +35,6 @@
</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">

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

@ -3,31 +3,31 @@
<svg :width="w" :height="h">
<title>图形-右@2x</title>
<defs>
<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="`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="`33-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[0]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`333-${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="`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="`55-${boxId}`">
<stop :stop-color="colors[1]" offset="0%"></stop>
<stop :stop-color="colors[1]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="101.442215%" y1="50%" x2="17.1246178%" y2="50%" :id="`11-${boxId}`">
<stop :stop-color="colors[0]" 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="`22-${boxId}`">
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[3]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`33-${boxId}`">
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[4]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`333-${boxId}`">
<stop :stop-color="colors[2]" stop-opacity="0" offset="0"></stop>
<stop :stop-color="colors[4]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4839755%" :id="`44-${boxId}`">
<stop :stop-color="colors[5]" offset="0%"></stop>
<stop :stop-color="colors[6]" offset="50.0147947%"></stop>
<stop :stop-color="colors[7]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`55-${boxId}`">
<stop :stop-color="colors[8]" offset="0%"></stop>
<stop :stop-color="colors[9]" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-导航页-图标区" transform="translate(-747, -5)">
@ -84,13 +84,7 @@ const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const {
boxId,
colors,
borderTitle,
borderTitleColor,
borderTitleSize,
borderTitleHeight,
borderTitleWidth,
backgroundColor
colors
} = toRefs(props.chartConfig.option)
</script>
@ -114,9 +108,5 @@ const {
.stroke {
stroke: v-bind('colors[1]');
}
.text {
color: v-bind('borderTitleColor');
font-size: v-bind('borderTitleSize+"px"');
}
}
</style>

17
src/packages/components/Units/Titles/ContentBackground/config.ts Normal file
View File

@ -0,0 +1,17 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { ContentBackgroundConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
boxId: 'linearGradientContentBackground',
colors: ['#06463A','#02221B'],
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ContentBackgroundConfig.key
public attr = { ...chartInitConfig, w: 401, h: 150, zIndex: 1 }
public chartConfig = cloneDeep(ContentBackgroundConfig)
public option = cloneDeep(option)
}

53
src/packages/components/Units/Titles/ContentBackground/config.vue Normal file
View File

@ -0,0 +1,53 @@
<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>
</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>
</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/ContentBackground/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 ContentBackgroundConfig: ConfigType = {
key: 'ContentBackground',
chartKey: 'VContentBackground',
conKey: 'VCContentBackground',
title: '模块背景色',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
image: 'contentbgleft.png',
};

73
src/packages/components/Units/Titles/ContentBackground/index.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div class="go-title-03">
<svg :width="w" :height="h">
<title>底部背景-左1@2x</title>
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`1-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0" 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" opacity="0.687237694">
<g id="林业防火-智览-切图版" transform="translate(-42, -94)" :fill="`url(#1-${boxId})`">
<g id="可视化" transform="translate(-11, -21)">
<g id="B" transform="translate(53, 114)">
<g id="标题模块--左侧1" transform="translate(0, -0)">
<g id="边框" transform="translate(0.5, 1)">
<!-- w: 401, h: 150, -->
<polygon
id="面"
:points="`0.5 0 ${w-1.3} 0 ${w-1.5} ${h-1.3} ${w/2.19} ${h-1.3} 0.5 ${h-1.3} 0.5 ${h/1.42} ${h/2.09}`"
></polygon>
points="0.499001996 0 399.700599 0 399.539646 148.702595
183.224719 148.702595 0.499001996 148.702595 0.499001996 105.987857 0.499001996 71.8606827"
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</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)
const {
colors,
boxId
} = 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]');
}
}
</style>

17
src/packages/components/Units/Titles/ContentTitle/config.ts Normal file
View File

@ -0,0 +1,17 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { ContentTitleConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
boxId: 'linearGradientContentTitle',
colors: ['#08251E','#00A374','#11B472','#00FF8C','#00F4B6','#00FF77','#00BF6B','#00673F','#00683F','#72A18A','#1CC370'],
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ContentTitleConfig.key
public attr = { ...chartInitConfig, w: 401, h: 40, zIndex: 1 }
public chartConfig = cloneDeep(ContentTitleConfig)
public option = cloneDeep(option)
}

53
src/packages/components/Units/Titles/ContentTitle/config.vue Normal file
View File

@ -0,0 +1,53 @@
<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>
</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>
</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/ContentTitle/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 ContentTitleConfig: ConfigType = {
key: 'ContentTitle',
chartKey: 'VContentTitle',
conKey: 'VCContentTitle',
title: '模块标题',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
image: 'texttitlebg.png',
};

117
src/packages/components/Units/Titles/ContentTitle/index.vue Normal file
View File

@ -0,0 +1,117 @@
<template>
<div class="go-title-03">
<svg :width="w" :height="h">
<title>小标题-三站覆盖面积@2x</title>
<defs>
<linearGradient x1="97.3499803%" y1="112.35863%" x2="0%" y2="112.35863%" :id="`1-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0.1742622" offset="0%"></stop>
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`2-${boxId}`">
<stop :stop-color="colors[2]" offset="0%"></stop>
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<polygon id="path-3" points="10.9822114 0 112.704666 0 119.46341 11.2799213 173.1989 11.2799213 270.2884 11.2799213 270.2884 38.3517324 139.186577 38.3517324 0 38.3517324 0 11.1814815"></polygon>
<radialGradient cx="50%" cy="0%" fx="50%" fy="0%" r="100%" gradientTransform="translate(0.5, 0), scale(0.243, 1), rotate(90), scale(1, 2.7755), translate(-0.5, -0)" :id="`5-${boxId}`">
<stop :stop-color="colors[3]" offset="0%"></stop>
<stop :stop-color="colors[4]" stop-opacity="0" offset="100%"></stop>
</radialGradient>
<filter x="-3.0%" y="-12.5%" width="106.1%" height="124.9%" filterUnits="objectBoundingBox" :id="`6-${boxId}`">
<feGaussianBlur stdDeviation="4.31844888" in="SourceGraphic"></feGaussianBlur>
</filter>
<linearGradient x1="27.2222213%" y1="49.528366%" x2="102.926609%" y2="50.2892453%" :id="`7-${boxId}`">
<stop :stop-color="colors[5]" offset="0%"></stop>
<stop :stop-color="colors[6]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`8-${boxId}`">
<stop :stop-color="colors[7]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[8]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`9-${boxId}`">
<stop :stop-color="colors[9]" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#1CC370" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-智览-切图版" transform="translate(-1492, -409)">
<g id="可视化" transform="translate(-11, -21)">
<g id="A" transform="translate(1502.5, 113)">
<g id="标题模块--右侧2" transform="translate(0, 318)">
<g id="小标题-三站覆盖面积" transform="translate(1.5, 0)">
<g id="小标题">
<polygon id="矩形" :fill="`url(#1-${boxId})`" points="10.3064025 0 166.362718 0 176.570151 13.6763066 255.888803 13.6763066 399.202062 13.6763066 399.201597 38.3517324 205.452516 38.3517324 0 38.3517324 0 11.1814815"></polygon>
<g id="椭圆形">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="蒙版" :fill="`url(#2-${boxId})`" xlink:href="#path-3"></use>
<ellipse :fill="`url(#5-${boxId})`" :filter="`url(#6-${boxId})`" mask="url(#mask-4)" cx="180.697047" cy="25.5190419" rx="214" ry="52"></ellipse>
</g>
<polyline id="路径" :stroke="`url(#7-${boxId})`" stroke-width="0.616921269" points="0 25.7188334 0 11.1814815 11.0190925 0 177.866737 0 188.53316 13.2759293 264.809581 13.2759293"></polyline>
<polygon id="矩形" :fill="`url(#8-${boxId})`" points="118.3 2.99401198 393.561275 2.99401198 393.561275 9.76196476 122.229351 9.76196476"></polygon>
<polygon id="路径-11" fill="#EBBE10" points="0 0 0 7.33194884 7.88666648 0"></polygon>
<g id="编组-2" opacity="0.691816057" transform="translate(370.7821, 6.5393) scale(-1, -1) translate(-370.7821, -6.5393)translate(345.3094, 3.992)" fill="#00C157">
<polygon id="矩形" opacity="0.558652605" points="46.5583547 0 50.945502 0 46.48422 5.0945502 42.0970727 5.0945502"></polygon>
<polygon id="矩形备份" opacity="0.385865711" points="38.2461939 0 42.6333411 0 38.1720591 5.0945502 33.7849118 5.0945502"></polygon>
<polygon id="矩形备份-2" opacity="0.321045648" points="29.6658988 0 34.0530461 0 29.5917641 5.0945502 25.2046168 5.0945502"></polygon>
<polygon id="矩形备份-3" opacity="0.191528" points="21.3537379 0 25.7408852 0 21.2796032 5.0945502 16.8924559 5.0945502"></polygon>
<polygon id="矩形备份-4" opacity="0.123233" points="12.5053086 0 16.8924559 0 12.4311739 5.0945502 8.04402663 5.0945502"></polygon>
<polygon id="矩形备份-5" opacity="0.097781" points="4.46128201 0 8.84842929 0 4.38714728 5.0945502 0 5.0945502"></polygon>
</g>
</g>
<g id="装饰线" transform="translate(7.3051, 36.5255)">
<polygon id="矩形" fill="#EBBE10" points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"></polygon>
<polygon id="矩形备份-13" fill="#4FE985" points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"></polygon>
<polygon id="矩形备份-14" :fill="`url(#9-${boxId})`" points="27.2666802 0 390.822416 0 390.822416 1.82627297 25.5678216 1.82627297"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</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)
const {
colors,
boxId
} = 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]');
}
}
</style>

17
src/packages/components/Units/Titles/ContentTitle01/config.ts Normal file
View File

@ -0,0 +1,17 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { ContentTitle01Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
boxId: 'linearGradientContentTitle01',
colors: [],
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ContentTitle01Config.key
public attr = { ...chartInitConfig, w: 401, h: 40, zIndex: 1 }
public chartConfig = cloneDeep(ContentTitle01Config)
public option = cloneDeep(option)
}

20
src/packages/components/Units/Titles/ContentTitle01/config.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
</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/ContentTitle01/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 ContentTitle01Config: ConfigType = {
key: 'ContentTitle01',
chartKey: 'VContentTitle01',
conKey: 'VCContentTitle01',
title: '模块标题-01',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
image: 'texttitlebg.png',
};

46
src/packages/components/Units/Titles/ContentTitle01/index.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<div class="go-title-03">
<img :width="w" :height="h" src="/src/assets/images/chart/units/texttitle02bg.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)
const {
colors,
boxId
} = 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]');
}
}
</style>

17
src/packages/components/Units/Titles/ContentTitle02/config.ts Normal file
View File

@ -0,0 +1,17 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { ContentTitle02Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
boxId: 'linearGradientContentTitle02',
colors: [],
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ContentTitle02Config.key
public attr = { ...chartInitConfig, w: 401, h: 40, zIndex: 1 }
public chartConfig = cloneDeep(ContentTitle02Config)
public option = cloneDeep(option)
}

20
src/packages/components/Units/Titles/ContentTitle02/config.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
</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/ContentTitle02/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 ContentTitle02Config: ConfigType = {
key: 'ContentTitle02',
chartKey: 'VContentTitle02',
conKey: 'VCContentTitle02',
title: '模块标题-02',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
image: 'texttitle02bg.png',
};

46
src/packages/components/Units/Titles/ContentTitle02/index.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<div class="go-title-03">
<img :width="w" :height="h" src="/src/assets/images/chart/units/texttitlebg.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)
const {
colors,
boxId
} = 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]');
}
}
</style>

10
src/packages/components/Units/Titles/TitlesBtn/config.ts
View File

@ -5,14 +5,8 @@ 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'
boxId: 'linearGradientTitlesLeftBtn',
colors: ['#131415','#008C47','#02C175','#02AD69','#008C46','#06C869','#02B56D','#EBBE10','#02C074'],
}
export default class Config extends PublicConfigClass implements CreateComponentType {

70
src/packages/components/Units/Titles/TitlesBtn/config.vue
View File

@ -1,49 +1,16 @@
<template>
<CollapseItem name="标题" :expanded="true">
<SettingItemBox name="内容" :alone="true">
<CollapseItem name="内容" :expanded="true">
<SettingItemBox name="ID" :alone="true">
<n-input
size="small"
v-model:value="optionData.borderTitle"
v-model:value="optionData.boxId"
:minlength="1"
type="text"
placeholder="请输入标题内容"
placeholder="请输入Id"
/>
</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>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="边框" :expanded="true">
<CollapseItem name="样式" :expanded="true">
<SettingItemBox
:name="`颜色-${index + 1}`"
v-for="(item, index) in optionData.colors"
@ -66,31 +33,6 @@
</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">

2
src/packages/components/Units/Titles/TitlesBtn/index.ts
View File

@ -5,7 +5,7 @@ export const TitlesBtnConfig: ConfigType = {
key: 'TitlesBtn',
chartKey: 'VTitlesBtn',
conKey: 'VCTitlesBtn',
title: '标题按钮',
title: '标题按钮左',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,

96
src/packages/components/Units/Titles/TitlesBtn/index.vue
View File

@ -3,32 +3,32 @@
<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 x1="-48.389998%" y1="50%" x2="76.7832982%" y2="50%" :id="`1-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[1]" stop-opacity="0.950850141" offset="95.0850141%"></stop>
<stop :stop-color="colors[1]" 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 x1="97.1573557%" y1="50%" x2="4.12707014%" y2="50%" :id="`2-${boxId}`">
<stop :stop-color="colors[2]" offset="0%"></stop>
<stop :stop-color="colors[3]" 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 x1="50%" y1="47.4330881%" x2="94.7041474%" y2="52.5669119%" :id="`3-${boxId}`">
<stop :stop-color="colors[4]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[5]" 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 x1="99.7047264%" y1="50%" x2="0%" y2="50%" :id="`4-${boxId}`">
<stop :stop-color="colors[6]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[1]" offset="53.8476904%"></stop>
<stop :stop-color="colors[6]" 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 x1="99.7177871%" y1="62.6696413%" x2="3.44509591%" y2="36.1238825%" :id="`5-${boxId}`">
<stop :stop-color="colors[7]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[7]" 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 x1="100%" y1="49.88411%" x2="0%" y2="50%" :id="`6-${boxId}`">
<stop :stop-color="colors[2]" stop-opacity="0.64290827" offset="0%"></stop>
<stop :stop-color="colors[8]" offset="54.9861881%"></stop>
<stop :stop-color="colors[2]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@ -37,15 +37,42 @@
<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">
<polygon
id="路径-3" :stroke="`url(#2-${boxId})`" stroke-width="0.816425121"
:fill="`url(#1-${boxId})`" fill-rule="nonzero"
:points="`${w/3*2.6} 0.3 ${w/3*1.7} 0.3 ${w/3*1.8} 3 ${w/3.2} 3.4 ${w/3.5} 0.3 -1.40971679e-11 1.315087917
${w/7} ${h/1.07} ${w/1.07} ${h/1.07} ${w/1.02} ${h/1.35}`"
></polygon>
<polygon
id="路径-3" :stroke="`url(#3-${boxId})`" stroke-width="0.189140595" fill-rule="nonzero"
:points="`${w/3*2.5} 0.3 ${w/3*2.4} 0.3 ${w/3*2.3} 3 ${w/3.8} 4.5 ${w/3.2} 0.3 1.88621157 0.315087917
${w/6.6} ${h/1.14} ${w/1.08} ${h/1.14} ${w/1.05} ${h/1.37}`"
></polygon>
<polyline
id="路径-3" :stroke="`url(#4-${boxId})`" stroke-width="0.226968714"
:points="`2.8 2.32 ${w/3.56} 2.32 ${w/3.18} 5.39393432 ${w/1.6} 5.39393432 ${w/1.73} 2.31508792`"
></polyline>
<polygon
id="矩形" fill="#02B56D" fill-rule="nonzero"
:points="`${w/3.32} 0 ${w/1.79} 0 ${w/1.73} 2.32 ${w/3.12} 2.32`"
></polygon>
<!-- points="37.398018 0 69.1753804 0 71.4939791 2.31508792 39.7434169 2.31508792" -->
<!-- <g id="编组-20" transform="translate(92.3751, 19.6168)" :fill="`url(#5-${boxId})`" 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> -->
<polyline
id="路径-117" :stroke="`url(#6-${boxId})`" stroke-width="0.226968714"
:points="`${w/9.1} ${h/1.44} ${w/3.8} ${h/1.44} ${w/3.39} ${h/1.16} ${w/1.19} ${h/1.16} ${w/1.15} ${h/1.44} ${w/1.06} ${h/1.44}`"
></polyline>
<polygon
id="矩形" :fill="colors[7]"
:points="`${w/1.02} ${h/1.29} ${w/1.007} ${h/1.16} ${w/1.03} ${h/1.06} ${w/1.06} ${h/1.06}`"
></polygon>
</g>
</g>
</g>
@ -72,12 +99,7 @@ const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const {
colors,
borderTitle,
borderTitleColor,
borderTitleSize,
borderTitleHeight,
borderTitleWidth,
backgroundColor
boxId
} = toRefs(props.chartConfig.option)
</script>
@ -101,9 +123,5 @@ const {
.stroke {
stroke: v-bind('colors[1]');
}
.text {
color: v-bind('borderTitleColor');
font-size: v-bind('borderTitleSize+"px"');
}
}
</style>

10
src/packages/components/Units/Titles/TitlesBtnActive/config.ts
View File

@ -5,14 +5,8 @@ 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'
boxId: 'linearGradientTitlesLeftBtnActive',
colors: ['#131415','#EA9607','#EBBE11','#EBBE10','#EBBA0F','#EBB90F'],
}
export default class Config extends PublicConfigClass implements CreateComponentType {

70
src/packages/components/Units/Titles/TitlesBtnActive/config.vue
View File

@ -1,49 +1,16 @@
<template>
<CollapseItem name="标题" :expanded="true">
<SettingItemBox name="内容" :alone="true">
<CollapseItem name="内容" :expanded="true">
<SettingItemBox name="ID" :alone="true">
<n-input
size="small"
v-model:value="optionData.borderTitle"
v-model:value="optionData.boxId"
:minlength="1"
type="text"
placeholder="请输入标题内容"
placeholder="请输入Id"
/>
</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>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="边框" :expanded="true">
<CollapseItem name="样式" :expanded="true">
<SettingItemBox
:name="`颜色-${index + 1}`"
v-for="(item, index) in optionData.colors"
@ -66,31 +33,6 @@
</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">

2
src/packages/components/Units/Titles/TitlesBtnActive/index.ts
View File

@ -5,7 +5,7 @@ export const TitlesBtnActiveConfig: ConfigType = {
key: 'TitlesBtnActive',
chartKey: 'VTitlesBtnActive',
conKey: 'VCTitlesBtnActive',
title: '标题按钮',
title: '标题按钮左-选中',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,

102
src/packages/components/Units/Titles/TitlesBtnActive/index.vue
View File

@ -3,33 +3,32 @@
<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>
<linearGradient x1="-48.389998%" y1="50%" x2="76.7832982%" y2="50%" :id="`1-${boxId}`">
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[1]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="97.1573557%" y1="50%" x2="5.14786075%" y2="50%" :id="`2-${boxId}`">
<stop :stop-color="colors[2]" offset="0%"></stop>
<stop :stop-color="colors[3]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="47.4330881%" x2="94.7041474%" y2="52.5669119%" :id="`3-${boxId}`">
<stop :stop-color="colors[4]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[3]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="99.7047264%" y1="50%" x2="0%" y2="50%" :id="`4-${boxId}`">
<stop :stop-color="colors[4]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[4]" offset="53.1994373%"></stop>
<stop :stop-color="colors[4]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="99.7177871%" y1="62.6696413%" x2="3.44509591%" y2="36.1238825%" :id="`5-${boxId}`">
<stop :stop-color="colors[4]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[4]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="49.88411%" x2="0%" y2="50%" :id="`6-${boxId}`">
<stop :stop-color="colors[4]" offset="0%"></stop>
<stop :stop-color="colors[4]" offset="54.9861881%"></stop>
<stop :stop-color="colors[4]" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-智览-切图版" transform="translate(-389, -44)">
@ -37,15 +36,41 @@
<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">
<polygon
id="路径-3" :stroke="`url(#2-${boxId})`" stroke-width="0.816425121"
:fill="`url(#1-${boxId})`" fill-rule="nonzero"
:points="`${w/3*2.6} 0.3 ${w/3*1.7} 0.3 ${w/3*1.8} 3 ${w/3.2} 3.4 ${w/3.5} 0.3 -1.40971679e-11 1.315087917
${w/7} ${h/1.07} ${w/1.07} ${h/1.07} ${w/1.02} ${h/1.35}`"
></polygon>
<polygon
id="路径-3" :stroke="`url(#3-${boxId})`" stroke-width="0.189140595" fill-rule="nonzero"
:points="`${w/3*2.5} 0.3 ${w/3*2.4} 0.3 ${w/3*2.3} 3 ${w/3.8} 4.5 ${w/3.2} 0.3 1.88621157 0.315087917
${w/6.6} ${h/1.14} ${w/1.08} ${h/1.14} ${w/1.05} ${h/1.37}`"
></polygon>
<polyline
id="路径-3" :stroke="`url(#4-${boxId})`" stroke-width="0.226968714"
:points="`2.8 2.32 ${w/3.56} 2.32 ${w/3.18} 5.39393432 ${w/1.6} 5.39393432 ${w/1.73} 2.31508792`"
></polyline>
<polygon
id="矩形" fill="#02B56D" fill-rule="nonzero"
:points="`${w/3.32} 0 ${w/1.79} 0 ${w/1.73} 2.32 ${w/3.12} 2.32`"
></polygon>
<!-- points="37.398018 0 69.1753804 0 71.4939791 2.31508792 39.7434169 2.31508792" -->
<!-- <g id="编组-20" transform="translate(92.3751, 19.6168)" :fill="`url(#5-${boxId})`" 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> -->
<polyline
id="路径-117" :stroke="`url(#6-${boxId})`" stroke-width="0.226968714"
:points="`${w/9.1} ${h/1.44} ${w/3.8} ${h/1.44} ${w/3.39} ${h/1.16} ${w/1.19} ${h/1.16} ${w/1.15} ${h/1.44} ${w/1.06} ${h/1.44}`"
></polyline>
<polygon
id="矩形" :fill="colors[5]"
:points="`${w/1.02} ${h/1.29} ${w/1.007} ${h/1.16} ${w/1.03} ${h/1.06} ${w/1.06} ${h/1.06}`"
></polygon>
</g>
</g>
</g>
@ -72,12 +97,7 @@ const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const {
colors,
borderTitle,
borderTitleColor,
borderTitleSize,
borderTitleHeight,
borderTitleWidth,
backgroundColor
boxId
} = toRefs(props.chartConfig.option)
</script>

16
src/packages/components/Units/Titles/TopTitles01/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 { TopTitles01Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
colors: ['#00592C','#009259','#005F2E','#009243','#00E692','#00C552','#00C47F','#009045','#008C46','#00C27F','#EBBE10'],
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TopTitles01Config.key
public attr = { ...chartInitConfig, w: 1920, h: 85, zIndex: 1 }
public chartConfig = cloneDeep(TopTitles01Config)
public option = cloneDeep(option)
}

43
src/packages/components/Units/Titles/TopTitles01/config.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<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>
</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/TopTitles01/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 TopTitles01Config: ConfigType = {
key: 'TopTitles01',
chartKey: 'VTopTitles01',
conKey: 'VCTopTitles01',
title: '标题-01',
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
image: 'toptitle.png',
};

134
src/packages/components/Units/Titles/TopTitles01/index.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<div class="go-title-09">
<svg :width="w" :height="h">
<title>小背景</title>
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-1">
<stop :stop-color="colors[0]" stop-opacity="0.350515939" offset="0%"></stop>
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-2">
<stop :stop-color="colors[0]" stop-opacity="0.350515939" offset="0%"></stop>
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradientTopTitle01-3">
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[3]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="100%" x2="50%" y2="6.16297582e-31%" id="linearGradientTopTitle01-4">
<stop :stop-color="colors[4]" offset="0%"></stop>
<stop :stop-color="colors[5]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="34.4280403%" x2="50%" y2="100%" id="linearGradientTopTitle01-5">
<stop :stop-color="colors[6]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[7]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradientTopTitle01-6">
<stop :stop-color="colors[6]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[7]" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-7">
<stop :stop-color="colors[8]" offset="0%"></stop>
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-8">
<stop :stop-color="colors[8]" offset="0%"></stop>
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="97.85155%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-9">
<stop :stop-color="colors[8]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[8]" offset="40.046916%"></stop>
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-10">
<stop :stop-color="colors[8]" offset="0%"></stop>
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-11">
<stop :stop-color="colors[8]" offset="0%"></stop>
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="97.85155%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-12">
<stop :stop-color="colors[8]" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="colors[8]" offset="40.046916%"></stop>
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-智览-切图版" transform="translate(3, -1)">
<g id="可视化" transform="translate(-11, -21)">
<g id="大标题top" transform="translate(8, 22)">
<g id="小背景" transform="translate(0, 1)">
<rect id="矩形" fill="url(#linearGradientTopTitle01-1)" x="0" y="0" width="960" height="71"></rect>
<rect id="矩形" fill="url(#linearGradientTopTitle01-2)" transform="translate(1440, 32) scale(-1, 1) translate(-1440, -32)" x="960" y="0" width="960" height="64"></rect>
<g id="编组-3" transform="translate(616.358, 0)">
<polygon id="矩形" fill="url(#linearGradientTopTitle01-3)" points="0 0 684.1949 0 689.281998 0 660.981164 48 585.119147 48 574.2235 63 363.735551 63 357.061342 56.8743247 326.45026 56.8743247 319.798678 63 118.538529 63 109.029264 50 32.2658942 50"></polygon>
<polygon id="矩形" stroke="url(#linearGradientTopTitle01-4)" points="0 0 688.283039 0 660.981164 48 585.187128 48 574.2235 63 363.735551 63 357.131925 57 326.45026 57 319.798678 63 118.538529 63 108.822252 50 32.2658942 50"></polygon>
<polygon id="矩形" fill="url(#linearGradientTopTitle01-5)" points="41.9562955 59 652.320499 59 649.323621 71 47.950052 71"></polygon>
<path d="M101.542462,69 L592.958441,69 C593.510726,69 593.958441,69.4477153 593.958441,70 C593.958441,70.1153807 593.938473,70.229891 593.899421,70.3384619 L591.683172,76.5 C590.064691,80.9996477 585.796952,84 581.015079,84 L116.14177,84 C110.948502,84 106.187304,81.1083281 103.792864,76.5 L100.655097,70.4610661 C100.400457,69.9709875 100.591318,69.367274 101.081396,69.1126342 C101.223819,69.0386328 101.381962,69 101.542462,69 Z" id="矩形备份-10" fill="url(#linearGradientTopTitle01-6)" opacity="0.480741228"></path>
<polygon id="矩形" :fill="colors[10]" points="327.849104 59.4905529 355.899358 59.4905529 360.79665 64 322.663892 64"></polygon>
</g>
<g id="小菱形" transform="translate(656.2955, 55)" :fill="colors[7]">
<polygon id="矩形" points="4.60306437e-19 0 13.6902458 0 16.9823101 5 3.29206432 5"></polygon>
<polygon id="矩形备份-8" points="20.9781478 0 34.6683935 0 37.9604579 5 24.2702121 5"></polygon>
<polygon id="矩形备份-9" points="41.9562955 0 55.6465413 0 58.9386056 5 45.2483598 5"></polygon>
</g>
<g id="小菱形" transform="translate(1237.232, 57.5) scale(-1, 1) translate(-1237.232, -57.5)translate(1207.7627, 55)" :fill="colors[7]">
<polygon id="矩形" points="4.60306437e-19 0 13.6902458 0 16.9823101 5 3.29206432 5"></polygon>
<polygon id="矩形备份-8" points="20.9781478 0 34.6683935 0 37.9604579 5 24.2702121 5"></polygon>
<polygon id="矩形备份-9" points="41.9562955 0 55.6465413 0 58.9386056 5 45.2483598 5"></polygon>
</g>
<g id="编组-4" transform="translate(0, 10)">
<polygon id="矩形" :fill="colors[8]" points="611.363163 14 621.77498 14 629.344433 25 618.932617 25"></polygon>
<polygon id="矩形备份-11" fill="url(#linearGradientTopTitle01-7)" points="428.55359 14 606.871114 14 614.360042 25 436.042517 25"></polygon>
<polygon id="矩形备份-12" fill="url(#linearGradientTopTitle01-8)" opacity="0.307911464" points="-4.85168379e-13 0 613.164074 0 629.344433 25 25.6193658 25"></polygon>
<polyline id="路径-12备份" stroke="url(#linearGradientTopTitle01-9)" points="631.342352 2 426.170439 2 408.13428 20 122.872008 20"></polyline>
<polyline id="路径-12备份-2" stroke="url(#linearGradientTopTitle01-9)" points="620.353798 7 415.181885 7 397.145727 25 111.883455 25"></polyline>
</g>
<g id="编组-4" transform="translate(1604.3288, 22.5) scale(-1, 1) translate(-1604.3288, -22.5)translate(1290.6556, 10)">
<polygon id="矩形" :fill="colors[8]" points="607.367326 14 617.779142 14 625.348595 25 614.936779 25"></polygon>
<polygon id="矩形备份-11" fill="url(#linearGradientTopTitle01-10)" points="425.556712 14 602.91554 14 610.364204 25 433.005376 25"></polygon>
<polygon id="矩形备份-12" fill="url(#linearGradientTopTitle01-11)" opacity="0.307911464" points="-4.82087945e-13 0 609.270968 0 625.348595 25 25.4567031 25"></polygon>
<polyline id="路径-12备份" stroke="url(#linearGradientTopTitle01-12)" points="627.346514 2 423.383866 2 405.454011 20 121.873049 20"></polyline>
<polyline id="路径-12备份-2" stroke="url(#linearGradientTopTitle01-12)" points="616.35796 7 412.395312 7 394.465457 25 110.884495 25"></polyline>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</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)
const {
colors
} = toRefs(props.chartConfig.option)
</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>

12
src/packages/components/Units/Titles/index.ts
View File

@ -1,9 +1,19 @@
import { TopTitlesConfig } from './TopTitles/index';
import { TopTitles01Config } from './TopTitles01/index';
import { TitlesBtnConfig } from './TitlesBtn/index';
import { TitlesBtnActiveConfig } from './TitlesBtnActive/index';
import { ContentBackgroundConfig } from './ContentBackground/index';
import { ContentTitleConfig } from './ContentTitle/index';
import { ContentTitle01Config } from './ContentTitle01/index';
// import { ContentTitle02Config } from './ContentTitle02/index';
export default [
TopTitlesConfig,
TopTitles01Config,
TitlesBtnConfig,
TitlesBtnActiveConfig
TitlesBtnActiveConfig,
ContentBackgroundConfig,
ContentTitleConfig,
ContentTitle01Config,
// ContentTitle02Config
];

2
src/packages/components/Zhigan/Zhigan/MeiRiShangBao/index.ts
View File

@ -11,4 +11,4 @@ export const MeiRiShangBaoConfig: ConfigType = {
package: PackagesCategoryEnum.ZHIGAN,
chartFrame: ChartFrameEnum.COMMON,
image: 'MeiRiShangBao.png'
}
}

5
src/views/chart/ContentCharts/components/PhotoModal/index.vue
View File

@ -9,8 +9,7 @@
<div class="content-div">
<div class="photo-item" v-for="(item, index) in photoList" :key="index">
<Image
:width="150"
:height="150"
:src="`${apiUrl}/${item.filePath}`"
/>
<div class="select-div">
@ -175,7 +174,7 @@ const addPhotoToList = () =>{
position: relative;
width: 150px;
height: 150px;
// background-color: red;
background-color: rgb(24,24,28);
margin-bottom: 10px;
margin-right: 10px;
.select-div{

3
start.bat Normal file
View File

@ -0,0 +1,3 @@
@echo off
npm run dev
pause

67
vite.config.ts.timestamp-1737076171139-be9da8362314f.mjs Normal file
View File

@ -0,0 +1,67 @@
// vite.config.ts
import { defineApplicationConfig } from "file:///E:/%E6%9E%97%E4%B8%9A%E9%98%B2%E7%81%AB%E9%A1%B9%E7%9B%AE/LinYeFangHuo/internal/vite-config/dist/index.mjs";
var vite_config_default = defineApplicationConfig({
overrides: {
optimizeDeps: {
include: [
"echarts/core",
"echarts/charts",
"echarts/components",
"echarts/renderers",
"qrcode",
"@iconify/iconify",
"ant-design-vue/es/locale/zh_CN",
"ant-design-vue/es/locale/en_US",
"@/../lib/vform/designer.umd.js"
]
},
build: {
/* 其他build生产打包配置省略 */
//...
target: "esnext",
commonjsOptions: {
include: /node_modules|lib/
//这里记得把lib目录加进来，否则生产打包会报错！！
}
},
server: {
proxy: {
"/basic-api": {
target: "http://localhost:3000",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(new RegExp(`^/basic-api`), "")
// only https
// secure: false
},
"/upload": {
target: "http://localhost:3300/upload",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(new RegExp(`^/upload`), "")
}
},
warmup: {
clientFiles: ["./index.html", "./src/{views,components}/*"]
}
},
define: {
"process.env": {
BASE_URL: "/"
}
},
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: `@import "src/styles/common/style.scss";`
}
}
},
plugins: []
}
});
export {
vite_config_default as default
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJFOlxcXFxcdTY3OTdcdTRFMUFcdTk2MzJcdTcwNkJcdTk4NzlcdTc2RUVcXFxcTGluWWVGYW5nSHVvXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJFOlxcXFxcdTY3OTdcdTRFMUFcdTk2MzJcdTcwNkJcdTk4NzlcdTc2RUVcXFxcTGluWWVGYW5nSHVvXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9FOi8lRTYlOUUlOTclRTQlQjglOUElRTklOTglQjIlRTclODElQUIlRTklQTElQjklRTclOUIlQUUvTGluWWVGYW5nSHVvL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQXBwbGljYXRpb25Db25maWcgfSBmcm9tICdAdmJlbi92aXRlLWNvbmZpZyc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUFwcGxpY2F0aW9uQ29uZmlnKHtcbiAgb3ZlcnJpZGVzOiB7XG4gICAgb3B0aW1pemVEZXBzOiB7XG4gICAgICBpbmNsdWRlOiBbXG4gICAgICAgICdlY2hhcnRzL2NvcmUnLFxuICAgICAgICAnZWNoYXJ0cy9jaGFydHMnLFxuICAgICAgICAnZWNoYXJ0cy9jb21wb25lbnRzJyxcbiAgICAgICAgJ2VjaGFydHMvcmVuZGVyZXJzJyxcbiAgICAgICAgJ3FyY29kZScsXG4gICAgICAgICdAaWNvbmlmeS9pY29uaWZ5JyxcbiAgICAgICAgJ2FudC1kZXNpZ24tdnVlL2VzL2xvY2FsZS96aF9DTicsXG4gICAgICAgICdhbnQtZGVzaWduLXZ1ZS9lcy9sb2NhbGUvZW5fVVMnLFxuICAgICAgICAnQC8uLi9saWIvdmZvcm0vZGVzaWduZXIudW1kLmpzJyxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgLyogXHU1MTc2XHU0RUQ2YnVpbGRcdTc1MUZcdTRFQTdcdTYyNTNcdTUzMDVcdTkxNERcdTdGNkVcdTc3MDFcdTc1NjUgKi9cbiAgICAgIC8vLi4uXG4gICAgICB0YXJnZXQ6ICdlc25leHQnLFxuICAgICAgY29tbW9uanNPcHRpb25zOiB7XG4gICAgICAgIGluY2x1ZGU6IC9ub2RlX21vZHVsZXN8bGliLywgLy9cdThGRDlcdTkxQ0NcdThCQjBcdTVGOTdcdTYyOEFsaWJcdTc2RUVcdTVGNTVcdTUyQTBcdThGREJcdTY3NjVcdUZGMENcdTU0MjZcdTUyMTlcdTc1MUZcdTRFQTdcdTYyNTNcdTUzMDVcdTRGMUFcdTYyQTVcdTk1MTlcdUZGMDFcdUZGMDFcbiAgICAgIH0sXG4gICAgfSxcbiAgICBzZXJ2ZXI6IHtcbiAgICAgIHByb3h5OiB7XG4gICAgICAgICcvYmFzaWMtYXBpJzoge1xuICAgICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6MzAwMCcsXG4gICAgICAgICAgY2hhbmdlT3JpZ2luOiB0cnVlLFxuICAgICAgICAgIHdzOiB0cnVlLFxuICAgICAgICAgIHJld3JpdGU6IChwYXRoKSA9PiBwYXRoLnJlcGxhY2UobmV3IFJlZ0V4cChgXi9iYXNpYy1hcGlgKSwgJycpLFxuICAgICAgICAgIC8vIG9ubHkgaHR0cHNcbiAgICAgICAgICAvLyBzZWN1cmU6IGZhbHNlXG4gICAgICAgIH0sXG4gICAgICAgICcvdXBsb2FkJzoge1xuICAgICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6MzMwMC91cGxvYWQnLFxuICAgICAgICAgIGNoYW5nZU9yaWdpbjogdHJ1ZSxcbiAgICAgICAgICB3czogdHJ1ZSxcbiAgICAgICAgICByZXdyaXRlOiAocGF0aCkgPT4gcGF0aC5yZXBsYWNlKG5ldyBSZWdFeHAoYF4vdXBsb2FkYCksICcnKSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgICB3YXJtdXA6IHtcbiAgICAgICAgY2xpZW50RmlsZXM6IFsnLi9pbmRleC5odG1sJywgJy4vc3JjL3t2aWV3cyxjb21wb25lbnRzfS8qJ10sXG4gICAgICB9LFxuICAgIH0sXG4gICAgZGVmaW5lOiB7XG4gICAgICAncHJvY2Vzcy5lbnYnOiB7XG4gICAgICAgIEJBU0VfVVJMOiAnLycsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY3NzOiB7XG4gICAgICBwcmVwcm9jZXNzb3JPcHRpb25zOiB7XG4gICAgICAgIHNjc3M6IHtcbiAgICAgICAgICBqYXZhc2NyaXB0RW5hYmxlZDogdHJ1ZSxcbiAgICAgICAgICBhZGRpdGlvbmFsRGF0YTogYEBpbXBvcnQgXCJzcmMvc3R5bGVzL2NvbW1vbi9zdHlsZS5zY3NzXCI7YCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXSxcbiAgfSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUEwUyxTQUFTLCtCQUErQjtBQUVsVixJQUFPLHNCQUFRLHdCQUF3QjtBQUFBLEVBQ3JDLFdBQVc7QUFBQSxJQUNULGNBQWM7QUFBQSxNQUNaLFNBQVM7QUFBQSxRQUNQO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0EsT0FBTztBQUFBO0FBQUE7QUFBQSxNQUdMLFFBQVE7QUFBQSxNQUNSLGlCQUFpQjtBQUFBLFFBQ2YsU0FBUztBQUFBO0FBQUEsTUFDWDtBQUFBLElBQ0Y7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLE9BQU87QUFBQSxRQUNMLGNBQWM7QUFBQSxVQUNaLFFBQVE7QUFBQSxVQUNSLGNBQWM7QUFBQSxVQUNkLElBQUk7QUFBQSxVQUNKLFNBQVMsQ0FBQyxTQUFTLEtBQUssUUFBUSxJQUFJLE9BQU8sYUFBYSxHQUFHLEVBQUU7QUFBQTtBQUFBO0FBQUEsUUFHL0Q7QUFBQSxRQUNBLFdBQVc7QUFBQSxVQUNULFFBQVE7QUFBQSxVQUNSLGNBQWM7QUFBQSxVQUNkLElBQUk7QUFBQSxVQUNKLFNBQVMsQ0FBQyxTQUFTLEtBQUssUUFBUSxJQUFJLE9BQU8sVUFBVSxHQUFHLEVBQUU7QUFBQSxRQUM1RDtBQUFBLE1BQ0Y7QUFBQSxNQUNBLFFBQVE7QUFBQSxRQUNOLGFBQWEsQ0FBQyxnQkFBZ0IsNEJBQTRCO0FBQUEsTUFDNUQ7QUFBQSxJQUNGO0FBQUEsSUFDQSxRQUFRO0FBQUEsTUFDTixlQUFlO0FBQUEsUUFDYixVQUFVO0FBQUEsTUFDWjtBQUFBLElBQ0Y7QUFBQSxJQUNBLEtBQUs7QUFBQSxNQUNILHFCQUFxQjtBQUFBLFFBQ25CLE1BQU07QUFBQSxVQUNKLG1CQUFtQjtBQUFBLFVBQ25CLGdCQUFnQjtBQUFBLFFBQ2xCO0FBQUEsTUFDRjtBQUFBLElBQ0Y7QUFBQSxJQUNBLFNBQVMsQ0FBQztBQUFBLEVBQ1o7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=