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,
|
textSize: 14,
|
||||||
colors: ['#004714','#74C288'],
|
colors: ['#004714','#74C288'],
|
||||||
checkColor: '#00F535',
|
checkColor: '#00F535',
|
||||||
dataValue: '1',
|
dataValue: 1,
|
||||||
dataset: [
|
dataset: [
|
||||||
{ label: '一般' ,value: '1' },
|
{ label: '一般' ,value: '1' },
|
||||||
{ label: '较大' ,value: '2' },
|
{ label: '较大' ,value: '2' },
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@
|
||||||
:minlength="1"
|
:minlength="1"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="请输入"
|
placeholder="请输入"
|
||||||
|
|
||||||
/>
|
/>
|
||||||
<n-input
|
<n-input
|
||||||
size="small"
|
size="small"
|
||||||
|
|
@ -19,12 +18,7 @@
|
||||||
:minlength="1"
|
:minlength="1"
|
||||||
placeholder="请输入"
|
placeholder="请输入"
|
||||||
/>
|
/>
|
||||||
<n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
|
|
||||||
|
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
<SettingItem>
|
|
||||||
<n-button size="small" @click="optionData.dataset.push({ label: '' ,value: '' })"> + 新增</n-button>
|
|
||||||
</SettingItem>
|
|
||||||
</CollapseItem>
|
</CollapseItem>
|
||||||
<CollapseItem name="样式" :expanded="true">
|
<CollapseItem name="样式" :expanded="true">
|
||||||
<SettingItemBox
|
<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 { TaskBannerConfig } from './TaskBanner/index';
|
||||||
import { TaskRadioConfig } from './TaskRadio/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 [
|
export default [
|
||||||
TaskBackground01Config,
|
|
||||||
TaskBackground02Config,
|
|
||||||
TaskBannerConfig,
|
TaskBannerConfig,
|
||||||
TaskRadioConfig,
|
TaskRadioConfig
|
||||||
TaskTitlesConfig,
|
|
||||||
TaskInput00Config,
|
|
||||||
TaskTextAreaConfig,
|
|
||||||
|
|
||||||
TaskReceivPersonConfig
|
|
||||||
];
|
];
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue