Compare commits
2 Commits
ffc54635e8
...
3df2f6d67f
| Author | SHA1 | Date |
|---|---|---|
userName
|
3df2f6d67f | |
|
userName
|
fd872a102d |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { EquipmentContentbg01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'EquipmentContentbg01',
|
||||
colors: ['#06463A','#02221B','#00D586','#00AB4E','#007343','#89E5A1'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = EquipmentContentbg01Config.key
|
||||
public attr = { ...chartInitConfig, w: 401, h: 119, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(EquipmentContentbg01Config)
|
||||
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 EquipmentContentbg01Config: ConfigType = {
|
||||
key: 'Contentbg01',
|
||||
chartKey: 'VContentbg01',
|
||||
conKey: 'VCContentbg01',
|
||||
title: '模块背景-01',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'contentbg01.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>线框</title>
|
||||
<defs>
|
||||
<linearGradient x1="111.443576%" y1="49.6958485%" x2="22.7949589%" 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="63.7744003%" x2="3.01316879%" y2="63.7744003%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[2]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="85.9305144%" y1="1.11366703%" x2="0%" y2="86.1698764%" :id="`3-${boxId}`">
|
||||
<stop :stop-color="colors[3]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[4]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="6.17106015%" y1="0%" x2="67.7872653%" y2="117.560409%" :id="`4-${boxId}`">
|
||||
<stop :stop-color="colors[2]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[5]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-45, -311)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(45.5, 92)">
|
||||
<g id="编组-7" transform="translate(0, 0.8472)">
|
||||
<g id="边框" transform="translate(0, 219.1528)">
|
||||
<polygon
|
||||
id="面"
|
||||
:fill="`url(#1-${boxId})`"
|
||||
opacity="0.687237694"
|
||||
:points="`0.999001996 1 ${w-1} 1 ${w-1} ${h-1} ${w/2.18} ${h-1} 0.999001996 ${h-1} 0.999001996 ${h/1.41} 0.999001996 ${h/2.07}`"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="线框"
|
||||
:stroke="`url(#2-${boxId})`"
|
||||
:points="`0.999001996 1 ${w-1} 1 ${w-1} ${h/4.78} ${w/1.01} ${h/4.45} ${w/1.01} ${h/2.4} ${w-1.5} ${h/2.3} ${w-1.5} ${h-1} 0.999001996 ${h-1} 0.999001996 ${h/2.3} 4.65053776 ${h/2.39} 4.65053776 ${h/4.43} 0.999001996 ${h/4.8}`"
|
||||
></polygon>
|
||||
<g id="编组-62" transform="translate(12.7416, 14.0144) scale(1, -1) translate(-12.7416, -14.0144)translate(0.5, 0.9394)">
|
||||
<polygon
|
||||
id="路径-11"
|
||||
:fill="`url(#3-${boxId})`"
|
||||
transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
|
||||
:points="`0 18.8448966 0 26.1499885 7.30509189 18.8448966`"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="装饰线段-"
|
||||
:fill="`url(#4-${boxId})`"
|
||||
fill-rule="nonzero"
|
||||
:points="`3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14`"
|
||||
></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 { EquipmentContentbg02Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'EquipmentContentbg02',
|
||||
colors: ['#00AB4E','#00D78B','#00D586','#007343','#89E5A1'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = EquipmentContentbg02Config.key
|
||||
public attr = { ...chartInitConfig, w: 401, h: 273, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(EquipmentContentbg02Config)
|
||||
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 EquipmentContentbg02Config: ConfigType = {
|
||||
key: 'Contentbg02',
|
||||
chartKey: 'VContentbg02',
|
||||
conKey: 'VCContentbg02',
|
||||
title: '模块背景-02',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'contentbg02.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>边框</title>
|
||||
<defs>
|
||||
<linearGradient x1="44.8535648%" y1="21.9340044%" x2="44.8535648%" y2="105.614796%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[2]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[0]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="6.17106015%" y1="0%" x2="67.7872653%" y2="117.560409%" :id="`3-${boxId}`">
|
||||
<stop :stop-color="colors[3]" offset="0%"></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(-1495, -91)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(45.5, 92)">
|
||||
<g id="标题模块--右侧1" transform="translate(1010.999, 0)">
|
||||
<g id="底部背景" transform="translate(439.001, 0)">
|
||||
<g id="边框" transform="translate(0.5, 0.9394)">
|
||||
<polygon
|
||||
id="线框"
|
||||
:stroke="`url(#1-${boxId})`"
|
||||
:points="`0.499001996 0.060630108 ${w-1} 0.060630108 ${w-1} ${h/4.93} ${w/1.01} ${h/4.57} ${w/1.01} ${h/2.42} ${w-2} ${h/2.33} ${w-2} ${h-2} 0.499001996 ${h-2} 0.499001996 ${h/2.33} 4.15053776 ${h/2.41} 4.15053776 ${h/4.56} 0.499001996 ${h/4.95}`"
|
||||
></polygon>
|
||||
<g id="左1" transform="translate(12.2416, 13.075) scale(1, -1) translate(-12.2416, -13.075)">
|
||||
<polygon
|
||||
id="路径-11"
|
||||
:fill="`url(#2-${boxId})`"
|
||||
transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
|
||||
points="0 18.8448966 0 26.1499885 7.30509189 18.8448966"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="装饰线段-"
|
||||
:fill="`url(#3-${boxId})`" fill-rule="nonzero"
|
||||
points="3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14"
|
||||
></polygon>
|
||||
</g>
|
||||
<g id="右1" :transform="`translate(${w-13.5}, ${h-15}) scale(-1, 1) translate(-${w-13.5}, -${h-15})translate(${w-26}, ${h-28})`">
|
||||
<polygon
|
||||
id="路径-11"
|
||||
:fill="`url(#2-${boxId})`"
|
||||
transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
|
||||
points="0 18.8448966 0 26.1499885 7.30509189 18.8448966"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="装饰线段-"
|
||||
:fill="`url(#3-${boxId})`" fill-rule="nonzero"
|
||||
points="3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14"
|
||||
></polygon>
|
||||
</g>
|
||||
</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 { EquipmentTitlesbg01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'EquipmentTitlesbg01',
|
||||
colors: ['#1E9C66','#0D6336','#11A14D','#018B47','#15C277'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = EquipmentTitlesbg01Config.key
|
||||
public attr = { ...chartInitConfig, w: 172, h: 71, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(EquipmentTitlesbg01Config)
|
||||
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 EquipmentTitlesbg01Config: ConfigType = {
|
||||
key: 'TitlesBg01',
|
||||
chartKey: 'VTitlesBg01',
|
||||
conKey: 'VCTitlesBg01',
|
||||
title: '标题背景-01',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'titlesbg01.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 44</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="111.995163%" y1="49.2982589%" x2="0.277773984%" 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>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-51, -114)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(45.5, 92)">
|
||||
<g id="编组-7" transform="translate(0, 0.8472)">
|
||||
<g id="标题模块--左侧1" transform="translate(0.5, 0)">
|
||||
<g id="卫星" transform="translate(5.5, 22.1528)">
|
||||
<g id="编组-44" transform="translate(0.9516, 0.8787)">
|
||||
<!-- w: 172, h: 71 -->
|
||||
<path
|
||||
:d="`M${w/1.06},5.68434189e-14 C${w/1.04},4.03349177e-14 ${w/1.01},3.581722 ${w/1.01},8 L${w/1.01},${h/6.99} C${w/1.21},${h/4.18} ${w/1.42},${h/1.77} ${w/1.47},${h/1.03} L8.0007516,${h/1.03} C3.5824736,${h/1.03} 0.000751599233,${h/1.09} 0.000751599233,${h/1.17} L0.000751599233,8 C0.000751599233,3.581722 3.5824736,5.73845019e-14 8.0007516,5.68434189e-14 L${w/1.06},5.68434189e-14 Z`"
|
||||
id="形状结合" :stroke="`url(#1-${boxId})`" ></path>
|
||||
<path
|
||||
:d="`M${w/1.06},0 C${w/1.04},-1.65085012e-14 ${w/1.01},3.581722 ${w/1.01},8 L${w/1.01},${h/6.99} C${w/1.21},${h/4.18} ${w/1.42},${h/1.77} ${w/1.47},${h/1.03} L8.0007516,${h/1.03} C3.5824736,${h/1.03} 0.000751599233,${h/1.09} 0.000751599233,${h/1.17} L0.000751599233,8 C0.000751599233,3.581722 3.5824736,5.41083001e-16 8.0007516,0 L${w/1.06},0 Z`"
|
||||
id="形状结合" :fill="`url(#2-${boxId})`" ></path>
|
||||
<polygon
|
||||
id="装饰路径"
|
||||
:fill="colors[4]" fill-rule="nonzero"
|
||||
:points="`0.000751599234 ${h/3.61} 4.26441291 23.1893262 4.45475328 ${h/3.04} 4.45475328 ${h/1.61} 4.22292912 ${h/1.6} 0 ${h/1.51} -3.09110604e-17 ${h/1.54} 3.4547516 ${h/1.63} 3.4547516 ${h/2.98} 0.000751599234 ${h/3.39}`"></polygon>
|
||||
</g>
|
||||
</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 { EquipmentTitlesbg02Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
text: '风险指数',
|
||||
colors: [],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = EquipmentTitlesbg02Config.key
|
||||
public attr = { ...chartInitConfig, w: 142, h: 142, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(EquipmentTitlesbg02Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="内容" :alone="true">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.text"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</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 EquipmentTitlesbg02Config: ConfigType = {
|
||||
key: 'TitlesBg02',
|
||||
chartKey: 'VTitlesBg02',
|
||||
conKey: 'VCTitlesBg02',
|
||||
title: '标题背景-02',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'titlesbg02.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 68</title>
|
||||
<defs>
|
||||
<circle id="eqTitlesbgpath-1" cx="69.9647383" cy="69.9647383" r="44.9773318"></circle>
|
||||
<filter x="-24.5%" y="-24.5%" width="148.9%" height="148.9%" filterUnits="objectBoundingBox" id="eqTitlesbgfilter-2">
|
||||
<feMorphology radius="28" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="5" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-175, -126)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(45.5, 92)">
|
||||
<g id="编组-7" transform="translate(0, 0.8472)">
|
||||
<g id="标题模块--左侧1" transform="translate(0.5, 0)">
|
||||
<g id="编组-68" transform="translate(130.9345, 35.1392)">
|
||||
<g id="面">
|
||||
<use fill="#193329" fill-rule="evenodd" xlink:href="#eqTitlesbgpath-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#eqTitlesbgfilter-2)" xlink:href="#eqTitlesbgpath-1"></use>
|
||||
<use stroke="#11A14D" stroke-width="1" xlink:href="#eqTitlesbgpath-1"></use>
|
||||
</g>
|
||||
<path d="M69.9644865,117.940559 C96.4609397,117.940559 117.940559,96.4609397 117.940559,69.9644865 C117.940559,43.4680333 96.4609397,21.988414 69.9644865,21.988414 C43.4680333,21.988414 21.988414,43.4680333 21.988414,69.9644865 C21.988414,96.4609397 43.4680333,117.940559 69.9644865,117.940559 Z" id="虚线" stroke="#11A14D" stroke-width="6" stroke-dasharray="2,4"></path>
|
||||
<path d="M105.626255,113.753898 L108.174106,115.537687 C97.8397879,124.211336 84.5122618,129.434766 69.9647383,129.434766 C56.823398,129.434766 44.6776008,125.172339 34.834457,117.954594 L37.435827,116.132182 C46.6316164,122.623275 57.8528903,126.436277 69.9647383,126.436277 C83.4889808,126.436277 95.9028341,121.682136 105.626255,113.753898 Z M14.0595162,49.637029 L16.608208,51.4214585 C14.5898889,57.2296997 13.4931995,63.4691463 13.4931995,69.9647383 C13.4931995,79.2104905 15.715131,87.9372828 19.6541502,95.6402715 L17.1748639,97.3759309 C12.9069219,89.1732556 10.4947107,79.850698 10.4947107,69.9647383 C10.4947107,62.8251096 11.7528505,55.9793352 14.0595162,49.637029 Z M129.434766,69.9647383 C129.434766,78.5004155 127.636501,86.6160855 124.398157,93.9535634 L121.891645,92.1968581 C124.816674,85.3738811 126.436277,77.858449 126.436277,69.9647383 C126.436277,64.8499906 125.7563,59.8940601 124.481812,55.1824148 L127.085585,53.3596429 C128.614954,58.6296941 129.434766,64.2014776 129.434766,69.9647383 Z M69.9647383,10.4947107 C87.2972618,10.4947107 102.897959,17.9095414 113.767815,29.7401882 L111.288125,31.4752934 C100.978892,20.4118737 86.2797864,13.4931995 69.9647383,13.4931995 C55.0178593,13.4931995 41.4272633,19.3001377 31.3259059,28.7810587 L28.8193019,27.0258601 C39.5021589,16.7864777 53.9986881,10.4947107 69.9647383,10.4947107 Z" id="形状结合" fill="#11A14D" fill-rule="nonzero"></path>
|
||||
<circle id="外线" stroke="#11A14D" opacity="0.50405" cx="69.9647383" cy="69.9647383" r="69.9647383"></circle>
|
||||
<g id="1" transform="translate(32.9834, 74.9622)">
|
||||
<text id="风险指数" font-family="PingFangSC-Regular, PingFang SC" font-size="14" font-weight="normal" fill="#CBE7CD">
|
||||
<tspan x="8.98136169" y="20.9919402">{{text}}</tspan>
|
||||
</text>
|
||||
<rect id="矩形" fill="#396754" x="0" y="0" width="74.8394734" height="1"></rect>
|
||||
</g>
|
||||
</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,
|
||||
text
|
||||
} = 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,18 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { EquipmentTitlesbg03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'EquipmentTitlesbg03',
|
||||
colors: ['#F4990F','#F9521E','#F9581D','#F8621B','#F9541D','#F85E1B','#F85E1C'],
|
||||
textSize: 20
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = EquipmentTitlesbg03Config.key
|
||||
public attr = { ...chartInitConfig, w: 142, h: 98, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(EquipmentTitlesbg03Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="ID" :alone="true">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.boxId"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="字号" :alone="true">
|
||||
<n-input-number v-model:value="optionData.textSize" size="small" :min="12"></n-input-number>
|
||||
</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 EquipmentTitlesbg03Config: ConfigType = {
|
||||
key: 'TitlesBg03',
|
||||
chartKey: 'VTitlesBg03',
|
||||
conKey: 'VCTitlesBg03',
|
||||
title: '标题背景-03',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'titlesbg03.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 69</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[2]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-55, -319)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(45.5, 92)">
|
||||
<g id="编组-7" transform="translate(0, 0.8472)">
|
||||
<g id="标题模块--左侧1" transform="translate(0, 219.1528)">
|
||||
<g id="编组-69" transform="translate(10.5, 8.9394)">
|
||||
<!-- w: 142, h: 98 -->
|
||||
<rect id="矩形" :stroke="colors[4]" :x="`${w/5.46}`" y="1" :width="`${w/1.34}`" :height="`${h-4}`"></rect>
|
||||
<g id="小标题" :fill="`url(#1-${boxId})`">
|
||||
<polygon
|
||||
id="矩形"
|
||||
:transform="`translate(${w/7.1}, ${h/2.03}) scale(-1, -1) translate(-${w/7.1}, -${h/2.03})`"
|
||||
:points="`8 3.49663456e-14 ${w/3.55} 3.49663456e-14 ${w/3.55} ${h/1.12} ${w/4.53} ${h-2} -6.9388939e-17 ${h-2} 0 9.06995383`"
|
||||
></polygon>
|
||||
<text id="卫-星" font-family="PingFangSC-Regular, PingFang SC" :font-size="textSize" font-weight="normal" fill="#F5FFF6">
|
||||
<tspan :x="`${w/14.2}`" :y="`${h/2.39}`">卫</tspan>
|
||||
<tspan :x="`${w/14.2}`" :y="`${h/1.42}`">星</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<rect
|
||||
id="矩形" :fill="colors[5]"
|
||||
:transform="`translate(${w/1.06}, ${h/1.94}) rotate(90) translate(-${w/1.06}, -${h/1.94})`"
|
||||
:x="`${w/1.46}`" :y="`${h/1.96}`" :width="`${w/1.9}`" height="1"
|
||||
></rect>
|
||||
<rect id="矩形"
|
||||
:fill="colors[6]"
|
||||
:transform="`translate(${w/1.097}, ${h/1.94}) rotate(90) translate(-${w/1.097}, -${h/1.94})`"
|
||||
:x="`${w/1.54}`" :y="`${h/1.96}`" :width="`${w/1.9}`" height="1"
|
||||
></rect>
|
||||
<polygon
|
||||
id="三角形"
|
||||
:fill="`url(#2-${boxId})`"
|
||||
:transform="`translate(${w-5}, ${h/2.1}) rotate(90) translate(-${w-5}, -${h/2.1})`"
|
||||
:points="`${w-5} ${h/2.28} ${w+1.5} ${h/1.95} ${w-11.5} ${h/1.95}`"></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,
|
||||
textSize
|
||||
} = 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 { EquipmentTitlesbg04Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'EquipmentTitlesbg04',
|
||||
colors: ['#457453','#0D6336','#FFCE00','#4FE985','#9BCCB8'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = EquipmentTitlesbg04Config.key
|
||||
public attr = { ...chartInitConfig, w: 103, h: 94, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(EquipmentTitlesbg04Config)
|
||||
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="请输入"
|
||||
/>
|
||||
</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 EquipmentTitlesbg04Config: ConfigType = {
|
||||
key: 'TitlesBg04',
|
||||
chartKey: 'VTitlesBg04',
|
||||
conKey: 'VCTitlesBg04',
|
||||
title: '标题背景-04',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'titlesbg04.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 66</title>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-208, -321)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(45.5, 92)">
|
||||
<g id="编组-7" transform="translate(0, 0.8472)">
|
||||
<g id="标题模块--左侧1" transform="translate(0, 219.1528)">
|
||||
<g id="编组-66" :transform="`translate(164.5, 11.9394)`">
|
||||
<!-- w: 103, h: 94 -->
|
||||
<rect id="矩形" :stroke="colors[0]" x="0.00126503312" y="0.266825726" :width="`${w/1.03}`" :height="`${h/1.04}`"></rect>
|
||||
<polygon
|
||||
id="矩形" :fill="colors[1]"
|
||||
:points="`6 5 ${w/1.22} 5 ${w/1.05} ${h/6.33} ${w/1.05} ${h/1.06} 6 ${h/1.06}`"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11" :fill="colors[2]"
|
||||
:transform="`translate(${w/1.12}, 8.9194) scale(-1, 1) translate(-${w/1.12}, -8.9194)`"
|
||||
:points="`${w/1.2} 5.26682573 ${w/1.2} ${h/7.68} ${w/1.06} 5.26682573`"
|
||||
></polygon>
|
||||
<polyline
|
||||
id="路径-32" :stroke="colors[3]" stroke-width="2"
|
||||
:transform="`translate(${w/29.35}, ${h/26.12}) scale(1, -1) translate(-${w/29.35}, -${h/26.12})`"
|
||||
:points="`0 0 0 ${h/13.06} ${w/14.67} ${h/13.06}`"
|
||||
></polyline>
|
||||
<polyline
|
||||
id="路径-32" :stroke="colors[3]" stroke-width="2"
|
||||
:points="`0 ${h/1.13} 0 ${h/1.04} ${w/14.67} ${h/1.04}`"
|
||||
></polyline>
|
||||
<polyline
|
||||
id="路径-32" :stroke="colors[3]" stroke-width="2"
|
||||
:transform="`translate(${w/1.06}, ${h/26.12}) scale(-1, -1) translate(-${w/1.09}, -${h/26.12})`"
|
||||
:points="`${w/1.11} 1.42108547e-14 ${w/1.11} ${h/13.06} ${w/1.03} ${h/13.06}`"
|
||||
></polyline>
|
||||
<polyline
|
||||
id="路径-32" :stroke="colors[3]" stroke-width="2"
|
||||
:transform="`translate(${w/1.06}, ${h/1.09}) scale(-1, 1) translate(-${w/1.09}, -${h/1.09})`"
|
||||
:points="`${w/1.11} ${h/1.13} ${w/1.11} ${h/1.04} ${w/1.03} ${h/1.04}`"
|
||||
></polyline>
|
||||
<rect
|
||||
id="矩形" :fill="colors[4]" opacity="0.376644316"
|
||||
:transform="`translate(${w/2.04}, ${h/2.11}) rotate(180) translate(-${w/2.04}, -${h/2.11})`"
|
||||
:x="`${w/7.92}`" :y="`${h/2.14}`" :width="`${w/1.38}`" height="1"
|
||||
></rect>
|
||||
</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 { EquipmentTitlesbg05Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'EquipmentTitlesbg05',
|
||||
colors: [],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = EquipmentTitlesbg05Config.key
|
||||
public attr = { ...chartInitConfig, w: 102, h: 91, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(EquipmentTitlesbg05Config)
|
||||
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 EquipmentTitlesbg05Config: ConfigType = {
|
||||
key: 'TitlesBg05',
|
||||
chartKey: 'VTitlesBg05',
|
||||
conKey: 'VCTitlesBg05',
|
||||
title: '标题背景-05',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'titlesbg05.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/equipment/titlesbg05.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 { EquipmentTitlesbg06Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'EquipmentTitlesbg06',
|
||||
colors: [],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = EquipmentTitlesbg06Config.key
|
||||
public attr = { ...chartInitConfig, w: 72, h: 46, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(EquipmentTitlesbg06Config)
|
||||
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 EquipmentTitlesbg06Config: ConfigType = {
|
||||
key: 'TitlesBg06',
|
||||
chartKey: 'VTitlesBg06',
|
||||
conKey: 'VCTitlesBg06',
|
||||
title: '标题背景-06',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.EQUIPMENT,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'titlesbg06.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/equipment/titlesbg06.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,20 @@
|
|||
import { EquipmentContentbg01Config } from './Contentbg01/index';
|
||||
import { EquipmentContentbg02Config } from './Contentbg02/index';
|
||||
import { EquipmentTitlesbg01Config } from './TitlesBg01/index';
|
||||
import { EquipmentTitlesbg02Config } from './TitlesBg02/index';
|
||||
import { EquipmentTitlesbg03Config } from './TitlesBg03/index';
|
||||
import { EquipmentTitlesbg04Config } from './TitlesBg04/index';
|
||||
import { EquipmentTitlesbg05Config } from './TitlesBg05/index';
|
||||
import { EquipmentTitlesbg06Config } from './TitlesBg06/index';
|
||||
|
||||
|
||||
export default [
|
||||
EquipmentContentbg01Config,
|
||||
EquipmentContentbg02Config,
|
||||
EquipmentTitlesbg01Config,
|
||||
EquipmentTitlesbg02Config,
|
||||
EquipmentTitlesbg03Config,
|
||||
EquipmentTitlesbg04Config,
|
||||
EquipmentTitlesbg05Config,
|
||||
EquipmentTitlesbg06Config,
|
||||
];
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export enum ChatCategoryEnum {
|
||||
TITLE = 'Equipment',
|
||||
}
|
||||
|
||||
export enum ChatCategoryEnumName {
|
||||
TITLE = '设备',
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Equipment from './Equipment'
|
||||
|
||||
export const EquipmentList = [...Equipment]
|
||||
|
|
@ -202,7 +202,7 @@ export enum PackagesCategoryEnum {
|
|||
CUSTOM = 'Custom',
|
||||
UNITS = 'Units',
|
||||
ZHIGAN = 'Zhigan',
|
||||
MAPICONS = 'MapIcons'
|
||||
EQUIPMENT = 'Equipment',
|
||||
}
|
||||
|
||||
// 包分类名称
|
||||
|
|
@ -217,7 +217,7 @@ export enum PackagesCategoryName {
|
|||
CUSTOM = '预警信息',
|
||||
UNITS = '组件',
|
||||
ZHIGAN = '智感',
|
||||
MAPICONS = '地图图标'
|
||||
EQUIPMENT = '设备'
|
||||
}
|
||||
|
||||
// 获取组件
|
||||
|
|
@ -238,5 +238,5 @@ export type PackagesType = {
|
|||
[PackagesCategoryEnum.CUSTOM]: ConfigType[];
|
||||
[PackagesCategoryEnum.UNITS]: ConfigType[];
|
||||
[PackagesCategoryEnum.ZHIGAN]: ConfigType[];
|
||||
[PackagesCategoryEnum.MAPICONS]: ConfigType[];
|
||||
[PackagesCategoryEnum.EQUIPMENT]: ConfigType[];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { IconList } from '@/packages/components/Icons/index';
|
|||
import { DiyList } from '@/packages/components/Diy/index';
|
||||
import { UnitsList } from '@/packages/components/Units/index';
|
||||
import { ZhiganList } from '@/packages/components/Zhigan/index';
|
||||
import { MapIconsList } from '@/packages/components/MapIcons/index';
|
||||
import { EquipmentList } from '@/packages/components/Equipment/index';
|
||||
|
||||
import {
|
||||
PackagesCategoryEnum,
|
||||
|
|
@ -48,7 +48,7 @@ export let packagesList: PackagesType = {
|
|||
[PackagesCategoryEnum.ICONS]: IconList,
|
||||
[PackagesCategoryEnum.UNITS]: UnitsList,
|
||||
[PackagesCategoryEnum.ZHIGAN]: ZhiganList,
|
||||
[PackagesCategoryEnum.MAPICONS]: MapIconsList,
|
||||
[PackagesCategoryEnum.EQUIPMENT]: EquipmentList,
|
||||
};
|
||||
|
||||
// 组件缓存, 可以大幅度提升组件加载速度
|
||||
|
|
|
|||
|
|
@ -63,6 +63,10 @@ const packagesListObj = {
|
|||
[PackagesCategoryEnum.MAPICONS]: {
|
||||
icon: renderIcon(AirPlaneOutlineIcon),
|
||||
label: PackagesCategoryName.MAPICONS
|
||||
},
|
||||
[PackagesCategoryEnum.EQUIPMENT]: {
|
||||
icon: renderIcon(AirPlaneOutlineIcon),
|
||||
label: PackagesCategoryName.EQUIPMENT
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue