gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

main
刘妍 2025-02-11 14:53:54 +08:00
parent 152fbad2fd 56b15be16c
commit dcac3508d3
34 changed files with 1521 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/chart/tables/01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/images/chart/tables/02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/chart/tables/03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/images/chart/tables/GeneralHead.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
src/assets/images/chart/tables/MeiRiShangBao.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src/assets/images/chart/tables/MoreButton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

20
src/packages/components/Tables/Tables/GeneralHead/config.ts Normal file
View File

@ -0,0 +1,20 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { GeneralHeadConfig } from './index'
export const option = {
title: '组件标题栏',
titleStyle: {
x: 80,
y: 30,
}
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = GeneralHeadConfig.key
public attr = { ...chartInitConfig, w: 400, h: 40, zIndex: -1 }
public chartConfig = cloneDeep(GeneralHeadConfig)
public option = cloneDeep(option)
}

40
src/packages/components/Tables/Tables/GeneralHead/config.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<CollapseItem name="标题设置" :expanded="true">
<n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
<SettingItemBox :alone="true" name="标题名称">
<SettingItem :alone="true">
<n-input v-model:value="optionData.title" type="text" size="small" />
</SettingItem>
<SettingItem name="标题横坐标位置">
<n-input-number
v-model:value="optionData.titleStyle.x"
:min="0"
size="small"
placeholder="宽度"
></n-input-number>
</SettingItem>
<SettingItem name="标题纵坐标位置">
<n-input-number
v-model:value="optionData.titleStyle.y"
:min="0"
size="small"
placeholder="高度"
></n-input-number>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType, watch, ref } from 'vue';
import { option } from './config';
import { cloneDeep } from 'lodash-es';
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true,
},
});
</script>

14
src/packages/components/Tables/Tables/GeneralHead/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const GeneralHeadConfig: ConfigType = {
key: 'GeneralHead',
chartKey: 'VGeneralHead',
conKey: 'VCGeneralHead',
title: '组件标题栏',
category: ChatCategoryEnum.TABLE,
categoryName: ChatCategoryEnumName.TABLE,
package: PackagesCategoryEnum.TABLES,
chartFrame: ChartFrameEnum.COMMON,
image: 'GeneralHead.png'
}

35
src/packages/components/Tables/Tables/GeneralHead/index.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="title">
<Title :title="option.title" :w="w" :h="h" :titleStyle="option.titleStyle" />
</div>
</template>
<script setup lang="ts">
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
import { CreateComponentType } from '@/packages/index.d';
import { icon } from '@/plugins';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useChartDataFetch } from '@/hooks';
import Title from './svg/title.vue';
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true,
},
});
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
title: props.chartConfig.option.title,
titleStyle: props.chartConfig.option.titleStyle,
});
</script>
<style lang="scss" scoped>
.title {
width: v-bind('`${w}px`');
height: v-bind('`${h}px`');
}
</style>

192
src/packages/components/Tables/Tables/GeneralHead/svg/title.vue Normal file
View File

@ -0,0 +1,192 @@
<template>
<div>
<svg
:width="props.w"
:height="props.h"
viewBox="0 0 400 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-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-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-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-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-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-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-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-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-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-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="props.titleStyle.x"
:y="props.titleStyle.y"
text-anchor="middle"
font-size="20"
fill="#ffffff"
>
{{ props.title }}
</text>
</svg>
</div>
</template>
<script setup lang="ts">
const props = defineProps(['title', 'w', 'h', 'titleStyle']);
</script>

33
src/packages/components/Tables/Tables/MeiRiShangBao/config.ts Normal file
View File

@ -0,0 +1,33 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { MeiRiShangBaoConfig } from './index'
import dataJson from './data.json'
const { source } = dataJson;
export const option = {
dataset: source,
dataStyle: {
width: 400,
height: 300,
sortOrder: true,
listStyle: {
titleColor: '#FFFFFF',
titleFontSize: 16,
timeColor: '#16E795',
timeFontSize: 16,
numColor: '#73FF73',
numFontSize: 16,
marginbottom: 5,
}
}
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = MeiRiShangBaoConfig.key
public attr = { ...chartInitConfig, w: 400, h: 200, zIndex: -1 }
public chartConfig = cloneDeep(MeiRiShangBaoConfig)
public option = cloneDeep(option)
}

84
src/packages/components/Tables/Tables/MeiRiShangBao/config.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<CollapseItem name="数据设置" :expanded="true">
<SettingItemBox name="展示样式">
<SettingItem name="标题字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.listStyle.titleColor"
></n-color-picker>
</SettingItem>
<SettingItem name="标题字体大小">
<n-input-number
v-model:value="optionData.dataStyle.listStyle.titleFontSize"
:min="0"
size="small"
placeholder="标题字体大小"
></n-input-number>
</SettingItem>
<SettingItem name="时间字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.listStyle.timeColor"
></n-color-picker>
</SettingItem>
<SettingItem name="时间字体大小">
<n-input-number
v-model:value="optionData.dataStyle.listStyle.timeFontSize"
:min="0"
size="small"
placeholder="时间字体大小"
></n-input-number>
</SettingItem>
<SettingItem name="类型字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.listStyle.numColor"
></n-color-picker>
</SettingItem>
<SettingItem name="类型字体大小">
<n-input-number
v-model:value="optionData.dataStyle.listStyle.numFontSize"
:min="0"
size="small"
placeholder="类型字体大小"
></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox>
<SettingItem name="间隔距离">
<n-input-number
v-model:value="optionData.dataStyle.listStyle.marginbottom"
:min="0"
size="small"
placeholder="间隔距离"
></n-input-number>
</SettingItem>
<SettingItem>
<n-space>
<n-switch v-model:value="optionData.dataStyle.sortOrder" size="small">
<template #checked> 数量排序 </template>
<template #unchecked> 时间排序 </template>
</n-switch>
<n-text>排序方式</n-text>
</n-space>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType, watch, ref } from 'vue';
import { option } from './config';
import { cloneDeep } from 'lodash-es';
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true,
},
});
</script>

