Compare commits
No commits in common. "5dbcd6b97db42c2f66ada942e8e4cbef4e112b33" and "89f6982739a2fd472474890dcd22e35068782d26" have entirely different histories.
5dbcd6b97d
...
89f6982739
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 288 B |
|
|
@ -1,17 +0,0 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskBackground01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'taskbackground01',
|
||||
colors: ['#02221B','#06463A','#00D586','#00AB4E','#007343','#89E5A1'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskBackground01Config.key
|
||||
public attr = { ...chartInitConfig, w: 401, h: 528, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskBackground01Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskBackground01Config: ConfigType = {
|
||||
key: 'TaskBackground01',
|
||||
chartKey: 'VTaskBackground01',
|
||||
conKey: 'VCTaskBackground01',
|
||||
title: '背景图-01',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'taskbg01.png',
|
||||
};
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 25</title>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :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[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="6.17106015%" y1="0%" x2="67.7872653%" y2="117.560409%" :id="`3-${boxId}`">
|
||||
<stop :stop-color="colors[4]" 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, -92)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(46, 85.9394)">
|
||||
<g id="标题模块--左侧1" transform="translate(0, 0.3606)">
|
||||
<g id="编组-25" transform="translate(0, 7)">
|
||||
w: 401, h: 528
|
||||
<polygon
|
||||
id="面"
|
||||
:fill="`url(#1-${boxId})`"
|
||||
opacity="0.687237694"
|
||||
:points="`0.999496262 0.152279907 ${w-2} 0.152279907 ${w-2} ${h-1} ${w/2.09} ${h-1} 0.999496262 ${h-1} 0.999496262 ${h/1.41} 0.999496262 ${h/2.07}`"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="线框"
|
||||
points="0 0.152279907 400 0.152279907 400 107.738212 395.834804 116.08598 395.834804 219.313846 399.084668 227.844828 399.084668 ${h-1} 0 ${h-1} 0 228.152775 3.65609676 220.298134 3.65609676 116.535598 0 107.206527"
|
||||
></polygon>
|
||||
<g id="编组-6" transform="translate(12.2354, 13.0684) scale(1, -1) translate(-12.2354, -13.0684)">
|
||||
<polygon id="路径-11" :fill="`url(#2-${boxId})`" transform="translate(3.6507, 22.4861) scale(1, -1) translate(-3.6507, -22.4861)" points="0 18.8354037 0 26.1368157 7.30141204 18.8354037"></polygon>
|
||||
<polygon id="装饰线段-" :fill="`url(#3-${boxId})`" fill-rule="nonzero" points="3.65070602 3.65070602 3.65070602 11.0746415 14.2550943 22.4858359 20.9366367 22.4858359 24.4707994 26.1368157 12.6645612 26.1368157 12.122999 25.554072 0.488253244 13.034597 0 12.509216 2.49777287e-11 -2.59345645e-14"></polygon>
|
||||
</g>
|
||||
<g id="编组-7" :transform="`translate(0.0605, ${h-27})`">
|
||||
<polygon id="路径-11" :fill="`url(#2-${boxId})`" transform="translate(3.6507, 22.4861) scale(1, -1) translate(-3.6507, -22.4861)" points="0 18.8354037 0 26.1368157 7.30141204 18.8354037"></polygon>
|
||||
<polygon id="装饰线段-" :fill="`url(#3-${boxId})`" fill-rule="nonzero" points="3.65070602 3.65070602 3.65070602 11.0746415 14.2550943 22.4858359 20.9366367 22.4858359 24.4707994 26.1368157 12.6645612 26.1368157 12.122999 25.554072 0.488253244 13.034597 0 12.509216 2.49777287e-11 -2.59345645e-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;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskBackground02Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'taskbackground02',
|
||||
colors: ['#02221B','#06463A','#00D586','#00AB4E','#007343','#89E5A1'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskBackground02Config.key
|
||||
public attr = { ...chartInitConfig, w: 515, h: 943, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskBackground02Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskBackground02Config: ConfigType = {
|
||||
key: 'TaskBackground02',
|
||||
chartKey: 'VTaskBackground02',
|
||||
conKey: 'VCTaskBackground02',
|
||||
title: '背景图-02',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'taskbg02.png',
|
||||
};
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 11</title>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :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[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="6.17106015%" y1="0%" x2="67.7872653%" y2="117.560409%" :id="`3-${boxId}`">
|
||||
<stop :stop-color="colors[4]" 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(-1495, -85)">
|
||||
<g id="可视化" transform="translate(-0.5, -1)">
|
||||
<g id="模块" transform="translate(45.5, 85.9394)">
|
||||
<g id="标题模块--右侧1" transform="translate(1336, 0.0606)">
|
||||
<g id="编组-11" transform="translate(114.5, 0.9394)">
|
||||
<!-- w: 401, h: 943 -->
|
||||
<polygon
|
||||
id="面"
|
||||
:fill="`url(#1-${boxId})`"
|
||||
opacity="0.687237694"
|
||||
:points="`0.499001996 0.060630108 ${w-2} 0.060630108 ${w-2} ${h-1} ${w/2.19} ${h-1} 0.499001996 ${h-1} 0.499001996 ${h/1.4} 0.499001996 ${h/2.07}`"
|
||||
></polygon>
|
||||
<g id="右1"
|
||||
:transform="`translate(${w/1.015}, 13.075) scale(-1, -1) translate(-${w/1.03}, -13.075)translate(${w/1.04}, -0)`">
|
||||
<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>
|
||||
</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;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskInput00Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textColor: '#FFFFFF',
|
||||
textSize: 14,
|
||||
backgroundColor: '#0C2411',
|
||||
borderColor: '#00611A',
|
||||
dataset: '',
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskInput00Config.key
|
||||
public attr = { ...chartInitConfig, w: 434, h: 33, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskInput00Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="文字颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.textSize"
|
||||
:min="12"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.backgroundColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.backgroundColor = option.backgroundColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.borderColor = option.borderColor"
|
||||
>
|
||||
恢复默认
|
||||
</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>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskInput00Config: ConfigType = {
|
||||
key: 'TaskInput',
|
||||
chartKey: 'VTaskInput',
|
||||
conKey: 'VCTaskInput',
|
||||
title: '输入框',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'inputbg.png',
|
||||
};
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="dataset"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入相关内容"
|
||||
|
||||
/>
|
||||
</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 {
|
||||
textColor,
|
||||
textSize,
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
:deep(.n-input){
|
||||
height: v-bind('h+"px"');
|
||||
background: v-bind('backgroundColor');
|
||||
}
|
||||
:deep(.n-input__input-el) {
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
}
|
||||
:deep(.n-input__state-border){
|
||||
border-color: v-bind('borderColor');
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@ export const option = {
|
|||
textSize: 14,
|
||||
colors: ['#004714','#74C288'],
|
||||
checkColor: '#00F535',
|
||||
dataValue: '1',
|
||||
dataValue: 1,
|
||||
dataset: [
|
||||
{ label: '一般' ,value: '1' },
|
||||
{ label: '较大' ,value: '2' },
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入"
|
||||
|
||||
/>
|
||||
<n-input
|
||||
size="small"
|
||||
|
|
@ -19,12 +18,7 @@
|
|||
:minlength="1"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
<n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
|
||||
|
||||
</SettingItemBox>
|
||||
<SettingItem>
|
||||
<n-button size="small" @click="optionData.dataset.push({ label: '' ,value: '' })"> + 新增</n-button>
|
||||
</SettingItem>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskReceivPersonConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
navsArr: [
|
||||
{ label: 'APP接收', value: '1'},
|
||||
{ label: '短信接收人', value: '2'}
|
||||
],
|
||||
navsSize: 10,
|
||||
navsColor: ['#02633C','#055738','#099860','#0D2822'],
|
||||
navsBackground: ['#34FFE0','#18FFBE'],
|
||||
secBackground: ['#0A3629', '#00611A'],
|
||||
textColor: ['#16D49D','#FFFFFF'],
|
||||
textSize: 10,
|
||||
InpBackgroundColor: '#0C2411',
|
||||
InpBorderColor: '#00611A',
|
||||
InpTextColor: '#099860',
|
||||
InpTextSize: 10,
|
||||
treeColor: '#CBE6CD',
|
||||
treeSize: 10,
|
||||
treedatas: [
|
||||
{
|
||||
key: 1,
|
||||
label: '默认用户组',
|
||||
children: [
|
||||
{
|
||||
key: 1-1,
|
||||
label: '用户一组',
|
||||
children: [
|
||||
{
|
||||
key: 1-1-1,
|
||||
label: '用户1'
|
||||
},
|
||||
{
|
||||
key: 1-1-2,
|
||||
label: '用户2'
|
||||
},
|
||||
{
|
||||
key: 1-1-3,
|
||||
label: '用户3'
|
||||
},
|
||||
{
|
||||
key: 1-1-4,
|
||||
label: '用户4'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
treedatas1: [
|
||||
{ key: 1, label: '用户1' },
|
||||
{ key: 2, label: '用户2' },
|
||||
{ key: 3, label: '用户3' },
|
||||
{ key: 4, label: '用户4' },
|
||||
{ key: 5, label: '用户5' },
|
||||
{ key: 6, label: '用户6' },
|
||||
],
|
||||
treedatas2: []
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskReceivPersonConfig.key
|
||||
public attr = { ...chartInitConfig, w: 515, h: 273, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskReceivPersonConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
<template>
|
||||
<CollapseItem name="标题样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.navsColor"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.navsColor[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.navsColor[index] = option.navsColor[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="标题样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.navsBackground"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.navsBackground[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.navsBackground[index] = option.navsBackground[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="标题样式" :expanded="true">
|
||||
<SettingItem name="文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.navsSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.secBackground"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.secBackground[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.secBackground[index] = option.secBackground[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.textColor"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.textColor[index] = option.textColor[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">、
|
||||
<SettingItem name="文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.textSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox>
|
||||
<SettingItem name="输入框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.InpBackgroundColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.InpBackgroundColor = option.InpBackgroundColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox>
|
||||
<SettingItem name="输入框边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.InpBorderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.InpBorderColor = option.InpBorderColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox>
|
||||
<SettingItem name="输入框文字颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.InpTextColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.InpTextColor = option.InpTextColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItem name="输入框文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.InpTextSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox>
|
||||
<SettingItem name="树文字颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.treeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.treeColor = option.treeColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItem name="树文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.treeSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</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 TaskReceivPersonConfig: ConfigType = {
|
||||
key: 'TaskReceivPerson',
|
||||
chartKey: 'VTaskReceivPerson',
|
||||
conKey: 'VCTaskReceivPerson',
|
||||
title: '接收人员',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'receivpersonbg.png',
|
||||
};
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<div class="flex ai-c jc-sb max-w navsbox">
|
||||
<div class="flex navsli ai-c jc-c" v-for="(item,index) in navsArr" :class="index==navsIndex?'navsliactive':''" @click="navsClick(index)">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex jc-sb sectionbox">
|
||||
<div class="sectionboxleftli secli">
|
||||
<div class="sectitle">用户名</div>
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="taskUserName"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="用户组名称"
|
||||
>
|
||||
</n-input>
|
||||
<div class="selectbox">
|
||||
<n-tree
|
||||
block-line
|
||||
cascade
|
||||
default-expand-all
|
||||
:selectable="false"
|
||||
:data="treedatas"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sectionboxrightli secli">
|
||||
<div class="flex jc-sb max-w">
|
||||
<div class="sectitle">待选择人员（4/9）</div>
|
||||
<div class="sectext">包含下级</div>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<n-tree
|
||||
block-line
|
||||
cascade
|
||||
checkable
|
||||
:selectable="false"
|
||||
:data="treedatas1"
|
||||
:on-update:selected-keys="updateTreeHandle1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sectionboxrightli secli">
|
||||
<div class="flex jc-sb max-w">
|
||||
<div class="sectitle">已选择人员（4/9）</div>
|
||||
<div class="sectext tpclearbtn">清空</div>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<n-tree
|
||||
block-line
|
||||
cascade
|
||||
checkable
|
||||
:selectable="false"
|
||||
:data="treedatas2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const navsIndex = ref(0)
|
||||
const taskUserName = ref('')
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
textColor,
|
||||
textSize,
|
||||
navsArr,
|
||||
navsColor,
|
||||
navsBackground,
|
||||
navsSize,
|
||||
secBackground,
|
||||
InpBackgroundColor,
|
||||
InpBorderColor,
|
||||
InpTextColor,
|
||||
InpTextSize,
|
||||
treedatas,
|
||||
treeSize,
|
||||
treeColor,
|
||||
treedatas1,
|
||||
treedatas2
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
const navsClick = function(index){
|
||||
navsIndex.value = index
|
||||
}
|
||||
const updateTreeHandle1 = function(node){
|
||||
console.log('dddnode',node)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
height: v-bind('h');
|
||||
.max-w{
|
||||
width: 100%;
|
||||
}
|
||||
.column{
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.jc-sb{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.jc-sa{
|
||||
justify-content: space-around;
|
||||
}
|
||||
.jc-c{
|
||||
justify-content: center;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.navsbox{
|
||||
width: 30%;
|
||||
height: 24px;
|
||||
background: v-bind('navsColor[1]');
|
||||
border-radius: 1px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid v-bind('navsColor[0]');
|
||||
}
|
||||
.navsli{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
color: v-bind('navsColor[2]');
|
||||
font-size: v-bind('navsSize+"px"');
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.navsliactive{
|
||||
color: v-bind('navsColor[3]');
|
||||
background: linear-gradient( 158deg, v-bind('navsBackground[0]') 0%, v-bind('navsBackground[1]') 100%);
|
||||
border-radius: 2px 0px 0px 2px;
|
||||
}
|
||||
.sectionbox{
|
||||
height: calc(100% - 51px);
|
||||
}
|
||||
.secli{
|
||||
background: v-bind('secBackground[0]');
|
||||
border: 1px solid v-bind('secBackground[1]');
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
font-size: v-bind('textSize+"px"');
|
||||
.sectitle{
|
||||
margin: 0 10px 10px;
|
||||
color: v-bind('textColor[0]');
|
||||
}
|
||||
.sectext{
|
||||
color: v-bind('textColor[1]');
|
||||
padding-right: 10px;
|
||||
}
|
||||
.tpclearbtn{
|
||||
height: 16px;
|
||||
line-height: 14px;
|
||||
border-radius: 3px;
|
||||
padding: 0 5px;
|
||||
border: 1px solid v-bind('secBackground[1]');
|
||||
cursor: pointer;
|
||||
}
|
||||
.selectbox{
|
||||
height: calc(100% - 75px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.sectionboxleftli{
|
||||
width: 30%;
|
||||
}
|
||||
.sectionboxrightli{
|
||||
width: 34%;
|
||||
.selectBox{
|
||||
height: calc(100% - 30px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-input){
|
||||
margin-bottom: 15px;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
background: v-bind('InpBackgroundColor');
|
||||
}
|
||||
:deep(.n-input__input-el) {
|
||||
color: v-bind('InpTextColor');
|
||||
font-size: v-bind('InpTextSize+"px"');
|
||||
}
|
||||
:deep(.n-input__state-border){
|
||||
border-color: v-bind('InpBorderColor');
|
||||
}
|
||||
:deep(.n-tree-node-content){
|
||||
color: v-bind('treeColor');
|
||||
font-size: v-bind('treeSize+"px"');
|
||||
}
|
||||
:deep(.n-tree-node:hover){
|
||||
background: v-bind('secBackground[1]') !important;
|
||||
}
|
||||
:deep(.n-tree-node--checkable:has(.n-checkbox--checked)){
|
||||
background: linear-gradient( 253deg, #15D5A0 0%, rgba(49,189,73,0.9) 100%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 整个滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /* 滚动条宽度 */
|
||||
}
|
||||
/* 滚动轨道的样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #00611A; /* 轨道背景颜色 */
|
||||
}
|
||||
/* 滚动滑块的样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #0EB687; /* 滑块背景颜色 */
|
||||
}
|
||||
/* 当鼠标悬停在滑块上时改变颜色 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskTextAreaConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textColor: '#FFFFFF',
|
||||
textSize: 14,
|
||||
backgroundColor: '#0C2411',
|
||||
borderColor: '#00611A',
|
||||
dataset: '',
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskTextAreaConfig.key
|
||||
public attr = { ...chartInitConfig, w: 437, h: 93, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskTextAreaConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="文字颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.textColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.textSize"
|
||||
:min="12"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.backgroundColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.backgroundColor = option.backgroundColor"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.borderColor = option.borderColor"
|
||||
>
|
||||
恢复默认
|
||||
</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>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskTextAreaConfig: ConfigType = {
|
||||
key: 'TaskTextArea',
|
||||
chartKey: 'VTaskTextArea',
|
||||
conKey: 'VCTaskTextArea',
|
||||
title: '文本显示背景',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'textareabg.png',
|
||||
};
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="dataset"
|
||||
:minlength="1"
|
||||
type="textarea"
|
||||
placeholder=""
|
||||
|
||||
/>
|
||||
</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 {
|
||||
textColor,
|
||||
textSize,
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
:deep(.n-input){
|
||||
height: v-bind('h+"px"');
|
||||
background: v-bind('backgroundColor');
|
||||
}
|
||||
:deep(.n-input__textarea-el) {
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
}
|
||||
:deep(.n-input__state-border){
|
||||
border-color: v-bind('borderColor');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { TaskTitlesConfig } from './index'
|
||||
|
||||
export const option = {
|
||||
dataset: '组件标题栏',
|
||||
dataStyle: {
|
||||
x: 10,
|
||||
y: 23,
|
||||
fontColor: '#FFFFFF',
|
||||
fontSize: 20,
|
||||
// 标题矩形左侧颜色
|
||||
leftColor: '#00611A',
|
||||
startColor: '#1F6B55',
|
||||
endColor: '#0A392A',
|
||||
},
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskTitlesConfig.key
|
||||
public attr = { ...chartInitConfig, w: 320, h: 31, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(TaskTitlesConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
<template>
|
||||
<CollapseItem name="标题设置" :expanded="true">
|
||||
<n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
|
||||
<SettingItemBox :alone="true" name="标题名称">
|
||||
<SettingItem :alone="true">
|
||||
<n-input v-model:value="optionData.dataset" type="text" size="small" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="标题设置">
|
||||
<SettingItem name="标题横坐标位置">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.x"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="宽度"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题纵坐标位置">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.y"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="高度"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题字体颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.dataStyle.fontColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题字体大小">
|
||||
<n-input-number
|
||||
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 = 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 = 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 = dataStyleClone.endColor">
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, ref } from 'vue';
|
||||
import { option } from './config';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const dataStyleClone = {
|
||||
leftColor: '#00611A',
|
||||
startColor: '#1F6B55',
|
||||
endColor: '#0A392A',
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const TaskTitlesConfig: ConfigType = {
|
||||
key: 'TaskTitles',
|
||||
chartKey: 'VTaskTitles',
|
||||
conKey: 'VCTaskTitles',
|
||||
title: '组件标题栏',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ModalHead.png'
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<div class="title">
|
||||
<Title :dataset="dataset" :w="w" :h="h" :dataStyle="dataStyle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import Title from './svg/title.vue';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr);
|
||||
const {
|
||||
dataset,
|
||||
dataStyle,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
:width="props.w"
|
||||
:height="props.h"
|
||||
viewBox="0 0 320 31"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
x1="100%"
|
||||
y1="50%"
|
||||
x2="2.30946189%"
|
||||
y2="50%"
|
||||
id="linearGradient-ModalHead-1"
|
||||
>
|
||||
<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">
|
||||
<g id="林业防火-智感-重复报警弹窗-切图版" transform="translate(-240, -212)">
|
||||
<g id="弹窗----" transform="translate(175.2674, 165.0542)">
|
||||
<g id="文字" transform="translate(64.7326, 10.2458)">
|
||||
<g id="预警信息-" transform="translate(0, 36.7)">
|
||||
<g id="编组-54" transform="translate(0, 0.3)">
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="url(#linearGradient-ModalHead-1)"
|
||||
transform="translate(160.5, 15) scale(1, -1) translate(-160.5, -15)"
|
||||
x="0"
|
||||
y="0"
|
||||
width="321"
|
||||
height="30"
|
||||
></rect>
|
||||
<rect
|
||||
id="矩形"
|
||||
:fill="props.dataStyle.leftColor"
|
||||
transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
|
||||
x="0"
|
||||
y="0"
|
||||
width="3"
|
||||
height="30"
|
||||
></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text
|
||||
:x="props.dataStyle.x"
|
||||
:y="props.dataStyle.y"
|
||||
:font-size="props.dataStyle.fontSize"
|
||||
:fill="props.dataStyle.fontColor"
|
||||
>
|
||||
{{ props.dataset }}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['dataset', 'w', 'h', 'dataStyle']);
|
||||
</script>
|
||||
|
|
@ -1,20 +1,7 @@
|
|||
import { TaskBannerConfig } from './TaskBanner/index';
|
||||
import { TaskRadioConfig } from './TaskRadio/index';
|
||||
import { TaskTitlesConfig } from './TaskTitles/index';
|
||||
import { TaskInput00Config } from './TaskInput/index';
|
||||
import { TaskTextAreaConfig } from './TaskTextArea/index';
|
||||
import { TaskBackground01Config } from './TaskBackground01/index';
|
||||
import { TaskBackground02Config } from './TaskBackground02/index';
|
||||
import { TaskReceivPersonConfig } from './TaskReceivPerson/index';
|
||||
|
||||
export default [
|
||||
TaskBackground01Config,
|
||||
TaskBackground02Config,
|
||||
TaskBannerConfig,
|
||||
TaskRadioConfig,
|
||||
TaskTitlesConfig,
|
||||
TaskInput00Config,
|
||||
TaskTextAreaConfig,
|
||||
|
||||
TaskReceivPersonConfig
|
||||
TaskRadioConfig
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue