简柏林 / thingskit-view · Commits

Commit 29ff54c45e5a820d234c7106da113d6f40f5ff16

Authored by fengtao
1 parent c0a4a0fb

perf(src/packages): 小组件，新增装饰27~30

Inline Side-by-side
Showing 21 changed files with 1569 additions and 0 deletions
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { Decorates27Config } from './index'
  3 +import { CreateComponentType } from '@/packages/index.d'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '模块标题',
  9 + fontConfig: {
  10 + x1: '132',
  11 + y1: '129.8828125',
  12 + x2: '103',
  13 + y2: '64.96000000000001',
  14 + datasetTspanFill: '#00F0A2',
  15 + titleTspanFill: '#FFFFFF',
  16 + datasetTspanFontSize: 30,
  17 + }
  18 +}
  19 +
  20 +export default class Config extends PublicConfigClass implements CreateComponentType {
  21 + public key = Decorates27Config.key
  22 + public attr = { ...chartInitConfig, w: 305, h: 110, zIndex: -1 }
  23 + public chartConfig = cloneDeep(Decorates27Config)
  24 + public option = cloneDeep(option)
  25 +}
  1 +<template>
  2 + <!-- Echarts 全局设置 -->
  3 + <global-setting :optionData="optionData"></global-setting>
  4 + <CollapseItem name="配置" :expanded="true">
  5 + <setting-item-box name="数据源">
  6 + <setting-item name="数据">
  7 + <n-input v-model:value="optionData.dataset" />
  8 + </setting-item>
  9 + </setting-item-box>
  10 + <SettingItemBox :name="`数据源字体配置`">
  11 + <SettingItem name="x">
  12 + <n-input-number :min="0" v-model:value="optionData.fontConfig.x1"></n-input-number>
  13 + </SettingItem>
  14 + <SettingItem name="y">
  15 + <n-input-number :min="0" v-model:value="optionData.fontConfig.y1"></n-input-number>
  16 + </SettingItem>
  17 + <SettingItem name="大小">
  18 + <n-input-number :min="0" v-model:value="optionData.fontConfig.datasetTspanFontSize"></n-input-number>
  19 + </SettingItem>
  20 + <SettingItem name="颜色">
  21 + <n-color-picker
  22 + size="small"
  23 + :modes="['hex']"
  24 + v-model:value="optionData.fontConfig.datasetTspanFill"
  25 + ></n-color-picker>
  26 + </SettingItem>
  27 + </SettingItemBox>
  28 + </CollapseItem>
  29 +</template>
  30 +
  31 +<script setup lang="ts">
  32 +import { PropType } from 'vue'
  33 +import { option } from './config'
  34 +import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  35 +
  36 +defineProps({
  37 + optionData: {
  38 + type: Object as PropType<typeof option>,
  39 + required: true
  40 + }
  41 +})
  42 +</script>
  1 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
  2 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  3 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  4 +
  5 +const { key, chartKey, conKey } = useWidgetKey('Decorates27', true)
  6 +
  7 +export const Decorates27Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '模块标题27',
  12 + category: ChatCategoryEnum.DECORATE,
  13 + categoryName: ChatCategoryEnumName.DECORATE,
  14 + package: PackagesCategoryEnum.DECORATES,
  15 + chartFrame: ChartFrameEnum.COMMON,
  16 + image: 'decorates27.png'
  17 +}
  1 +<template>
  2 + <div class="go-content-box">
  3 + <svg
  4 + xmlns="http://www.w3.org/2000/svg"
  5 + xmlns:xlink="http://www.w3.org/1999/xlink"
  6 + :width="w"
  7 + :height="h"
  8 + viewBox="0 0 420 147"
  9 + fill="none"
  10 + >
  11 + <g opacity="0.3">
  12 + <g filter="url(#filter_f159ebae-322a-4973-83f9-9355681bcf9d)">
  13 + <rect
  14 + x="9"
  15 + y="10"
  16 + width="402"
  17 + height="134"
  18 + stroke="rgba(11, 97, 184, 1)"
  19 + stroke-width="2"
  20 + fill="#011231"
  21 + fill-opacity="0.6"
  22 + ></rect>
  23 + </g>
  24 + </g>
  25 + <rect x="9" y="1" width="402" height="134" fill="#022C5B" fill-opacity="0.6"></rect>
  26 + <g filter="url(#filter_d39fec7c-b2c4-483b-a0f9-e184380ce12e)">
  27 + <rect x="9" y="1" width="402" height="134" stroke="rgba(11, 97, 184, 1)" stroke-width="2"></rect>
  28 + </g>
  29 + <rect x="1" y="0" width="2" height="136" fill="#00ABFF"></rect>
  30 + <rect x="417" y="0" width="2" height="136" fill="#00ABFF"></rect>
  31 + <rect x="416" y="0" width="4" height="30" fill="#00F6FF"></rect>
  32 + <rect x="416" y="106" width="4" height="30" fill="#00F6FF"></rect>
  33 + <rect x="0" y="0" width="4" height="30" fill="#00F6FF"></rect>
  34 + <rect x="0" y="106" width="4" height="30" fill="#00F6FF"></rect>
  35 + <rect x="15" y="6" width="8" height="4" fill="#00F6FF"></rect>
  36 + <rect x="395" y="6" width="8" height="4" fill="#00F6FF"></rect>
  37 + <g opacity="0.6">
  38 + <rect x="382" y="6" width="8" height="4" fill="#00F6FF"></rect>
  39 + </g>
  40 + <g opacity="0.2">
  41 + <rect x="369" y="6" width="8" height="4" fill="#00F6FF"></rect>
  42 + </g>
  43 + <g opacity="0.6">
  44 + <rect x="28" y="6" width="8" height="4" fill="#00F6FF"></rect>
  45 + </g>
  46 + <g opacity="0.2">
  47 + <rect x="41" y="6" width="8" height="4" fill="#00F6FF"></rect>
  48 + </g>
  49 + <g opacity="0.5">
  50 + <path stroke="rgba(11, 97, 184, 1)" stroke-width="2" d="M134 1.5L149.5 16.5L269 16.5L284 1.5"></path>
  51 + </g>
  52 + <g opacity="0.5">
  53 + <path stroke="rgba(11, 97, 184, 1)" stroke-width="2" d="M134 135L149.5 120L269 120L284 135"></path>
  54 + </g>
  55 + <g opacity="1" transform="translate(11 -50)">
  56 + <text>
  57 + <tspan
  58 + :x="fontConfig.x1"
  59 + :y="fontConfig.y1"
  60 + :font-size="fontConfig.datasetTspanFontSize"
  61 + line-height="0"
  62 + :fill="fontConfig.datasetTspanFill"
  63 + opacity="1"
  64 + font-family="Roboto-Regular"
  65 + font-weight="Regular"
  66 + letter-spacing="0"
  67 + >
  68 + {{ dataset }}
  69 + </tspan>
  70 + </text>
  71 + </g>
  72 + <path
  73 + d="M85.5 33C102.9 33 117 47.1 117 64.5C117 81.9 89.87 103 85.5 103C81.13 103 54 81.9 54 64.5C54 47.1 68.1 33 85.5 33ZM85.495 54.875C90.815 54.875 95.125 59.185 95.125 64.495C95.125 69.815 90.815 74.125 85.495 74.125C80.185 74.125 75.875 69.815 75.875 64.495C75.875 59.185 80.185 54.875 85.495 54.875Z"
  74 + fill-rule="evenodd"
  75 + fill="url(#linear_fill_24aadc2d-dd75-4fb1-b98a-92d6c45d95db)"
  76 + ></path>
  77 + <path
  78 + fill-rule="evenodd"
  79 + fill="url(#linear_fill_5b832155-7920-462b-94fb-fb2e3ed3f1d4_0)"
  80 + d="M85.5 38C102.9 38 117 52.1 117 69.5C117 86.9 89.87 108 85.5 108C81.13 108 54 86.9 54 69.5C54 52.1 68.1 38 85.5 38ZM85.495 59.875C90.815 59.875 95.125 64.185 95.125 69.495C95.125 74.815 90.815 79.125 85.495 79.125C80.185 79.125 75.875 74.815 75.875 69.495C75.875 64.185 80.185 59.875 85.495 59.875Z"
  81 + ></path>
  82 + <path
  83 + fill-rule="evenodd"
  84 + fill="rgba(4, 220, 237, 0.26)"
  85 + d="M117 69.5C117 52.1 102.9 38 85.5 38C68.1 38 54 52.1 54 69.5C54 86.9 81.13 108 85.5 108C89.87 108 117 86.9 117 69.5ZM55 69.5C55 52.6553 68.6553 39 85.5 39C102.345 39 116 52.6553 116 69.5Q116 80.5209 102.176 94.5737Q97.0168 99.8181 91.6852 103.617Q86.9368 107 85.5 107Q84.0632 107 79.3148 103.617Q73.9832 99.8181 68.8241 94.5737Q55 80.5209 55 69.5ZM96.125 69.495C96.125 63.6297 91.3603 58.875 85.495 58.875C79.6297 58.875 74.875 63.6297 74.875 69.495C74.875 75.3658 79.6242 80.125 85.495 80.125C91.3658 80.125 96.125 75.3658 96.125 69.495ZM95.125 69.495C95.125 64.185 90.815 59.875 85.495 59.875C80.185 59.875 75.875 64.185 75.875 69.495C75.875 74.815 80.185 79.125 85.495 79.125C90.815 79.125 95.125 74.815 95.125 69.495Z"
  86 + ></path>
  87 + <defs>
  88 + <filter
  89 + id="filter_f159ebae-322a-4973-83f9-9355681bcf9d"
  90 + x="6"
  91 + y="7"
  92 + width="408"
  93 + height="140"
  94 + filterUnits="userSpaceOnUse"
  95 + color-interpolation-filters="sRGB"
  96 + >
  97 + <feFlood flood-opacity="0" result="feFloodId_f159ebae-322a-4973-83f9-9355681bcf9d" />
  98 + <feBlend
  99 + mode="normal"
  100 + in="SourceGraphic"
  101 + in2="feFloodId_f159ebae-322a-4973-83f9-9355681bcf9d"
  102 + result="shape"
  103 + />
  104 + <feGaussianBlur result="gaussian_blur_f159ebae-322a-4973-83f9-9355681bcf9d" stdDeviation="1" />
  105 + </filter>
  106 + <filter
  107 + id="filter_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
  108 + x="8"
  109 + y="0"
  110 + width="404"
  111 + height="136"
  112 + filterUnits="userSpaceOnUse"
  113 + color-interpolation-filters="sRGB"
  114 + >
  115 + <feFlood flood-opacity="0" result="feFloodId_d39fec7c-b2c4-483b-a0f9-e184380ce12e" />
  116 + <feBlend
  117 + mode="normal"
  118 + in="SourceGraphic"
  119 + in2="feFloodId_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
  120 + result="shape_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
  121 + />
  122 + <feColorMatrix
  123 + in="SourceAlpha"
  124 + type="matrix"
  125 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  126 + result="hardAlpha_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
  127 + />
  128 + <feOffset dx="0" dy="0" />
  129 + <feGaussianBlur stdDeviation="10" />
  130 + <feComposite in2="hardAlpha_d39fec7c-b2c4-483b-a0f9-e184380ce12e" operator="arithmetic" k2="-1" k3="1" />
  131 + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6509803921568628 0 0 0 0 1 0 0 0 0.8 0" />
  132 + <feBlend
  133 + mode="normal"
  134 + in2="shape_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
  135 + result="innerShadow_0_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
  136 + />
  137 + </filter>
  138 + <linearGradient
  139 + id="linear_fill_24aadc2d-dd75-4fb1-b98a-92d6c45d95db"
  140 + x1="85.5"
  141 + y1="103"
  142 + x2="85.5"
  143 + y2="33"
  144 + gradientUnits="userSpaceOnUse"
  145 + >
  146 + <stop offset="0" stop-color="#18698C" />
  147 + <stop offset="1" stop-color="#11A6A6" />
  148 + </linearGradient>
  149 + <linearGradient
  150 + id="linear_fill_5b832155-7920-462b-94fb-fb2e3ed3f1d4_0"
  151 + x1="85.5"
  152 + y1="108"
  153 + x2="85.5"
  154 + y2="38"
  155 + gradientUnits="userSpaceOnUse"
  156 + >
  157 + <stop offset="0" stop-color="#0E668C" />
  158 + <stop offset="1" stop-color="#00F2EE" />
  159 + </linearGradient>
  160 + </defs>
  161 + </svg>
  162 + </div>
  163 +</template>
  164 +<script setup lang="ts">
  165 +import { PropType, toRefs } from 'vue'
  166 +import { CreateComponentType } from '@/packages/index.d'
  167 +import { option } from './config'
  168 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  169 +import { useChartDataFetch } from '@/hooks'
  170 +
  171 +const props = defineProps({
  172 + chartConfig: {
  173 + type: Object as PropType<CreateComponentType & typeof option>,
  174 + required: true
  175 + }
  176 +})
  177 +
  178 +const { w, h } = toRefs(props.chartConfig.attr)
  179 +
  180 +const { dataset, fontConfig } = toRefs(props.chartConfig.option as typeof option)
  181 +
  182 +// 预览更新
  183 +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string | number) => {
  184 + dataset.value = newData as string | number
  185 +})
  186 +</script>
  187 +
  188 +<style lang="scss" scoped>
  189 +.go-content-box {
  190 + width: v-bind('w+"px"');
  191 + height: v-bind('h+"px"');
  192 + display: flex;
  193 + align-items: center;
  194 + justify-content: center;
  195 +}
  196 +</style>
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { Decorates28Config } from './index'
  3 +import { CreateComponentType } from '@/packages/index.d'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '模块标题',
  9 + fontConfig: {
  10 + x1: '132',
  11 + y1: '129.8828125',
  12 + x2: '103',
  13 + y2: '64.96000000000001',
  14 + datasetTspanFill: '#00F0A2',
  15 + titleTspanFill: '#FFFFFF',
  16 + datasetTspanFontSize: 30,
  17 + }
  18 +}
  19 +
  20 +export default class Config extends PublicConfigClass implements CreateComponentType {
  21 + public key = Decorates28Config.key
  22 + public attr = { ...chartInitConfig, w: 305, h: 110, zIndex: -1 }
  23 + public chartConfig = cloneDeep(Decorates28Config)
  24 + public option = cloneDeep(option)
  25 +}
  1 +<template>
  2 + <!-- Echarts 全局设置 -->
  3 + <global-setting :optionData="optionData"></global-setting>
  4 + <CollapseItem name="配置" :expanded="true">
  5 + <setting-item-box name="数据源">
  6 + <setting-item name="数据">
  7 + <n-input v-model:value="optionData.dataset" />
  8 + </setting-item>
  9 + </setting-item-box>
  10 + <SettingItemBox :name="`数据源字体配置`">
  11 + <SettingItem name="x">
  12 + <n-input-number :min="0" v-model:value="optionData.fontConfig.x1"></n-input-number>
  13 + </SettingItem>
  14 + <SettingItem name="y">
  15 + <n-input-number :min="0" v-model:value="optionData.fontConfig.y1"></n-input-number>
  16 + </SettingItem>
  17 + <SettingItem name="大小">
  18 + <n-input-number :min="0" v-model:value="optionData.fontConfig.datasetTspanFontSize"></n-input-number>
  19 + </SettingItem>
  20 + <SettingItem name="颜色">
  21 + <n-color-picker
  22 + size="small"
  23 + :modes="['hex']"
  24 + v-model:value="optionData.fontConfig.datasetTspanFill"
  25 + ></n-color-picker>
  26 + </SettingItem>
  27 + </SettingItemBox>
  28 + </CollapseItem>
  29 +</template>
  30 +
  31 +<script setup lang="ts">
  32 +import { PropType } from 'vue'
  33 +import { option } from './config'
  34 +import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  35 +
  36 +defineProps({
  37 + optionData: {
  38 + type: Object as PropType<typeof option>,
  39 + required: true
  40 + }
  41 +})
  42 +</script>
  1 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
  2 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  3 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  4 +
  5 +const { key, chartKey, conKey } = useWidgetKey('Decorates28', true)
  6 +
  7 +export const Decorates28Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '模块标题28',
  12 + category: ChatCategoryEnum.DECORATE,
  13 + categoryName: ChatCategoryEnumName.DECORATE,
  14 + package: PackagesCategoryEnum.DECORATES,
  15 + chartFrame: ChartFrameEnum.COMMON,
  16 + image: 'decorates28.png'
  17 +}
  1 +<template>
  2 + <div class="go-content-box">
  3 + <svg
  4 + xmlns="http://www.w3.org/2000/svg"
  5 + xmlns:xlink="http://www.w3.org/1999/xlink"
  6 + :width="w"
  7 + :height="h"
  8 + viewBox="0 0 428.1663818359375 121.5"
  9 + fill="none"
  10 + >
  11 + <g opacity="0.3">
  12 + <g filter="url(#filter_98d03be6-b8cb-4e27-b332-bc2820d07903)">
  13 + <path
  14 + d="M409.722 14.36C409.342 13.82 408.732 13.5 408.072 13.5L44.8918 13.5C44.1218 13.5 43.4118 13.94 43.0818 14.64L12.9417 78.35C12.6517 78.95 12.6917 79.66 13.0317 80.23L35.8918 118.53C36.2518 119.13 36.9118 119.5 37.6118 119.5L385.422 119.5C386.182 119.5 386.882 119.06 387.212 118.38L425.962 39.67C426.282 39.02 426.222 38.25 425.812 37.65L409.722 14.36Z"
  15 + fill="#011231"
  16 + fill-opacity="0.6"
  17 + ></path>
  18 + </g>
  19 + <g filter="url(#filter_c8b60da4-9052-4ab3-a895-6acbad140e0b)">
  20 + <path
  21 + d="M409.722 14.36C409.342 13.82 408.732 13.5 408.072 13.5L44.8918 13.5C44.1218 13.5 43.4118 13.94 43.0818 14.64L12.9417 78.35C12.6517 78.95 12.6917 79.66 13.0317 80.23L35.8918 118.53C36.2518 119.13 36.9118 119.5 37.6118 119.5L385.422 119.5C386.182 119.5 386.882 119.06 387.212 118.38L425.962 39.67C426.282 39.02 426.222 38.25 425.812 37.65L409.722 14.36Z"
  22 + stroke="rgba(11, 97, 184, 1)"
  23 + stroke-width="2"
  24 + ></path>
  25 + </g>
  26 + </g>
  27 + <path
  28 + d="M417.481 27.54C417.791 26.89 417.731 26.13 417.331 25.54L401.581 2.38C401.211 1.83 400.591 1.5 399.921 1.5L44.2517 1.5C43.4717 1.5 42.7717 1.95 42.4417 2.66L12.9218 66.05C12.6418 66.65 12.6818 67.34 13.0118 67.91L35.4017 106.01C35.7617 106.62 36.4117 107 37.1217 107L377.731 107C378.501 107 379.201 106.56 379.531 105.87L417.481 27.54Z"
  29 + fill="#011231"
  30 + fill-opacity="0.6"
  31 + ></path>
  32 + <g filter="url(#filter_19131d1d-3e49-4887-91be-ebc5057ba529)">
  33 + <path
  34 + d="M417.481 27.54C417.791 26.89 417.731 26.13 417.331 25.54L401.581 2.38C401.211 1.83 400.591 1.5 399.921 1.5L44.2517 1.5C43.4717 1.5 42.7717 1.95 42.4417 2.66L12.9218 66.05C12.6418 66.65 12.6818 67.34 13.0118 67.91L35.4017 106.01C35.7617 106.62 36.4117 107 37.1217 107L377.731 107C378.501 107 379.201 106.56 379.531 105.87L417.481 27.54Z"
  35 + stroke="rgba(11, 97, 184, 1)"
  36 + stroke-width="2"
  37 + ></path>
  38 + </g>
  39 + <g opacity="0.6">
  40 + <path
  41 + d="M58.098 7.86505C57.338 7.86505 56.648 8.28505 56.308 8.96505L28.3379 64.7651C28.0279 65.3851 28.0579 66.1351 28.4279 66.7251L49.608 100.205C49.978 100.785 50.608 101.135 51.298 101.135L375.488 101.135C376.238 101.135 376.918 100.725 377.268 100.065L413.248 31.0751C413.608 30.4051 413.548 29.5851 413.098 28.9651L398.248 8.68505C397.868 8.16505 397.268 7.86505 396.628 7.86505L58.098 7.86505Z"
  42 + fill="#081837"
  43 + fill-opacity="0.6"
  44 + ></path>
  45 + <g filter="url(#filter_ecbd7b82-4d30-47dd-822d-74022aba9497)">
  46 + <path
  47 + d="M58.098 7.86505C57.338 7.86505 56.648 8.28505 56.308 8.96505L28.3379 64.7651C28.0279 65.3851 28.0579 66.1351 28.4279 66.7251L49.608 100.205C49.978 100.785 50.608 101.135 51.298 101.135L375.488 101.135C376.238 101.135 376.918 100.725 377.268 100.065L413.248 31.0751C413.608 30.4051 413.548 29.5851 413.098 28.9651L398.248 8.68505C397.868 8.16505 397.268 7.86505 396.628 7.86505L58.098 7.86505Z"
  48 + fill="#081837"
  49 + fill-opacity="0.6"
  50 + ></path>
  51 + </g>
  52 + </g>
  53 + <path
  54 + d="M50.4818 7.5L44.4818 20L51.9818 20L54.9818 12.5L65.9818 12.5L62.4818 7.5L50.4818 7.5Z"
  55 + fill="#0BD9FC"
  56 + ></path>
  57 + <path
  58 + d="M371.482 101L377.482 88.5L369.982 88.5L366.982 96L355.982 96L359.482 101L371.482 101Z"
  59 + fill="#0BD9FC"
  60 + ></path>
  61 + <g opacity="0.8">
  62 + <path d="M348.982 96L343.482 96L348.982 101L354.482 101L348.982 96Z" fill="#0BD9FC"></path>
  63 + </g>
  64 + <g opacity="0.6">
  65 + <path d="M336.982 96L331.482 96L336.982 101L342.482 101L336.982 96Z" fill="#0BD9FC"></path>
  66 + </g>
  67 + <g opacity="0.3">
  68 + <path d="M325.982 96L320.482 96L325.982 101L331.482 101L325.982 96Z" fill="#0BD9FC"></path>
  69 + </g>
  70 + <g opacity="0.8">
  71 + <path d="M72.9818 12.5L78.4818 12.5L72.9818 7.5L67.4818 7.5L72.9818 12.5Z" fill="#0BD9FC"></path>
  72 + </g>
  73 + <g opacity="0.6">
  74 + <path d="M84.9818 12.5L90.4818 12.5L84.9818 7.5L79.4818 7.5L84.9818 12.5Z" fill="#0BD9FC"></path>
  75 + </g>
  76 + <g opacity="0.3">
  77 + <path d="M95.9818 12.5L101.482 12.5L95.9818 7.5L90.4818 7.5L95.9818 12.5Z" fill="#0BD9FC"></path>
  78 + </g>
  79 + <g opacity="0.6">
  80 + <path
  81 + d="M22.1417 106C22.5117 106 22.8417 105.8 23.0217 105.47C23.1917 105.15 23.1717 104.76 22.9717 104.45L10.9917 86.05C10.7917 85.74 10.4417 85.56 10.0717 85.59C9.70171 85.62 9.38171 85.85 9.23171 86.19L1.1017 104.6C0.961703 104.91 1.0017 105.27 1.1817 105.55C1.3717 105.83 1.6817 106 2.02171 106L22.1417 106Z"
  82 + stroke="rgba(0, 185, 255, 1)"
  83 + stroke-width="2"
  84 + fill="#0E3F80"
  85 + ></path>
  86 + </g>
  87 + <g opacity="1" transform="translate(22 -65)">
  88 + <text>
  89 + <tspan
  90 + :x="fontConfig.x1"
  91 + :y="fontConfig.y1"
  92 + :font-size="fontConfig.datasetTspanFontSize"
  93 + line-height="0"
  94 + :fill="fontConfig.datasetTspanFill"
  95 + opacity="1"
  96 + font-family="Roboto-Regular"
  97 + font-weight="Regular"
  98 + letter-spacing="0"
  99 + >
  100 + {{ dataset }}
  101 + </tspan>
  102 + </text>
  103 + </g>
  104 + <path
  105 + d="M82.8819 108.069L37.6304 108.069C35.7021 108.069 34.4931 106.6 34.4426 106.537L34.395 106.478L34.3569 106.413C33.4674 104.889 12.5669 69.0836 12.0755 68.1901C11.4897 67.1249 11.7768 66.1139 12.0729 65.6206L25.08 37.9282L26.8903 38.7785L13.8059 66.6353L13.784 66.6593C13.7442 66.7397 13.6747 66.9476 13.828 67.2263C14.2959 68.0771 34.8648 103.316 36.034 105.319C36.1941 105.487 36.8063 106.069 37.6304 106.069L82.8819 106.069L82.8819 108.069Z"
  106 + fill="url(#linear_fill_a36ae718-b1ea-4e08-8516-037b53322938)"
  107 + ></path>
  108 + <path
  109 + d="M397.024 71.9896L395.227 71.1121C395.43 70.6963 415.542 29.5053 416.397 27.6251C416.809 26.7185 416.707 26.1818 416.589 26.0099L416.545 25.9688L416.483 25.8788C415.903 25.0347 402.256 5.18647 401.226 3.53913C400.579 2.50379 399.663 2.49152 399.518 2.4972L399.465 2.50367L399.439 2.50007L361.457 2.50007L361.457 0.500061L399.403 0.500061C400.241 0.446289 401.874 0.802368 402.922 2.47906C403.903 4.04908 417.289 23.5203 418.094 24.6921C418.413 25.0638 419.203 26.2852 418.217 28.4527C417.351 30.3579 397.854 70.2907 397.024 71.9896Z"
  110 + fill="url(#linear_fill_e679ec05-c54c-45fa-afbc-1f4cc272d7de)"
  111 + ></path>
  112 + <rect
  113 + x="136.48175048828125"
  114 + y="0.5"
  115 + width="174"
  116 + height="2"
  117 + stroke="rgba(0, 0, 0, 0)"
  118 + stroke-width="1"
  119 + fill="url(#linear_fill_67dd1fd1-a96a-4a67-a858-60eb1cc7970d)"
  120 + ></rect>
  121 + <rect
  122 + x="96.48175048828125"
  123 + y="106.5"
  124 + width="174"
  125 + height="2"
  126 + stroke="rgba(0, 0, 0, 0)"
  127 + stroke-width="1"
  128 + fill="url(#linear_fill_2d07459b-3ef9-4b88-a694-f39f3a4fb8db)"
  129 + ></rect>
  130 + <path
  131 + d="M84.9818 34.142C84.9827 32.629 86.2087 31.403 87.7217 31.402L110.112 31.402C111.432 31.402 112.67 32.337 113.032 33.605L115.145 40.999L137.985 40.999C139.957 40.999 141.574 42.566 141.635 44.538L141.636 44.652L141.636 73.445C141.636 75.462 139.998 77.098 137.985 77.098L88.6338 77.098C86.6168 77.098 84.9818 75.462 84.9818 73.445L84.9818 34.142ZM109.646 35.058L88.6367 35.058L88.6367 40.999L111.343 40.999L109.646 35.058Z"
  132 + fill-rule="evenodd"
  133 + fill="#00A8FF"
  134 + ></path>
  135 + <path
  136 + d="M84.9818 34.142C84.9827 32.629 86.2087 31.403 87.7217 31.402L110.112 31.402C111.432 31.402 112.67 32.337 113.032 33.605L115.145 40.999L137.985 40.999C139.957 40.999 141.574 42.566 141.635 44.538L141.636 44.652L141.636 73.445C141.636 75.462 139.998 77.098 137.985 77.098L88.6338 77.098C86.6168 77.098 84.9818 75.462 84.9818 73.445L84.9818 34.142ZM109.646 35.058L88.6367 35.058L88.6367 40.999L111.343 40.999L109.646 35.058Z"
  137 + fill="url(#linear_fill_5a73a61e-dfec-44ae-ab41-e59e92779ecb)"
  138 + ></path>
  139 + <defs>
  140 + <filter
  141 + id="filter_98d03be6-b8cb-4e27-b332-bc2820d07903"
  142 + x="10.74798583984375"
  143 + y="11.5"
  144 + width="417.41839599609375"
  145 + height="110"
  146 + filterUnits="userSpaceOnUse"
  147 + color-interpolation-filters="sRGB"
  148 + >
  149 + <feFlood flood-opacity="0" result="feFloodId_98d03be6-b8cb-4e27-b332-bc2820d07903" />
  150 + <feBlend
  151 + mode="normal"
  152 + in="SourceGraphic"
  153 + in2="feFloodId_98d03be6-b8cb-4e27-b332-bc2820d07903"
  154 + result="shape"
  155 + />
  156 + <feGaussianBlur result="gaussian_blur_98d03be6-b8cb-4e27-b332-bc2820d07903" stdDeviation="1" />
  157 + </filter>
  158 + <filter
  159 + id="filter_c8b60da4-9052-4ab3-a895-6acbad140e0b"
  160 + x="11.722366333007812"
  161 + y="12.5"
  162 + width="415.47483825683594"
  163 + height="108"
  164 + filterUnits="userSpaceOnUse"
  165 + color-interpolation-filters="sRGB"
  166 + >
  167 + <feFlood flood-opacity="0" result="feFloodId_c8b60da4-9052-4ab3-a895-6acbad140e0b" />
  168 + <feBlend
  169 + mode="normal"
  170 + in="SourceGraphic"
  171 + in2="feFloodId_c8b60da4-9052-4ab3-a895-6acbad140e0b"
  172 + result="shape_c8b60da4-9052-4ab3-a895-6acbad140e0b"
  173 + />
  174 + <feColorMatrix
  175 + in="SourceAlpha"
  176 + type="matrix"
  177 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  178 + result="hardAlpha_c8b60da4-9052-4ab3-a895-6acbad140e0b"
  179 + />
  180 + <feOffset dx="0" dy="0" />
  181 + <feGaussianBlur stdDeviation="10" />
  182 + <feComposite in2="hardAlpha_c8b60da4-9052-4ab3-a895-6acbad140e0b" operator="arithmetic" k2="-1" k3="1" />
  183 + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6509803921568628 0 0 0 0 1 0 0 0 0.8 0" />
  184 + <feBlend
  185 + mode="normal"
  186 + in2="shape_c8b60da4-9052-4ab3-a895-6acbad140e0b"
  187 + result="innerShadow_0_c8b60da4-9052-4ab3-a895-6acbad140e0b"
  188 + />
  189 + </filter>
  190 + <filter
  191 + id="filter_19131d1d-3e49-4887-91be-ebc5057ba529"
  192 + x="11.714736938476562"
  193 + y="0.5"
  194 + width="406.99278259277344"
  195 + height="107.5"
  196 + filterUnits="userSpaceOnUse"
  197 + color-interpolation-filters="sRGB"
  198 + >
  199 + <feFlood flood-opacity="0" result="feFloodId_19131d1d-3e49-4887-91be-ebc5057ba529" />
  200 + <feBlend
  201 + mode="normal"
  202 + in="SourceGraphic"
  203 + in2="feFloodId_19131d1d-3e49-4887-91be-ebc5057ba529"
  204 + result="shape_19131d1d-3e49-4887-91be-ebc5057ba529"
  205 + />
  206 + <feColorMatrix
  207 + in="SourceAlpha"
  208 + type="matrix"
  209 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  210 + result="hardAlpha_19131d1d-3e49-4887-91be-ebc5057ba529"
  211 + />
  212 + <feOffset dx="0" dy="0" />
  213 + <feGaussianBlur stdDeviation="10" />
  214 + <feComposite in2="hardAlpha_19131d1d-3e49-4887-91be-ebc5057ba529" operator="arithmetic" k2="-1" k3="1" />
  215 + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6509803921568628 0 0 0 0 1 0 0 0 0.8 0" />
  216 + <feBlend
  217 + mode="normal"
  218 + in2="shape_19131d1d-3e49-4887-91be-ebc5057ba529"
  219 + result="innerShadow_0_19131d1d-3e49-4887-91be-ebc5057ba529"
  220 + />
  221 + </filter>
  222 + <filter
  223 + id="filter_ecbd7b82-4d30-47dd-822d-74022aba9497"
  224 + x="28.125961303710938"
  225 + y="7.86505126953125"
  226 + width="385.35585021972656"
  227 + height="93.26998901367188"
  228 + filterUnits="userSpaceOnUse"
  229 + color-interpolation-filters="sRGB"
  230 + >
  231 + <feFlood flood-opacity="0" result="feFloodId_ecbd7b82-4d30-47dd-822d-74022aba9497" />
  232 + <feBlend
  233 + mode="normal"
  234 + in="SourceGraphic"
  235 + in2="feFloodId_ecbd7b82-4d30-47dd-822d-74022aba9497"
  236 + result="shape_ecbd7b82-4d30-47dd-822d-74022aba9497"
  237 + />
  238 + <feColorMatrix
  239 + in="SourceAlpha"
  240 + type="matrix"
  241 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  242 + result="hardAlpha_ecbd7b82-4d30-47dd-822d-74022aba9497"
  243 + />
  244 + <feOffset dx="0" dy="0" />
  245 + <feGaussianBlur stdDeviation="10" />
  246 + <feComposite in2="hardAlpha_ecbd7b82-4d30-47dd-822d-74022aba9497" operator="arithmetic" k2="-1" k3="1" />
  247 + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6509803921568628 0 0 0 0 1 0 0 0 0.8 0" />
  248 + <feBlend
  249 + mode="normal"
  250 + in2="shape_ecbd7b82-4d30-47dd-822d-74022aba9497"
  251 + result="innerShadow_0_ecbd7b82-4d30-47dd-822d-74022aba9497"
  252 + />
  253 + </filter>
  254 + <linearGradient
  255 + id="linear_fill_a36ae718-b1ea-4e08-8516-037b53322938"
  256 + x1="20.389801025390625"
  257 + y1="80.09097290039062"
  258 + x2="47.30860900878906"
  259 + y2="63.687042236328125"
  260 + gradientUnits="userSpaceOnUse"
  261 + >
  262 + <stop offset="0" stop-color="#00F6FF" />
  263 + <stop offset="1" stop-color="#0055D5" stop-opacity="0" />
  264 + </linearGradient>
  265 + <linearGradient
  266 + id="linear_fill_e679ec05-c54c-45fa-afbc-1f4cc272d7de"
  267 + x1="410.9110107421875"
  268 + y1="15.723907470703125"
  269 + x2="380.83074951171875"
  270 + y2="39.813629150390625"
  271 + gradientUnits="userSpaceOnUse"
  272 + >
  273 + <stop offset="0" stop-color="#00F6FF" />
  274 + <stop offset="1" stop-color="#0055D5" stop-opacity="0" />
  275 + </linearGradient>
  276 + <linearGradient
  277 + id="linear_fill_67dd1fd1-a96a-4a67-a858-60eb1cc7970d"
  278 + x1="311.72615027427673"
  279 + y1="2.5"
  280 + x2="141.3970258012414"
  281 + y2="4.917073726654053"
  282 + gradientUnits="userSpaceOnUse"
  283 + >
  284 + <stop offset="0" stop-color="#05EEFF" stop-opacity="0" />
  285 + <stop offset="0.519694983959198" stop-color="#00D2FF" />
  286 + <stop offset="1" stop-color="#04679A" stop-opacity="0" />
  287 + </linearGradient>
  288 + <linearGradient
  289 + id="linear_fill_2d07459b-3ef9-4b88-a694-f39f3a4fb8db"
  290 + x1="271.72615027427673"
  291 + y1="108.5"
  292 + x2="101.3970258012414"
  293 + y2="110.91707372665405"
  294 + gradientUnits="userSpaceOnUse"
  295 + >
  296 + <stop offset="0" stop-color="#05EEFF" stop-opacity="0" />
  297 + <stop offset="0.519694983959198" stop-color="#00D2FF" />
  298 + <stop offset="1" stop-color="#04679A" stop-opacity="0" />
  299 + </linearGradient>
  300 + <linearGradient
  301 + id="linear_fill_5a73a61e-dfec-44ae-ab41-e59e92779ecb"
  302 + x1="84.98175048828125"
  303 + y1="77.0980224609375"
  304 + x2="84.98175048828125"
  305 + y2="31.402008056640625"
  306 + gradientUnits="userSpaceOnUse"
  307 + >
  308 + <stop offset="0" stop-color="#2787FF" />
  309 + <stop offset="1" stop-color="#46FBFD" />
  310 + </linearGradient>
  311 + </defs>
  312 + </svg>
  313 + </div>
  314 +</template>
  315 +<script setup lang="ts">
  316 +import { PropType, toRefs } from 'vue'
  317 +import { CreateComponentType } from '@/packages/index.d'
  318 +import { option } from './config'
  319 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  320 +import { useChartDataFetch } from '@/hooks'
  321 +
  322 +const props = defineProps({
  323 + chartConfig: {
  324 + type: Object as PropType<CreateComponentType & typeof option>,
  325 + required: true
  326 + }
  327 +})
  328 +
  329 +const { w, h } = toRefs(props.chartConfig.attr)
  330 +
  331 +const { dataset, fontConfig } = toRefs(props.chartConfig.option as typeof option)
  332 +
  333 +// 预览更新
  334 +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string | number) => {
  335 + dataset.value = newData as string | number
  336 +})
  337 +</script>
  338 +
  339 +<style lang="scss" scoped>
  340 +.go-content-box {
  341 + width: v-bind('w+"px"');
  342 + height: v-bind('h+"px"');
  343 + display: flex;
  344 + align-items: center;
  345 + justify-content: center;
  346 +}
  347 +</style>
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { Decorates29Config } from './index'
  3 +import { CreateComponentType } from '@/packages/index.d'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '模块标题',
  9 + fontConfig: {
  10 + x1: '132',
  11 + y1: '129.8828125',
  12 + x2: '103',
  13 + y2: '64.96000000000001',
  14 + datasetTspanFill: '#00F0A2',
  15 + titleTspanFill: '#FFFFFF',
  16 + datasetTspanFontSize: 30,
  17 + }
  18 +}
  19 +
  20 +export default class Config extends PublicConfigClass implements CreateComponentType {
  21 + public key = Decorates29Config.key
  22 + public attr = { ...chartInitConfig, w: 305, h: 110, zIndex: -1 }
  23 + public chartConfig = cloneDeep(Decorates29Config)
  24 + public option = cloneDeep(option)
  25 +}
  1 +<template>
  2 + <!-- Echarts 全局设置 -->
  3 + <global-setting :optionData="optionData"></global-setting>
  4 + <CollapseItem name="配置" :expanded="true">
  5 + <setting-item-box name="数据源">
  6 + <setting-item name="数据">
  7 + <n-input v-model:value="optionData.dataset" />
  8 + </setting-item>
  9 + </setting-item-box>
  10 + <SettingItemBox :name="`数据源字体配置`">
  11 + <SettingItem name="x">
  12 + <n-input-number :min="0" v-model:value="optionData.fontConfig.x1"></n-input-number>
  13 + </SettingItem>
  14 + <SettingItem name="y">
  15 + <n-input-number :min="0" v-model:value="optionData.fontConfig.y1"></n-input-number>
  16 + </SettingItem>
  17 + <SettingItem name="大小">
  18 + <n-input-number :min="0" v-model:value="optionData.fontConfig.datasetTspanFontSize"></n-input-number>
  19 + </SettingItem>
  20 + <SettingItem name="颜色">
  21 + <n-color-picker
  22 + size="small"
  23 + :modes="['hex']"
  24 + v-model:value="optionData.fontConfig.datasetTspanFill"
  25 + ></n-color-picker>
  26 + </SettingItem>
  27 + </SettingItemBox>
  28 + </CollapseItem>
  29 +</template>
  30 +
  31 +<script setup lang="ts">
  32 +import { PropType } from 'vue'
  33 +import { option } from './config'
  34 +import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  35 +
  36 +defineProps({
  37 + optionData: {
  38 + type: Object as PropType<typeof option>,
  39 + required: true
  40 + }
  41 +})
  42 +</script>
  1 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
  2 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  3 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  4 +
  5 +const { key, chartKey, conKey } = useWidgetKey('Decorates29', true)
  6 +
  7 +export const Decorates29Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '模块标题29',
  12 + category: ChatCategoryEnum.DECORATE,
  13 + categoryName: ChatCategoryEnumName.DECORATE,
  14 + package: PackagesCategoryEnum.DECORATES,
  15 + chartFrame: ChartFrameEnum.COMMON,
  16 + image: 'decorates29.png'
  17 +}
  1 +<template>
  2 + <div class="go-content-box">
  3 + <svg
  4 + xmlns="http://www.w3.org/2000/svg"
  5 + xmlns:xlink="http://www.w3.org/1999/xlink"
  6 + :width="w"
  7 + :height="h"
  8 + viewBox="0 0 625 188"
  9 + fill="none"
  10 + >
  11 + <path
  12 + d="M625 23L103 23L103 23.04C138.72 23.54 168.05 50.35 172.45 84.98C168.59 88.55 162.6 93.75 162.64 94C162.64 94.29 168.77 98.65 173.03 101.79C169.13 137 139.12 164.46 103 164.96L103 165L625 165L625 23Z"
  13 + fill="url(#linear_fill_8429581d-818b-40fa-b8e2-65e2f7ce17f2)"
  14 + ></path>
  15 + <path
  16 + d="M173 85.5C169.44 87.88 161.71 94 163 94C161.71 94 169.03 99.42 173 101.5C170.24 126.95 157.91 141 154.61 141L595 141L595 47L153 47C155.18 47 171.69 62.91 173 85.5Z"
  17 + fill="url(#linear_fill_552846d5-6f9c-4dc7-9f6f-1867df41fd74)"
  18 + ></path>
  19 + <rect x="109" y="163" width="516" height="2" fill="url(#linear_fill_5bbe4e01-073b-4a63-b060-4cb8ef016116)"></rect>
  20 + <rect x="109" y="23" width="516" height="2" fill="url(#linear_fill_009e1028-4c17-4ca5-9439-a3ea85c86a5e)"></rect>
  21 + <g opacity="0.3">
  22 + <path
  23 + fill="#063475"
  24 + fill-opacity="0.6"
  25 + d="M103 0C51.09 0 9 42.09 9 94C9 145.91 51.09 188 103 188C154.91 188 197 145.91 197 94C197 42.09 154.91 0 103 0Z"
  26 + ></path>
  27 + <path
  28 + fill-rule="evenodd"
  29 + fill="rgba(3, 169, 255, 0.43)"
  30 + d="M9 94C9 42.09 51.09 0 103 0C154.91 0 197 42.09 197 94C197 145.91 154.91 188 103 188C51.09 188 9 145.91 9 94ZM11 94C11 43.1898 52.1898 2 103 2C153.81 2 195 43.1898 195 94C195 144.81 153.81 186 103 186C52.1898 186 11 144.81 11 94Z"
  31 + ></path>
  32 + </g>
  33 + <path
  34 + d="M173.42 84.98C169.02 50.02 139.15 23 103 23C66.85 23 36.98 50.02 32.58 84.98C36.4 88.59 42.43 93.75 42.39 94C42.39 94.29 36.26 98.65 32 101.79C35.9 137.33 66.42 165 103 165C139.58 165 170.1 137.33 174 101.79C169.74 98.65 163.61 94.29 163.61 94C163.57 93.75 169.6 88.59 173.42 84.98Z"
  35 + fill="#0B305F"
  36 + fill-opacity="0.6"
  37 + ></path>
  38 + <g filter="url(#filter_4913fbad-67bd-4cb2-8b05-e187c1858401)">
  39 + <path
  40 + fill-rule="evenodd"
  41 + fill="rgba(27, 140, 199, 1)"
  42 + d="M103 23C139.15 23 169.02 50.02 173.42 84.98C171.698 86.6074 169.527 88.5497 167.665 90.2153C165.397 92.2444 163.588 93.8627 163.61 94C163.61 94.29 169.74 98.65 174 101.79C170.1 137.33 139.58 165 103 165C66.42 165 35.9 137.33 32 101.79C36.26 98.65 42.39 94.29 42.39 94C42.412 93.8627 40.603 92.2444 38.3349 90.2152C36.4731 88.5497 34.302 86.6074 32.58 84.98C36.98 50.02 66.85 23 103 23ZM34.6979 84.2221Q36.4313 85.8287 39.6684 88.7247Q44.0053 92.6046 44.3437 94L44.39 94Q44.39 94.0655 44.3685 94.1431Q44.3776 94.2363 44.3649 94.316L44.306 94.3066Q43.5918 95.8122 36.8034 100.756Q35.1678 101.947 34.1219 102.713Q37.2751 127.952 56.579 145.232Q76.4268 163 103 163Q129.573 163 149.421 145.232Q168.725 127.952 171.878 102.713Q170.832 101.947 169.196 100.756Q162.408 95.8121 161.694 94.3065L161.635 94.3159Q161.622 94.2363 161.631 94.1431Q161.61 94.0655 161.61 94L161.656 94Q161.995 92.6047 166.332 88.7247Q169.569 85.8287 171.302 84.2221Q167.828 59.2722 148.789 42.3759Q129.209 25 103 25Q76.7914 25 57.2113 42.3759Q38.1718 59.2721 34.6979 84.2221Z"
  43 + ></path>
  44 + </g>
  45 + <g opacity="0.2">
  46 + <g filter="url(#filter_72875209-e966-4c55-8b84-785fbe6126cc)">
  47 + <path
  48 + fill="#0B305F"
  49 + fill-opacity="0.6"
  50 + d="M163.5 86.25C159.72 56.22 134.06 33 103 33C71.94 33 46.28 56.22 42.5 86.25C45.78 89.35 50.96 93.78 50.93 94C50.93 94.25 45.66 98 42 100.7C45.35 131.23 71.57 155 103 155C134.43 155 160.65 131.23 164 100.7C160.34 98 155.07 94.25 155.07 94C155.04 93.78 160.22 89.35 163.5 86.25Z"
  51 + ></path>
  52 + <path
  53 + fill-rule="evenodd"
  54 + fill="rgba(26, 148, 214, 1)"
  55 + d="M103 33C134.06 33 159.72 56.22 163.5 86.25C162.021 87.648 160.155 89.3165 158.555 90.7473C156.608 92.4894 155.054 93.8792 155.07 94C155.07 94.25 160.34 98 164 100.7C160.65 131.23 134.43 155 103 155C71.57 155 45.35 131.23 42 100.7C45.66 98 50.93 94.25 50.93 94C50.9465 93.8792 49.3924 92.4894 47.4446 90.7473C45.8447 89.3165 43.9792 87.648 42.5 86.25C46.28 56.22 71.94 33 103 33ZM43.5575 85.8711Q45.0601 87.2732 48.1112 90.0019Q51.6678 93.1827 51.9057 94L51.93 94Q51.93 94.0283 51.9196 94.0629Q51.9253 94.1026 51.9208 94.1351L51.8923 94.1312Q51.4459 95.045 45.7197 99.2179Q44.0219 100.455 43.0592 101.162Q45.6913 123.386 62.6369 138.554Q79.8937 154 103 154Q126.106 154 143.363 138.554Q160.309 123.386 162.941 101.162Q161.977 100.455 160.28 99.218Q154.554 95.045 154.108 94.1312L154.079 94.1351Q154.075 94.1026 154.08 94.0629Q154.07 94.0283 154.07 94L154.094 94Q154.332 93.1827 157.889 90.0019Q160.94 87.2733 162.442 85.8711Q159.513 63.9305 142.816 49.1117Q125.79 34 103 34Q80.2103 34 63.1838 49.1117Q46.4873 63.9304 43.5575 85.8711Z"
  56 + ></path>
  57 + </g>
  58 + </g>
  59 + <g opacity="0.2">
  60 + <rect
  61 + x="10.606597900390625"
  62 + y="89"
  63 + width="15"
  64 + height="15"
  65 + transform="rotate(45 10.606597900390625 89)"
  66 + fill="#03A9FF"
  67 + ></rect>
  68 + </g>
  69 + <g opacity="0.2">
  70 + <rect
  71 + x="195.6099853515625"
  72 + y="89.0033950805664"
  73 + width="15"
  74 + height="15"
  75 + transform="rotate(45 195.6099853515625 89.0033950805664)"
  76 + fill="#03A9FF"
  77 + ></rect>
  78 + </g>
  79 + <g opacity="0.2">
  80 + <rect
  81 + x="10.606597900390625"
  82 + y="79"
  83 + width="15"
  84 + height="15"
  85 + transform="rotate(45 10.606597900390625 79)"
  86 + fill="#03A9FF"
  87 + ></rect>
  88 + </g>
  89 + <g opacity="0.2">
  90 + <rect
  91 + x="195.6099853515625"
  92 + y="79.0033950805664"
  93 + width="15"
  94 + height="15"
  95 + transform="rotate(45 195.6099853515625 79.0033950805664)"
  96 + fill="#03A9FF"
  97 + ></rect>
  98 + </g>
  99 + <path
  100 + fill-rule="evenodd"
  101 + fill="rgba(3, 169, 255, 1)"
  102 + d="M10.6066 105.213L-3.8147e-06 94.6066L10.6066 84L21.2132 94.6066L10.6066 105.213ZM15.5563 94.6066L10.6066 89.6569L5.65685 94.6066L10.6066 99.5564L15.5563 94.6066Z"
  103 + ></path>
  104 + <path
  105 + fill-rule="evenodd"
  106 + fill="rgba(3, 169, 255, 1)"
  107 + d="M195.61 105.217L185.003 94.61L195.61 84.0034L206.217 94.61L195.61 105.217ZM200.56 94.61L195.61 89.6602L190.66 94.61L195.61 99.5597L200.56 94.61Z"
  108 + ></path>
  109 + <g opacity="1" transform="translate(88 -26)">
  110 + <text>
  111 + <tspan
  112 + :x="fontConfig.x1"
  113 + :y="fontConfig.y1"
  114 + :font-size="fontConfig.datasetTspanFontSize"
  115 + line-height="0"
  116 + :fill="fontConfig.datasetTspanFill"
  117 + opacity="1"
  118 + font-family="Roboto-Regular"
  119 + font-weight="Regular"
  120 + letter-spacing="0"
  121 + >
  122 + {{ dataset }}
  123 + </tspan>
  124 + </text>
  125 + </g>
  126 + <g filter="url(#filter_375ad2c7-128f-4997-9ac6-7bbb64a0f289)">
  127 + <path
  128 + d="M84.9911 72.02L84.9911 63L99.9911 63L99.9911 72.16C96.1911 72.55 92.4711 73.65 89.1011 75.42L84.9911 72.02ZM116.898 75.42C113.498 73.65 109.808 72.55 105.978 72.16L105.978 63L120.978 63L120.978 72.02L116.898 75.42ZM103 126.004C89.74 126.034 79 115.284 79 102.004C79 88.7635 89.74 78.0135 103 78.0135C116.26 78.0135 127 88.7635 127 102.004C127 115.284 116.26 126.004 103 126.004ZM99.0269 96.5394L102.997 88.5194L106.967 96.5394L115.837 97.8194L109.417 104.069L110.937 112.899L102.997 108.719L95.0569 112.899L96.5869 104.069L90.1669 97.8194L99.0269 96.5394Z"
  129 + fill-rule="evenodd"
  130 + fill="url(#linear_fill_375ad2c7-128f-4997-9ac6-7bbb64a0f289)"
  131 + ></path>
  132 + </g>
  133 + <path
  134 + fill-rule="evenodd"
  135 + fill="url(#linear_fill_5d114998-6e33-4cae-9064-4cf557eef946_0)"
  136 + d="M84.9911 69.02L84.9911 60L99.9911 60L99.9911 69.16C96.1911 69.55 92.4711 70.65 89.1011 72.42L84.9911 69.02ZM116.898 72.42C113.498 70.65 109.808 69.55 105.978 69.16L105.978 60L120.978 60L120.978 69.02L116.898 72.42ZM103 123.004C89.74 123.034 79 112.284 79 99.0035C79 85.7635 89.74 75.0135 103 75.0135C116.26 75.0135 127 85.7635 127 99.0035C127 112.284 116.26 123.004 103 123.004ZM109.417 101.069L110.937 109.899L102.997 105.719L95.0569 109.899L96.5869 101.069L90.1669 94.8194L99.0269 93.5394L102.997 85.5194L106.967 93.5394L115.837 94.8194L109.417 101.069Z"
  137 + ></path>
  138 + <path
  139 + fill-rule="evenodd"
  140 + fill="rgba(159, 223, 255, 1)"
  141 + d="M84.9911 69.02L84.9911 60L99.9911 60L99.9911 69.16C96.1911 69.55 92.4711 70.65 89.1011 72.42L84.9911 69.02ZM89.2315 71.2301Q93.8202 68.9448 98.9911 68.2698L98.9911 61L85.9911 61L85.9911 68.5494L89.2315 71.2301ZM116.898 72.42C113.498 70.65 109.808 69.55 105.978 69.16L105.978 60L120.978 60L120.978 69.02L116.898 72.42ZM119.978 68.5516L119.978 61L106.978 61L106.978 68.2693Q112.128 68.9391 116.763 71.2304L119.978 68.5516ZM79 99.0035C79 112.284 89.74 123.034 103 123.004C116.26 123.004 127 112.284 127 99.0035C127 85.7635 116.26 75.0135 103 75.0135C89.74 75.0135 79 85.7635 79 99.0035ZM126 99.0035C126 111.706 115.703 122.004 103 122.004L102.998 122.004C90.2749 122.032 80 111.726 80 99.0035C80 86.301 90.2975 76.0135 103 76.0135C115.697 76.0135 126 86.3065 126 99.0035ZM109.417 101.069L110.723 108.657L110.937 109.899L109.821 109.312L102.997 105.719L96.1737 109.311L95.0569 109.899L95.2724 108.656L96.5869 101.069L91.0706 95.6992L90.1669 94.8194L91.4152 94.6391L99.0269 93.5394L102.439 86.6465L102.997 85.5194L103.555 86.6465L106.967 93.5394L114.588 94.6392L115.837 94.8194L114.933 95.6993L109.417 101.069ZM107.63 92.6247L102.997 83.2653L98.3638 92.6248L88.0148 94.1199L95.5116 101.418L93.7247 111.731L102.997 106.85L112.267 111.73L110.492 101.419L117.989 94.1196L107.63 92.6247Z"
  142 + ></path>
  143 + <defs>
  144 + <linearGradient
  145 + id="linear_fill_8429581d-818b-40fa-b8e2-65e2f7ce17f2"
  146 + x1="103"
  147 + y1="94"
  148 + x2="625"
  149 + y2="94"
  150 + gradientUnits="userSpaceOnUse"
  151 + >
  152 + <stop offset="0" stop-color="#0C3162" />
  153 + <stop offset="1" stop-color="#010E24" stop-opacity="0" />
  154 + </linearGradient>
  155 + <linearGradient
  156 + id="linear_fill_552846d5-6f9c-4dc7-9f6f-1867df41fd74"
  157 + x1="153"
  158 + y1="94"
  159 + x2="595"
  160 + y2="94"
  161 + gradientUnits="userSpaceOnUse"
  162 + >
  163 + <stop offset="0" stop-color="#0C3162" />
  164 + <stop offset="1" stop-color="#0B2F6E" stop-opacity="0" />
  165 + </linearGradient>
  166 + <linearGradient
  167 + id="linear_fill_5bbe4e01-073b-4a63-b060-4cb8ef016116"
  168 + x1="109"
  169 + y1="164"
  170 + x2="625"
  171 + y2="164"
  172 + gradientUnits="userSpaceOnUse"
  173 + >
  174 + <stop offset="0" stop-color="#1B8CC7" />
  175 + <stop offset="1" stop-color="#1B8CC7" stop-opacity="0" />
  176 + </linearGradient>
  177 + <linearGradient
  178 + id="linear_fill_009e1028-4c17-4ca5-9439-a3ea85c86a5e"
  179 + x1="109"
  180 + y1="24"
  181 + x2="625"
  182 + y2="24"
  183 + gradientUnits="userSpaceOnUse"
  184 + >
  185 + <stop offset="0" stop-color="#1B8CC7" />
  186 + <stop offset="1" stop-color="#1B8CC7" stop-opacity="0" />
  187 + </linearGradient>
  188 + <filter
  189 + id="filter_4913fbad-67bd-4cb2-8b05-e187c1858401"
  190 + x="32"
  191 + y="23"
  192 + width="142"
  193 + height="142"
  194 + filterUnits="userSpaceOnUse"
  195 + color-interpolation-filters="sRGB"
  196 + >
  197 + <feFlood flood-opacity="0" result="feFloodId_4913fbad-67bd-4cb2-8b05-e187c1858401" />
  198 + <feBlend
  199 + mode="normal"
  200 + in="SourceGraphic"
  201 + in2="feFloodId_4913fbad-67bd-4cb2-8b05-e187c1858401"
  202 + result="shape_4913fbad-67bd-4cb2-8b05-e187c1858401"
  203 + />
  204 + <feColorMatrix
  205 + in="SourceAlpha"
  206 + type="matrix"
  207 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  208 + result="hardAlpha_4913fbad-67bd-4cb2-8b05-e187c1858401"
  209 + />
  210 + <feOffset dx="0" dy="0" />
  211 + <feGaussianBlur stdDeviation="5" />
  212 + <feComposite in2="hardAlpha_4913fbad-67bd-4cb2-8b05-e187c1858401" operator="arithmetic" k2="-1" k3="1" />
  213 + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.7843137254901961 0 0 0 0 1 0 0 0 0.6 0" />
  214 + <feBlend
  215 + mode="normal"
  216 + in2="shape_4913fbad-67bd-4cb2-8b05-e187c1858401"
  217 + result="innerShadow_0_4913fbad-67bd-4cb2-8b05-e187c1858401"
  218 + />
  219 + </filter>
  220 + <filter
  221 + id="filter_72875209-e966-4c55-8b84-785fbe6126cc"
  222 + x="40"
  223 + y="31"
  224 + width="126"
  225 + height="126"
  226 + filterUnits="userSpaceOnUse"
  227 + color-interpolation-filters="sRGB"
  228 + >
  229 + <feFlood flood-opacity="0" result="feFloodId_72875209-e966-4c55-8b84-785fbe6126cc" />
  230 + <feBlend
  231 + mode="normal"
  232 + in="SourceGraphic"
  233 + in2="feFloodId_72875209-e966-4c55-8b84-785fbe6126cc"
  234 + result="shape"
  235 + />
  236 + <feGaussianBlur result="gaussian_blur_72875209-e966-4c55-8b84-785fbe6126cc" stdDeviation="1" />
  237 + </filter>
  238 + <linearGradient
  239 + id="linear_fill_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
  240 + x1="103"
  241 + y1="126"
  242 + x2="103"
  243 + y2="63"
  244 + gradientUnits="userSpaceOnUse"
  245 + >
  246 + <stop offset="0" stop-color="#1B7BB3" />
  247 + <stop offset="1" stop-color="#2BACBA" />
  248 + </linearGradient>
  249 + <filter
  250 + id="filter_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
  251 + x="69"
  252 + y="53"
  253 + width="68"
  254 + height="83.03350067138672"
  255 + filterUnits="userSpaceOnUse"
  256 + color-interpolation-filters="sRGB"
  257 + >
  258 + <feFlood flood-opacity="0" result="feFloodId_375ad2c7-128f-4997-9ac6-7bbb64a0f289" />
  259 + <feColorMatrix
  260 + in="SourceAlpha"
  261 + type="matrix"
  262 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  263 + result="hardAlpha_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
  264 + />
  265 + <feOffset dx="0" dy="0" />
  266 + <feGaussianBlur stdDeviation="5" />
  267 + <feComposite in2="hardAlpha_375ad2c7-128f-4997-9ac6-7bbb64a0f289" operator="out" />
  268 + <feColorMatrix
  269 + type="matrix"
  270 + values="0 0 0 0 0.27058823529411763 0 0 0 0 0.7803921568627451 0 0 0 0 1 0 0 0 0.5 0"
  271 + />
  272 + <feBlend
  273 + mode="normal"
  274 + in2="feFloodId_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
  275 + result="dropShadow_1_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
  276 + />
  277 + <feBlend
  278 + mode="normal"
  279 + in="SourceGraphic"
  280 + in2="dropShadow_1_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
  281 + result="shape_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
  282 + />
  283 + </filter>
  284 + <linearGradient
  285 + id="linear_fill_5d114998-6e33-4cae-9064-4cf557eef946_0"
  286 + x1="103"
  287 + y1="123"
  288 + x2="103"
  289 + y2="60"
  290 + gradientUnits="userSpaceOnUse"
  291 + >
  292 + <stop offset="0" stop-color="#3AB4F9" />
  293 + <stop offset="1" stop-color="#6DD0DA" />
  294 + </linearGradient>
  295 + </defs>
  296 + </svg>
  297 + </div>
  298 +</template>
  299 +<script setup lang="ts">
  300 +import { PropType, toRefs } from 'vue'
  301 +import { CreateComponentType } from '@/packages/index.d'
  302 +import { option } from './config'
  303 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  304 +import { useChartDataFetch } from '@/hooks'
  305 +
  306 +const props = defineProps({
  307 + chartConfig: {
  308 + type: Object as PropType<CreateComponentType & typeof option>,
  309 + required: true
  310 + }
  311 +})
  312 +
  313 +const { w, h } = toRefs(props.chartConfig.attr)
  314 +
  315 +const { dataset, fontConfig } = toRefs(props.chartConfig.option as typeof option)
  316 +
  317 +// 预览更新
  318 +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string | number) => {
  319 + dataset.value = newData as string | number
  320 +})
  321 +</script>
  322 +
  323 +<style lang="scss" scoped>
  324 +.go-content-box {
  325 + width: v-bind('w+"px"');
  326 + height: v-bind('h+"px"');
  327 + display: flex;
  328 + align-items: center;
  329 + justify-content: center;
  330 +}
  331 +</style>
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { Decorates30Config } from './index'
  3 +import { CreateComponentType } from '@/packages/index.d'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
  6 +
  7 +export const option = {
  8 + dataset: '32',
  9 + unitStr: '个',
  10 + titleStr: '设备总数',
  11 + fontConfig: {
  12 + x1: '320', //数据源
  13 + y1: '80',
  14 + x2: '366', //单位
  15 + y2: '79',
  16 + x3: '11', //标题
  17 + y3: '79',
  18 + datasetTspanFill: '#00F0A2',
  19 + titleTspanFill: '#FFFFFF',
  20 + unitTspanFill: '#FFFFFF',
  21 + datasetTspanFontSize: 30,
  22 + titleTspanFontSize: 30,
  23 + unitTspanFontSize: 30
  24 + }
  25 +}
  26 +
  27 +export default class Config extends PublicConfigClass implements CreateComponentType {
  28 + public key = Decorates30Config.key
  29 + public attr = { ...chartInitConfig, w: 305, h: 110, zIndex: -1 }
  30 + public chartConfig = cloneDeep(Decorates30Config)
  31 + public option = cloneDeep(option)
  32 +}
  1 +<template>
  2 + <!-- Echarts 全局设置 -->
  3 + <global-setting :optionData="optionData"></global-setting>
  4 + <CollapseItem name="配置" :expanded="true">
  5 + <setting-item-box name="数据源">
  6 + <setting-item name="数据">
  7 + <n-input v-model:value="optionData.dataset" />
  8 + </setting-item>
  9 + <setting-item name="单位">
  10 + <n-input v-model:value="optionData.unitStr" />
  11 + </setting-item>
  12 + <setting-item name="标题">
  13 + <n-input v-model:value="optionData.titleStr" />
  14 + </setting-item>
  15 + </setting-item-box>
  16 + <SettingItemBox :name="`单位字体配置`">
  17 + <SettingItem name="x">
  18 + <n-input-number :min="0" v-model:value="optionData.fontConfig.x2"></n-input-number>
  19 + </SettingItem>
  20 + <SettingItem name="y">
  21 + <n-input-number :min="0" v-model:value="optionData.fontConfig.y2"></n-input-number>
  22 + </SettingItem>
  23 + <SettingItem name="大小">
  24 + <n-input-number :min="0" v-model:value="optionData.fontConfig.unitTspanFontSize"></n-input-number>
  25 + </SettingItem>
  26 + <SettingItem name="颜色">
  27 + <n-color-picker
  28 + size="small"
  29 + :modes="['hex']"
  30 + v-model:value="optionData.fontConfig.unitTspanFill"
  31 + ></n-color-picker>
  32 + </SettingItem>
  33 + </SettingItemBox>
  34 + <SettingItemBox :name="`数据源字体配置`">
  35 + <SettingItem name="x">
  36 + <n-input-number :min="0" v-model:value="optionData.fontConfig.x1"></n-input-number>
  37 + </SettingItem>
  38 + <SettingItem name="y">
  39 + <n-input-number :min="0" v-model:value="optionData.fontConfig.y1"></n-input-number>
  40 + </SettingItem>
  41 + <SettingItem name="大小">
  42 + <n-input-number :min="0" v-model:value="optionData.fontConfig.datasetTspanFontSize"></n-input-number>
  43 + </SettingItem>
  44 + <SettingItem name="颜色">
  45 + <n-color-picker
  46 + size="small"
  47 + :modes="['hex']"
  48 + v-model:value="optionData.fontConfig.datasetTspanFill"
  49 + ></n-color-picker>
  50 + </SettingItem>
  51 + </SettingItemBox>
  52 + <SettingItemBox :name="`标题字体配置`">
  53 + <SettingItem name="x">
  54 + <n-input-number :min="0" v-model:value="optionData.fontConfig.x3"></n-input-number>
  55 + </SettingItem>
  56 + <SettingItem name="y">
  57 + <n-input-number :min="0" v-model:value="optionData.fontConfig.y3"></n-input-number>
  58 + </SettingItem>
  59 + <SettingItem name="大小">
  60 + <n-input-number :min="0" v-model:value="optionData.fontConfig.titleTspanFontSize"></n-input-number>
  61 + </SettingItem>
  62 + <SettingItem name="颜色">
  63 + <n-color-picker
  64 + size="small"
  65 + :modes="['hex']"
  66 + v-model:value="optionData.fontConfig.titleTspanFill"
  67 + ></n-color-picker>
  68 + </SettingItem>
  69 + </SettingItemBox>
  70 + </CollapseItem>
  71 +</template>
  72 +
  73 +<script setup lang="ts">
  74 +import { PropType } from 'vue'
  75 +import { option } from './config'
  76 +import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  77 +
  78 +defineProps({
  79 + optionData: {
  80 + type: Object as PropType<typeof option>,
  81 + required: true
  82 + }
  83 +})
  84 +</script>
  1 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
  2 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  3 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  4 +
  5 +const { key, chartKey, conKey } = useWidgetKey('Decorates30', true)
  6 +
  7 +export const Decorates30Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '数据标题30',
  12 + category: ChatCategoryEnum.DECORATE,
  13 + categoryName: ChatCategoryEnumName.DECORATE,
  14 + package: PackagesCategoryEnum.DECORATES,
  15 + chartFrame: ChartFrameEnum.COMMON,
  16 + image: 'decorates30.png'
  17 +}
  1 +<template>
  2 + <div class="go-content-box">
  3 + <svg
  4 + xmlns="http://www.w3.org/2000/svg"
  5 + xmlns:xlink="http://www.w3.org/1999/xlink"
  6 + :width="w"
  7 + :height="h"
  8 + viewBox="0 0 442 141"
  9 + fill="none"
  10 + >
  11 + <g opacity="0.5">
  12 + <g filter="url(#filter_95b2f60e-40ab-42fb-81a1-c50e11e63c01)">
  13 + <rect x="11" y="19" width="429" height="120" fill="#012651" fill-opacity="0.5"></rect>
  14 + <path
  15 + fill-rule="evenodd"
  16 + fill="rgba(1, 80, 152, 1)"
  17 + d="M440 139L11 139L11 19L440 19L440 139ZM438 21L13 21L13 137L438 137L438 21Z"
  18 + ></path>
  19 + </g>
  20 + </g>
  21 + <rect x="0" y="11" width="429" height="120" fill="#012651" fill-opacity="0.5"></rect>
  22 + <g filter="url(#filter_edebad1d-8cf8-4ddf-87ba-cceec465951b)">
  23 + <path
  24 + fill-rule="evenodd"
  25 + fill="rgba(1, 80, 152, 1)"
  26 + d="M429 131L0 131L0 11L429 11L429 131ZM427 13L2 13L2 129L427 129L427 13Z"
  27 + ></path>
  28 + </g>
  29 + <path d="M0 7.2L370 7.2L366.29 3.76L127.79 3.76L122.29 0L3.79 0.59L0 7.2Z" fill="#008AFF"></path>
  30 + <rect x="417" y="1.199951171875" width="11" height="6" fill="#00FDC7"></rect>
  31 + <rect x="12" y="20" width="6" height="6" fill="#00EEFD"></rect>
  32 + <g opacity="0.5">
  33 + <rect x="24" y="20" width="6" height="6" fill="#00EEFD"></rect>
  34 + </g>
  35 + <g opacity="0.2">
  36 + <rect x="36" y="20" width="6" height="6" fill="#00EEFD"></rect>
  37 + </g>
  38 + <rect x="399" y="1.199951171875" width="11" height="6" fill="#00FDC7" fill-opacity="0.6"></rect>
  39 + <rect x="381" y="1.199951171875" width="11" height="6" fill="#00FDC7" fill-opacity="0.2"></rect>
  40 + <path d="M403 131L429 131L429 102L403 131Z" fill="#00B5C6"></path>
  41 + <path
  42 + d="M3 129L31.5 129L87.5 13L59 13L3 129Z"
  43 + fill="url(#linear_fill_d377d882-63b6-4b2f-b075-f04757ddaaf2)"
  44 + ></path>
  45 + <path
  46 + d="M51.8571 129L80.3571 129L136.357 13L107.857 13L51.8571 129Z"
  47 + fill="url(#linear_fill_bffa1776-bd2b-433f-8c5d-b7a711801df9)"
  48 + ></path>
  49 + <path
  50 + d="M100.714 129L129.214 129L185.214 13L156.714 13L100.714 129Z"
  51 + fill="url(#linear_fill_c9bca278-5d80-4ff7-ba93-f353162e7011)"
  52 + ></path>
  53 + <path
  54 + d="M149.571 129L178.071 129L234.071 13L205.571 13L149.571 129Z"
  55 + fill="url(#linear_fill_8c82d359-5e14-4e92-a053-701212e20ddb)"
  56 + ></path>
  57 + <path
  58 + d="M198.429 129L226.929 129L282.929 13L254.429 13L198.429 129Z"
  59 + fill="url(#linear_fill_c1497f7e-7db6-469b-916e-03fb85481d4e)"
  60 + ></path>
  61 + <path
  62 + d="M247.286 129L275.786 129L331.786 13L303.286 13L247.286 129Z"
  63 + fill="url(#linear_fill_52ee754d-41b8-4575-9561-981422976caa)"
  64 + ></path>
  65 + <path
  66 + d="M296.143 129L324.643 129L380.643 13L352.143 13L296.143 129Z"
  67 + fill="url(#linear_fill_3febdb91-9c5c-4985-97d3-16ec34fa4b5c)"
  68 + ></path>
  69 + <path
  70 + d="M345 129L373.5 129L429.5 13L401 13L345 129Z"
  71 + fill="url(#linear_fill_bd8f0060-6382-48ce-9408-29c6216ec4cc)"
  72 + ></path>
  73 + <g>
  74 + <text>
  75 + <tspan
  76 + :x="fontConfig.x3"
  77 + :y="fontConfig.y3"
  78 + :font-size="fontConfig.titleTspanFontSize"
  79 + line-height="0"
  80 + :fill="fontConfig.titleTspanFill"
  81 + opacity="1"
  82 + font-family="Roboto-Regular"
  83 + font-weight="Regular"
  84 + letter-spacing="0"
  85 + >
  86 + {{ titleStr }}
  87 + </tspan>
  88 + </text>
  89 + </g>
  90 + <g opacity="0.8">
  91 + <text>
  92 + <tspan
  93 + :x="fontConfig.x2"
  94 + :y="fontConfig.y2"
  95 + :font-size="fontConfig.unitTspanFontSize"
  96 + line-height="0"
  97 + :fill="fontConfig.unitTspanFill"
  98 + opacity="1"
  99 + font-family="Roboto-Regular"
  100 + font-weight="Regular"
  101 + letter-spacing="0"
  102 + >
  103 + {{ unitStr }}
  104 + </tspan>
  105 + </text>
  106 + </g>
  107 + <g>
  108 + <text>
  109 + <tspan
  110 + :x="fontConfig.x1"
  111 + :y="fontConfig.y1"
  112 + :font-size="fontConfig.datasetTspanFontSize"
  113 + line-height="0"
  114 + :fill="fontConfig.datasetTspanFill"
  115 + opacity="1"
  116 + font-family="Roboto-Regular"
  117 + font-weight="Regular"
  118 + letter-spacing="0"
  119 + >
  120 + {{ dataset }}
  121 + </tspan>
  122 + </text>
  123 + </g>
  124 + <defs>
  125 + <filter
  126 + id="filter_95b2f60e-40ab-42fb-81a1-c50e11e63c01"
  127 + x="9"
  128 + y="17"
  129 + width="433"
  130 + height="124"
  131 + filterUnits="userSpaceOnUse"
  132 + color-interpolation-filters="sRGB"
  133 + >
  134 + <feFlood flood-opacity="0" result="feFloodId_95b2f60e-40ab-42fb-81a1-c50e11e63c01" />
  135 + <feBlend
  136 + mode="normal"
  137 + in="SourceGraphic"
  138 + in2="feFloodId_95b2f60e-40ab-42fb-81a1-c50e11e63c01"
  139 + result="shape"
  140 + />
  141 + <feGaussianBlur result="gaussian_blur_95b2f60e-40ab-42fb-81a1-c50e11e63c01" stdDeviation="1" />
  142 + </filter>
  143 + <filter
  144 + id="filter_edebad1d-8cf8-4ddf-87ba-cceec465951b"
  145 + x="0"
  146 + y="11"
  147 + width="429"
  148 + height="120"
  149 + filterUnits="userSpaceOnUse"
  150 + color-interpolation-filters="sRGB"
  151 + >
  152 + <feFlood flood-opacity="0" result="feFloodId_edebad1d-8cf8-4ddf-87ba-cceec465951b" />
  153 + <feBlend
  154 + mode="normal"
  155 + in="SourceGraphic"
  156 + in2="feFloodId_edebad1d-8cf8-4ddf-87ba-cceec465951b"
  157 + result="shape_edebad1d-8cf8-4ddf-87ba-cceec465951b"
  158 + />
  159 + <feColorMatrix
  160 + in="SourceAlpha"
  161 + type="matrix"
  162 + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
  163 + result="hardAlpha_edebad1d-8cf8-4ddf-87ba-cceec465951b"
  164 + />
  165 + <feOffset dx="0" dy="0" />
  166 + <feGaussianBlur stdDeviation="5" />
  167 + <feComposite in2="hardAlpha_edebad1d-8cf8-4ddf-87ba-cceec465951b" operator="arithmetic" k2="-1" k3="1" />
  168 + <feColorMatrix
  169 + type="matrix"
  170 + values="0 0 0 0 0 0 0 0 0 0.9333333333333333 0 0 0 0 0.9921568627450981 0 0 0 0.5 0"
  171 + />
  172 + <feBlend
  173 + mode="normal"
  174 + in2="shape_edebad1d-8cf8-4ddf-87ba-cceec465951b"
  175 + result="innerShadow_0_edebad1d-8cf8-4ddf-87ba-cceec465951b"
  176 + />
  177 + </filter>
  178 + <linearGradient
  179 + id="linear_fill_d377d882-63b6-4b2f-b075-f04757ddaaf2"
  180 + x1="25.0595703125"
  181 + y1="129"
  182 + x2="74.54360961914062"
  183 + y2="32.833740234375"
  184 + gradientUnits="userSpaceOnUse"
  185 + >
  186 + <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
  187 + <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
  188 + </linearGradient>
  189 + <linearGradient
  190 + id="linear_fill_bffa1776-bd2b-433f-8c5d-b7a711801df9"
  191 + x1="73.91671752929688"
  192 + y1="129"
  193 + x2="123.4007568359375"
  194 + y2="32.833740234375"
  195 + gradientUnits="userSpaceOnUse"
  196 + >
  197 + <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
  198 + <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
  199 + </linearGradient>
  200 + <linearGradient
  201 + id="linear_fill_c9bca278-5d80-4ff7-ba93-f353162e7011"
  202 + x1="122.77386474609375"
  203 + y1="129"
  204 + x2="172.25790405273438"
  205 + y2="32.833740234375"
  206 + gradientUnits="userSpaceOnUse"
  207 + >
  208 + <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
  209 + <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
  210 + </linearGradient>
  211 + <linearGradient
  212 + id="linear_fill_8c82d359-5e14-4e92-a053-701212e20ddb"
  213 + x1="171.6309814453125"
  214 + y1="129"
  215 + x2="221.11502075195312"
  216 + y2="32.833740234375"
  217 + gradientUnits="userSpaceOnUse"
  218 + >
  219 + <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
  220 + <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
  221 + </linearGradient>
  222 + <linearGradient
  223 + id="linear_fill_c1497f7e-7db6-469b-916e-03fb85481d4e"
  224 + x1="220.4881591796875"
  225 + y1="129"
  226 + x2="269.9721984863281"
  227 + y2="32.833740234375"
  228 + gradientUnits="userSpaceOnUse"
  229 + >
  230 + <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
  231 + <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
  232 + </linearGradient>
  233 + <linearGradient
  234 + id="linear_fill_52ee754d-41b8-4575-9561-981422976caa"
  235 + x1="269.34527587890625"
  236 + y1="129"
  237 + x2="318.8293151855469"
  238 + y2="32.833740234375"
  239 + gradientUnits="userSpaceOnUse"
  240 + >
  241 + <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
  242 + <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
  243 + </linearGradient>
  244 + <linearGradient
  245 + id="linear_fill_3febdb91-9c5c-4985-97d3-16ec34fa4b5c"
  246 + x1="318.2024230957031"
  247 + y1="129"
  248 + x2="367.68646240234375"
  249 + y2="32.833740234375"
  250 + gradientUnits="userSpaceOnUse"
  251 + >
  252 + <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
  253 + <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
  254 + </linearGradient>
  255 + <linearGradient
  256 + id="linear_fill_bd8f0060-6382-48ce-9408-29c6216ec4cc"
  257 + x1="367.0595703125"
  258 + y1="129"
  259 + x2="416.5435791015625"
  260 + y2="32.833740234375"
  261 + gradientUnits="userSpaceOnUse"
  262 + >
  263 + <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
  264 + <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
  265 + </linearGradient>
  266 + </defs>
  267 + </svg>
  268 + </div>
  269 +</template>
  270 +<script setup lang="ts">
  271 +import { PropType, toRefs } from 'vue'
  272 +import { CreateComponentType } from '@/packages/index.d'
  273 +import { option } from './config'
  274 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  275 +import { useChartDataFetch } from '@/hooks'
  276 +
  277 +const props = defineProps({
  278 + chartConfig: {
  279 + type: Object as PropType<CreateComponentType & typeof option>,
  280 + required: true
  281 + }
  282 +})
  283 +
  284 +const { w, h } = toRefs(props.chartConfig.attr)
  285 +
  286 +const { dataset, fontConfig, unitStr, titleStr } = toRefs(props.chartConfig.option as typeof option)
  287 +
  288 +// 预览更新
  289 +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string | number) => {
  290 + dataset.value = newData as string | number
  291 +})
  292 +</script>
  293 +
  294 +<style lang="scss" scoped>
  295 +.go-content-box {
  296 + width: v-bind('w+"px"');
  297 + height: v-bind('h+"px"');
  298 + display: flex;
  299 + align-items: center;
  300 + justify-content: center;
  301 +}
  302 +</style>