29
src/packages/components/Tables/Tables/MeiRiShangBao/data.json Normal file
View File

@ -0,0 +1,29 @@
{
"source": [
{
"title":"临沂市",
"num": "7142",
"time": "01:27:14"
},
{
"title":"临沂市",
"num": "6662",
"time": "01:15:13"
},
{
"title":"临沂市",
"num": "8132",
"time": "01:15:10"
},
{
"title":"临沂市",
"num": "3262",
"time": "01:02:13"
},
{
"title":"临沂市",
"num": "1126",
"time": "00:55:13"
}
]
}

14
src/packages/components/Tables/Tables/MeiRiShangBao/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const MeiRiShangBaoConfig: ConfigType = {
key: 'MeiRiShangBao',
chartKey: 'VMeiRiShangBao',
conKey: 'VCMeiRiShangBao',
title: '每日上报数量统计',
category: ChatCategoryEnum.TABLE,
categoryName: ChatCategoryEnumName.TABLE,
package: PackagesCategoryEnum.TABLES,
chartFrame: ChartFrameEnum.COMMON,
image: 'MeiRiShangBao.png'
}

113
src/packages/components/Tables/Tables/MeiRiShangBao/index.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<div class="MeiRiShangBao">
<div class="list">
<div
v-for="item in option.dataset"
:key="item.key"
@mouseenter="item.mouseFlag = false"
@mouseleave="item.mouseFlag = true"
>
<Xinxi1
v-if="item.mouseFlag"
:style="{ marginBottom: `${option.dataStyle.listStyle.marginbottom}px` }"
:item="item"
:listStyle="option.dataStyle.listStyle"
/>
<Xinxi2
v-else
:style="{ marginBottom: `${option.dataStyle.listStyle.marginbottom}px` }"
:item="item"
:listStyle="option.dataStyle.listStyle"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
import { CreateComponentType } from '@/packages/index.d';
import { icon } from '@/plugins';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useChartDataFetch } from '@/hooks';
import Xinxi1 from './svg/xinxi1.vue';
import Xinxi2 from './svg/xinxi2.vue';
import dayjs from 'dayjs';
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true,
},
});
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
dataset: props.chartConfig.option.dataset,
dataStyle: props.chartConfig.option.dataStyle,
});
watch(
() => option.dataStyle.sortOrder,
() => {
if (option.dataStyle.sortOrder) {
// 数量排序
option.dataset = option.dataset.sort((a, b) => parseInt(b.num) - parseInt(a.num));
option.dataset = option.dataset.map((item, index) => {
const order = String(index + 1);
const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
return {
...item,
mouseFlag: true,
key: newKey,
};
});
} else {
// 时间排序
option.dataset = option.dataset.sort((a, b) => {
const timeA = dayjs(a.time, 'HH:mm:ss');
const timeB = dayjs(b.time, 'HH:mm:ss');
return timeB.diff(timeA);
});
option.dataset = option.dataset.map((item, index) => {
const order = String(index + 1);
const newKey = Number(order) >= 10 ? `${order}` : `0${order}`;
return {
...item,
mouseFlag: true,
key: newKey,
};
});
}
},
{
immediate: true,
},
);
</script>
<style lang="scss" scoped>
.MeiRiShangBao {
overflow-y: auto;
width: v-bind('`${w}px`');
height: v-bind('`${h}px`');
}
.MeiRiShangBao::-webkit-scrollbar {
display: none;
}
.MeiRiShangBao {
scrollbar-width: none;
-ms-overflow-style: none;
}
.list {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
display: flex;
flex-direction: column;
}
</style>

112
src/packages/components/Tables/Tables/MeiRiShangBao/svg/xinxi1.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<div>
<svg
width="363px"
height="28px"
viewBox="0 0 363 28"
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="-60.5860633%" y2="50%" id="linearGradient-1">
<stop stop-color="#172600" stop-opacity="0.4" offset="0.0191215035%"></stop>
<stop stop-color="#3D6644" stop-opacity="0.8" offset="62.775896%"></stop>
<stop stop-color="#80FF95" stop-opacity="0.9" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="100%" x2="1.71863581e-15%" y2="100%" id="linearGradient-2">
<stop stop-color="#295233" offset="0.0191215035%"></stop>
<stop stop-color="#386644" offset="31.280489%"></stop>
<stop stop-color="#AAF2C8" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-智感-火情线索-切图版" transform="translate(-1512, -850)">
<g id="可视化" transform="translate(-8, -1)">
<g id="模块" transform="translate(53, 92)">
<g id="标题模块--右侧1" transform="translate(1450.5, 703)">
<g id="编组-47" transform="translate(16.9878, 56)">
<rect
id="矩形"
fill="url(#linearGradient-1)"
x="0"
y="0"
width="362"
height="28"
></rect>
<rect
id="矩形"
fill="url(#linearGradient-2)"
x="0"
y="26"
width="362"
height="2"
></rect>
<rect
id="矩形"
stroke="#FBC636"
fill-opacity="0.5"
fill="#1B2026"
transform="translate(3.5122, 1) scale(-1, 1) translate(-3.5122, -1)"
x="0.51221881"
y="0.5"
width="6"
height="1"
></rect>
</g>
</g>
</g>
</g>
</g>
</g>
<image
v-if="['01', '02', '03'].includes(props.item.key)"
x="4%"
y="0"
width="25"
height="25"
:href="`/src/assets/images/chart/tables/${props.item.key}.png`"
/>
<text
v-else
x="5%"
y="20"
:fill="props.listStyle.titleColor"
:font-size="props.listStyle.titleFontSize"
>
{{ props.item.key }}
</text>
<text
x="15%"
y="20"
:fill="props.listStyle.titleColor"
:font-size="props.listStyle.titleFontSize"
>
{{ props.item.title }}
</text>
<text
x="37%"
y="20"
:fill="props.listStyle.timeColor"
:font-size="props.listStyle.timeFontSize"
>
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
{{ dayjs(props.item.time, 'HH:mm:ss').second() }} 秒
</text>
<text
x="85%"
y="20"
:fill="props.listStyle.numColor"
:font-size="props.listStyle.numFontSize"
>
{{ props.item.num }}
</text>
</svg>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
const props = defineProps(['item', 'listStyle']);
</script>

