Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo
commit
58656f930e
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
|
|
@ -6,13 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
boxId: 'linearGradientColorLeft',
|
boxId: 'linearGradientColorLeft',
|
||||||
borderTitle: '电子沙盘',
|
colors: ['#0E8A6D','#0F9F73','#054E3C','#02261C','#098965','#052C31','#031F1A','#073128','#1F926B','#FEFEFE']
|
||||||
borderTitleWidth: 456,
|
|
||||||
borderTitleHeight: 190,
|
|
||||||
borderTitleSize: 18,
|
|
||||||
borderTitleColor: '#fff',
|
|
||||||
colors: ['#0E8A6D', '#02261C'],
|
|
||||||
backgroundColor: '#00000000'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<CollapseItem name="标题" :expanded="true">
|
<CollapseItem name="内容" :expanded="true">
|
||||||
<SettingItemBox name="Id" :alone="true">
|
<SettingItemBox name="ID" :alone="true">
|
||||||
<n-input
|
<n-input
|
||||||
size="small"
|
size="small"
|
||||||
v-model:value="optionData.boxId"
|
v-model:value="optionData.boxId"
|
||||||
|
|
@ -9,47 +9,7 @@
|
||||||
placeholder="请输入Id"
|
placeholder="请输入Id"
|
||||||
/>
|
/>
|
||||||
</SettingItemBox>
|
</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>
|
||||||
|
|
||||||
<CollapseItem name="边框" :expanded="true">
|
<CollapseItem name="边框" :expanded="true">
|
||||||
|
|
@ -76,30 +36,6 @@
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
</CollapseItem>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -2,31 +2,31 @@
|
||||||
<div class="go-title-02">
|
<div class="go-title-02">
|
||||||
<svg :width="w" :height="h">
|
<svg :width="w" :height="h">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient x1="101.442215%" y1="50%" x2="17.1246178%" y2="50%" :id="`1-${boxId}`" >
|
<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[0]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`2-${boxId}`">
|
<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[2]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="100%"></stop>
|
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`3-${boxId}`">
|
<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[2]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="100%"></stop>
|
<stop :stop-color="colors[4]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`33-${boxId}`">
|
<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[2]" stop-opacity="0" offset="0"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="100%"></stop>
|
<stop :stop-color="colors[4]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4839755%" :id="`4-${boxId}`">
|
<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[5]" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="50.0147947%"></stop>
|
<stop :stop-color="colors[6]" offset="50.0147947%"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="100%"></stop>
|
<stop :stop-color="colors[7]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`5-${boxId}`">
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`5-${boxId}`">
|
||||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
<stop :stop-color="colors[8]" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
<stop :stop-color="colors[9]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g id="林业防火-导航页-图标区" transform="translate(-138, -5)">
|
<g id="林业防火-导航页-图标区" transform="translate(-138, -5)">
|
||||||
|
|
@ -84,12 +84,6 @@ const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
const {
|
const {
|
||||||
colors,
|
colors,
|
||||||
boxId,
|
boxId,
|
||||||
borderTitle,
|
|
||||||
borderTitleColor,
|
|
||||||
borderTitleSize,
|
|
||||||
borderTitleHeight,
|
|
||||||
borderTitleWidth,
|
|
||||||
backgroundColor
|
|
||||||
} = toRefs(props.chartConfig.option)
|
} = toRefs(props.chartConfig.option)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -104,9 +98,5 @@ const {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.text {
|
|
||||||
color: v-bind('borderTitleColor');
|
|
||||||
font-size: v-bind('borderTitleSize+"px"');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
boxId: "linearGradientColorRight",
|
boxId: "linearGradientColorRight",
|
||||||
borderTitle: '',
|
colors: ['#0E8A6D','#0F9F73','#054E3C','#02261C','#098965','#052C31','#031F1A','#073128','#1F926B','#FEFEFE']
|
||||||
borderTitleWidth: 456,
|
|
||||||
borderTitleHeight: 190,
|
|
||||||
borderTitleSize: 18,
|
|
||||||
borderTitleColor: '#fff',
|
|
||||||
colors: ['#0E8A6D', '#02261C'],
|
|
||||||
backgroundColor: '#00000000'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<CollapseItem name="标题" :expanded="true">
|
<CollapseItem name="内容" :expanded="true">
|
||||||
<SettingItemBox name="Id" :alone="true">
|
<SettingItemBox name="ID" :alone="true">
|
||||||
<n-input
|
<n-input
|
||||||
size="small"
|
size="small"
|
||||||
v-model:value="optionData.boxId"
|
v-model:value="optionData.boxId"
|
||||||
|
|
@ -8,48 +8,7 @@
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="请输入Id"
|
placeholder="请输入Id"
|
||||||
/>
|
/>
|
||||||
</SettingItemBox>
|
</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>
|
||||||
|
|
||||||
<CollapseItem name="边框" :expanded="true">
|
<CollapseItem name="边框" :expanded="true">
|
||||||
|
|
@ -76,30 +35,6 @@
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
</CollapseItem>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -3,31 +3,31 @@
|
||||||
<svg :width="w" :height="h">
|
<svg :width="w" :height="h">
|
||||||
<title>图形-右@2x</title>
|
<title>图形-右@2x</title>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient x1="101.442215%" y1="50%" x2="17.1246178%" y2="50%" :id="`11-${boxId}`">
|
<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[0]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`22-${boxId}`">
|
<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[2]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="100%"></stop>
|
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`33-${boxId}`">
|
<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[2]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="100%"></stop>
|
<stop :stop-color="colors[4]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`333-${boxId}`">
|
<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[2]" stop-opacity="0" offset="0"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="100%"></stop>
|
<stop :stop-color="colors[4]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.4839755%" :id="`44-${boxId}`">
|
<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[5]" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="50.0147947%"></stop>
|
<stop :stop-color="colors[6]" offset="50.0147947%"></stop>
|
||||||
<stop :stop-color="colors[0]" offset="100%"></stop>
|
<stop :stop-color="colors[7]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`55-${boxId}`">
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`55-${boxId}`">
|
||||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
<stop :stop-color="colors[8]" offset="0%"></stop>
|
||||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
<stop :stop-color="colors[9]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g id="林业防火-导航页-图标区" transform="translate(-747, -5)">
|
<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 { w, h } = toRefs(props.chartConfig.attr)
|
||||||
const {
|
const {
|
||||||
boxId,
|
boxId,
|
||||||
colors,
|
colors
|
||||||
borderTitle,
|
|
||||||
borderTitleColor,
|
|
||||||
borderTitleSize,
|
|
||||||
borderTitleHeight,
|
|
||||||
borderTitleWidth,
|
|
||||||
backgroundColor
|
|
||||||
} = toRefs(props.chartConfig.option)
|
} = toRefs(props.chartConfig.option)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -114,9 +108,5 @@ const {
|
||||||
.stroke {
|
.stroke {
|
||||||
stroke: v-bind('colors[1]');
|
stroke: v-bind('colors[1]');
|
||||||
}
|
}
|
||||||
.text {
|
|
||||||
color: v-bind('borderTitleColor');
|
|
||||||
font-size: v-bind('borderTitleSize+"px"');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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',
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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)
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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',
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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)
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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',
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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)
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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',
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -5,14 +5,8 @@ import { TitlesBtnConfig } from './index'
|
||||||
import cloneDeep from 'lodash/cloneDeep'
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
dur: 0.5,
|
boxId: 'linearGradientTitlesLeftBtn',
|
||||||
borderTitle: '按钮',
|
colors: ['#131415','#008C47','#02C175','#02AD69','#008C46','#06C869','#02B56D','#EBBE10','#02C074'],
|
||||||
borderTitleWidth: 124,
|
|
||||||
borderTitleHeight: 30,
|
|
||||||
borderTitleSize: 18,
|
|
||||||
borderTitleColor: '#fff',
|
|
||||||
colors: ['#0E8A6D', '#02261C'],
|
|
||||||
backgroundColor: '#00000000'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<CollapseItem name="标题" :expanded="true">
|
<CollapseItem name="内容" :expanded="true">
|
||||||
<SettingItemBox name="内容" :alone="true">
|
<SettingItemBox name="ID" :alone="true">
|
||||||
<n-input
|
<n-input
|
||||||
size="small"
|
size="small"
|
||||||
v-model:value="optionData.borderTitle"
|
v-model:value="optionData.boxId"
|
||||||
:minlength="1"
|
:minlength="1"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="请输入标题内容"
|
placeholder="请输入Id"
|
||||||
/>
|
/>
|
||||||
</SettingItemBox>
|
</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>
|
||||||
|
<CollapseItem name="样式" :expanded="true">
|
||||||
<CollapseItem name="边框" :expanded="true">
|
|
||||||
<SettingItemBox
|
<SettingItemBox
|
||||||
:name="`颜色-${index + 1}`"
|
:name="`颜色-${index + 1}`"
|
||||||
v-for="(item, index) in optionData.colors"
|
v-for="(item, index) in optionData.colors"
|
||||||
|
|
@ -66,31 +33,6 @@
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
</CollapseItem>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ export const TitlesBtnConfig: ConfigType = {
|
||||||
key: 'TitlesBtn',
|
key: 'TitlesBtn',
|
||||||
chartKey: 'VTitlesBtn',
|
chartKey: 'VTitlesBtn',
|
||||||
conKey: 'VCTitlesBtn',
|
conKey: 'VCTitlesBtn',
|
||||||
title: '标题按钮',
|
title: '标题按钮左',
|
||||||
category: ChatCategoryEnum.TITLE,
|
category: ChatCategoryEnum.TITLE,
|
||||||
categoryName: ChatCategoryEnumName.TITLE,
|
categoryName: ChatCategoryEnumName.TITLE,
|
||||||
package: PackagesCategoryEnum.UNITS,
|
package: PackagesCategoryEnum.UNITS,
|
||||||
|
|
|
||||||
|
|
@ -3,32 +3,32 @@
|
||||||
<svg :width="w" :height="h">
|
<svg :width="w" :height="h">
|
||||||
<title>编组 39</title>
|
<title>编组 39</title>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient x1="-48.389998%" y1="50%" x2="76.7832982%" y2="50%" id="linearGradientTitlesBtn-1">
|
<linearGradient x1="-48.389998%" y1="50%" x2="76.7832982%" y2="50%" :id="`1-${boxId}`">
|
||||||
<stop stop-color="#131415" stop-opacity="0" offset="0%"></stop>
|
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop stop-color="#008C47" stop-opacity="0.950850141" offset="95.0850141%"></stop>
|
<stop :stop-color="colors[1]" stop-opacity="0.950850141" offset="95.0850141%"></stop>
|
||||||
<stop stop-color="#008C47" offset="100%"></stop>
|
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="97.1573557%" y1="50%" x2="4.12707014%" y2="50%" id="linearGradientTitlesBtn-2">
|
<linearGradient x1="97.1573557%" y1="50%" x2="4.12707014%" y2="50%" :id="`2-${boxId}`">
|
||||||
<stop stop-color="#02C175" offset="0%"></stop>
|
<stop :stop-color="colors[2]" offset="0%"></stop>
|
||||||
<stop stop-color="#02AD69" stop-opacity="0" offset="100%"></stop>
|
<stop :stop-color="colors[3]" stop-opacity="0" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="50%" y1="47.4330881%" x2="94.7041474%" y2="52.5669119%" id="linearGradientTitlesBtn-3">
|
<linearGradient x1="50%" y1="47.4330881%" x2="94.7041474%" y2="52.5669119%" :id="`3-${boxId}`">
|
||||||
<stop stop-color="#008C46" stop-opacity="0" offset="0%"></stop>
|
<stop :stop-color="colors[4]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop stop-color="#06C869" offset="100%"></stop>
|
<stop :stop-color="colors[5]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="99.7047264%" y1="50%" x2="0%" y2="50%" id="linearGradientTitlesBtn-4">
|
<linearGradient x1="99.7047264%" y1="50%" x2="0%" y2="50%" :id="`4-${boxId}`">
|
||||||
<stop stop-color="#02B56D" stop-opacity="0" offset="0%"></stop>
|
<stop :stop-color="colors[6]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop stop-color="#008C47" offset="53.8476904%"></stop>
|
<stop :stop-color="colors[1]" offset="53.8476904%"></stop>
|
||||||
<stop stop-color="#02B56D" stop-opacity="0" offset="100%"></stop>
|
<stop :stop-color="colors[6]" stop-opacity="0" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="99.7177871%" y1="62.6696413%" x2="3.44509591%" y2="36.1238825%" id="linearGradientTitlesBtn-5">
|
<linearGradient x1="99.7177871%" y1="62.6696413%" x2="3.44509591%" y2="36.1238825%" :id="`5-${boxId}`">
|
||||||
<stop stop-color="#009045" stop-opacity="0" offset="0%"></stop>
|
<stop :stop-color="colors[7]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop stop-color="#009045" offset="100%"></stop>
|
<stop :stop-color="colors[7]" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient x1="100%" y1="49.88411%" x2="0%" y2="50%" id="linearGradientTitlesBtn-6">
|
<linearGradient x1="100%" y1="49.88411%" x2="0%" y2="50%" :id="`6-${boxId}`">
|
||||||
<stop stop-color="#02C175" stop-opacity="0.64290827" offset="0%"></stop>
|
<stop :stop-color="colors[2]" stop-opacity="0.64290827" offset="0%"></stop>
|
||||||
<stop stop-color="#02C074" offset="54.9861881%"></stop>
|
<stop :stop-color="colors[8]" offset="54.9861881%"></stop>
|
||||||
<stop stop-color="#02C175" stop-opacity="0" offset="100%"></stop>
|
<stop :stop-color="colors[2]" stop-opacity="0" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<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="大标题top" transform="translate(8, 22)">
|
||||||
<g id="切换" transform="translate(392, 43)">
|
<g id="切换" transform="translate(392, 43)">
|
||||||
<g id="编组-39" transform="translate(0.8348, 0.6849)">
|
<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
|
||||||
<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>
|
id="路径-3" :stroke="`url(#2-${boxId})`" stroke-width="0.816425121"
|
||||||
<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>
|
:fill="`url(#1-${boxId})`" fill-rule="nonzero"
|
||||||
<polygon id="矩形" fill="#02B56D" fill-rule="nonzero" points="37.398018 0 69.1753804 0 71.4939791 2.31508792 39.7434169 2.31508792"></polygon>
|
: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
|
||||||
<g id="编组-20" transform="translate(92.3751, 19.6168)" fill="url(#linearGradientTitlesBtn-5)" fill-rule="nonzero">
|
${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>
|
<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>
|
</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>
|
<polyline
|
||||||
<polygon id="矩形" fill="#EBBE10" points="121.658691 23.3287147 123.16516 25.8219013 120.895552 28.3050479 117.479623 28.3150879"></polygon>
|
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>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
|
@ -72,12 +99,7 @@ const filterId = `border-box-04-filterId-${getUUID()}`
|
||||||
const { w, h } = toRefs(props.chartConfig.attr)
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
const {
|
const {
|
||||||
colors,
|
colors,
|
||||||
borderTitle,
|
boxId
|
||||||
borderTitleColor,
|
|
||||||
borderTitleSize,
|
|
||||||
borderTitleHeight,
|
|
||||||
borderTitleWidth,
|
|
||||||
backgroundColor
|
|
||||||
} = toRefs(props.chartConfig.option)
|
} = toRefs(props.chartConfig.option)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -101,9 +123,5 @@ const {
|
||||||
.stroke {
|
.stroke {
|
||||||
stroke: v-bind('colors[1]');
|
stroke: v-bind('colors[1]');
|
||||||
}
|
}
|
||||||
.text {
|
|
||||||
color: v-bind('borderTitleColor');
|
|
||||||
font-size: v-bind('borderTitleSize+"px"');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,14 +5,8 @@ import { TitlesBtnActiveConfig } from './index'
|
||||||
import cloneDeep from 'lodash/cloneDeep'
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
dur: 0.5,
|
boxId: 'linearGradientTitlesLeftBtnActive',
|
||||||
borderTitle: '按钮选中',
|
colors: ['#131415','#EA9607','#EBBE11','#EBBE10','#EBBA0F','#EBB90F'],
|
||||||
borderTitleWidth: 124,
|
|
||||||
borderTitleHeight: 30,
|
|
||||||
borderTitleSize: 18,
|
|
||||||
borderTitleColor: '#fff',
|
|
||||||
colors: ['#0E8A6D', '#02261C'],
|
|
||||||
backgroundColor: '#00000000'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<CollapseItem name="标题" :expanded="true">
|
<CollapseItem name="内容" :expanded="true">
|
||||||
<SettingItemBox name="内容" :alone="true">
|
<SettingItemBox name="ID" :alone="true">
|
||||||
<n-input
|
<n-input
|
||||||
size="small"
|
size="small"
|
||||||
v-model:value="optionData.borderTitle"
|
v-model:value="optionData.boxId"
|
||||||
:minlength="1"
|
:minlength="1"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="请输入标题内容"
|
placeholder="请输入Id"
|
||||||
/>
|
/>
|
||||||
</SettingItemBox>
|
</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>
|
||||||
|
<CollapseItem name="样式" :expanded="true">
|
||||||
<CollapseItem name="边框" :expanded="true">
|
|
||||||
<SettingItemBox
|
<SettingItemBox
|
||||||
:name="`颜色-${index + 1}`"
|
:name="`颜色-${index + 1}`"
|
||||||
v-for="(item, index) in optionData.colors"
|
v-for="(item, index) in optionData.colors"
|
||||||
|
|
@ -66,31 +33,6 @@
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
</CollapseItem>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ export const TitlesBtnActiveConfig: ConfigType = {
|
||||||
key: 'TitlesBtnActive',
|
key: 'TitlesBtnActive',
|
||||||
chartKey: 'VTitlesBtnActive',
|
chartKey: 'VTitlesBtnActive',
|
||||||
conKey: 'VCTitlesBtnActive',
|
conKey: 'VCTitlesBtnActive',
|
||||||
title: '标题按钮',
|
title: '标题按钮左-选中',
|
||||||
category: ChatCategoryEnum.TITLE,
|
category: ChatCategoryEnum.TITLE,
|
||||||
categoryName: ChatCategoryEnumName.TITLE,
|
categoryName: ChatCategoryEnumName.TITLE,
|
||||||
package: PackagesCategoryEnum.UNITS,
|
package: PackagesCategoryEnum.UNITS,
|
||||||
|
|
|
||||||
|
|
@ -3,33 +3,32 @@
|
||||||
<svg :width="w" :height="h">
|
<svg :width="w" :height="h">
|
||||||
<title>编组 39</title>
|
<title>编组 39</title>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient x1="-48.389998%" y1="50%" x2="76.7832982%" y2="50%" id="linearGradientTitlesBtn-1">
|
<linearGradient x1="-48.389998%" y1="50%" x2="76.7832982%" y2="50%" :id="`1-${boxId}`">
|
||||||
<stop stop-color="#131415" stop-opacity="0" offset="0%"></stop>
|
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop stop-color="#008C47" stop-opacity="0.950850141" offset="95.0850141%"></stop>
|
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||||
<stop stop-color="#008C47" offset="100%"></stop>
|
</linearGradient>
|
||||||
</linearGradient>
|
<linearGradient x1="97.1573557%" y1="50%" x2="5.14786075%" y2="50%" :id="`2-${boxId}`">
|
||||||
<linearGradient x1="97.1573557%" y1="50%" x2="4.12707014%" y2="50%" id="linearGradientTitlesBtn-2">
|
<stop :stop-color="colors[2]" offset="0%"></stop>
|
||||||
<stop stop-color="#02C175" offset="0%"></stop>
|
<stop :stop-color="colors[3]" stop-opacity="0" offset="100%"></stop>
|
||||||
<stop stop-color="#02AD69" stop-opacity="0" offset="100%"></stop>
|
</linearGradient>
|
||||||
</linearGradient>
|
<linearGradient x1="50%" y1="47.4330881%" x2="94.7041474%" y2="52.5669119%" :id="`3-${boxId}`">
|
||||||
<linearGradient x1="50%" y1="47.4330881%" x2="94.7041474%" y2="52.5669119%" id="linearGradientTitlesBtn-3">
|
<stop :stop-color="colors[4]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop stop-color="#008C46" stop-opacity="0" offset="0%"></stop>
|
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||||
<stop stop-color="#06C869" offset="100%"></stop>
|
</linearGradient>
|
||||||
</linearGradient>
|
<linearGradient x1="99.7047264%" y1="50%" x2="0%" y2="50%" :id="`4-${boxId}`">
|
||||||
<linearGradient x1="99.7047264%" y1="50%" x2="0%" y2="50%" id="linearGradientTitlesBtn-4">
|
<stop :stop-color="colors[4]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop stop-color="#02B56D" stop-opacity="0" offset="0%"></stop>
|
<stop :stop-color="colors[4]" offset="53.1994373%"></stop>
|
||||||
<stop stop-color="#008C47" offset="53.8476904%"></stop>
|
<stop :stop-color="colors[4]" stop-opacity="0" offset="100%"></stop>
|
||||||
<stop stop-color="#02B56D" stop-opacity="0" offset="100%"></stop>
|
</linearGradient>
|
||||||
</linearGradient>
|
<linearGradient x1="99.7177871%" y1="62.6696413%" x2="3.44509591%" y2="36.1238825%" :id="`5-${boxId}`">
|
||||||
<linearGradient x1="99.7177871%" y1="62.6696413%" x2="3.44509591%" y2="36.1238825%" id="linearGradientTitlesBtn-5">
|
<stop :stop-color="colors[4]" stop-opacity="0" offset="0%"></stop>
|
||||||
<stop stop-color="#009045" stop-opacity="0" offset="0%"></stop>
|
<stop :stop-color="colors[4]" offset="100%"></stop>
|
||||||
<stop stop-color="#009045" offset="100%"></stop>
|
</linearGradient>
|
||||||
</linearGradient>
|
<linearGradient x1="100%" y1="49.88411%" x2="0%" y2="50%" :id="`6-${boxId}`">
|
||||||
<linearGradient x1="100%" y1="49.88411%" x2="0%" y2="50%" id="linearGradientTitlesBtn-6">
|
<stop :stop-color="colors[4]" offset="0%"></stop>
|
||||||
<stop stop-color="#02C175" stop-opacity="0.64290827" offset="0%"></stop>
|
<stop :stop-color="colors[4]" offset="54.9861881%"></stop>
|
||||||
<stop stop-color="#02C074" offset="54.9861881%"></stop>
|
<stop :stop-color="colors[4]" offset="100%"></stop>
|
||||||
<stop stop-color="#02C175" stop-opacity="0" offset="100%"></stop>
|
</linearGradient>
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
</defs>
|
||||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g id="林业防火-智览-切图版" transform="translate(-389, -44)">
|
<g id="林业防火-智览-切图版" transform="translate(-389, -44)">
|
||||||
|
|
@ -37,15 +36,41 @@
|
||||||
<g id="大标题top" transform="translate(8, 22)">
|
<g id="大标题top" transform="translate(8, 22)">
|
||||||
<g id="切换" transform="translate(392, 43)">
|
<g id="切换" transform="translate(392, 43)">
|
||||||
<g id="编组-39" transform="translate(0.8348, 0.6849)">
|
<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
|
||||||
<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>
|
id="路径-3" :stroke="`url(#2-${boxId})`" stroke-width="0.816425121"
|
||||||
<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>
|
:fill="`url(#1-${boxId})`" fill-rule="nonzero"
|
||||||
<polygon id="矩形" fill="#02B56D" fill-rule="nonzero" points="37.398018 0 69.1753804 0 71.4939791 2.31508792 39.7434169 2.31508792"></polygon>
|
: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
|
||||||
<g id="编组-20" transform="translate(92.3751, 19.6168)" fill="url(#linearGradientTitlesBtn-5)" fill-rule="nonzero">
|
${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>
|
<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>
|
</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>
|
<polyline
|
||||||
<polygon id="矩形" fill="#EBBE10" points="121.658691 23.3287147 123.16516 25.8219013 120.895552 28.3050479 117.479623 28.3150879"></polygon>
|
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>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
|
@ -72,12 +97,7 @@ const filterId = `border-box-04-filterId-${getUUID()}`
|
||||||
const { w, h } = toRefs(props.chartConfig.attr)
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
const {
|
const {
|
||||||
colors,
|
colors,
|
||||||
borderTitle,
|
boxId
|
||||||
borderTitleColor,
|
|
||||||
borderTitleSize,
|
|
||||||
borderTitleHeight,
|
|
||||||
borderTitleWidth,
|
|
||||||
backgroundColor
|
|
||||||
} = toRefs(props.chartConfig.option)
|
} = toRefs(props.chartConfig.option)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -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',
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -1,9 +1,19 @@
|
||||||
import { TopTitlesConfig } from './TopTitles/index';
|
import { TopTitlesConfig } from './TopTitles/index';
|
||||||
|
import { TopTitles01Config } from './TopTitles01/index';
|
||||||
import { TitlesBtnConfig } from './TitlesBtn/index';
|
import { TitlesBtnConfig } from './TitlesBtn/index';
|
||||||
import { TitlesBtnActiveConfig } from './TitlesBtnActive/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 [
|
export default [
|
||||||
TopTitlesConfig,
|
TopTitlesConfig,
|
||||||
|
TopTitles01Config,
|
||||||
TitlesBtnConfig,
|
TitlesBtnConfig,
|
||||||
TitlesBtnActiveConfig
|
TitlesBtnActiveConfig,
|
||||||
|
ContentBackgroundConfig,
|
||||||
|
ContentTitleConfig,
|
||||||
|
ContentTitle01Config,
|
||||||
|
// ContentTitle02Config
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -11,4 +11,4 @@ export const MeiRiShangBaoConfig: ConfigType = {
|
||||||
package: PackagesCategoryEnum.ZHIGAN,
|
package: PackagesCategoryEnum.ZHIGAN,
|
||||||
chartFrame: ChartFrameEnum.COMMON,
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
image: 'MeiRiShangBao.png'
|
image: 'MeiRiShangBao.png'
|
||||||
}
|
}
|
||||||
|
|
@ -9,8 +9,7 @@
|
||||||
<div class="content-div">
|
<div class="content-div">
|
||||||
<div class="photo-item" v-for="(item, index) in photoList" :key="index">
|
<div class="photo-item" v-for="(item, index) in photoList" :key="index">
|
||||||
<Image
|
<Image
|
||||||
:width="150"
|
|
||||||
:height="150"
|
|
||||||
:src="`${apiUrl}/${item.filePath}`"
|
:src="`${apiUrl}/${item.filePath}`"
|
||||||
/>
|
/>
|
||||||
<div class="select-div">
|
<div class="select-div">
|
||||||
|
|
@ -175,7 +174,7 @@ const addPhotoToList = () =>{
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
// background-color: red;
|
background-color: rgb(24,24,28);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
.select-div{
|
.select-div{
|
||||||
|
|
|
||||||
|
|
@ -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=
|
||||||
Loading…
Reference in New Issue