@@ -68,6 +68,10 @@ import { Decorates23Config } from '@/packages/components/external/Decorates/Deco @@ -68,6 +68,10 @@ import { Decorates23Config } from '@/packages/components/external/Decorates/Deco
68 import { Decorates24Config } from '@/packages/components/external/Decorates/Decorates/Decorates24' 68 import { Decorates24Config } from '@/packages/components/external/Decorates/Decorates/Decorates24'
69 import { Decorates25Config } from '@/packages/components/external/Decorates/Decorates/Decorates25' 69 import { Decorates25Config } from '@/packages/components/external/Decorates/Decorates/Decorates25'
70 import { Decorates26Config } from '@/packages/components/external/Decorates/Decorates/Decorates26' 70 import { Decorates26Config } from '@/packages/components/external/Decorates/Decorates/Decorates26'
  71 +import { Decorates27Config } from '@/packages/components/external/Decorates/Decorates/Decorates27'
  72 +import { Decorates28Config } from '@/packages/components/external/Decorates/Decorates/Decorates28'
  73 +import { Decorates29Config } from '@/packages/components/external/Decorates/Decorates/Decorates29'
  74 +import { Decorates30Config } from '@/packages/components/external/Decorates/Decorates/Decorates30'
71 import { OverrideTableScrollBoardConfig } from '@/packages/components/external/Tables/Tables/OverrideTableScrollBoard' 75 import { OverrideTableScrollBoardConfig } from '@/packages/components/external/Tables/Tables/OverrideTableScrollBoard'
72 import { OverrideTablesBasicConfig } from '@/packages/components/external/Tables/Tables/OverrideTablesBasic' 76 import { OverrideTablesBasicConfig } from '@/packages/components/external/Tables/Tables/OverrideTablesBasic'
73 77
@@ -114,6 +118,10 @@ export function useInjectLib(packagesList: EPackagesType) { @@ -114,6 +118,10 @@ export function useInjectLib(packagesList: EPackagesType) {
114 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates24Config)//新增动画装饰装饰24 118 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates24Config)//新增动画装饰装饰24
115 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates25Config)//新增动画装饰装饰25 119 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates25Config)//新增动画装饰装饰25
116 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates26Config)//新增动画装饰装饰26 120 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates26Config)//新增动画装饰装饰26
  121 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates27Config)//新增动画装饰装饰27
  122 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates28Config)//新增动画装饰装饰28
  123 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates29Config)//新增动画装饰装饰29
  124 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates30Config)//新增动画装饰装饰30
117 // 125 //
118 126
119 //信息 127 //信息