118
src/packages/components/Tables/Tables/MeiRiShangBao/svg/xinxi2.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<div>
<svg
width="363px"
height="28px"
viewBox="0 0 363 28"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<linearGradient
x1="165.142669%"
y1="47.3445949%"
x2="21.2210522%"
y2="52.5564913%"
id="linearGradient-1"
>
<stop stop-color="#172600" stop-opacity="0.4" offset="0.0191215035%"></stop>
<stop stop-color="#3D6644" stop-opacity="0.8" offset="62.775896%"></stop>
<stop stop-color="#31BD49" stop-opacity="0.9" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="100%" x2="1.71863581e-15%" y2="100%" id="linearGradient-2">
<stop stop-color="#295233" offset="0.0191215035%"></stop>
<stop stop-color="#386644" offset="31.280489%"></stop>
<stop stop-color="#AAF2C8" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-智感-火情线索-切图版" transform="translate(-1512, -928)">
<g id="可视化" transform="translate(-8, -1)">
<g id="模块" transform="translate(53, 92)">
<g id="标题模块--右侧1" transform="translate(1450.5, 703)">
<g id="编组-54" transform="translate(16.9878, 134)">
<rect
id="矩形"
fill="url(#linearGradient-1)"
x="0"
y="0"
width="362"
height="28"
></rect>
<rect
id="矩形"
fill="url(#linearGradient-2)"
x="0"
y="26"
width="362"
height="2"
></rect>
<rect
id="矩形"
stroke="#FBC636"
fill-opacity="0.5"
fill="#1B2026"
transform="translate(3.5122, 1) scale(-1, 1) translate(-3.5122, -1)"
x="0.51221881"
y="0.5"
width="6"
height="1"
></rect>
</g>
</g>
</g>
</g>
</g>
</g>
<image
v-if="['01', '02', '03'].includes(props.item.key)"
x="4%"
y="0"
width="25"
height="25"
:href="`/src/assets/images/chart/tables/${props.item.key}.png`"
/>
<text
v-else
x="5%"
y="20"
:fill="props.listStyle.titleColor"
:font-size="props.listStyle.titleFontSize"
>
{{ props.item.key }}
</text>
<text
x="15%"
y="20"
:fill="props.listStyle.titleColor"
:font-size="props.listStyle.titleFontSize"
>
{{ props.item.title }}
</text>
<text
x="37%"
y="20"
:fill="props.listStyle.timeColor"
:font-size="props.listStyle.timeFontSize"
>
{{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
{{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
{{ dayjs(props.item.time, 'HH:mm:ss').second() }} 秒
</text>
<text
x="85%"
y="20"
:fill="props.listStyle.numColor"
:font-size="props.listStyle.numFontSize"
>
{{ props.item.num }}
</text>
</svg>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
const props = defineProps(['item', 'listStyle']);
</script>

20
src/packages/components/Tables/Tables/MoreButton/config.ts Normal file
View File

@ -0,0 +1,20 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { MoreButtonConfig } from './index'
export const option = {
buttonName: '更多>>',
buttonStyle:{
color: '#FFFFFF',
size: 'medium',
}
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = MoreButtonConfig.key
public attr = { ...chartInitConfig, w: 80, h: 40, zIndex: 5 }
public chartConfig = cloneDeep(MoreButtonConfig)
public option = cloneDeep(option)
}

40
src/packages/components/Tables/Tables/MoreButton/config.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<CollapseItem name="按钮设置" :expanded="true">
<SettingItemBox :alone="true" name="按钮内容">
<SettingItem :alone="true">
<n-input v-model:value="optionData.buttonName" type="text" size="small" />
</SettingItem>
<SettingItem name="按钮字体颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.buttonStyle.color"
></n-color-picker>
</SettingItem>
<SettingItem name="按钮大小">
<n-select
v-model:value="optionData.buttonStyle.size"
:options="[
{ label: '小', value: 'small' },
{ label: '中', value: 'medium' },
{ label: '大', value: 'large' },
]"
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType, watch, ref } from 'vue';
import { option } from './config';
import { cloneDeep } from 'lodash-es';
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true,
},
});
</script>

14
src/packages/components/Tables/Tables/MoreButton/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const MoreButtonConfig: ConfigType = {
key: 'MoreButton',
chartKey: 'VMoreButton',
conKey: 'VCMoreButton',
title: '更多按钮',
category: ChatCategoryEnum.TABLE,
categoryName: ChatCategoryEnumName.TABLE,
package: PackagesCategoryEnum.TABLES,
chartFrame: ChartFrameEnum.COMMON,
image: 'MoreButton.png'
}

45
src/packages/components/Tables/Tables/MoreButton/index.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div class="MoreButton">
<n-button
text
:color="option.buttonStyle.color"
:size="option.buttonStyle.size"
@click="console.log(123)"
>
{{ option.buttonName }}
</n-button>
</div>
</template>
<script setup lang="ts">
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
import { CreateComponentType } from '@/packages/index.d';
import { icon } from '@/plugins';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useChartDataFetch } from '@/hooks';
import Title from './svg/title.vue';
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true,
},
});
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
buttonName: props.chartConfig.option.buttonName,
buttonStyle: props.chartConfig.option.buttonStyle,
});
</script>
<style lang="scss" scoped>
.MoreButton {
display: flex;
justify-content: center;
text-align: center;
width: v-bind('`${w}px`');
height: v-bind('`${h}px`');
}
</style>

32
src/packages/components/Tables/Tables/WeiXingYaoGan/config.ts
View File

