智感-线索上报组件修改、置换gif动图
parent
7b1f0efe92
commit
955e5e3afe
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 437 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 273 KiB |
|
|
@ -11,14 +11,21 @@
|
|||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<rect id="path-ModalButton-1" x="0" y="0" width="120.597701" height="43" rx="3"></rect>
|
||||
<rect
|
||||
id="path-ModalButton-yellow-1"
|
||||
x="0"
|
||||
y="0"
|
||||
width="120.597701"
|
||||
height="43"
|
||||
rx="3"
|
||||
></rect>
|
||||
<filter
|
||||
x="-3.3%"
|
||||
y="-9.3%"
|
||||
width="106.6%"
|
||||
height="118.6%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-2"
|
||||
id="filter-yellow-2"
|
||||
>
|
||||
<feMorphology
|
||||
radius="2"
|
||||
|
|
@ -46,11 +53,23 @@
|
|||
in="shadowInnerInner1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.5930705%" id="linearGradient-3">
|
||||
<linearGradient
|
||||
x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="99.5930705%"
|
||||
id="linearGradient-ModalButton-yellow-3"
|
||||
>
|
||||
<stop stop-color="#FF8D00" offset="0%"></stop>
|
||||
<stop stop-color="#7D3700" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="99.7555179%" y1="50%" x2="0.659186059%" y2="50%" id="linearGradient-4">
|
||||
<linearGradient
|
||||
x1="99.7555179%"
|
||||
y1="50%"
|
||||
x2="0.659186059%"
|
||||
y2="50%"
|
||||
id="linearGradient-ModalButton-yellow-4"
|
||||
>
|
||||
<stop stop-color="#FF8900" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#FFB200" offset="52.4037608%"></stop>
|
||||
<stop stop-color="#FF8900" stop-opacity="0" offset="100%"></stop>
|
||||
|
|
@ -61,12 +80,16 @@
|
|||
<g id="弹窗----" transform="translate(175.2674, 165.0542)">
|
||||
<g id="编组-56" transform="translate(997, 604)">
|
||||
<g id="矩形">
|
||||
<use fill="#582900" fill-rule="evenodd" xlink:href="#path-ModalButton-1"></use>
|
||||
<use
|
||||
fill="#582900"
|
||||
fill-rule="evenodd"
|
||||
xlink:href="#path-ModalButton-yellow-1"
|
||||
></use>
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-2)"
|
||||
xlink:href="#path-ModalButton-1"
|
||||
filter="url(#filter-yellow-2)"
|
||||
xlink:href="#path-ModalButton-yellow-1"
|
||||
></use>
|
||||
<rect
|
||||
stroke="#FF8900"
|
||||
|
|
@ -82,12 +105,12 @@
|
|||
<path
|
||||
d="M2.68679754,0 L117.920714,2.22044605e-15 C118.472999,9.96743133e-15 118.920714,0.44771525 118.920714,1 C118.920714,1.28969745 118.795083,1.56515805 118.576335,1.75508987 L92.5517241,24.3514589 L92.5517241,24.3514589 L28.045977,24.2338973 L2.03298651,1.75665787 C1.6150959,1.39556801 1.56904981,0.764079571 1.93013967,0.346188968 C2.12009371,0.126354469 2.39626399,-1.9450313e-15 2.68679754,-1.99840144e-15 Z"
|
||||
id="矩形"
|
||||
fill="url(#linearGradient-3)"
|
||||
fill="url(#linearGradient-ModalButton-yellow-3)"
|
||||
opacity="0.480172294"
|
||||
></path>
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="url(#linearGradient-4)"
|
||||
fill="url(#linearGradient-ModalButton-yellow-4)"
|
||||
x="25.5110522"
|
||||
y="41.7453581"
|
||||
width="64.9372237"
|
||||
|
|
@ -129,14 +152,21 @@
|
|||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<rect id="path-ModalButton-1" x="0" y="0" width="120.597701" height="43" rx="3"></rect>
|
||||
<rect
|
||||
id="path-ModalButton-green-1"
|
||||
x="0"
|
||||
y="0"
|
||||
width="120.597701"
|
||||
height="43"
|
||||
rx="3"
|
||||
></rect>
|
||||
<filter
|
||||
x="-3.3%"
|
||||
y="-9.3%"
|
||||
width="106.6%"
|
||||
height="118.6%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-2"
|
||||
id="filter-ModalButton-green-2"
|
||||
>
|
||||
<feMorphology
|
||||
radius="2"
|
||||
|
|
@ -164,11 +194,17 @@
|
|||
in="shadowInnerInner1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-ModalButton-green-3">
|
||||
<stop stop-color="#00F535" offset="0%"></stop>
|
||||
<stop stop-color="#003310" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="99.7555179%" y1="50%" x2="0%" y2="50%" id="linearGradient-4">
|
||||
<linearGradient
|
||||
x1="99.7555179%"
|
||||
y1="50%"
|
||||
x2="0%"
|
||||
y2="50%"
|
||||
id="linearGradient-ModalButton-green-4"
|
||||
>
|
||||
<stop stop-color="#00FF2F" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#00F535" offset="50.8795251%"></stop>
|
||||
<stop stop-color="#00FF4B" stop-opacity="0" offset="100%"></stop>
|
||||
|
|
@ -179,12 +215,16 @@
|
|||
<g id="弹窗----" transform="translate(175.2674, 165.0542)">
|
||||
<g id="编组-61" transform="translate(1281, 604)">
|
||||
<g id="矩形">
|
||||
<use fill="#003310" fill-rule="evenodd" xlink:href="#path-ModalButton-1"></use>
|
||||
<use
|
||||
fill="#003310"
|
||||
fill-rule="evenodd"
|
||||
xlink:href="#path-ModalButton-green-1"
|
||||
></use>
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-2)"
|
||||
xlink:href="#path-ModalButton-1"
|
||||
filter="url(#filter-ModalButton-green-2)"
|
||||
xlink:href="#path-ModalButton-green-1"
|
||||
></use>
|
||||
<rect
|
||||
stroke="#00FC3A"
|
||||
|
|
@ -247,14 +287,14 @@
|
|||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<rect id="path-ModalButton-1" x="0" y="0" width="120.597701" height="43" rx="3"></rect>
|
||||
<rect id="path-ModalButton-red-1" x="0" y="0" width="120.597701" height="43" rx="3"></rect>
|
||||
<filter
|
||||
x="-3.3%"
|
||||
y="-9.3%"
|
||||
width="106.6%"
|
||||
height="118.6%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-2"
|
||||
id="filter-ModalButton-red-2"
|
||||
>
|
||||
<feMorphology
|
||||
radius="2"
|
||||
|
|
@ -282,11 +322,17 @@
|
|||
in="shadowInnerInner1"
|
||||
></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-ModalButton-red-3">
|
||||
<stop stop-color="#F02626" offset="0%"></stop>
|
||||
<stop stop-color="#F02626" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="99.7555179%" y1="50%" x2="0%" y2="50%" id="linearGradient-4">
|
||||
<linearGradient
|
||||
x1="99.7555179%"
|
||||
y1="50%"
|
||||
x2="0%"
|
||||
y2="50%"
|
||||
id="linearGradient-ModalButton-red-4"
|
||||
>
|
||||
<stop stop-color="#FB6C69" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#F02626" offset="50.8795251%"></stop>
|
||||
<stop stop-color="#F9413E" stop-opacity="0" offset="100%"></stop>
|
||||
|
|
@ -297,12 +343,12 @@
|
|||
<g id="弹窗----" transform="translate(175.2674, 165.0542)">
|
||||
<g id="编组-61" transform="translate(1281, 604)">
|
||||
<g id="矩形">
|
||||
<use fill="#270304" fill-rule="evenodd" xlink:href="#path-ModalButton-1"></use>
|
||||
<use fill="#270304" fill-rule="evenodd" xlink:href="#path-ModalButton-red-1"></use>
|
||||
<use
|
||||
fill="black"
|
||||
fill-opacity="1"
|
||||
filter="url(#filter-2)"
|
||||
xlink:href="#path-ModalButton-1"
|
||||
xlink:href="#path-ModalButton-red-1"
|
||||
></use>
|
||||
<rect
|
||||
stroke="#F02626"
|
||||
|
|
@ -318,12 +364,12 @@
|
|||
<path
|
||||
d="M2.68679754,0 L117.920714,2.22044605e-15 C118.472999,9.96743133e-15 118.920714,0.44771525 118.920714,1 C118.920714,1.28969745 118.795083,1.56515805 118.576335,1.75508987 L92.5517241,24.3514589 L92.5517241,24.3514589 L28.045977,24.2338973 L2.03298651,1.75665787 C1.6150959,1.39556801 1.56904981,0.764079571 1.93013967,0.346188968 C2.12009371,0.126354469 2.39626399,-1.9450313e-15 2.68679754,-1.99840144e-15 Z"
|
||||
id="矩形"
|
||||
fill="url(#linearGradient-3)"
|
||||
fill="url(#linearGradient-ModalButton-red-3)"
|
||||
opacity="0.480172294"
|
||||
></path>
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="url(#linearGradient-4)"
|
||||
fill="url(#linearGradient-ModalButton-red-4)"
|
||||
x="40.5857648"
|
||||
y="41.7453581"
|
||||
width="64.9372237"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { WuRenJiImageConfig } from './index'
|
|||
|
||||
export const option = {
|
||||
dataset: {
|
||||
url: 'src/assets/images/chart/zhigan/component/example1.png'
|
||||
url: 'src/assets/images/chart/zhigan/component/example1.gif'
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
});
|
||||
|
||||
const options = [
|
||||
{ label: '卫星例图', value: 'src/assets/images/chart/zhigan/component/example1.png' },
|
||||
{ label: '无人机例图', value: 'src/assets/images/chart/zhigan/component/example2.png' },
|
||||
{ label: '卫星例图', value: 'src/assets/images/chart/zhigan/component/example1.gif' },
|
||||
{ label: '无人机例图', value: 'src/assets/images/chart/zhigan/component/example2.gif' },
|
||||
];
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,27 +10,57 @@ const { typeOptions, source } = dataJson;
|
|||
export const option = {
|
||||
type: typeOptions[0].value,
|
||||
typeOptions: typeOptions,
|
||||
typeStyle: {
|
||||
dataset: source,
|
||||
dataStyle: {
|
||||
backgroud: '#FFFFFF00',
|
||||
typeColor1: '#FFC600',
|
||||
typeTitle1: '已处置',
|
||||
typeColor2: '#08B47A',
|
||||
typeTitle2: '总数',
|
||||
typeFontColor: '#FFFFFF',
|
||||
typeFontSize: 16,
|
||||
},
|
||||
dataset: source,
|
||||
dataStyle: {
|
||||
typeFontSize: 13,
|
||||
|
||||
listTitlePathStrokeColor: '#049D73',
|
||||
listTitlePathFillColor: '#05A074',
|
||||
listTitlePathStrokeColor2: '#049D72',
|
||||
listTitleRectFillColor: '#05A074',
|
||||
listTypePathStrokeColor: '#06A475',
|
||||
listTypePathFillColor: '#FFFFFF00',
|
||||
listTypeRactFillColor: '#06A475',
|
||||
|
||||
fontSize1: 13,
|
||||
fontSize2: 10,
|
||||
fontSize3: 13,
|
||||
fontColor1: '#FFFFFF',
|
||||
fontColor2: '#FFFFFF',
|
||||
fontColor3: '#FFFFFF',
|
||||
sortOrder: "0",
|
||||
|
||||
typeTop: 5,
|
||||
listTop: 5,
|
||||
listLeft: 15,
|
||||
listTitleWidth: 106,
|
||||
listTitleHeight: 30,
|
||||
listProgressHeight: 15,
|
||||
listTypeWidth: 66,
|
||||
listTypeHeight: 30,
|
||||
},
|
||||
dataStyleClone:{
|
||||
typeColor1: '#FFC600',
|
||||
typeColor2: '#08B47A',
|
||||
listTitlePathStrokeColor: '#049D73',
|
||||
listTitlePathFillColor: '#05A074',
|
||||
listTitlePathStrokeColor2: '#049D72',
|
||||
listTitleRectFillColor: '#05A074',
|
||||
listTypePathStrokeColor: '#06A475',
|
||||
listTypePathFillColor: '#FFFFFF00',
|
||||
listTypeRactFillColor: '#06A475',
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = XianSuoShangBaoConfig.key
|
||||
public attr = { ...chartInitConfig, w: 400, h: 235, zIndex: -1 }
|
||||
public attr = { ...chartInitConfig, w: 400, h: 225, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(XianSuoShangBaoConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
<template>
|
||||
<CollapseItem name="标记设置" :expanded="true">
|
||||
<SettingItemBox name="标记样式">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.typeStyle.width"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="宽度"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="高度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.typeStyle.height"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="高度"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="标识颜色1">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.typeStyle.typeColor1"
|
||||
v-model:value="optionData.dataStyle.typeColor1"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="标识标题1">
|
||||
<n-input
|
||||
v-model:value="optionData.typeStyle.typeTitle1"
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
placeholder="标识标题1"
|
||||
></n-input>
|
||||
@click="optionData.dataStyle.typeColor1 = optionData.dataStyleClone.typeColor1"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="标识颜色2">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.typeStyle.typeColor2"
|
||||
v-model:value="optionData.dataStyle.typeColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.dataStyle.typeColor2 = optionData.dataStyleClone.typeColor2"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="标识标题1">
|
||||
<n-input
|
||||
v-model:value="optionData.dataStyle.typeTitle1"
|
||||
size="small"
|
||||
placeholder="标识标题1"
|
||||
></n-input>
|
||||
</SettingItem>
|
||||
<SettingItem name="标识标题2">
|
||||
<n-input
|
||||
v-model:value="optionData.typeStyle.typeTitle2"
|
||||
v-model:value="optionData.dataStyle.typeTitle2"
|
||||
size="small"
|
||||
placeholder="标识标题2"
|
||||
></n-input>
|
||||
|
|
@ -49,20 +49,35 @@
|
|||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.typeStyle.typeFontColor"
|
||||
v-model:value="optionData.dataStyle.typeFontColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="标识字体大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.typeStyle.typeFontSize"
|
||||
v-model:value="optionData.dataStyle.typeFontSize"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="标识字体大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.backgroud"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-radio-group v-model:value="optionData.dataStyle.sortOrder" name="radiogroup">
|
||||
<n-space>
|
||||
<n-radio value="0"> {{ optionData.dataStyle.typeTitle2 }}排序 </n-radio>
|
||||
<n-radio value="1"> {{ optionData.dataStyle.typeTitle1 }}排序 </n-radio>
|
||||
<n-radio value="2"> 比例排序 </n-radio>
|
||||
<n-text>排序方式</n-text>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="数据设置" :expanded="true">
|
||||
<SettingItemBox name="数据样式">
|
||||
<SettingItem name="字体颜色1">
|
||||
<n-color-picker
|
||||
|
|
@ -71,13 +86,6 @@
|
|||
v-model:value="optionData.dataStyle.fontColor1"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体颜色2">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.fontColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小1">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.fontSize1"
|
||||
|
|
@ -86,6 +94,13 @@
|
|||
placeholder="字体大小1"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体颜色2">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.fontColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小2">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.fontSize2"
|
||||
|
|
@ -94,6 +109,13 @@
|
|||
placeholder="字体大小2"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体颜色3">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.fontColor3"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小3">
|
||||
<n-input-number
|
||||
v-model:value="optionData.dataStyle.fontSize3"
|
||||
|
|
@ -103,6 +125,136 @@
|
|||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="颜色样式">
|
||||
<SettingItem name="标题矩形边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listTitlePathStrokeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="
|
||||
optionData.dataStyle.listTitlePathStrokeColor =
|
||||
optionData.dataStyleClone.listTitlePathStrokeColor
|
||||
"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题矩形填充颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listTitlePathFillColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="
|
||||
optionData.dataStyle.listTitlePathFillColor =
|
||||
optionData.dataStyleClone.listTitlePathFillColor
|
||||
"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题左侧矩形颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listTitlePathStrokeColor2"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="
|
||||
optionData.dataStyle.listTitlePathStrokeColor2 =
|
||||
optionData.dataStyleClone.listTitlePathStrokeColor2
|
||||
"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="标题右侧矩形边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listTitleRectFillColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="
|
||||
optionData.dataStyle.listTitleRectFillColor =
|
||||
optionData.dataStyleClone.listTitleRectFillColor
|
||||
"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem name="比例矩形边框颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listTypePathStrokeColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="
|
||||
optionData.dataStyle.listTypePathStrokeColor =
|
||||
optionData.dataStyleClone.listTypePathStrokeColor
|
||||
"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="比例矩形填充颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listTypePathFillColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="
|
||||
optionData.dataStyle.listTypePathFillColor =
|
||||
optionData.dataStyleClone.listTypePathFillColor
|
||||
"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="比例矩形装饰点颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['rgb']"
|
||||
v-model:value="optionData.dataStyle.listTypeRactFillColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="
|
||||
optionData.dataStyle.listTypeRactFillColor =
|
||||
optionData.dataStyleClone.listTypeRactFillColor
|
||||
"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,47 +11,40 @@
|
|||
],
|
||||
"source": [
|
||||
{
|
||||
"key": "01",
|
||||
"title":"临沂市",
|
||||
"total": "10",
|
||||
"handled": "6"
|
||||
},
|
||||
{
|
||||
"key": "02",
|
||||
"title":"临沂市",
|
||||
"total": "20",
|
||||
"handled": "6"
|
||||
},
|
||||
{
|
||||
"key": "03",
|
||||
"title":"临沂市",
|
||||
"total": "4",
|
||||
"handled": "3"
|
||||
},
|
||||
{
|
||||
"key": "04",
|
||||
"title":"临沂市",
|
||||
"total": "5",
|
||||
"handled": "1"
|
||||
},
|
||||
{
|
||||
|
||||
"key": "05",
|
||||
"title":"临沂市",
|
||||
"total": "5",
|
||||
"handled": "2"
|
||||
},
|
||||
{
|
||||
"key": "06",
|
||||
"title":"临沂市",
|
||||
"total": "6",
|
||||
"handled": "1"
|
||||
},
|
||||
{
|
||||
"key": "07",
|
||||
"title":"临沂市",
|
||||
"total": "7",
|
||||
"handled": "3"
|
||||
"handled": "7"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<div class="XianSuoShangBao">
|
||||
<div class="type">
|
||||
<div class="type-left">
|
||||
<Progress :color="option.typeStyle.typeColor1" :numberOfDivs="1" />
|
||||
<span>{{ option.typeStyle.typeTitle1 }}</span>
|
||||
<Progress :color="option.typeStyle.typeColor2" :numberOfDivs="1" />
|
||||
<span>{{ option.typeStyle.typeTitle2 }}</span>
|
||||
<Progress :color="option.dataStyle.typeColor1" :numberOfDivs="1" />
|
||||
<span>{{ option.dataStyle.typeTitle1 }}</span>
|
||||
<Progress :color="option.dataStyle.typeColor2" :numberOfDivs="1" />
|
||||
<span>{{ option.dataStyle.typeTitle2 }}</span>
|
||||
</div>
|
||||
<div class="type-right">
|
||||
<n-select v-model:value="option.type" size="small" :options="option.typeOptions" />
|
||||
|
|
@ -16,14 +16,19 @@
|
|||
<ListTitle :item="item" :dataStyle="option.dataStyle" />
|
||||
<div class="progressDiv">
|
||||
<div class="list-jindu">
|
||||
<Progress :color="option.typeStyle.typeColor1" :numberOfDivs="Number(item.handled)" />
|
||||
<Progress
|
||||
:color="option.typeStyle.typeColor2"
|
||||
:color="option.dataStyle.typeColor1"
|
||||
:numberOfDivs="Number(item.handled)"
|
||||
:height="option.dataStyle.listProgressHeight"
|
||||
/>
|
||||
<Progress
|
||||
:color="option.dataStyle.typeColor2"
|
||||
:numberOfDivs="Number(item.total - item.handled)"
|
||||
:height="Number(option.dataStyle.listProgressHeight)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ListType style="margin-top: 3px" :item="item" :dataStyle="option.dataStyle" />
|
||||
<ListType class="listType" :item="item" :dataStyle="option.dataStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,6 +40,7 @@
|
|||
import { icon } from '@/plugins';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import dayjs from 'dayjs';
|
||||
import ListTitle from './svg/listTitle.vue';
|
||||
import ListType from './svg/listType.vue';
|
||||
import Progress from './svg/progress.vue';
|
||||
|
|
@ -51,14 +57,60 @@
|
|||
const option = reactive({
|
||||
type: props.chartConfig.option.type,
|
||||
typeOptions: props.chartConfig.option.typeOptions,
|
||||
typeStyle: props.chartConfig.option.typeStyle,
|
||||
dataset: props.chartConfig.option.dataset,
|
||||
dataStyle: props.chartConfig.option.dataStyle,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => option.dataStyle.sortOrder,
|
||||
() => {
|
||||
if (option.dataStyle.sortOrder == '0') {
|
||||
// 分母排序
|
||||
option.dataset = option.dataset.sort((a, b) => parseInt(b.total) - parseInt(a.total));
|
||||
} else if (option.dataStyle.sortOrder == '1') {
|
||||
// 分子排序
|
||||
option.dataset = option.dataset.sort((a, b) => parseInt(b.handled) - parseInt(a.handled));
|
||||
} else if (option.dataStyle.sortOrder == '2') {
|
||||
// 比例排序
|
||||
option.dataset = option.dataset.sort(
|
||||
(a, b) =>
|
||||
parseInt(b.handled) / parseInt(b.total) - parseInt(a.handled) / parseInt(a.total),
|
||||
);
|
||||
}
|
||||
option.dataset = option.dataset.map((item, index) => {
|
||||
const order = String(index + 1);
|
||||
const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
|
||||
return {
|
||||
...item,
|
||||
key: newKey,
|
||||
};
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => w.value,
|
||||
() => {
|
||||
option.dataStyle.listTitleWidth = (w.value * 106.5) / 400;
|
||||
option.dataStyle.listTitleHeight = (option.dataStyle.listTitleWidth * 20) / 71;
|
||||
option.dataStyle.listTypeWidth = (w.value * 66) / 400;
|
||||
option.dataStyle.listTypeHeight = (option.dataStyle.listTypeWidth * 30) / 66;
|
||||
option.dataStyle.listProgressHeight = (w.value * 15) / 400;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.XianSuoShangBao {
|
||||
background: v-bind('`${option.dataStyle.backgroud}`');
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h}px`');
|
||||
}
|
||||
|
|
@ -67,9 +119,8 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
margin-left: 30px;
|
||||
margin-right: 10px;
|
||||
margin-top: v-bind('`${option.dataStyle.typeTop}px`');
|
||||
margin-left: v-bind('`${option.dataStyle.listLeft + 10}px`');
|
||||
|
||||
.type-left {
|
||||
display: flex;
|
||||
|
|
@ -82,8 +133,8 @@
|
|||
}
|
||||
|
||||
span {
|
||||
color: v-bind('`${option.typeStyle.typeFontColor}`');
|
||||
font-size: v-bind('`${option.typeStyle.typeFontSize}px`');
|
||||
color: v-bind('`${option.dataStyle.typeFontColor}`');
|
||||
font-size: v-bind('`${option.dataStyle.typeFontSize}px`');
|
||||
margin-left: 20px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
|
@ -92,9 +143,8 @@
|
|||
.list {
|
||||
width: v-bind('`${w}px`');
|
||||
height: v-bind('`${h - 45}px`');
|
||||
margin-top: 5px;
|
||||
margin-left: 20px;
|
||||
margin-right: 10px;
|
||||
margin-top: v-bind('`${option.dataStyle.listTop}px`');
|
||||
margin-left: v-bind('`${option.dataStyle.listLeft}px`');
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -102,21 +152,33 @@
|
|||
.inline-container {
|
||||
display: flex;
|
||||
|
||||
.listTitle {
|
||||
}
|
||||
|
||||
.progressDiv {
|
||||
margin-top: 3px;
|
||||
// margin-top: 3px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: v-bind('`${w - 180}px`');
|
||||
height: 23px;
|
||||
background: #000000;
|
||||
width: v-bind(
|
||||
'`${w - option.dataStyle.listTypeWidth - option.dataStyle.listTitleWidth - option.dataStyle.listLeft * 2}px`'
|
||||
);
|
||||
height: v-bind('`${option.dataStyle.listTypeHeight}px`');
|
||||
background: #ffffff00;
|
||||
border: 1px solid#000000;
|
||||
}
|
||||
|
||||
.list-jindu {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: v-bind('`${w - 200}px`');
|
||||
width: v-bind(
|
||||
'`${w - option.dataStyle.listTypeWidth - option.dataStyle.listTitleWidth - option.dataStyle.listLeft * 2 - 10}px`'
|
||||
);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.listType {
|
||||
// margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
width="60px"
|
||||
height="30px"
|
||||
viewBox="0 0 88 26"
|
||||
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="-21.8928848%"
|
||||
y2="50%"
|
||||
id="linearGradient-XianSuoShangBao-listMark-1"
|
||||
>
|
||||
<stop stop-color="#02221B" offset="0%"></stop>
|
||||
<stop stop-color="#06463A" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-火情线索-切图版" transform="translate(-1782, -584)">
|
||||
<g id="可视化" transform="translate(-8, -1)">
|
||||
<g id="模块" transform="translate(53, 92)">
|
||||
<g id="标题模块--右侧1" transform="translate(1449.5, 444)">
|
||||
<g id="按钮" transform="translate(288, 49)">
|
||||
<rect
|
||||
id="矩形"
|
||||
stroke="#06A475"
|
||||
fill-opacity="0.4"
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="86"
|
||||
height="25"
|
||||
></rect>
|
||||
<polygon
|
||||
id="路径-11"
|
||||
fill="#06A475"
|
||||
points="0.5 0 0.5 7.33194884 8.38666648 0"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11"
|
||||
fill="#06A475"
|
||||
transform="translate(82.4433, 21.666) scale(-1, -1) translate(-82.4433, -21.666)"
|
||||
points="78.5 18 78.5 25.3319488 86.3866665 18"
|
||||
></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="40%" y="13" text-anchor="middle" font-size="15" fill="#000000">
|
||||
{{ props.item.handled }} / {{ props.item.total }}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['item']);
|
||||
</script>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
width="90px"
|
||||
height="30px"
|
||||
:width="props.dataStyle.listTitleWidth"
|
||||
:height="props.dataStyle.listTitleHeight"
|
||||
viewBox="0 0 71 20"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -17,28 +17,35 @@
|
|||
<path
|
||||
d="M38.0468141,0.5 L24.9195699,19.5 L5.5,19.5 L5.5,0.5 L38.0468141,0.5 Z"
|
||||
id="矩形"
|
||||
stroke="#049D73"
|
||||
fill="#05A074"
|
||||
:stroke="props.dataStyle.listTitlePathStrokeColor"
|
||||
:fill="props.dataStyle.listTitlePathFillColor"
|
||||
></path>
|
||||
<path
|
||||
d="M70.0581002,0.5 L57.2050021,19.5 L23.5,19.5 L23.5,0.5 L70.0581002,0.5 Z"
|
||||
id="矩形"
|
||||
stroke="#049D72"
|
||||
:stroke="props.dataStyle.listTitlePathStrokeColor2"
|
||||
fill-opacity="0.46"
|
||||
opacity="0.79897926"
|
||||
transform="translate(47, 10) scale(-1, -1) translate(-47, -10)"
|
||||
></path>
|
||||
<rect id="矩形" fill="#05A074" x="0" y="0" width="2" height="30"></rect>
|
||||
<rect
|
||||
id="矩形"
|
||||
:fill="props.dataStyle.listTitleRectFillColor"
|
||||
x="0"
|
||||
y="0"
|
||||
width="2"
|
||||
height="30"
|
||||
></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="12" y="13" :font-size="dataStyle.fontSize1" :fill="dataStyle.fontColor1">
|
||||
<text x="10" y="15" :font-size="props.dataStyle.fontSize1" :fill="props.dataStyle.fontColor1">
|
||||
{{ props.item.key }}
|
||||
</text>
|
||||
<text x="36" y="13" :font-size="dataStyle.fontSize2" :fill="dataStyle.fontColor1">
|
||||
<text x="36" y="13" :font-size="props.dataStyle.fontSize2" :fill="props.dataStyle.fontColor2">
|
||||
{{ props.item.title }}
|
||||
</text>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,52 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
width="50px"
|
||||
height="30px"
|
||||
viewBox="0 0 50 30"
|
||||
:width="props.dataStyle.listTypeWidth"
|
||||
:height="props.dataStyle.listTypeHeight"
|
||||
viewBox="0 0 44 20"
|
||||
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="-21.8928848%"
|
||||
y2="50%"
|
||||
id="linearGradient-XianSuoShangBao-listType-1"
|
||||
>
|
||||
<stop stop-color="#02221B" offset="0%"></stop>
|
||||
<stop stop-color="#06463A" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-火情线索-切图版" transform="translate(-1782, -584)">
|
||||
<g id="林业防火-智感-火情线索-切图版" transform="translate(-1829, -621)">
|
||||
<g id="可视化" transform="translate(-8, -1)">
|
||||
<g id="模块" transform="translate(53, 92)">
|
||||
<g id="标题模块--右侧1" transform="translate(1449.5, 444)">
|
||||
<g id="按钮" transform="translate(288, 49)">
|
||||
<rect
|
||||
id="矩形"
|
||||
stroke="#06A475"
|
||||
fill-opacity="0.4"
|
||||
x="1"
|
||||
y="1"
|
||||
width="40"
|
||||
height="20"
|
||||
></rect>
|
||||
<polygon
|
||||
id="路径-11"
|
||||
fill="#06A475"
|
||||
points="0.5 0 0.5 7.33194884 8.38666648 0"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11"
|
||||
fill="#06A475"
|
||||
transform="translate(82.4433, 21.666) scale(-1, -1) translate(-82.4433, -21.666)"
|
||||
points="78.5 18 78.5 25.3319488 86.3866665 18"
|
||||
></polygon>
|
||||
<g id="list" transform="translate(17.5, 86)">
|
||||
<g id="编组-56" transform="translate(317, 0)">
|
||||
<path
|
||||
d="M43.5,0.5 L43.5,19.5 L0.5,19.5 L0.5,0.5 L43.5,0.5 Z"
|
||||
id="矩形"
|
||||
:stroke="props.dataStyle.listTypePathStrokeColor"
|
||||
fill-opacity="0.4"
|
||||
:fill="props.dataStyle.listTypePathFillColor"
|
||||
transform="translate(22, 10) scale(-1, 1) translate(-22, -10)"
|
||||
></path>
|
||||
<rect
|
||||
id="矩形"
|
||||
:fill="props.dataStyle.listTypeRactFillColor"
|
||||
x="0"
|
||||
y="0"
|
||||
width="4"
|
||||
height="4"
|
||||
></rect>
|
||||
<rect
|
||||
id="矩形备份-17"
|
||||
:fill="props.dataStyle.listTypeRactFillColor"
|
||||
x="40"
|
||||
y="16"
|
||||
width="4"
|
||||
height="4"
|
||||
></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="5" y="15" :font-size="dataStyle.fontSize3" :fill="dataStyle.fontColor2">
|
||||
<text x="6" y="15" :font-size="props.dataStyle.fontSize3" :fill="props.dataStyle.fontColor3">
|
||||
{{ props.item.handled }} / {{ props.item.total }}
|
||||
</text>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -1,84 +0,0 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<svg
|
||||
width="120px"
|
||||
height="40px"
|
||||
viewBox="0 0 88 26"
|
||||
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="-21.8928848%"
|
||||
y2="50%"
|
||||
id="linearGradient-XianSuoShangBao-mark-1"
|
||||
>
|
||||
<stop stop-color="#02221B" offset="0%"></stop>
|
||||
<stop stop-color="#06463A" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-火情线索-切图版" transform="translate(-1782, -584)">
|
||||
<g id="可视化" transform="translate(-8, -1)">
|
||||
<g id="模块" transform="translate(53, 92)">
|
||||
<g id="标题模块--右侧1" transform="translate(1449.5, 444)">
|
||||
<g id="按钮" transform="translate(288, 49)">
|
||||
<rect
|
||||
id="矩形"
|
||||
stroke="#06A475"
|
||||
fill-opacity="0.4"
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="86"
|
||||
height="25"
|
||||
></rect>
|
||||
<polygon
|
||||
id="路径-11"
|
||||
fill="#06A475"
|
||||
points="0.5 0 0.5 7.33194884 8.38666648 0"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11"
|
||||
fill="#06A475"
|
||||
transform="translate(82.4433, 21.666) scale(-1, -1) translate(-82.4433, -21.666)"
|
||||
points="78.5 18 78.5 25.3319488 86.3866665 18"
|
||||
></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<n-select
|
||||
class="overlay-select"
|
||||
v-model:value="props.type"
|
||||
size="small"
|
||||
:options="props.typeOptions"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['typeOptions', 'type']);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 245px;
|
||||
display: inline-block;
|
||||
|
||||
.overlay-select {
|
||||
position: absolute;
|
||||
width: 115px;
|
||||
top: 45%;
|
||||
left: 15%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,13 +3,17 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['color', 'numberOfDivs']);
|
||||
const props = defineProps({
|
||||
color: { type: String },
|
||||
numberOfDivs: { type: Number },
|
||||
height: { type: Number, default: 15 },
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.parallelogram {
|
||||
width: 21px;
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
height: v-bind('`${props.height}px`');
|
||||
margin-top: 6px;
|
||||
margin-right: 1px;
|
||||
background-color: v-bind('`${props.color}`');
|
||||
|
|
|
|||
|
|
@ -1,198 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<svg
|
||||
width="400px"
|
||||
height="40px"
|
||||
viewBox="0 0 401 40"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
x1="97.3499803%"
|
||||
y1="112.35863%"
|
||||
x2="0%"
|
||||
y2="112.35863%"
|
||||
id="linearGradient-XianSuoShangBao-1"
|
||||
>
|
||||
<stop stop-color="#08251E" stop-opacity="0.1742622" offset="0%"></stop>
|
||||
<stop stop-color="#00A374" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-XianSuoShangBao-2">
|
||||
<stop stop-color="#11B472" offset="0%"></stop>
|
||||
<stop stop-color="#00A374" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon
|
||||
id="path-3"
|
||||
points="10.9822114 0 112.704666 0 119.46341 11.2799213 173.1989 11.2799213 270.2884 11.2799213 270.2884 38.3517324 139.186577 38.3517324 0 38.3517324 0 11.1814815"
|
||||
></polygon>
|
||||
<radialGradient
|
||||
cx="50%"
|
||||
cy="0%"
|
||||
fx="50%"
|
||||
fy="0%"
|
||||
r="100%"
|
||||
gradientTransform="translate(0.5, 0), scale(0.243, 1), rotate(90), scale(1, 2.7755), translate(-0.5, -0)"
|
||||
id="radialGradient-5"
|
||||
>
|
||||
<stop stop-color="#00FF8C" offset="0%"></stop>
|
||||
<stop stop-color="#00F4B6" stop-opacity="0" offset="100%"></stop>
|
||||
</radialGradient>
|
||||
<filter
|
||||
x="-3.0%"
|
||||
y="-12.5%"
|
||||
width="106.1%"
|
||||
height="124.9%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-6"
|
||||
>
|
||||
<feGaussianBlur stdDeviation="4.31844888" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient
|
||||
x1="27.2222213%"
|
||||
y1="49.528366%"
|
||||
x2="102.926609%"
|
||||
y2="50.2892453%"
|
||||
id="linearGradient-XianSuoShangBao-7"
|
||||
>
|
||||
<stop stop-color="#00FF77" offset="0%"></stop>
|
||||
<stop stop-color="#00BF6B" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-XianSuoShangBao-8">
|
||||
<stop stop-color="#00673F" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#00683F" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-XianSuoShangBao-9">
|
||||
<stop stop-color="#72A18A" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#1CC370" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智感-火情线索-切图版" transform="translate(-1495, -535)">
|
||||
<g id="可视化" transform="translate(-8, -1)">
|
||||
<g id="模块" transform="translate(53, 92)">
|
||||
<g id="标题模块--右侧1" transform="translate(1449.5, 444)">
|
||||
<g id="底部背景" transform="translate(0, -0)">
|
||||
<g id="小标题" transform="translate(0.5, 0)">
|
||||
<g transform="translate(1, 1)">
|
||||
<polygon
|
||||
id="矩形"
|
||||
fill="url(#linearGradient-XianSuoShangBao-1)"
|
||||
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>
|
||||
</mask>
|
||||
<use
|
||||
id="蒙版"
|
||||
fill="url(#linearGradient-XianSuoShangBao-2)"
|
||||
xlink:href="#path-3"
|
||||
></use>
|
||||
<ellipse
|
||||
fill="url(#radialGradient-5)"
|
||||
filter="url(#filter-6)"
|
||||
mask="url(#mask-4)"
|
||||
cx="180.697047"
|
||||
cy="25.5190419"
|
||||
rx="214"
|
||||
ry="52"
|
||||
></ellipse>
|
||||
</g>
|
||||
<polyline
|
||||
id="路径"
|
||||
stroke="url(#linearGradient-XianSuoShangBao-7)"
|
||||
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(#linearGradient-XianSuoShangBao-8)"
|
||||
points="118.561275 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>
|
||||
<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>
|
||||
<polygon
|
||||
id="矩形备份-2"
|
||||
opacity="0.321045648"
|
||||
points="29.6658988 0 34.0530461 0 29.5917641 5.0945502 25.2046168 5.0945502"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="矩形备份-3"
|
||||
opacity="0.191528"
|
||||
points="21.3537379 0 25.7408852 0 21.2796032 5.0945502 16.8924559 5.0945502"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="矩形备份-4"
|
||||
opacity="0.123233"
|
||||
points="12.5053086 0 16.8924559 0 12.4311739 5.0945502 8.04402663 5.0945502"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="矩形备份-5"
|
||||
opacity="0.097781"
|
||||
points="4.46128201 0 8.84842929 0 4.38714728 5.0945502 0 5.0945502"
|
||||
></polygon>
|
||||
</g>
|
||||
</g>
|
||||
<g id="装饰线" transform="translate(8.3051, 37.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="矩形备份-14"
|
||||
fill="url(#linearGradient-XianSuoShangBao-9)"
|
||||
points="27.2666802 0 390.822416 0 390.822416 1.82627297 25.5678216 1.82627297"
|
||||
></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="20%" y="30" text-anchor="middle" font-size="20" fill="#FFFFFF">
|
||||
{{ props.title }}
|
||||
</text>
|
||||
<a xlink:href="https://www.example.com">
|
||||
<text x="360" y="30" text-anchor="middle" font-size="20" fill="#FFFFFF">更多>></text>
|
||||
</a>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue