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

智感-修改部分组件可直接修改svg颜色

main
滕嵩 2025-02-21 09:45:42 +08:00
parent f8ca665faf
commit e57d9e51d4
11 changed files with 179 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/packages/components/Zhigan/Zhigan/ModalFrameClose/config.ts
View File

@ -8,7 +8,11 @@ export const option = {
dataStyle:{
color: '#005516',
fontColor: '#FFFFFF'
}
},
dataStyleClone: {
color: '#005516',
fontColor: '#FFFFFF'
},
}
export default class Config extends PublicConfigClass implements CreateComponentType {

13
src/packages/components/Zhigan/Zhigan/ModalFrameClose/config.vue
View File

@ -8,6 +8,11 @@
v-model:value="optionData.dataStyle.color"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button size="small" @click="optionData.dataStyle.color = option.dataStyleClone.color">
恢复默认
</n-button>
</SettingItem>
<SettingItem name="X的颜色">
<n-color-picker
size="small"
@ -15,6 +20,14 @@
v-model:value="optionData.dataStyle.fontColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.fontColor = option.dataStyleClone.fontColor"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>

19
src/packages/components/Zhigan/Zhigan/ModalHead/config.ts
View File

@ -5,13 +5,22 @@ import { chartInitConfig } from '@/settings/designSetting'
import { ModalHeadConfig } from './index'
export const option = {
title: '组件标题栏',
titleStyle: {
data: '组件标题栏',
dataStyle: {
x: 40,
y: 23,
fontcolor: '#FFFFFF',
fontsize: 20
}
fontColor: '#FFFFFF',
fontSize: 20,
// 标题矩形左侧颜色
leftColor: '#00611A',
startColor: '#1F6B55',
endColor: '#0A392A',
},
dataStyleClone: {
leftColor: '#00611A',
startColor: '#1F6B55',
endColor: '#0A392A',
},
}
export default class Config extends PublicConfigClass implements CreateComponentType {

55
src/packages/components/Zhigan/Zhigan/ModalHead/config.vue
View File

@ -3,13 +3,13 @@
<n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
<SettingItemBox :alone="true" name="标题名称">
<SettingItem :alone="true">
<n-input v-model:value="optionData.title" type="text" size="small" />
<n-input v-model:value="optionData.data" type="text" size="small" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="标题设置">
<SettingItem name="标题横坐标位置">
<n-input-number
v-model:value="optionData.titleStyle.x"
v-model:value="optionData.dataStyle.x"
:min="0"
size="small"
placeholder="宽度"
@ -17,7 +17,7 @@
</SettingItem>
<SettingItem name="标题纵坐标位置">
<n-input-number
v-model:value="optionData.titleStyle.y"
v-model:value="optionData.dataStyle.y"
:min="0"
size="small"
placeholder="高度"
@ -27,16 +27,61 @@
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.titleStyle.fontcolor"
v-model:value="optionData.dataStyle.fontColor"
></n-color-picker>
</SettingItem>
<SettingItem name="标题字体大小">
<n-input-number
v-model:value="optionData.titleStyle.fontsize"
v-model:value="optionData.dataStyle.fontSize"
:min="0"
size="small"
></n-input-number>
</SettingItem>
<SettingItem name="标题矩形左侧颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.leftColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.leftColor = option.dataStyleClone.leftColor"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题渐变颜色(始)">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.startColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.startColor = option.dataStyleClone.startColor"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题渐变颜色(终)">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.endColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.endColor = option.dataStyleClone.endColor"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>

6
src/packages/components/Zhigan/Zhigan/ModalHead/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="title">
<Title :title="option.title" :w="w" :h="h" :titleStyle="option.titleStyle" />
<Title :data="option.data" :w="w" :h="h" :dataStyle="option.dataStyle" />
</div>
</template>
@ -22,8 +22,8 @@
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
title: props.chartConfig.option.title,
titleStyle: props.chartConfig.option.titleStyle,
data: props.chartConfig.option.data,
dataStyle: props.chartConfig.option.dataStyle,
});
</script>

18
src/packages/components/Zhigan/Zhigan/ModalHead/svg/title.vue
View File

@ -16,8 +16,8 @@
y2="50%"
id="linearGradient-ModalHead-1"
>
<stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#0A392A" offset="100%"></stop>
<stop :stop-color="props.dataStyle.startColor" stop-opacity="0" offset="0%"></stop>
<stop :stop-color="props.dataStyle.endColor" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@ -37,7 +37,7 @@
></rect>
<rect
id="矩形"
fill="#00611A"
:fill="props.dataStyle.leftColor"
transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
x="0"
y="0"
@ -51,17 +51,17 @@
</g>
</g>
<text
:x="props.titleStyle.x"
:y="props.titleStyle.y"
:font-size="props.titleStyle.fontsize"
:fill="props.titleStyle.fontcolor"
:x="props.dataStyle.x"
:y="props.dataStyle.y"
:font-size="props.dataStyle.fontSize"
:fill="props.dataStyle.fontColor"
>
{{ props.title }}
{{ props.data }}
</text>
</svg>
</div>
</template>
<script setup lang="ts">
const props = defineProps(['title', 'w', 'h', 'titleStyle']);
const props = defineProps(['data', 'w', 'h', 'dataStyle']);
</script>