@ -8,29 +8,29 @@ import dataJson from './data.json'
const {source} = dataJson;
export const option = {
imageData: '/src/assets/images/chart/tables/weixin_image.png',
imageStyle: {
width: 400,
height: 300,
lazy: false,
previewDisabled: false,
alt: '',
},
title: WeiXingYaoGanConfig.title,
titleStyle: {
width: 400,
height: 30,
},
dataset: source,
dataStyle: {
width: 400,
height: 470,
margintop: 10,
marginbottom: 20,
marginleft: 20,
marginright: 20,
listStyle: {
titleColor: '#ffffff',
titleFontSize: 20,
typeColor: '#FA521D',
typeFontSize: 16,
positionColor: '#ffffff',
positionFontSize: 16,
timeColor: '#ffffff',
timeFontSize: 16,
marginbottom: 5,
}
}
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = WeiXingYaoGanConfig.key
public attr = { ...chartInitConfig, w: 400, h: 800, zIndex: -1 }
public attr = { ...chartInitConfig, w: 400, h: 475, zIndex: -1 }
public chartConfig = cloneDeep(WeiXingYaoGanConfig)
public option = cloneDeep(option)
}

163
src/packages/components/Tables/Tables/WeiXingYaoGan/config.vue
View File

@ -1,83 +1,106 @@
<template>
<CollapseItem name="图片设置" :expanded="true">
<SettingItemBox :alone="true" name="图片路径">
<SettingItem :alone="true">
<n-input v-model:value="optionData.imageData" type="text" size="small" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="图片样式">
<SettingItem name="宽度">
<n-input-number
v-model:value="optionData.imageStyle.width"
:min="0"
size="small"
placeholder="宽度"
></n-input-number>
</SettingItem>
<SettingItem name="高度">
<n-input-number
v-model:value="optionData.imageStyle.height"
:min="0"
size="small"
placeholder="高度"
></n-input-number>
</SettingItem>
<SettingItem>
<n-checkbox v-model:checked="optionData.imageStyle.lazy" size="small">
是否让图片进入视口再加载
</n-checkbox>
</SettingItem>
<SettingItem>
<n-checkbox v-model:checked="optionData.imageStyle.previewDisabled" size="small">
是否禁用单击图像预览
</n-checkbox>
</SettingItem>
<SettingItem name="图片说明">
<n-input v-model:value="optionData.imageStyle.alt" size="small"></n-input>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="标题设置" :expanded="true">
<SettingItemBox :alone="true" name="标题名称">
<SettingItem :alone="true">
<n-input v-model:value="optionData.title" type="text" size="small" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="标题样式">
<SettingItem name="宽度">
<n-input-number
v-model:value="optionData.titleStyle.width"
:min="0"
size="small"
placeholder="宽度"
></n-input-number>
</SettingItem>
<SettingItem name="高度">
<n-input-number
v-model:value="optionData.titleStyle.height"
:min="0"
size="small"
placeholder="高度"
></n-input-number>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="数据设置" :expanded="true">
<SettingItemBox name="数据样式">
<SettingItem name="宽度">
<SettingItemBox name="边距样式">
<SettingItem name="上边距离">
<n-input-number
v-model:value="optionData.dataStyle.width"
v-model:value="optionData.dataStyle.margintop"
:min="0"
size="small"
placeholder="宽度"
placeholder="上边距离"
></n-input-number>
</SettingItem>
<SettingItem name="高度">
<SettingItem name="下边距离">
<n-input-number
v-model:value="optionData.dataStyle.height"
v-model:value="optionData.dataStyle.marginbottom"
:min="0"
size="small"
placeholder="高度"
placeholder="下边距离"
></n-input-number>
</SettingItem>
<SettingItem name="左侧距离">
<n-input-number
v-model:value="optionData.dataStyle.marginleft"
:min="0"
size="small"
placeholder="左侧距离"
></n-input-number>
</SettingItem>
<SettingItem name="右侧距离">
<n-input-number
v-model:value="optionData.dataStyle.marginright"
:min="0"
size="small"
placeholder="右侧距离"
></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="展示样式">
<SettingItem name="标题字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.listStyle.titleColor"
></n-color-picker>
</SettingItem>
<SettingItem name="标题字体大小">
<n-input-number
v-model:value="optionData.dataStyle.listStyle.titleFontSize"
:min="0"
size="small"
placeholder="标题字体大小"
></n-input-number>
</SettingItem>
<SettingItem name="类型字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.listStyle.typeColor"
></n-color-picker>
</SettingItem>
<SettingItem name="类型字体大小">
<n-input-number
v-model:value="optionData.dataStyle.listStyle.typeFontSize"
:min="0"
size="small"
placeholder="类型字体大小"
></n-input-number>
</SettingItem>
<SettingItem name="位置字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.listStyle.positionColor"
></n-color-picker>
</SettingItem>
<SettingItem name="位置字体大小">
<n-input-number
v-model:value="optionData.dataStyle.listStyle.positionFontSize"
:min="0"
size="small"
placeholder="位置字体大小"
></n-input-number>
</SettingItem>
<SettingItem name="时间字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.listStyle.timeColor"
></n-color-picker>
</SettingItem>
<SettingItem name="时间字体大小">
<n-input-number
v-model:value="optionData.dataStyle.listStyle.timeFontSize"
:min="0"
size="small"
placeholder="时间字体大小"
></n-input-number>
</SettingItem>
<SettingItem name="间隔距离">
<n-input-number
v-model:value="optionData.dataStyle.listStyle.marginbottom"
:min="0"
size="small"
placeholder="间隔距离"
></n-input-number>
</SettingItem>
</SettingItemBox>

97
src/packages/components/Tables/Tables/WeiXingYaoGan/index.vue
View File

