删除svg组件
parent
e0272aaa8b
commit
ab34d97288
|
|
@ -1,16 +0,0 @@
|
|||
import { PublicConfigClass } from '@/packages/public';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { Svg01Config } from './index';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
|
||||
export const option = {
|
||||
dur: 0.5,
|
||||
colors: ['#4fd2dd', '#235fa7'],
|
||||
backgroundColor: '#00000000',
|
||||
};
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Svg01Config.key;
|
||||
public chartConfig = cloneDeep(Svg01Config);
|
||||
public option = cloneDeep(option);
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<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>
|
||||
|
||||
<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
|
||||
v-model:value="optionData.backgroundColor"
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const Svg01Config: ConfigType = {
|
||||
key: 'Svg01',
|
||||
chartKey: 'VSvg01',
|
||||
conKey: 'VCSvg01',
|
||||
title: 'svg-01',
|
||||
category: ChatCategoryEnum.SVG,
|
||||
categoryName: ChatCategoryEnumName.SVG,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'border01.png',
|
||||
};
|
||||
|
|
@ -1,178 +0,0 @@
|
|||
<template>
|
||||
<div class="go-border-box">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="102px"
|
||||
height="38px"
|
||||
viewBox="0 0 102 38"
|
||||
version="1.1"
|
||||
>
|
||||
<defs>
|
||||
<polygon
|
||||
id="path-1"
|
||||
points="3.44827586 0 96.5517241 0 100 3.44827586 100 9.60619897 97.4137931 12.0689655 97.4137931 24.6549803 100 27.199104 100 32.7586207 96.5517241 36.2068966 3.30663283 36.2068966 0 32.9832035 0 26.6766402 2.5862069 24.1833404 2.5862069 11.5976717 0 8.74413001 0 3.44827586"
|
||||
/>
|
||||
<filter
|
||||
x="-6.5%"
|
||||
y="-18.0%"
|
||||
width="113.0%"
|
||||
height="135.9%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-2"
|
||||
>
|
||||
<feMorphology radius="3" operator="erode" in="SourceAlpha" result="shadowSpreadInner1" />
|
||||
<feGaussianBlur stdDeviation="5" in="shadowSpreadInner1" result="shadowBlurInner1" />
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1" />
|
||||
<feComposite
|
||||
in="shadowOffsetInner1"
|
||||
in2="SourceAlpha"
|
||||
operator="arithmetic"
|
||||
k2="-1"
|
||||
k3="1"
|
||||
result="shadowInnerInner1"
|
||||
/>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 1 0 0 0 0 0.68627451 0 0 0 0 0.415686275 0 0 0 0.646634615 0"
|
||||
type="matrix"
|
||||
in="shadowInnerInner1"
|
||||
/>
|
||||
</filter>
|
||||
<text
|
||||
id="text-3"
|
||||
font-family="PingFangSC-Regular, PingFang SC"
|
||||
font-size="16"
|
||||
font-weight="normal"
|
||||
letter-spacing="0.8"
|
||||
fill="#FFFFFF"
|
||||
>
|
||||
<tspan x="16.4" y="24">火势推演</tspan>
|
||||
</text>
|
||||
<filter
|
||||
x="-10.7%"
|
||||
y="-15.0%"
|
||||
width="120.4%"
|
||||
height="142.6%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-4"
|
||||
>
|
||||
<feMorphology
|
||||
radius="0.5"
|
||||
operator="dilate"
|
||||
in="SourceAlpha"
|
||||
result="shadowSpreadOuter1"
|
||||
/>
|
||||
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1" />
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0.131707241 0 0 0 0 0.211842638 0 0 0 0 0.291978034 0 0 0 0.5 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智处-火势推演" transform="translate(-603, -108)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="火势推演-选中" transform="translate(604.5, 110)">
|
||||
<g id="编组-46">
|
||||
<g id="矩形">
|
||||
<use fill="#321A05" fill-rule="evenodd" xlink:href="#path-1" />
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1" />
|
||||
<path
|
||||
stroke="#AA6A33"
|
||||
stroke-width="1"
|
||||
d="M96.3446174,0.5 L99.5,3.65538264 L99.5,9.391896 L96.9137931,11.8546625 L96.9137931,24.8644937 L99.5,27.4086174 L99.5,32.5515139 L96.3446174,35.7068966 L3.51002957,35.7068966 L0.5,32.7723671 L0.5,26.8891241 L3.0862069,24.3958243 L3.0862069,11.4048055 L0.5,8.55126384 L0.5,3.65538264 L3.65538264,0.5 L96.3446174,0.5 Z"
|
||||
stroke-linejoin="square"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M0.862068966,12.5862069 L1.57213624,13.7223145 C1.67146849,13.8812461 1.72413793,14.0648938 1.72413793,14.2523135 L1.72413793,21.9545831 C1.72413793,22.1420028 1.67146849,22.3256504 1.57213624,22.484582 L0.862068966,23.6206897 C0.725523119,23.839163 0.437723192,23.9055784 0.219249837,23.7690325 C0.0828574506,23.6837873 4.62712282e-15,23.5342919 4.60742555e-15,23.3734515 L4.99600361e-16,12.833445 C5.82461836e-16,12.5758108 0.208853775,12.3669571 0.466487964,12.3669571 C0.627328364,12.3669571 0.776823724,12.4498145 0.862068966,12.5862069 Z"
|
||||
id="矩形"
|
||||
fill="#FF9538"
|
||||
/>
|
||||
<path
|
||||
d="M99.137931,12.5862069 L99.8479983,13.7223145 C99.9473306,13.8812461 100,14.0648938 100,14.2523135 L100,21.9545831 C100,22.1420028 99.9473306,22.3256504 99.8479983,22.484582 L99.137931,23.6206897 C99.0013852,23.839163 98.7135853,23.9055784 98.4951119,23.7690325 C98.3587195,23.6837873 98.2758621,23.5342919 98.2758621,23.3734515 L98.2758621,12.833445 C98.2758621,12.5758108 98.4847158,12.3669571 98.74235,12.3669571 C98.9031904,12.3669571 99.0526858,12.4498145 99.137931,12.5862069 Z"
|
||||
id="矩形"
|
||||
fill="#FF9538"
|
||||
transform="translate(99.1379, 18.1034) scale(-1, 1) translate(-99.1379, -18.1034)"
|
||||
/>
|
||||
<polyline
|
||||
id="路径-34"
|
||||
stroke="#FF851B"
|
||||
stroke-width="2"
|
||||
points="0.371876834 7 0.371876834 3.66235734 3.69811501 0.441116971 7.55300402 0.441116971"
|
||||
/>
|
||||
<polyline
|
||||
id="路径-34"
|
||||
stroke="#FF851B"
|
||||
stroke-width="2"
|
||||
transform="translate(3.9624, 32.2794) scale(1, -1) translate(-3.9624, -32.2794)"
|
||||
points="0.371876834 35.558883 0.371876834 32.2212404 3.69811501 29 7.55300402 29"
|
||||
/>
|
||||
<polyline
|
||||
id="路径-34"
|
||||
stroke="#FF851B"
|
||||
stroke-width="2"
|
||||
transform="translate(95.9624, 3.7206) scale(-1, 1) translate(-95.9624, -3.7206)"
|
||||
points="92.3718768 7 92.3718768 3.66235734 95.698115 0.441116971 99.553004 0.441116971"
|
||||
/>
|
||||
<polyline
|
||||
id="路径-34"
|
||||
stroke="#FF851B"
|
||||
stroke-width="2"
|
||||
transform="translate(95.9624, 32.2794) scale(-1, -1) translate(-95.9624, -32.2794)"
|
||||
points="92.3718768 35.558883 92.3718768 32.2212404 95.698115 29 99.553004 29"
|
||||
/>
|
||||
</g>
|
||||
<g id="火势推演" fill="#FFFFFF" fill-opacity="1">
|
||||
<use filter="url(#filter-4)" xlink:href="#text-3" />
|
||||
<use xlink:href="#text-3" />
|
||||
</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 borders = ['left-top', 'right-top', 'left-bottom', 'right-bottom'];
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
const { colors, dur, backgroundColor } = toRefs(props.chartConfig.option);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('border-box') {
|
||||
.border-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.right-top {
|
||||
right: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.left-bottom {
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { Svg01Config } from './Svg01/index';
|
||||
|
||||
export default [Svg01Config];
|
||||
|
|
@ -3,7 +3,6 @@ import Decorates from './Decorates';
|
|||
import FlowChart from './FlowChart';
|
||||
import Three from './Three';
|
||||
import Mores from './Mores';
|
||||
import Svg from './Svg';
|
||||
import Titles from './Titles';
|
||||
|
||||
export const DecorateList = [...Borders, ...Decorates, ...FlowChart, ...Three, ...Svg, ...Titles, ...Mores];
|
||||
export const DecorateList = [...Borders, ...Decorates, ...FlowChart, ...Three, ...Titles, ...Mores];
|
||||
|
|
|
|||
Loading…
Reference in New Issue