85 lines
4.5 KiB
Vue
85 lines
4.5 KiB
Vue
<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>
|