任务组件
userName
parent
20c18b84ec
commit
daa29cff5c
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 820 B |
Binary file not shown.
|
After Width: | Height: | Size: 615 B |
Binary file not shown.
|
After Width: | Height: | Size: 593 B |
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
Binary file not shown.
|
After Width: | Height: | Size: 723 B |
Binary file not shown.
|
After Width: | Height: | Size: 709 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskAddRouteConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
textSize: 14,
|
||||
colors: ['#0C2411','#00611A','#FFFFFF'],
|
||||
text: '添加途经点'
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskAddRouteConfig.key
|
||||
public attr = { ...chartInitConfig, w: 112, h: 30, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskAddRouteConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="文字">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.text"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.textSize"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskAddRouteConfig: ConfigType = {
|
||||
key: 'TaskAddRoute',
|
||||
chartKey: 'VTaskAddRoute',
|
||||
conKey: 'VCTaskAddRoute',
|
||||
title: '图标-01',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'addroute.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<span class="add">+</span>
|
||||
<span>{{text}}</span>
|
||||
</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 {
|
||||
text,
|
||||
colors,
|
||||
textSize,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: v-bind('w');
|
||||
height: v-bind('h');
|
||||
background-color: v-bind('colors[0]');
|
||||
border: 1px solid v-bind('colors[1]');
|
||||
color: v-bind('colors[2]');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
cursor: pointer;
|
||||
.add{
|
||||
width: v-bind('textSize+"px"');
|
||||
height: v-bind('textSize+"px"');
|
||||
border: 1px solid v-bind('colors[2]');
|
||||
margin-right:10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskBackConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'taskback',
|
||||
colors: ['#58FF95','#005516','#A6FCC7'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskBackConfig.key
|
||||
public attr = { ...chartInitConfig, w: 43, h: 44, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskBackConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskBackConfig: ConfigType = {
|
||||
key: 'TaskBack',
|
||||
chartKey: 'VTaskBack',
|
||||
conKey: 'VCTaskBack',
|
||||
title: '按钮-返回',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'taskback.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskback.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskBackground03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'taskbackground03',
|
||||
colors: ['#344534','#647B64','#25673D','#3E674A','#8BE8A3','#435A4E','#161A1A','#4A5C4A','#7CA791','#FFE4AC','#4D815D'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskBackground03Config.key
|
||||
public attr = { ...chartInitConfig, w: 417, h: 891, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskBackground03Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="ID" :alone="true">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.boxId"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入Id"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskBackground03Config: ConfigType = {
|
||||
key: 'TaskBackground03',
|
||||
chartKey: 'VTaskBackground03',
|
||||
conKey: 'VCTaskBackground03',
|
||||
title: '背景图-03',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'taskbg03.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 9</title>
|
||||
<defs>
|
||||
|
||||
<path :d="`M${w/9.19},${h/1.04} L${w/3.56},${h/1.04} L${w/3.56},${h/1.04} L${w/3.31},${h/1.05} L${w/1.55},${h/1.05} L${w/1.5},${h/1.042} L${w/1.1},${h/1.042} C${w/1.07},${h/1.042} ${w/1.04},${h/1.05} ${w/1.04},${h/1.07} L${w/1.04},4.46630114 L${w/1.04},4.46630114 L50.4892271,4.46630114 C38.4743887,4.46630114 28.7344378,14.2062521 28.7344378,26.2210905 L28.7344378,${h/1.06} C28.7344378,${h/1.05} 36.1826354,${h/1.04} ${w/9.19},${h/1.04} Z`" id="taskpath-1"></path>
|
||||
<filter x="-8.9%" y="-2.1%" width="117.8%" height="108.4%" filterUnits="objectBoundingBox" id="taskfilter-2">
|
||||
<feMorphology radius="0.639846743" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="20" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="7.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`3-${boxId}`">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="taskpath-4" :points="`-1.00972311e-14 -4.20781315e-13 ${w/29.64} -4.20781315e-13 ${w/24.76} 2.40668967 2.76500463 2.40668967`"></polygon>
|
||||
<filter x="-107.9%" y="-685.6%" width="315.9%" height="1471.2%" filterUnits="objectBoundingBox" id="taskfilter-5">
|
||||
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.462494493 0 0 0 0 0 0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="taskpath-6" :points="`20.0745787 6.12769321e-14 ${w/12.21} 6.12769321e-14 ${w/11.3} 2.40668967 22.8395833 2.40668967`"></polygon>
|
||||
<filter x="-107.9%" y="-685.6%" width="315.9%" height="1471.2%" filterUnits="objectBoundingBox" id="taskfilter-7">
|
||||
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.462494493 0 0 0 0 0 0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="50.3209681%" y1="99.6790319%" x2="50.3209681%" y2="0.320968094%" :id="`8-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0.8" offset="0.00819493007%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="38.6691434%"></stop>
|
||||
<stop :stop-color="colors[4]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50.3209681%" y1="99.6790319%" x2="50.3209681%" y2="0.320968094%" :id="`9-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0.8" offset="0.00819493007%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="38.6691434%"></stop>
|
||||
<stop :stop-color="colors[4]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智处-任务下发-规划方案" transform="translate(-1466, -147)">
|
||||
<g id="路径规划弹窗---" transform="translate(453.7715, 147)">
|
||||
<g id="编组-9" transform="translate(1012.4959, 0.0542)">
|
||||
<g id="路径-22">
|
||||
<use fill="black" fill-opacity="1" filter="url(#taskfilter-2)" xlink:href="#taskpath-1"></use>
|
||||
<use :stroke="colors[5]" stroke-width="1.27969349" fill-opacity="0.85" :fill="colors[6]" fill-rule="evenodd" xlink:href="#taskpath-1"></use>
|
||||
</g>
|
||||
<!-- <g id="编组-5" transform="translate(297.4837, 17.9031) scale(-1, 1) rotate(-180) translate(-297.4837, -17.9031)translate(198.9905, 15.9835)">
|
||||
<line x1="-5.06780004e-13" y1="1.91954023" x2="196.976869" y2="1.91954023" id="路径-6" :stroke="`url(#3-${boxId})`" stroke-width="1.27969349" opacity="0.399999976"></line>
|
||||
<path d="M142.951484,3.83908046 C144.011153,3.83908046 144.870183,2.97967303 144.870183,1.91954023 C144.870183,0.859407434 144.011153,0 142.951484,0 C141.891816,0 141.032785,0.859407434 141.032785,1.91954023 C141.032785,2.97967303 141.891816,3.83908046 142.951484,3.83908046 Z" id="椭圆形" :fill="colors[7]"></path>
|
||||
<ellipse id="椭圆形" :fill="colors[7]" cx="70.0409125" cy="1.91954023" rx="1.91869926" ry="1.91954023"></ellipse>
|
||||
</g> -->
|
||||
<!-- w: 417, h: 891 -->
|
||||
<path
|
||||
:d="`M${w/7.89},${h/1.03} L${w/3.34},${h/1.03} L${w/3.34},${h/1.03} L${w/3.15},${h/1.04} L${w/1.51},${h/1.04} L${w/1.47},${h/1.03} L${w/1.09},${h/1.03} C${w/1.06},${h/1.03} ${w/1.03},${h/1.05} ${w/1.03},${h/1.07} L${w/1.03},10.8647686 L${w/1.03},10.8647686 L56.6416991,10.8647686 C44.6268607,10.8647686 34.8869098,20.6047195 34.8869098,32.6195579 C34.8869098,32.6315283 34.8869197,32.6434986 34.8869394,32.6554689 L36.2271782,${h/1.05} C36.242327,${h/1.04} 43.6860756,${h/1.03} ${w/7.89},${h/1.03} Z`"
|
||||
id="路径-22" :stroke="colors[8]" stroke-width="1.27969349"></path>
|
||||
<g id="编组" :transform="`translate(${w/2.78}, ${h/1.04}) scale(1, -1) translate(-${w/2.78}, -${h/1.04})translate(${w/3.17}, ${h/1.038})`">
|
||||
<g id="矩形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#taskfilter-5)" xlink:href="#taskpath-4"></use>
|
||||
<use :fill="colors[9]" fill-rule="evenodd" xlink:href="#taskpath-4"></use>
|
||||
</g>
|
||||
<g id="矩形" opacity="0.399999976">
|
||||
<use fill="black" fill-opacity="1" filter="url(#taskfilter-7)" xlink:href="#taskpath-6"></use>
|
||||
<use :fill="colors[9]" fill-rule="evenodd" xlink:href="#taskpath-6"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="编组" :transform="`translate(${w/3.63}, 1.4324)`" :fill="colors[10]">
|
||||
<polygon
|
||||
id="矩形"
|
||||
:points="`-1.54661681e-14 -6.4452071e-13 ${w/19.35} -6.4452071e-13 ${w/16.17} 3.68638359 4.2352231 3.68638359`"
|
||||
></polygon>
|
||||
</g>
|
||||
<g id="编组备份" opacity="0.59407988" :transform="`translate(${w/2.82}, 1.4324)`" :fill="colors[10]">
|
||||
<polygon
|
||||
id="矩形"
|
||||
:points="`-1.54661681e-14 -6.4452071e-13 ${w/19.35} -6.4452071e-13 ${w/16.17} 3.68638359 4.2352231 3.68638359`"
|
||||
></polygon>
|
||||
</g>
|
||||
|
||||
<polygon
|
||||
id="路径-21"
|
||||
:fill="`url(#8-${boxId})`"
|
||||
:points="`25 ${h/7.85} 25 26.2109979 51.1995145 8.19751628e-13 ${w/4.1} 8.19751628e-13 ${w/3.86} 4.73651289 54.0862279 4.73651289 29.7344378 29.0989765 29.7344378 ${h/7.42}`"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-21"
|
||||
:fill="`url(#9-${boxId})`"
|
||||
:transform="`translate(${w/1.13}, ${h/1.16}) scale(-1, -1) translate(-${w/1.13}, -${h/1.16})`"
|
||||
:points="`${w/1.26} ${h/1.04} ${w/1.26} ${h/1.29} ${w/1.18} ${h/1.33} ${w/1.03} ${h/1.33} ${w/1.02} ${h/1.32} ${w/1.16} ${h/1.32} ${w/1.25} ${h/1.28} ${w/1.25} ${h/1.03}`"
|
||||
></polygon>
|
||||
</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>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskCloseConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'taskclose',
|
||||
colors: ['#58FF95','#005516','#A6FCC7'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskCloseConfig.key
|
||||
public attr = { ...chartInitConfig, w: 41, h: 24, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskCloseConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskCloseConfig: ConfigType = {
|
||||
key: 'TaskClose',
|
||||
chartKey: 'VTaskClose',
|
||||
conKey: 'VCTaskClose',
|
||||
title: '按钮-关闭',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'taskclose.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskclose.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskIcons01Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'TaskIcons01',
|
||||
colors: ['#58FF95','#005516','#A6FCC7'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskIcons01Config.key
|
||||
public attr = { ...chartInitConfig, w: 18, h: 18, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskIcons01Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskIcons01Config: ConfigType = {
|
||||
key: 'TaskIcons01',
|
||||
chartKey: 'VTaskIcons01',
|
||||
conKey: 'VCTaskIcons01',
|
||||
title: '图标-01',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'taskicon01.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskicon01.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskIcons02Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'TaskIcons02',
|
||||
colors: ['#58FF95','#005516','#A6FCC7'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskIcons02Config.key
|
||||
public attr = { ...chartInitConfig, w: 18, h: 18, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskIcons02Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskIcons02Config: ConfigType = {
|
||||
key: 'TaskIcons02',
|
||||
chartKey: 'VTaskIcons02',
|
||||
conKey: 'VCTaskIcons02',
|
||||
title: '图标-02',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'taskicon02.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskicon02.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskIcons03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'TaskIcons03',
|
||||
colors: ['#58FF95','#005516','#A6FCC7'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskIcons03Config.key
|
||||
public attr = { ...chartInitConfig, w: 18, h: 18, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskIcons03Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskIcons03Config: ConfigType = {
|
||||
key: 'TaskIcons03',
|
||||
chartKey: 'VTaskIcons03',
|
||||
conKey: 'VCTaskIcons03',
|
||||
title: '图标-03',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'taskicon03.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskicon03.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskPlanConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'TaskPlan',
|
||||
colors: ['#58FF95','#005516','#A6FCC7'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskPlanConfig.key
|
||||
public attr = { ...chartInitConfig, w: 43, h: 44, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskPlanConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskPlanConfig: ConfigType = {
|
||||
key: 'TaskPlan',
|
||||
chartKey: 'VTaskPlan',
|
||||
conKey: 'VCTaskPlan',
|
||||
title: '规划方案',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'taskplan.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/tasks/taskplan.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskRoutePlanConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
colors: ['#FFFFFF','#CBE6CD','#58FF95'],
|
||||
textSize1: 12,
|
||||
textSize2: 14,
|
||||
textSize3: 20,
|
||||
dataset:[
|
||||
{ time: '27' },
|
||||
{ time: '37' },
|
||||
{ time: '47' }
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TaskRoutePlanConfig.key
|
||||
public attr = { ...chartInitConfig, w: 354, h: 550, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskRoutePlanConfig)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.textSize1"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.textSize2"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="文字大小">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.textSize3"
|
||||
:min="10"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
|
||||
|
||||
export const TaskRoutePlanConfig: ConfigType = {
|
||||
key: 'TaskRoutePlan',
|
||||
chartKey: 'VTaskRoutePlan',
|
||||
conKey: 'VCTaskRoutePlan',
|
||||
title: '规划方案',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.TASKS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'routeplan.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<div class="container flex ai-c" v-for="(item, index) in dataset">
|
||||
<img class="img" src="/src/assets/images/chart/tasks/routebg.png" />
|
||||
<div class="flex ai-c jc-c">
|
||||
<img class="iconsbox" v-if="index%2==0" src="/src/assets/images/chart/tasks/taskicon04.png" />
|
||||
<img class="iconsbox" v-if="index%2!=0" src="/src/assets/images/chart/tasks/taskicon05.png" />
|
||||
<div class="plantitle">
|
||||
<img class="titleimg" v-if="index%2==0" src="/src/assets/images/chart/tasks/taskbtn01.png" />
|
||||
<img class="titleimg" v-if="index%2!=0" src="/src/assets/images/chart/tasks/taskbtn02.png" />
|
||||
<div class="text1 max-h flex ai-c jc-c">方案{{ index+1 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex ai-c ml-1 pos-r">
|
||||
<div class="text2">耗时 <span class="text3">{{ item.time }}</span> 分钟</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
dataset,
|
||||
colors,
|
||||
textSize1,
|
||||
textSize2,
|
||||
textSize3,
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
width: v-bind('w');
|
||||
height: v-bind('h');
|
||||
overflow: auto;
|
||||
.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;
|
||||
}
|
||||
.pos-r{
|
||||
position: relative;
|
||||
}
|
||||
.max-w{
|
||||
width: 100%;
|
||||
}
|
||||
.max-h{
|
||||
height: 100%;
|
||||
}
|
||||
.ml-1{
|
||||
margin-left: 11px;
|
||||
}
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
.img{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.iconsbox{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.plantitle{
|
||||
position: relative;
|
||||
width: 71px;
|
||||
height: 23px;
|
||||
.titleimg{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
.text1{
|
||||
width: 80%;
|
||||
color: v-bind('colors[0]');
|
||||
font-size: v-bind('textSize1+"px"');
|
||||
}
|
||||
}
|
||||
.text2{
|
||||
color: v-bind('colors[1]');
|
||||
font-size: v-bind('textSize2+"px"');
|
||||
}
|
||||
.text3{
|
||||
color: v-bind('colors[2]');
|
||||
font-size: v-bind('textSize3+"px"');
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/* 整个滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /* 滚动条宽度 */
|
||||
}
|
||||
/* 滚动轨道的样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #00611A; /* 轨道背景颜色 */
|
||||
}
|
||||
/* 滚动滑块的样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #0EB687; /* 滑块背景颜色 */
|
||||
}
|
||||
/* 当鼠标悬停在滑块上时改变颜色 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TaskTextAreaConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
|
@ -17,4 +17,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
|||
public attr = { ...chartInitConfig, w: 437, h: 93, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(TaskTextAreaConfig)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
|
|
@ -30,6 +32,11 @@ const {
|
|||
borderColor,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,34 @@ import { TaskInput00Config } from './TaskInput/index';
|
|||
import { TaskTextAreaConfig } from './TaskTextArea/index';
|
||||
import { TaskBackground01Config } from './TaskBackground01/index';
|
||||
import { TaskBackground02Config } from './TaskBackground02/index';
|
||||
import { TaskBackground03Config } from './TaskBackground03/index';
|
||||
import { TaskReceivPersonConfig } from './TaskReceivPerson/index';
|
||||
import { TaskBackConfig } from './TaskBack/index';
|
||||
import { TaskCloseConfig } from './TaskClose/index';
|
||||
import { TaskPlanConfig } from './TaskPlan/index';
|
||||
import { TaskIcons01Config } from './TaskIcons01/index';
|
||||
import { TaskIcons02Config } from './TaskIcons02/index';
|
||||
import { TaskIcons03Config } from './TaskIcons03/index';
|
||||
import { TaskAddRouteConfig } from './TaskAddRoute/index';
|
||||
import { TaskRoutePlanConfig } from './TaskRoutePlan/index';
|
||||
|
||||
|
||||
export default [
|
||||
TaskBackground01Config,
|
||||
TaskBackground02Config,
|
||||
TaskBackground03Config,
|
||||
TaskBannerConfig,
|
||||
TaskRadioConfig,
|
||||
TaskTitlesConfig,
|
||||
TaskInput00Config,
|
||||
TaskTextAreaConfig,
|
||||
|
||||
TaskReceivPersonConfig
|
||||
TaskReceivPersonConfig,
|
||||
TaskBackConfig,
|
||||
TaskCloseConfig,
|
||||
TaskPlanConfig,
|
||||
TaskIcons01Config,
|
||||
TaskIcons02Config,
|
||||
TaskIcons03Config,
|
||||
TaskAddRouteConfig,
|
||||
TaskRoutePlanConfig
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue