Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo
commit
3b3c6ac8c2
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
|
|
@ -10,7 +10,7 @@ export const option = {
|
|||
borderTitleHeight: 98,
|
||||
borderTitleSize: 18,
|
||||
borderTitleColor: '#fff',
|
||||
colors: ['#608561', '#374536'],
|
||||
colors: ['#608561','#EEEEEE','#EAEAEA','#DCDCDC','#D8D8D8','#374536','#98B394','#DCFFD9','#687B66','#A1E6AC','#3D6644','#122115','#6C8069','#4E5C4C','#FFE6B3'],
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,39 +5,39 @@
|
|||
<title>大标题@2x</title>
|
||||
<defs>
|
||||
<radialGradient cx="50%" cy="155.043268%" fx="50%" fy="155.043268%" r="100.482374%" gradientTransform="translate(0.5, 1.5504), scale(0.0963, 1), rotate(90), scale(1, 4.0569), translate(-0.5, -1.5504)" id="radialGradient-1">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0.276934003" offset="48.9346591%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="100%"></stop>
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0.276934003" offset="48.9346591%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="100%"></stop>
|
||||
</radialGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient01-2">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[0]" offset="24.5007328%"></stop>
|
||||
<stop :stop-color="colors[0]" offset="74.8333658%"></stop>
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="100%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[2]" offset="24.5007328%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="74.8333658%"></stop>
|
||||
<stop :stop-color="colors[4]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<rect id="path-3" x="0" y="0" width="899" height="54.0955035"></rect>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient01-5">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
<stop :stop-color="colors[5]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[6]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<rect id="path-6" x="0" y="0" width="899" height="54.0955035"></rect>
|
||||
<linearGradient x1="102.302587%" y1="50%" x2="-24.4700794%" y2="50%" id="linearGradient01-8">
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="12.3606862%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.4" offset="99.9262456%"></stop>
|
||||
<stop :stop-color="colors[7]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[7]" offset="12.3606862%"></stop>
|
||||
<stop :stop-color="colors[7]" stop-opacity="0.4" offset="99.9262456%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient01-9">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
<stop :stop-color="colors[5]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[8]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient01-10">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
<stop :stop-color="colors[5]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[8]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0.641936189%" y2="50%" id="linearGradient01-11">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="36.0686189%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.8" offset="99.9808785%"></stop>
|
||||
<stop :stop-color="colors[9]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[10]" offset="36.0686189%"></stop>
|
||||
<stop :stop-color="colors[11]" stop-opacity="0.8" offset="99.9808785%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-12" points="-7.8938096e-15 -2.62257315e-13 11 -2.62257315e-13 13.1616243 1.5 2.1616243 1.5"></polygon>
|
||||
<filter x="-119.2%" y="-900.0%" width="338.5%" height="1900.0%" filterUnits="objectBoundingBox" id="filter-13">
|
||||
|
|
@ -54,9 +54,9 @@
|
|||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0.7 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="100%" y1="50%" x2="0.641936189%" y2="50%" id="linearGradient01-16">
|
||||
<stop :stop-color="colors[1]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="36.0686189%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.8" offset="99.9808785%"></stop>
|
||||
<stop :stop-color="colors[9]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[10]" offset="36.0686189%"></stop>
|
||||
<stop :stop-color="colors[11]" stop-opacity="0.8" offset="99.9808785%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-17" points="4.12319693e-14 3.81916286e-14 11 3.81916286e-14 13.1616243 1.5 2.1616243 1.5"></polygon>
|
||||
<filter x="-119.2%" y="-900.0%" width="338.5%" height="1900.0%" filterUnits="objectBoundingBox" id="filter-18">
|
||||
|
|
@ -110,34 +110,34 @@
|
|||
<circle id="椭圆形备份" fill="#60715C" cx="986.203603" cy="91.6910069" r="1.5"></circle>
|
||||
<g id="编组-5" transform="translate(797.7707, 107.191)">
|
||||
<line x1="0" y1="1.5" x2="91.5306326" y2="1.5" id="路径-6" stroke="url(#linearGradient01-9)" opacity="0.6"></line>
|
||||
<circle id="椭圆形" fill="#6C8069" cx="58.0306326" cy="1.5" r="1.5"></circle>
|
||||
<circle id="椭圆形" :fill="colors[12]" cx="58.0306326" cy="1.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="编组-5" transform="translate(1079.3551, 108.691) scale(-1, 1) translate(-1079.3551, -108.691)translate(1033.5898, 107.191)">
|
||||
<line x1="0" y1="1.5" x2="91.5306326" y2="1.5" id="路径-6" stroke="url(#linearGradient01-9)" opacity="0.6"></line>
|
||||
<circle id="椭圆形" fill="#6C8069" cx="28.0306326" cy="1.5" r="1.5"></circle>
|
||||
<circle id="椭圆形" fill="#6C8069" cx="90.0306326" cy="1.5" r="1.5"></circle>
|
||||
<circle id="椭圆形" :fill="colors[12]" cx="28.0306326" cy="1.5" r="1.5"></circle>
|
||||
<circle id="椭圆形" :fill="colors[12]" cx="90.0306326" cy="1.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="编组-5" transform="translate(277.3287, 74.1433)">
|
||||
<line x1="2.1801759e-14" y1="1.5" x2="365.462877" y2="1.5" id="路径-6" stroke="url(#linearGradient01-10)" opacity="0.399999976"></line>
|
||||
<path d="M301.962877,3 C302.791304,3 303.462877,2.32842712 303.462877,1.5 C303.462877,0.671572875 302.791304,0 301.962877,0 C301.13445,0 300.462877,0.671572875 300.462877,1.5 C300.462877,2.32842712 301.13445,3 301.962877,3 Z" id="椭圆形" fill="#4E5C4C"></path>
|
||||
<circle id="椭圆形" fill="#4E5C4C" cx="131.962877" cy="1.5" r="1.5"></circle>
|
||||
<path d="M363.962877,3 C364.791304,3 365.462877,2.32842712 365.462877,1.5 C365.462877,0.671572875 364.791304,0 363.962877,0 C363.13445,0 362.462877,0.671572875 362.462877,1.5 C362.462877,2.32842712 363.13445,3 363.962877,3 Z" id="椭圆形" fill="#4E5C4C"></path>
|
||||
<path d="M301.962877,3 C302.791304,3 303.462877,2.32842712 303.462877,1.5 C303.462877,0.671572875 302.791304,0 301.962877,0 C301.13445,0 300.462877,0.671572875 300.462877,1.5 C300.462877,2.32842712 301.13445,3 301.962877,3 Z" id="椭圆形" :fill="colors[13]"></path>
|
||||
<circle id="椭圆形" :fill="colors[13]" cx="131.962877" cy="1.5" r="1.5"></circle>
|
||||
<path d="M363.962877,3 C364.791304,3 365.462877,2.32842712 365.462877,1.5 C365.462877,0.671572875 364.791304,0 363.962877,0 C363.13445,0 362.462877,0.671572875 362.462877,1.5 C362.462877,2.32842712 363.13445,3 363.962877,3 Z" id="椭圆形" :fill="colors[13]"></path>
|
||||
</g>
|
||||
<g id="编组-5" transform="translate(1461.7682, 75.6433) scale(-1, 1) translate(-1461.7682, -75.6433)translate(1279.0368, 74.1433)">
|
||||
<line x1="-6.61995048e-15" y1="1.5" x2="365.462877" y2="1.5" id="路径-6" stroke="url(#linearGradient01-10)" opacity="0.399999976"></line>
|
||||
<path d="M273.962877,3 C274.791304,3 275.462877,2.32842712 275.462877,1.5 C275.462877,0.671572875 274.791304,0 273.962877,0 C273.13445,0 272.462877,0.671572875 272.462877,1.5 C272.462877,2.32842712 273.13445,3 273.962877,3 Z" id="椭圆形" fill="#4E5C4C"></path>
|
||||
<circle id="椭圆形" fill="#4E5C4C" cx="47.9628773" cy="1.5" r="1.5"></circle>
|
||||
<path d="M273.962877,3 C274.791304,3 275.462877,2.32842712 275.462877,1.5 C275.462877,0.671572875 274.791304,0 273.962877,0 C273.13445,0 272.462877,0.671572875 272.462877,1.5 C272.462877,2.32842712 273.13445,3 273.962877,3 Z" id="椭圆形" :fill="colors[13]"></path>
|
||||
<circle id="椭圆形" :fill="colors[13]" cx="47.9628773" cy="1.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="编组-3" transform="translate(591.0082, 48.0955)">
|
||||
<path d="M0,5.07965553 L5.07965553,0 L64.7090785,-8.8817842e-15 C67.8916764,-1.22931327e-14 70.9439234,1.26428208 73.1943599,3.51471863 L104.538881,34.85924 C106.039172,36.359531 108.074004,37.2023858 110.195736,37.2023858 L170.93164,37.2023858 L170.93164,37.2023858 L176.824757,42.0955035 L107.225226,42.0955035 C105.140415,42.0955035 103.13796,41.2816494 101.644261,39.8272415 L69.4522629,8.48204842 C67.2117139,6.30043667 64.2080318,5.07965553 61.0808143,5.07965553 L0,5.07965553 L0,5.07965553 Z" id="路径-4" fill="url(#linearGradient01-11)"></path>
|
||||
<g id="编组" transform="translate(178.9918, 36.9045)">
|
||||
<g id="矩形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
|
||||
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-12"></use>
|
||||
<use :fill="colors[14]" fill-rule="evenodd" xlink:href="#path-12"></use>
|
||||
</g>
|
||||
<g id="矩形" opacity="0.399999976">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
|
||||
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-14"></use>
|
||||
<use :fill="colors[14]" fill-rule="evenodd" xlink:href="#path-14"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
|
@ -146,11 +146,11 @@
|
|||
<g id="编组" transform="translate(14.4278, 37.6545) scale(-1, 1) translate(-14.4278, -37.6545)translate(0, 36.9045)">
|
||||
<g id="矩形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
|
||||
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-17"></use>
|
||||
<use :fill="colors[14]" fill-rule="evenodd" xlink:href="#path-17"></use>
|
||||
</g>
|
||||
<g id="矩形" opacity="0.399999976">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
|
||||
<use fill="#FFE6B3" fill-rule="evenodd" xlink:href="#path-19"></use>
|
||||
<use :fill="colors[14]" fill-rule="evenodd" xlink:href="#path-19"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
|
|||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle',
|
||||
colors: ['#08251E','#00A374','#11B472','#00FF8C','#00F4B6','#00FF77','#00BF6B','#00673F','#00683F','#72A18A','#1CC370'],
|
||||
colors: ['#08251E','#00A374','#11B472','#00FF8C','#00F4B6','#00FF77','#00BF6B','#00673F','#00683F','#72A18A','#1CC370','#EBBE10','#4FE985'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`9-${boxId}`">
|
||||
<stop :stop-color="colors[9]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#1CC370" offset="100%"></stop>
|
||||
<stop :stop-color="colors[10]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
|
|
@ -39,7 +39,10 @@
|
|||
<g id="标题模块--右侧2" transform="translate(0, 318)">
|
||||
<g id="小标题-三站覆盖面积" transform="translate(1.5, 0)">
|
||||
<g id="小标题">
|
||||
<polygon id="矩形" :fill="`url(#1-${boxId})`" points="10.3064025 0 166.362718 0 176.570151 13.6763066 255.888803 13.6763066 399.202062 13.6763066 399.201597 38.3517324 205.452516 38.3517324 0 38.3517324 0 11.1814815"></polygon>
|
||||
<polygon
|
||||
id="矩形" :fill="`url(#1-${boxId})`"
|
||||
points="10.3064025 0 166.362718 0 176.570151 13.6763066 255.888803 13.6763066 399.202062 13.6763066 399.201597 38.3517324 205.452516 38.3517324 0 38.3517324 0 11.1814815"
|
||||
></polygon>
|
||||
<g id="椭圆形">
|
||||
<mask id="mask-4" fill="white">
|
||||
<use xlink:href="#path-3"></use>
|
||||
|
|
@ -49,7 +52,7 @@
|
|||
</g>
|
||||
<polyline id="路径" :stroke="`url(#7-${boxId})`" stroke-width="0.616921269" points="0 25.7188334 0 11.1814815 11.0190925 0 177.866737 0 188.53316 13.2759293 264.809581 13.2759293"></polyline>
|
||||
<polygon id="矩形" :fill="`url(#8-${boxId})`" points="118.3 2.99401198 393.561275 2.99401198 393.561275 9.76196476 122.229351 9.76196476"></polygon>
|
||||
<polygon id="路径-11" fill="#EBBE10" points="0 0 0 7.33194884 7.88666648 0"></polygon>
|
||||
<polygon id="路径-11" :fill="colors[11]" points="0 0 0 7.33194884 7.88666648 0"></polygon>
|
||||
<g id="编组-2" opacity="0.691816057" transform="translate(370.7821, 6.5393) scale(-1, -1) translate(-370.7821, -6.5393)translate(345.3094, 3.992)" fill="#00C157">
|
||||
<polygon id="矩形" opacity="0.558652605" points="46.5583547 0 50.945502 0 46.48422 5.0945502 42.0970727 5.0945502"></polygon>
|
||||
<polygon id="矩形备份" opacity="0.385865711" points="38.2461939 0 42.6333411 0 38.1720591 5.0945502 33.7849118 5.0945502"></polygon>
|
||||
|
|
@ -60,8 +63,8 @@
|
|||
</g>
|
||||
</g>
|
||||
<g id="装饰线" transform="translate(7.3051, 36.5255)">
|
||||
<polygon id="矩形" fill="#EBBE10" points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"></polygon>
|
||||
<polygon id="矩形备份-13" fill="#4FE985" points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"></polygon>
|
||||
<polygon id="矩形" :fill="colors[11]" points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"></polygon>
|
||||
<polygon id="矩形备份-13" :fill="colors[12]" points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"></polygon>
|
||||
<polygon id="矩形备份-14" :fill="`url(#9-${boxId})`" points="27.2666802 0 390.822416 0 390.822416 1.82627297 25.5678216 1.82627297"></polygon>
|
||||
</g>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/units/texttitle02bg.png" />
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/units/texttitlebg.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ import cloneDeep from 'lodash/cloneDeep'
|
|||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle02',
|
||||
colors: [],
|
||||
colors: ['#1F6B55','#0A392A','#396754','#457453'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ContentTitle02Config.key
|
||||
public attr = { ...chartInitConfig, w: 401, h: 40, zIndex: 1 }
|
||||
public attr = { ...chartInitConfig, w: 172, h: 71, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ContentTitle02Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,38 @@
|
|||
<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">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,37 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<img :width="w" :height="h" src="/src/assets/images/chart/units/texttitlebg.png" />
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 44</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-64, -150)">
|
||||
<g id="可视化" transform="translate(-11, -21)">
|
||||
<g id="B" transform="translate(53, 114)">
|
||||
<g id="标题模块--左侧1" transform="translate(0, -0)">
|
||||
<g id="取水点" transform="translate(22, 57)">
|
||||
<g id="编组-44" transform="translate(0.9551, 0.8862)">
|
||||
<!-- w: 172, h: 71 -->
|
||||
<rect id="矩形" :stroke="colors[3]" x="0" y="0" :width="`${w-2}`" :height="`${h-2}`" rx="8"></rect>
|
||||
<path :d="`M8,0 ${w/2.13},0 ${w/2.13},0 ${w/3.75},${h-2} L8,${h-2} C3.581722,${h-2} 2.705415e-16,${h-5} 0,${h-10} L0,8 C-5.41083001e-16,3.581722 3.581722,5.41083001e-16 8,0 Z`" id="矩形" :fill="`url(#1-${boxId})`"></path>
|
||||
<path :d="`M8,0 ${w/2.46},0 ${w/2.46},0 ${w/3.34},${h-2} L8,${h-2} C3.581722,${h-2} 2.705415e-16,${h-5} 0,${h-10} L0,8 C-5.41083001e-16,3.581722 3.581722,5.41083001e-16 8,0 Z`" id="矩形" :fill="`url(#2-${boxId})`"></path>
|
||||
<rect id="矩形" :fill="colors[2]" :x="`${w/2.18}`" :y="`${h/2.03}`" :width="`${w/2.3}`" height="1"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ContentTitle03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle03',
|
||||
colors: ['#067847','#0EB07D','#1F6B55','#0A392A','#EBBE10','#0CB170','#0CB26F'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ContentTitle03Config.key
|
||||
public attr = { ...chartInitConfig, w: 368, h: 70, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ContentTitle03Config)
|
||||
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 ContentTitle03Config: ConfigType = {
|
||||
key: 'ContentTitle03',
|
||||
chartKey: 'VContentTitle03',
|
||||
conKey: 'VCContentTitle03',
|
||||
title: '模块标题-03',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'texttitle03bg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 54</title>
|
||||
<defs>
|
||||
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`3-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-59, -477)">
|
||||
<g id="可视化" transform="translate(-11, -21)">
|
||||
<g id="B" transform="translate(53, 114)">
|
||||
<g id="标题模块--左侧3" transform="translate(0.5, 321)">
|
||||
<g id="设备" transform="translate(16.5, 63)">
|
||||
<g id="编组-54" transform="translate(0.8994, 0.8862)">
|
||||
<path :d="`M2.05570911,0 ${w-3},0 ${w-2},-2.02906125e-16 ${w-1},0.8954305 ${w-1},2 ${w-1},${h-3} ${w-1},${h-2} ${w-2},${h-1} ${w-3},${h-1} L2.05570911,${h-1} C0.951139614,${h-1} 0.0557091139,${h-2} 0.0557091139,${h-3} L0.0557091139,143.1399652 L0.0557091139,43.1399652 L3.05570911,40.1566203 L3.05570911,27.6227405 L0.0557091139,25.4763963 L0.0557091139,2 C0.0557091139,0.8954305 0.951139614,1.3527075e-16 2.05570911,0 Z`" id="矩形" :fill="`url(#1-${boxId})`"></path>
|
||||
<path :d="`M2.05570911,0 ${w/4.84},0 ${w/4.84},0 ${w/5.4},${h-1} L2.05570911,${h-1} C0.951139614,${h-1} 0.0557091139,${h-2} 0.0557091139,${h-3} L0.0557091139,43.3858792 L0.0557091139,43.3858792 L3.05570911,41.239535 L3.05570911,28.7056551 L0.0557091139,25.7223102 L0.0557091139,2 C0.0557091139,0.8954305 0.951139614,-8.67738547e-17 2.05570911,-2.22044605e-16 Z`" id="矩形" :fill="`url(#2-${boxId})`" :transform="`translate(${w/9.66}, ${h/2.03}) scale(1, -1) translate(-${w/9.66}, -${h/2.03})`"></path>
|
||||
<path :d="`M2.05570911,0 ${w/3.48},0 ${w/3.48},0 ${w/7.34},${h-1} L2.05570911,${h-1} C0.951139614,${h-1} 0.0557091139,${h-2} 0.0557091139,${h-3} L0.0557091139,43.3858792 L0.0557091139,43.3858792 L3.05570911,41.239535 L3.06101275,28.7056551 L0.0557091139,25.7223102 L0.0557091139,2 C0.0557091139,0.8954305 0.951139614,1.3527075e-16 2.05570911,0 Z`" id="矩形" :fill="`url(#3-${boxId})`" :transform="`translate(${w/6.95}, ${h/2.03}) scale(1, -1) translate(-${w/6.95}, -${h/2.03})`"></path>
|
||||
<polygon id="矩形" :fill="colors[4]" transform="translate(0.9131, 34.0269) rotate(90) translate(-0.9131, -34.0269)"
|
||||
:points="`-13.31884767 33.1137725 6.72565368 33.1137725 5.14512064 34.9400454 -4.89938071 34.9400454`"
|
||||
></polygon>
|
||||
<rect id="矩形" :fill="colors[5]" :x="`${w/3.92}`" :y="`${h/2.01}`" :width="`${w/4.91}`" height="1"></rect>
|
||||
<path :d="`M${w/2.24},${h/2} L${w/1.67},${h/2} L${w/1.67},${h/1.97} L${w/2.24},${h/1.97} Z`" id="竖线" :stroke="colors[6]" stroke-dasharray="2" :transform="`translate(${w/1.91}, ${h/1.99}) rotate(90) translate(-${w/1.91}, -${h/1.99})`"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.fill {
|
||||
fill: v-bind('colors[0]');
|
||||
}
|
||||
.fill-none {
|
||||
fill: none;
|
||||
}
|
||||
.stroke {
|
||||
stroke: v-bind('colors[1]');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ContentTitle04Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle04',
|
||||
colors: ['#067847','#0EB07D','#FFB111','#FFB217','#457453','#0CB170'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ContentTitle04Config.key
|
||||
public attr = { ...chartInitConfig, w: 176, h: 60, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ContentTitle04Config)
|
||||
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 ContentTitle04Config: ConfigType = {
|
||||
key: 'ContentTitle04',
|
||||
chartKey: 'VContentTitle04',
|
||||
conKey: 'VCContentTitle04',
|
||||
title: '模块标题-04',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'texttitle04bg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 62</title>
|
||||
<defs>
|
||||
<linearGradient x1="0%" y1="50%" x2="109.584556%" y2="50%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%" y1="26.0411944%" x2="50%" y2="60.9089071%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[2]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-59, -635)">
|
||||
<g id="可视化" transform="translate(-11, -21)">
|
||||
<g id="B" transform="translate(53, 114)">
|
||||
<g id="标题模块--左侧4" transform="translate(0.5, 483)">
|
||||
<g id="巡护内容" transform="translate(17, 60)">
|
||||
<g id="编组-62" transform="translate(0, 0)">
|
||||
<path :d="`M10.5834008,0 L${w-2},0 L${w-2},${h/1.24} L${w/1.1},${h-2} L0,${h-2} C0,55.6727336 0,48.4525336 0,36.3394002 L0,9.07473657 L10.5834008,0 Z`" id="矩形" :stroke="colors[4]"></path>
|
||||
<polygon
|
||||
id="矩形" :fill="`url(#1-${boxId})`"
|
||||
:points="`14.1332538 3.11724138 ${w-5} 3.11724138 ${w-5} ${h/2} ${w-14} ${h/1.68} 3.60994506 ${h/1.68} 3.60994506 11.623884`"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11" :fill="`url(#2-${boxId})`"
|
||||
:transform="`translate(${w/1.04}, ${h/1.09}) scale(-1, -1) translate(-${w/1.04}, -${h/1.09})`"
|
||||
:points="`${w/1.07} ${h/1.17} ${w/1.07} ${h/1.02} ${w-1} ${h/1.17}`"
|
||||
></polygon>
|
||||
<rect id="矩形" :fill="colors[5]" :x="`${w/9.26}`" :y="`${h/1.71}`" :width="`${w/1.95}`" height="1"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.fill {
|
||||
fill: v-bind('colors[0]');
|
||||
}
|
||||
.fill-none {
|
||||
fill: none;
|
||||
}
|
||||
.stroke {
|
||||
stroke: v-bind('colors[1]');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ContentTitle05Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'linearGradientContentTitle05',
|
||||
colors: ['#583700','#FF9538','#E3AC5C','#C2742F','#F5A500','#0CB170'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ContentTitle05Config.key
|
||||
public attr = { ...chartInitConfig, w: 81, h: 23, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(ContentTitle05Config)
|
||||
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 ContentTitle05Config: ConfigType = {
|
||||
key: 'ContentTitle05',
|
||||
chartKey: 'VContentTitle05',
|
||||
conKey: 'VCContentTitle05',
|
||||
title: '模块标题-05',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'texttitle05bg.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 64</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`1-${boxId}`">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.73789882" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`2-${boxId}`">
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.751748252" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`3-${boxId}`">
|
||||
<stop :stop-color="colors[0]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.73789882" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`4-${boxId}`">
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.751748252" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon :id="`5-${boxId}`" :points="`${w/5.41} 0 ${w-1} 0 ${w/1.26} ${h} ${w/16.46} ${h} ${w/40.5} ${h/1.21}`"></polygon>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`7-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" :id="`8-${boxId}`">
|
||||
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-321, -806)">
|
||||
<g id="可视化" transform="translate(-11, -21)">
|
||||
<g id="B" transform="translate(53, 114)">
|
||||
<g id="标题模块--左侧5" transform="translate(0.5, 701)">
|
||||
<g id="小标题-火情趋势分析" transform="translate(0.499, 0)">
|
||||
<g id="编组-64" transform="translate(278.001, 12)">
|
||||
<!-- w: 81, h: 23 -->
|
||||
<path :d="`M${w-7},0.5 L${w-4},4.31042769 L${w/1.26},${h/1.02} L${w/14.75},${h/1.02} L${w/30.8},${h/1.21} L${w/5.28},0.5 L${w/1.09},0.5 Z`" id="矩形" :fill="`url(#1-${boxId})`" :stroke="`url(#2-${boxId})`" ></path>
|
||||
<mask :id="`6-${boxId}`" fill="white">
|
||||
<use xlink:href="#path-5"></use>
|
||||
</mask>
|
||||
<path :stroke="`url(#4-${boxId})`" :d="`M${w-2},0.5 L${w/1.26},${h/1.02} L${w/15.64},${h/1.02} L${w/31.03},${h/1.21} L${w/5.31},0.5 L${w-1},0.5 Z`"></path>
|
||||
<!-- <polygon
|
||||
id="矩形" :fill="`url(#7-${boxId})`" :mask="`url(#6-${boxId})`"
|
||||
:points="`${w/17.02} -${h/2.64} ${w/4.32} -${h/2.64} ${w/2.09} ${h/0.6} ${w/3.27} ${h/0.6}`"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="矩形备份-6" :fill="`url(#8-${boxId})`" :mask="`url(#6-${boxId})`"
|
||||
:transform="`translate(${w/3.72}, ${h/0.72}) scale(-1, 1) translate(-${w/3.72}, -${h/0.72})`"
|
||||
:points="`-${w/9.83} -${h/2.37} ${w/4.92} -${h/2.37} ${w/1.56} ${h/0.31} ${w/2.99} ${h/0.31}`"
|
||||
></polygon> -->
|
||||
<polygon id="路径-2" :fill="colors[4]" :points="`${w/44.51} ${h/1.13} 0 ${h} ${w/20.44} ${h}`"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const {
|
||||
colors,
|
||||
boxId
|
||||
} = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('title-03') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.fill {
|
||||
fill: v-bind('colors[0]');
|
||||
}
|
||||
.fill-none {
|
||||
fill: none;
|
||||
}
|
||||
.stroke {
|
||||
stroke: v-bind('colors[1]');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LeftChartsConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['xAxis', 'yAxis', 'grid']
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 10, //设定实心点的大小
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][3]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LeftChartsConfig.key
|
||||
public chartConfig = cloneDeep(LeftChartsConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
name="单折线面积图"
|
||||
:expanded="true"
|
||||
>
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select
|
||||
v-model:value="item.lineStyle.type"
|
||||
size="small"
|
||||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.symbolSize"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.label.fontSize"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.label.color"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' },
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
},
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"dimensions": ["product", "data1", "data2"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150,
|
||||
"data2": 312
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80,
|
||||
"data2": 268
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70,
|
||||
"data2": 155
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110,
|
||||
"data2": 117
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130,
|
||||
"data2": 160
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const LeftChartsConfig: ConfigType = {
|
||||
key: 'LeftCharts',
|
||||
chartKey: 'VLeftCharts',
|
||||
conKey: 'VCLeftCharts',
|
||||
title: '单折线渐变图',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'leftchartsbg.png'
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, graphic } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import config, { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const option = reactive({
|
||||
value: {}
|
||||
})
|
||||
|
||||
// 渐变色处理
|
||||
watch(
|
||||
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3 + index]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
)
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { SearchBoxConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
boxId: 'linearGradientSearchBox',
|
||||
colors: ['#00AF4A','#00751E','#344534','#647B64','#04691A','#0EF840','#07261E','#4A5C4A','#FFE4AC','#84DC9B'],
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = SearchBoxConfig.key
|
||||
public attr = { ...chartInitConfig, w: 205, h: 53, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(SearchBoxConfig)
|
||||
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 SearchBoxConfig: ConfigType = {
|
||||
key: 'SearchBox',
|
||||
chartKey: 'VSearchBox',
|
||||
conKey: 'VCSearchBox',
|
||||
title: '全局搜索',
|
||||
category: ChatCategoryEnum.TITLE,
|
||||
categoryName: ChatCategoryEnumName.TITLE,
|
||||
package: PackagesCategoryEnum.UNITS,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image: 'searchBtn.png',
|
||||
};
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div class="go-title-03">
|
||||
<svg :width="w" :height="h">
|
||||
<title>编组 41</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop :stop-color="colors[0]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[1]" stop-opacity="0.206314727" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop :stop-color="colors[2]" offset="0%"></stop>
|
||||
<stop :stop-color="colors[3]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-3" points="-7.8938096e-15 -3.28814141e-13 11 -3.28814141e-13 13.1616243 1.88067666 2.1616243 1.88067666"></polygon>
|
||||
<filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" 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="path-5" points="15.6938967 4.78840697e-14 26.6938967 4.78840697e-14 28.855521 1.88067666 17.855521 1.88067666"></polygon>
|
||||
<filter x="-115.3%" y="-717.8%" width="330.6%" height="1535.7%" filterUnits="objectBoundingBox" id="filter-6">
|
||||
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" 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="100%" x2="50.3209681%" y2="0.320968094%" id="linearGradient-7">
|
||||
<stop :stop-color="colors[4]" offset="0.00819493007%"></stop>
|
||||
<stop :stop-color="colors[5]" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-切图版" transform="translate(-460, -92)">
|
||||
<g id="全局搜索" transform="translate(460, 92)">
|
||||
<g id="编组-41" transform="translate(0.6886, 0.0542)">
|
||||
<path d="M0.997855372,50.7938722 L191.268499,50.7938722 L203.480404,39.0576371 L203.480404,0.490133526 C175.182522,0.490133526 155.473471,0.490133526 144.353252,0.490133526 C142.74063,0.490133526 141.927384,0.490133526 139.501517,0.490133526 C100.678123,0.490133526 100.678123,0.490133526 61.8547296,0.490133526 C59.5833877,0.490133526 58.7487514,0.490133526 57.3062013,0.490133526 C57.2171967,0.490133526 57.1258779,0.490133526 57.0317647,0.490133526 C42.0630356,0.490133526 27.1787008,0.490133526 12.3787602,0.490133526 L0.48040407,11.205526 L0.997855372,50.7938722 Z" id="路径-22" stroke="url(#linearGradient-1)" fill-opacity="0.85" :fill="colors[6]"></path>
|
||||
<g id="编组-5" transform="translate(126.6009, 11.9901) scale(-1, 1) rotate(-180) translate(-126.6009, -11.9901)translate(49.6009, 10.4901)">
|
||||
<line x1="-3.96190285e-13" y1="1.5" x2="153.992505" y2="1.5" id="路径-6" stroke="url(#linearGradient-2)" opacity="0.399999976"></line>
|
||||
<path d="M111.756559,3 C112.584986,3 113.256559,2.32842712 113.256559,1.5 C113.256559,0.671572875 112.584986,-5.6600229e-14 111.756559,-5.6600229e-14 C110.928132,-5.6600229e-14 110.256559,0.671572875 110.256559,1.5 C110.256559,2.32842712 110.928132,3 111.756559,3 Z" id="椭圆形" fill="#4A5C4A"></path>
|
||||
<circle id="椭圆形" :fill="colors[7]" cx="54.7565588" cy="1.5" r="1.5"></circle>
|
||||
</g>
|
||||
<g id="黄色棱形" transform="translate(47.3111, 49.8535) scale(1, -1) translate(-47.3111, -49.8535)translate(32.8833, 48.9132)">
|
||||
<g id="矩形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use :fill="colors[8]" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<g id="矩形" opacity="0.399999976">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
|
||||
<use :fill="colors[8]" fill-rule="evenodd" xlink:href="#path-5"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="装饰线-">
|
||||
<polygon id="矩形" :fill="colors[9]" points="33.883293 0.119323339 50.7322536 0.119323339 54.0432648 3.00000034 37.1943042 3.00000034"></polygon>
|
||||
<polygon id="路径-21" fill="url(#linearGradient-7)" points="0.280015515 23.0451271 0 10.5120201 10.7260003 0.119323339 29.3354202 3.1827193e-13 33.1074945 3.70128702 13.3177491 3.70128702 4.25149047 12.8512446 4.25149047 25.5958812"></polygon>
|
||||
</g>
|
||||
<g id="装饰线-" transform="translate(177.0216, 37.7979) scale(-1, -1) translate(-177.0216, -37.7979)translate(150, 25)">
|
||||
<polygon id="矩形" :fill="colors[9]" points="33.883293 0.119323339 50.7322536 0.119323339 54.0432648 3.00000034 37.1943042 3.00000034"></polygon>
|
||||
<polygon id="路径-21" fill="url(#linearGradient-7)" points="0.280015515 23.0451271 0 10.5120201 10.7260003 0.119323339 29.3354202 3.1827193e-13 33.1074945 3.70128702 13.3177491 3.70128702 4.25149047 12.8512446 4.25149047 25.5958812"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { getUUID } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const filterId = `border-box-04-filterId-${getUUID()}`
|
||||
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;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.fill {
|
||||
fill: v-bind('colors[0]');
|
||||
}
|
||||
.fill-none {
|
||||
fill: none;
|
||||
}
|
||||
.stroke {
|
||||
stroke: v-bind('colors[1]');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,7 +5,12 @@ import { TitlesBtnActiveConfig } from './TitlesBtnActive/index';
|
|||
import { ContentBackgroundConfig } from './ContentBackground/index';
|
||||
import { ContentTitleConfig } from './ContentTitle/index';
|
||||
import { ContentTitle01Config } from './ContentTitle01/index';
|
||||
// import { ContentTitle02Config } from './ContentTitle02/index';
|
||||
import { ContentTitle02Config } from './ContentTitle02/index';
|
||||
import { ContentTitle03Config } from './ContentTitle03/index';
|
||||
import { ContentTitle04Config } from './ContentTitle04/index';
|
||||
import { ContentTitle05Config } from './ContentTitle05/index';
|
||||
import { LeftChartsConfig } from './LeftCharts/index';
|
||||
import { SearchBoxConfig } from './SearchBox/index';
|
||||
|
||||
export default [
|
||||
TopTitlesConfig,
|
||||
|
|
@ -15,5 +20,10 @@ export default [
|
|||
ContentBackgroundConfig,
|
||||
ContentTitleConfig,
|
||||
ContentTitle01Config,
|
||||
// ContentTitle02Config
|
||||
ContentTitle02Config,
|
||||
ContentTitle03Config,
|
||||
ContentTitle04Config,
|
||||
ContentTitle05Config,
|
||||
LeftChartsConfig,
|
||||
SearchBoxConfig
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue