105 lines
3.4 KiB
Vue
105 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<svg
|
|
:height="props.dataStyle.titleHeight"
|
|
:width="props.dataStyle.titleWidth"
|
|
viewBox="0 0 181 30"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<defs>
|
|
<linearGradient x1="100%" y1="50%" x2="2.30946189%" y2="50%" id="linearGradient-1">
|
|
<stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
|
|
<stop stop-color="#0A392A" offset="100%"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1512, -711)">
|
|
<g id="可视化" transform="translate(-0.5, -1)">
|
|
<g id="模块" transform="translate(46, 88)">
|
|
<g id="标题模块--右侧1" transform="translate(1450, 285)">
|
|
<g id="1" transform="translate(15.1305, 215.5427)">
|
|
<g id="编组-16" transform="translate(1.3695, 123.4573)">
|
|
<rect
|
|
id="矩形"
|
|
fill="url(#linearGradient-1)"
|
|
transform="translate(90.5, 15) scale(1, -1) translate(-90.5, -15)"
|
|
x="0"
|
|
y="0"
|
|
width="181"
|
|
height="30"
|
|
></rect>
|
|
<rect
|
|
id="矩形"
|
|
fill="#00611A"
|
|
transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
|
|
x="0"
|
|
y="0"
|
|
width="3"
|
|
height="30"
|
|
></rect>
|
|
<rect
|
|
id="矩形"
|
|
fill="#00611A"
|
|
transform="translate(179.5, 15) scale(1, -1) translate(-179.5, -15)"
|
|
x="178"
|
|
y="0"
|
|
width="3"
|
|
height="30"
|
|
></rect>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<image x="8" y="2" width="25" height="25" href="./wurenji.svg" />
|
|
<text
|
|
x="40"
|
|
y="20"
|
|
:fill="props.dataStyle.titleColor"
|
|
:font-size="props.dataStyle.titleFontSize"
|
|
>
|
|
{{
|
|
truncateText(
|
|
props.item.title,
|
|
props.dataStyle.titleWidth - 40,
|
|
props.dataStyle.titleFontSize,
|
|
)
|
|
}}
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import dayjs from 'dayjs';
|
|
const props = defineProps(['item', 'dataStyle']);
|
|
|
|
// 超过宽度的文字切换成...
|
|
function truncateText(text, maxWidth, fontSize, fontFamily = 'Arial') {
|
|
const canvas = document.createElement('canvas');
|
|
const context = canvas.getContext('2d');
|
|
context.font = `${fontSize}px ${fontFamily}`;
|
|
|
|
const metrics = context.measureText(text);
|
|
if (metrics.width <= maxWidth) {
|
|
return text;
|
|
}
|
|
|
|
let truncatedText = text;
|
|
for (let i = text.length; i > 0; i--) {
|
|
truncatedText = text.slice(0, i) + '...';
|
|
const newMetrics = context.measureText(truncatedText);
|
|
if (newMetrics.width <= maxWidth) {
|
|
return truncatedText;
|
|
}
|
|
}
|
|
return '';
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|