7
src/packages/components/Zhigan/Zhigan/ModalVideo/index.vue
View File

@ -8,8 +8,8 @@
:object-fit="option.dataset.fit"
:loop="option.dataStyle.videoLoop"
:muted="option.dataStyle.videoMuted"
:width="`${w - option.dataStyle.padding}`"
:height="`${h - option.dataStyle.padding}`"
:width="`${w - option.dataStyle.padding - option.dataStyle.borderWidth}`"
:height="`${h - option.dataStyle.padding - option.dataStyle.borderWidth}`"
:src="option.dataset"
/>
</div>
@ -57,6 +57,7 @@
video {
display: block;
object-fit: v-bind('option.dataStyle.videoFit');
padding: v-bind('`${option.dataStyle.padding}px`');
padding-top: v-bind('`${option.dataStyle.padding}px`');
padding-left: v-bind('`${option.dataStyle.padding}px`');
}
</style>

8
src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.ts
View File

@ -21,6 +21,9 @@ export const option = {
iconY: 12,
topWidth: 80,
topHeight: 80,
rectStrokeColor: '#00611A',
rectFillColor: '#0A251E',
gFillColor: '#4FE985',
bottomFontColor1: '#A4F9AB',
bottomFontSize1: 20,
@ -32,6 +35,11 @@ export const option = {
bottomMarginTop: 16,
bottomWidth: 80,
bottomHeight: 80 * 97 / 71,
},
dataStyleClone: {
rectStrokeColor: '#00611A',
rectFillColor: '#0A251E',
gFillColor: '#4FE985',
}
}

49
src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.vue
View File

@ -24,14 +24,14 @@
size="small"
/>
</SettingItem>
<SettingItem name="组件宽度">
<!-- <SettingItem name="组件宽度">
<n-input-number
v-model:value="optionData.dataStyle.topWidth"
min="0"
type="text"
size="small"
/>
</SettingItem>
</SettingItem> -->
<SettingItem name="组件间隔">
<n-input-number v-model:value="optionData.dataStyle.gap" min="0" type="text" size="small" />
</SettingItem>
@ -86,6 +86,51 @@
size="small"
/>
</SettingItem> -->
<SettingItem name="组件边框颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.rectStrokeColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.rectStrokeColor = option.dataStyleClone.rectStrokeColor"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="组件边角颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.gFillColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.gFillColor = option.dataStyleClone.gFillColor"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="组件填充颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.rectFillColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.rectFillColor = option.dataStyleClone.rectFillColor"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="下方组件设置">

17
src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/index.vue
View File

@ -34,9 +34,24 @@
dataStyle: props.chartConfig.option.dataStyle,
});
// watch(
// () => option.dataStyle.topWidth,
// () => {
// option.dataStyle.topHeight = option.dataStyle.topWidth;
// option.dataStyle.bottomWidth = option.dataStyle.topWidth;
// option.dataStyle.bottomHeight = 97 * (option.dataStyle.bottomWidth / 71);
// },
// {
// immediate: true,
// deep: true,
// },
// );
watch(
() => option.dataStyle.topWidth,
() => w.value,
() => {
option.dataStyle.topWidth =
(w.value - option.dataStyle.marginleft * 2 - option.dataStyle.gap * 3) / 4;
option.dataStyle.topHeight = option.dataStyle.topWidth;
option.dataStyle.bottomWidth = option.dataStyle.topWidth;
option.dataStyle.bottomHeight = 97 * (option.dataStyle.bottomWidth / 71);

15
src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/top.vue
View File

@ -17,8 +17,8 @@
<g id="编组-10" transform="translate(0.5, 0.5)">
<rect
id="矩形"
stroke="#00611A"
fill="#0A251E"
:stroke="props.dataStyle.rectStrokeColor"
:fill="props.dataStyle.rectFillColor"
x="0.5"
y="1"
width="69"
@ -43,7 +43,7 @@
opacity="0.299999982"
transform="translate(35.1054, 35.5) scale(1, -1) translate(-35.1054, -35.5)"
></line>
<g id="装饰" transform="translate(0, 0)" fill="#4FE985">
<g id="装饰" transform="translate(0, 0)" :fill="props.dataStyle.gFillColor">
<rect id="矩形" x="0.05" y="0" width="12" height="4.5"></rect>
<rect
id="矩形备份-16"
@ -57,7 +57,7 @@
<g
id="装饰"
transform="translate(64.025, 64.125) scale(-1, -1) translate(-64.025, -64.125)translate(58, 58)"
fill="#4FE985"
:fill="props.dataStyle.gFillColor"
>
<rect id="矩形" x="0.05" y="0" width="12" height="4.5"></rect>
<rect
@ -91,4 +91,9 @@
const props = defineProps(['item', 'dataStyle']);
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.icon01 {
position: absolute;
top: 0px;
}
</style>