@ -1,28 +1,12 @@
<template>
<div class="WeiXingYaoGan">
<div class="image">
<n-image
:width="option.imageStyle.width"
:height="option.imageStyle.height"
:lazy="option.imageStyle.lazy"
:preview-disabled="option.imageStyle.previewDisabled"
:alt="option.imageStyle.alt"
:src="option.imageData"
/>
</div>
<div class="title">
{{ option.title }}
</div>
<div class="list">
<div v-for="item in option.dataset" :key="item.key">
<div class="inline-container">
<span class="inline-container-title">{{ item.title }}</span>
<span class="inline-container-type">{{ item.type }}</span>
</div>
<div class="flex-container">
<span class="flex-container-position">{{ item.position }}</span>
<span class="flex-container-time">{{ item.time }}</span>
</div>
<Xinxi
:style="{ marginBottom: `${option.dataStyle.listStyle.marginbottom}px` }"
:item="item"
:listStyle="option.dataStyle.listStyle"
/>
</div>
</div>
</div>
@ -34,6 +18,7 @@
import { icon } from '@/plugins';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useChartDataFetch } from '@/hooks';
import Xinxi from './svg/xinxi.vue';
const props = defineProps({
chartConfig: {
@ -45,40 +30,9 @@
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
imageData: props.chartConfig.option.imageData,
imageStyle: props.chartConfig.option.imageStyle,
title: props.chartConfig.option.title,
titleStyle: props.chartConfig.option.titleStyle,
dataset: props.chartConfig.option.dataset,
dataStyle: props.chartConfig.option.dataStyle,
});
watch(
() => props.chartConfig.option.imageData,
(imageData: any) => {
option.imageData = imageData;
},
{
immediate: true,
deep: true,
},
);
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData;
},
{
immediate: true,
deep: true,
},
);
// setdata 数据监听与更改
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData;
});
</script>
<style lang="scss" scoped>
@ -88,40 +42,23 @@
height: v-bind('`${h}px`');
}
.image {
width: v-bind('`${option.imageStyle.width}px`');
height: v-bind('`${option.imageStyle.height}px`');
.WeiXingYaoGan::-webkit-scrollbar {
display: none;
}
.title {
width: v-bind('`${option.titleStyle.width}px`');
height: v-bind('`${option.titleStyle.height}px`');
.WeiXingYaoGan {
scrollbar-width: none;
-ms-overflow-style: none;
}
.list {
width: v-bind('`${option.dataStyle.width}px`');
height: v-bind('`${option.dataStyle.height}px`');
overflow-y: auto;
margin-top: v-bind('`${option.dataStyle.margintop}px`');
margin-bottom: v-bind('`${option.dataStyle.marginbottom}px`');
margin-left: v-bind('`${option.dataStyle.marginleft}px`');
margin-right: v-bind('`${option.dataStyle.marginright}px`');
}
// list内容
.inline-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.inline-container-title {
}
.inline-container-type {
margin-left: auto;
}
.flex-container {
display: flex;
flex-direction: column;
}
.flex-container-position {
}
.flex-container-time {
.xinxi {
margin-bottom: v-bind('`${option.dataStyle.listStyle.marginbottom}px`');
}
</style>

240
src/packages/components/Tables/Tables/WeiXingYaoGan/svg/xinxi.vue Normal file
View File

@ -0,0 +1,240 @@
<template>
<div>
<svg
width="356px"
height="105px"
viewBox="0 0 356 105"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<polygon
id="path-1"
points="0 3 294.396821 3 297.458489 0 354 0 354 79.5 352 81.5152056 352 92.7770354 353.977303 94.9817314 353.977303 100.5583 351.113639 102.981601 300.964221 102.659398 297.279163 100.275229 260.495558 100.275229 256.619751 103 0 103 0 83.0587131 1.98429756 81.0958075 1.98429756 56.1041408 0 58.2052572"
></polygon>
<filter
x="-1.1%"
y="-3.8%"
width="102.2%"
height="107.5%"
filterUnits="objectBoundingBox"
id="filter-2"
>
<feGaussianBlur
stdDeviation="3"
in="SourceAlpha"
result="shadowBlurInner1"
></feGaussianBlur>
<feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite
in="shadowOffsetInner1"
in2="SourceAlpha"
operator="arithmetic"
k2="-1"
k3="1"
result="shadowInnerInner1"
></feComposite>
<feColorMatrix
values="0 0 0 0 0.137254902 0 0 0 0 0.568627451 0 0 0 0 0.356862745 0 0 0 1 0"
type="matrix"
in="shadowInnerInner1"
></feColorMatrix>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
<stop stop-color="#009742" offset="0%"></stop>
<stop stop-color="#A9FFBE" offset="56.1194042%"></stop>
<stop stop-color="#AEFFC0" offset="100%"></stop>
</linearGradient>
<path
d="M6.5,0 C3.46386169,0.00319830091 1.00344429,2.28789449 1,5.10719402 C1,9.47732708 6,12.7778512 6.213125,12.9159776 C6.38534815,13.0280075 6.61465185,13.0280075 6.786875,12.9159776 C7,12.7778512 12,9.47732708 12,5.10719402 C11.9965557,2.28789449 9.53613831,0.00319830091 6.5,0 L6.5,0 Z M6.5,3.25003256 C7.6045695,3.25003256 8.5,4.08151206 8.5,5.10719402 C8.5,6.13287597 7.6045695,6.96435548 6.5,6.96435548 C5.3954305,6.96435548 4.5,6.13287597 4.5,5.10719402 C4.5,4.08151206 5.3954305,3.25003256 6.5,3.25003256 Z"
id="path-4"
></path>
<filter
x="-54.5%"
y="-46.2%"
width="209.1%"
height="190.4%"
filterUnits="objectBoundingBox"
id="filter-5"
>
<feMorphology
radius="0.5"
operator="dilate"
in="SourceAlpha"
result="shadowSpreadOuter1"
></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur
stdDeviation="1.5"
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
></feGaussianBlur>
<feColorMatrix
values="0 0 0 0 0 0 0 0 0 0.714933276 0 0 0 0 0 0 0 0 0.5 0"
type="matrix"
in="shadowBlurOuter1"
></feColorMatrix>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
<stop stop-color="#039844" offset="0%"></stop>
<stop stop-color="#AEFFC0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-7">
<stop stop-color="#FA521E" offset="0%"></stop>
<stop stop-color="#F9511C" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-8">
<stop stop-color="#05954F" offset="0%"></stop>
<stop stop-color="#0CC787" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-智感-卫星遥感信息-切图版" transform="translate(-1516, -446)">
<g id="可视化" transform="translate(-0.5, -1)">
<g id="模块" transform="translate(45.5, 92)">
<g id="标题模块--右侧1" transform="translate(1449.5, 289)">
<g id="底部背景" transform="translate(0, 0)">
<g id="编组-11" transform="translate(22.5, 67)">
<g
id="图形"
transform="translate(177, 51.5) scale(-1, -1) translate(-177, -51.5)"
>
<use fill="#0C2411" fill-rule="evenodd" xlink:href="#path-1"></use>
<use
fill="black"
fill-opacity="1"
filter="url(#filter-2)"
xlink:href="#path-1"
></use>
<use stroke="#00611A" stroke-width="0.742746411" xlink:href="#path-1"></use>
</g>
<g
id="黄色棱形"
transform="translate(73.9278, 102.4403) scale(1, -1) translate(-73.9278, -102.4403)translate(60, 101.5)"
fill="#05954F"
>
<polygon
id="矩形"
points="-7.8938096e-15 -3.28814141e-13 11 -3.28814141e-13 13.1616243 1.88067666 2.1616243 1.88067666"
></polygon>
<polygon
id="矩形"
opacity="0.399999976"
points="14.6938967 4.78840697e-14 25.6938967 4.78840697e-14 27.855521 1.88067666 16.855521 1.88067666"
></polygon>
</g>
<g id="map-pin-fill" transform="translate(14, 47)">
<g id="形状" fill-rule="nonzero">
<use
fill="black"
fill-opacity="1"
filter="url(#filter-5)"
xlink:href="#path-4"
></use>
<use fill="url(#linearGradient-3)" xlink:href="#path-4"></use>
</g>
<ellipse
id="椭圆形"
fill="#AEFFC0"
opacity="0.527510143"
cx="6.5"
cy="13"
rx="6.5"
ry="1"
></ellipse>
</g>
<g
id="1"
transform="translate(14, 72)"
fill="url(#linearGradient-6)"
fill-rule="nonzero"
>
<g id="clock-fill">
<path
d="M6.375,0 C2.85418472,0 0,2.85418472 0,6.375 C0,9.89581528 2.85418472,12.75 6.375,12.75 C9.89581528,12.75 12.75,9.89581528 12.75,6.375 C12.7462836,2.85572526 9.89427474,0.0037164167 6.375,0 L6.375,0 Z M9.80769231,6.86538462 L6.375,6.86538462 C6.10416806,6.86538462 5.88461538,6.64583194 5.88461538,6.375 L5.88461538,2.94230769 C5.88461538,2.67147575 6.10416806,2.45192308 6.375,2.45192308 C6.64583194,2.45192308 6.86538462,2.67147575 6.86538462,2.94230769 L6.86538462,5.88461538 L9.80769231,5.88461538 C10.0785243,5.88461538 10.2980769,6.10416806 10.2980769,6.375 C10.2980769,6.64583194 10.0785243,6.86538462 9.80769231,6.86538462 Z"
id="形状"
></path>
</g>
</g>
<rect
id="矩形"
fill="url(#linearGradient-7)"
opacity="0.2"
x="14"
y="9"
width="330"
height="27"
></rect>
<polygon
id="路径-28"
fill="url(#linearGradient-8)"
fill-rule="nonzero"
points="106.003502 102 354 102.666664 353.136833 103.999995 106 103.333329"
></polygon>
<polygon
id="路径-20"
fill="#00611A"
transform="translate(353.6325, 25.2338) scale(-1, 1) translate(-353.6325, -25.2338)"
points="352.755839 21.1698867 354.509124 22.8166345 354.509124 29.2977385 352.755839 27.5102925"
></polygon>
<polygon
id="路径-20"
fill="#00611A"
opacity="0.692208426"
transform="translate(353.6325, 32.6639) scale(-1, 1) translate(-353.6325, -32.6639)"
points="352.755839 28.6 354.509124 30.2467477 354.509124 36.7278518 352.755839 34.9404058"
></polygon>
<polygon
id="路径-20"
fill="#00611A"
opacity="0.337231591"
transform="translate(353.6325, 40.2338) scale(-1, 1) translate(-353.6325, -40.2338)"
points="352.755839 36.1698867 354.509124 37.8166345 354.509124 44.2977385 352.755839 42.5102925"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<text
x="20"
y="30"
:fill="props.listStyle.titleColor"
:font-size="props.listStyle.titleFontSize"
>
{{ props.item.title }}
</text>
<text
x="270"
y="30"
:fill="props.listStyle.typeColor"
:font-size="props.listStyle.typeFontSize"
>
{{ props.item.type }}
</text>
<text
x="40"
y="60"
:fill="props.listStyle.positionColor"
:font-size="props.listStyle.positionFontSize"
>
{{ props.item.position }}
</text>
<text
x="40"
y="85"
:fill="props.listStyle.timeColor"
:font-size="props.listStyle.timeFontSize"
>
{{ props.item.time }}
</text>
</svg>
</div>
</template>
<script setup lang="ts">
const props = defineProps(['item', 'listStyle']);
</script>

31
src/packages/components/Tables/Tables/XianSuoShangBao/config.ts
View File

@ -5,31 +5,32 @@ import { chartInitConfig } from '@/settings/designSetting'
import { XianSuoShangBaoConfig } from './index'
import dataJson from './data.json'
const { mark, typeOptions, source } = dataJson;
const { typeOptions, source } = dataJson;
export const option = {
title: XianSuoShangBaoConfig.title,
titleStyle: {
width: 400,
height: 40,
},
mark: mark,
markStyle: {
width: 400,
height: 40,
},
typeOptions: typeOptions,
type: typeOptions[0].value,
typeOptions: typeOptions,
typeStyle: {
typeColor1: '#FFC600',
typeTitle1: '已处置',
typeColor2: '#08B47A',
typeTitle2: '总数',
typeFontColor: '#FFFFFF',
typeFontSize: 16,
},
dataset: source,
dataStyle: {
width: 400,
height: 190,
fontSize1: 13,
fontSize2: 10,
fontSize3: 13,
fontColor1: '#FFFFFF',
fontColor2: '#FFFFFF',
}
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = XianSuoShangBaoConfig.key
public attr = { ...chartInitConfig, w: 400, h: 250, zIndex: -1 }
public attr = { ...chartInitConfig, w: 400, h: 235, zIndex: -1 }
public chartConfig = cloneDeep(XianSuoShangBaoConfig)
public option = cloneDeep(option)
}

112
src/packages/components/Tables/Tables/XianSuoShangBao/config.vue
View File

@ -1,34 +1,9 @@
<template>
<CollapseItem name="标题设置" :expanded="true">
<SettingItemBox :alone="true" name="标题名称">
<SettingItem :alone="true">
<n-input v-model:value="optionData.title" type="text" size="small" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="标题样式">
<SettingItem name="宽度">
<n-input-number
v-model:value="optionData.titleStyle.width"
:min="0"
size="small"
placeholder="宽度"
></n-input-number>
</SettingItem>
<SettingItem name="高度">
<n-input-number
v-model:value="optionData.titleStyle.height"
:min="0"
size="small"
placeholder="高度"
></n-input-number>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="标记设置" :expanded="true">
<SettingItemBox name="标记样式">
<SettingItem name="宽度">
<n-input-number
v-model:value="optionData.markStyle.width"
v-model:value="optionData.typeStyle.width"
:min="0"
size="small"
placeholder="宽度"
@ -36,30 +11,95 @@
</SettingItem>
<SettingItem name="高度">
<n-input-number
v-model:value="optionData.markStyle.height"
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"
></n-color-picker>
</SettingItem>
<SettingItem name="标识标题1">
<n-input
v-model:value="optionData.typeStyle.typeTitle1"
size="small"
placeholder="标识标题1"
></n-input>
</SettingItem>
<SettingItem name="标识颜色2">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.typeStyle.typeColor2"
></n-color-picker>
</SettingItem>
<SettingItem name="标识标题2">
<n-input
v-model:value="optionData.typeStyle.typeTitle2"
size="small"
placeholder="标识标题2"
></n-input>
</SettingItem>
<SettingItem name="标识字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.typeStyle.typeFontColor"
></n-color-picker>
</SettingItem>
<SettingItem name="标识字体大小">
<n-input-number
v-model:value="optionData.typeStyle.typeFontSize"
:min="0"
size="small"
placeholder="标识字体大小"
></n-input-number>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="数据设置" :expanded="true">
<SettingItemBox name="数据样式">
<SettingItem name="宽度">
<n-input-number
v-model:value="optionData.dataStyle.width"
:min="0"
<SettingItem name="字体颜色1">
<n-color-picker
size="small"
placeholder="宽度"
:modes="['rgb']"
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"
size="small"
:min="0"
placeholder="字体大小1"
></n-input-number>
</SettingItem>
<SettingItem name="高度">
<SettingItem name="字体大小2">
<n-input-number
v-model:value="optionData.dataStyle.height"
:min="0"
v-model:value="optionData.dataStyle.fontSize2"
size="small"
placeholder="高度"
:min="0"
placeholder="字体大小2"
></n-input-number>
</SettingItem>
<SettingItem name="字体大小3">
<n-input-number
v-model:value="optionData.dataStyle.fontSize3"
size="small"
:min="0"
placeholder="字体大小3"
></n-input-number>
</SettingItem>
</SettingItemBox>

28
src/packages/components/Tables/Tables/XianSuoShangBao/data.json
View File

@ -1,10 +1,4 @@
{
"mark": {
"color1":"#FFC600",
"markTitle1": "已处置",
"color2":"#08B47A",
"markTitle2": "总数"
},
"typeOptions": [
{
"value": "1",
@ -19,39 +13,39 @@
{
"key": "01",
"title":"临沂市",
"total": "7",
"handled": "3"
"total": "10",
"handled": "6"
},
{
"key": "02",
"title":"临沂市",
"total": "7",
"handled": "3"
"total": "20",
"handled": "6"
},
{
"key": "03",
"title":"临沂市",
"total": "7",
"total": "4",
"handled": "3"
},
{
"key": "04",
"title":"临沂市",
"total": "7",
"handled": "3"
"total": "5",
"handled": "1"
},
{
"key": "05",
"title":"临沂市",
"total": "7",
"handled": "3"
"total": "5",
"handled": "2"
},
{
"key": "06",
"title":"临沂市",
"total": "7",
"handled": "3"
"total": "6",
"handled": "1"
},
{
"key": "07",

112
src/packages/components/Tables/Tables/XianSuoShangBao/index.vue
View File

@ -1,25 +1,29 @@
<template>
<div class="WeiXingYaoGan">
<div class="title">
<Title :title="option.title" />
<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>
</div>
<div class="mark">
<div class="mark-inline">
<Progress :color="option.mark.color1" :numberOfDivs="1" />
<span>{{ option.mark.markTitle1 }}</span>
<Progress :color="option.mark.color2" :numberOfDivs="1" />
<span>{{ option.mark.markTitle2 }}</span>
<div class="type-right">
<n-select v-model:value="option.type" size="small" :options="option.typeOptions" />
</div>
<Mark class="markSelect" :typeOptions="option.typeOptions" :type="option.type" />
</div>
<div class="list">
<div class="inline-container" v-for="item in option.dataset" :key="item.key">
<ListTitle :item="item" />
<ListTitle :item="item" :dataStyle="option.dataStyle" />
<div class="progressDiv">
<div class="list-jindu">
<Progress :color="option.mark.color1" :numberOfDivs="item.handled" />
<Progress :color="option.mark.color2" :numberOfDivs="item.total - item.handled" />
<Progress :color="option.typeStyle.typeColor1" :numberOfDivs="Number(item.handled)" />
<Progress
:color="option.typeStyle.typeColor2"
:numberOfDivs="Number(item.total - item.handled)"
/>
</div>
<ListMark :item="item" />
</div>
<ListType style="margin-top: 3px" :item="item" :dataStyle="option.dataStyle" />
</div>
</div>
</div>
@ -31,10 +35,8 @@
import { icon } from '@/plugins';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useChartDataFetch } from '@/hooks';
import Title from './svg/title.vue';
import Mark from './svg/mark.vue';
import ListTitle from './svg/listTitle.vue';
import ListMark from './svg/listMark.vue';
import ListType from './svg/listType.vue';
import Progress from './svg/progress.vue';
const props = defineProps({
@ -47,12 +49,9 @@
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
title: props.chartConfig.option.title,
titleStyle: props.chartConfig.option.titleStyle,
mark: props.chartConfig.option.mark,
markStyle: props.chartConfig.option.markStyle,
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,
});
@ -64,52 +63,38 @@
height: v-bind('`${h}px`');
}
.title {
width: v-bind('`${option.titleStyle.width}px`');
height: v-bind('`${option.titleStyle.height}px`');
}
.mark {
.type {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5px;
margin-left: 30px;
margin-right: 30px;
width: v-bind('`${option.markStyle.width}px`');
height: v-bind('`${option.markStyle.height}px`');
margin-right: 10px;
.mark-inline {
.type-left {
display: flex;
width: 240px;
}
.type-right {
width: 115px;
margin-right: 10px;
}
span {
color: #ffffff;
color: v-bind('`${option.typeStyle.typeFontColor}`');
font-size: v-bind('`${option.typeStyle.typeFontSize}px`');
margin-left: 20px;
margin-right: 30px;
}
}
.parallelogram1 {
width: 25px;
height: 10px;
margin-top: 6px;
margin-right: 6px;
background-color: v-bind('`${option.mark.color1}`');
transform: skewX(-40deg);
}
.parallelogram2 {
width: 25px;
height: 10px;
margin-top: 6px;
margin-right: 6px;
background-color: v-bind('`${option.mark.color2}`');
transform: skewX(-40deg);
}
.list {
width: v-bind('`${option.dataStyle.width}px`');
height: v-bind('`${option.dataStyle.height}px`');
margin-left: 30px;
margin-right: 30px;
width: v-bind('`${w}px`');
height: v-bind('`${h - 45}px`');
margin-top: 5px;
margin-left: 20px;
margin-right: 10px;
overflow-y: auto;
display: flex;
flex-direction: column;
@ -117,11 +102,30 @@
.inline-container {
display: flex;
.list-jindu {
height: 20px;
.progressDiv {
margin-top: 3px;
margin-left: 5px;
margin-right: 5px;
width: v-bind('`${w - 180}px`');
height: 23px;
background: #000000;
}
.list-jindu {
margin-left: 5px;
margin-right: 5px;
width: v-bind('`${w - 200}px`');
display: flex;
}
}
}
.list::-webkit-scrollbar {
display: none;
}
.list {
scrollbar-width: none;
-ms-overflow-style: none;
}
</style>

8
src/packages/components/Tables/Tables/XianSuoShangBao/svg/listTitle.vue
View File

@ -28,17 +28,17 @@
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="20"></rect>
<rect id="矩形" fill="#05A074" x="0" y="0" width="2" height="30"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
<text x="25%" y="13" text-anchor="middle" font-size="13" fill="#000000">
<text x="12" y="13" :font-size="dataStyle.fontSize1" :fill="dataStyle.fontColor1">
{{ props.item.key }}
</text>
<text x="75%" y="13" text-anchor="middle" font-size="10" fill="#000000">
<text x="36" y="13" :font-size="dataStyle.fontSize2" :fill="dataStyle.fontColor1">
{{ props.item.title }}
</text>
</svg>
@ -46,5 +46,5 @@
</template>
<script setup lang="ts">
const props = defineProps(['item']);
const props = defineProps(['item', 'dataStyle']);
</script>

58
src/packages/components/Tables/Tables/XianSuoShangBao/svg/listType.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div>
<svg
width="50px"
height="30px"
viewBox="0 0 50 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="-21.8928848%" y2="50%" id="linearGradient-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="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>
</g>
</g>
</g>
</g>
</g>
<text x="5" y="15" :font-size="dataStyle.fontSize3" :fill="dataStyle.fontColor2">
{{ props.item.handled }} / {{ props.item.total }}
</text>
</svg>
</div>
</template>
<script setup lang="ts">
const props = defineProps(['item', 'dataStyle']);
</script>

7
src/packages/components/Tables/Tables/XianSuoShangBao/svg/progress.vue
View File

@ -1,18 +1,17 @@
<template>
<div class="parallelogram" v-for="index in numberOfDivs" :key="index"> </div>
<div class="parallelogram" v-for="index in props.numberOfDivs" :key="index"> </div>
</template>
<script setup lang="ts">
const props = defineProps(['color', 'numberOfDivs']);
console.log(props.numberOfDivs);
</script>
<style lang="scss" scoped>
.parallelogram {
width: 25px;
width: 21px;
height: 10px;
margin-top: 6px;
margin-right: 6px;
margin-right: 1px;
background-color: v-bind('`${props.color}`');
transform: skewX(-40deg);
}

5
src/packages/components/Tables/Tables/index.ts
View File

@ -1,7 +1,10 @@
import { TableListConfig } from './TableList'
import { TableScrollBoardConfig } from './TableScrollBoard'
import { TablesBasicConfig } from "./TablesBasic/index";
import { GeneralHeadConfig } from "./GeneralHead/index";
import { MoreButtonConfig } from "./MoreButton/index";
import { WeiXingYaoGanConfig } from "./WeiXingYaoGan/index";
import { XianSuoShangBaoConfig } from "./XianSuoShangBao/index";
import { MeiRiShangBaoConfig } from "./MeiRiShangBao/index";
export default [TableListConfig, TableScrollBoardConfig,TablesBasicConfig, WeiXingYaoGanConfig, XianSuoShangBaoConfig]
export default [TableListConfig, TableScrollBoardConfig,TablesBasicConfig, GeneralHeadConfig, MoreButtonConfig, WeiXingYaoGanConfig, XianSuoShangBaoConfig, MeiRiShangBaoConfig]