This commit is contained in:
Free-sss 2025-08-28 17:13:21 +08:00
commit e9f0a6eaba
12 changed files with 838 additions and 15 deletions

View File

@ -0,0 +1,151 @@
const heightProportion = 0.2 // 柱状扇形的高度比例
// 生成扇形的曲面参数方程,用于 series-surface.parametricEquation
export function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
// 计算
let midRatio = (startRatio + endRatio) / 3;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形,则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值,换算出辅助参数 k默认值 1/3
k = typeof k !== 'undefined' ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例(未高亮,则比例为 1
let hoverRate = isHovered ? 1.1 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20
},
x: function (u, v) {
if (u < startRadian) {
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u);
}
return Math.sin(v) > 0 ? heightProportion * height : -1;
}
};
};
// 生成模拟 3D 饼图的配置项
export function getPie3D(pieData, internalDiameterRatio) {
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let linesSeries = []; // line3D模拟label指示线
let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
// 为每一个饼图数据,生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
type: 'surface',
parametric: true,
wireframe: {
show: false
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k
}
};
if (typeof pieData[i].itemStyle != 'undefined') {
let itemStyle = {};
typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时,计算出的数据和 sumValue调用 getParametricEquation 函数,
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation也就是实现每一个扇形。
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
// console.log(series[i]);
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
series[i].pieData.value
);
startValue = endValue;
// 计算label指示线的起始和终点位置
let midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI;
let posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2));
let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2));
let posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.1;
let flag = ((midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= 3 * Math.PI / 2 && midRadian <= Math.PI * 2)) ? 1 : -1;
// let color = pieData[i].itemStyle.color;
let turningPosArr = [posX * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (2)]
let endPosArr = [posX * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (6)]
legendData.push(series[i].name);
}
// 最底下圆盘
return series;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 174 KiB

View File

@ -0,0 +1,129 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { FiniteSpatialDistributionConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
import { getParametricEquation, getPie3D } from './3dPie'
export const includes = ['legend']
// 其它配置
const otherConfig = {
dateTime: {
selectValue: 'day',
dataset: [
{
label: '当天',
value: 'day'
},
{
label: '本周',
value: 'week'
},
{
label: '当月',
value: 'month'
},
{
label: '本季度',
value: 'quarter'
},
{
label: '当年',
value: 'year'
}
]
},
}
let total = 0
dataJson.source.forEach(item => {
total += item.value;
})
const series = getPie3D(dataJson.source.map(item => {
item.value = Number((item.value / total * 100).toFixed(2))
return item
}), 0.8);
const option = {
...otherConfig,
renderer: 'canvas',
backgroundColor: 'transparent',
legend: {
data: dataJson.source.map(item => item.name),
top: '84%',
left: 'center',
icon: 'rect',
textStyle: {
color: '#fff',
// fontSize: 16,
},
},
// color: ['rgba(255, 215, 0, 1)', 'rgba(74, 144, 226, 1)', 'rgba(80, 227, 194, 1)', 'rgba(126, 211, 33, 1)', 'rgba(144, 19, 254, 1)'],
dataset: { ...dataJson },
labelLine: {
show: true,
lineStyle: {
color: '#7BC0CB',
},
},
title: [
{
x: 'center',
top: '35%',
text: total,
textStyle: {
color: '#eee',
fontSize: 32,
fontWeight: 'bold'
},
},
{
x: 'center',
top: '48%',
text: '总数',
textStyle: {
color: '#ccc',
fontSize: 16,
fontWeight: 400
},
},
],
label: {
show: false,
},
xAxis3D: {
min: -0.8,
max: 0.8,
},
yAxis3D: {
min: -0.8,
max: 0.8,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false,
boxHeight: 4,
top: '-10%',
viewControl: {
distance: 180,
alpha: 30,
beta: 60,
autoRotate: false, // 自动旋转
},
},
series: series,
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key: string = FiniteSpatialDistributionConfig.key
public chartConfig = cloneDeep(FiniteSpatialDistributionConfig)
public option = echartOptionProfixHandle(option, includes)
}

View File

@ -0,0 +1,26 @@
<template>
<div>
<!-- 基础配置可以复用PieCommon的配置面板 -->
<CollapseItem name="基础配置" :expanded="true">
<SettingItemBox name="图例">
<SettingItem name="显示">
<n-switch v-model:value="optionData.legend.show" size="small" />
</SettingItem>
</SettingItemBox>
</CollapseItem>
</div>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { NSwitch } from 'naive-ui'
import { option } from './config'
defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

View File

@ -0,0 +1,25 @@
{
"dimensions": ["name", "value", "itemColor", "borderColor"],
"source": [
{
"name": "类型1",
"value": 5830
},
{
"name": "类型2",
"value": 7020
},
{
"name": "类型3",
"value": 4220
},
{
"name": "类型4",
"value": 5180
},
{
"name": "类型5",
"value": 2340
}
]
}

View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../../index.d'
export const FiniteSpatialDistributionConfig: ConfigType = {
key: 'FiniteSpatialDistribution',
chartKey: 'VFiniteSpatialDistribution',
conKey: 'VCFiniteSpatialDistribution',
title: '有限空间分布情况',
category: 'ConfinedSpace',
categoryName: '有限空间组件',
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.ECHARTS,
image: 'pie_center.png'
}

View File

@ -0,0 +1,175 @@
<template>
<div class="go-border-box">
<img src="./assets/title.svg" class="svg" />
<div class="header-title">有限空间分布情况</div>
<v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
</div>
</template>
<script setup lang="ts">
import 'echarts-gl'
import { toRaw, toReadonly, toRefs } from '@vue/reactivity'
import { isPreview } from '@/utils'
import { computed, onMounted, PropType, reactive, watch } from 'vue'
import VChart from 'vue-echarts'
import * as echarts from 'echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
import dataJson from './data.json'
import { getPie3D } from './3dPie'
import axiosInstance from '@/api/axios';
const props = defineProps({
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartConfig: {
type: Object as PropType<config>,
required: true
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
//
const initializeChartData = () => {
// 使 dataJson source
if (dataJson && dataJson.source) {
props.chartConfig.option.dataset = { ...dataJson }
//
const totalValue = dataJson.source.reduce((total: number, item: any) => {
return total + (item.value || 0)
}, 0)
//
if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
props.chartConfig.option.title[0].text = totalValue
}
const series = getPie3D(dataJson.source.map(item => {
item.value = Number((item.value / totalValue * 100).toFixed(2))
return item
}), 0.8);
props.chartConfig.option.series=series
console.log('图表数据已初始化:', props.chartConfig.option.dataset)
}
}
const updateChartData = (newData: any) => {
if (!newData) return
//
props.chartConfig.option.dataset = newData
const totalValue = newData.source.reduce((total: number, item: any) => {
return total + (item.value || 0)
}, 0)
//
if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
props.chartConfig.option.title[0].text = totalValue
}
}
watch(
() => props.chartConfig.option.dataset,
newData => {
if (newData) {
updateChartData(newData)
}
},
{ deep: true, immediate: true }
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
updateChartData(newData)
})
//
onMounted(async () => {
initializeChartData()
});
</script>
<style lang="scss" scoped>
@include go(border-box) {
position: relative;
border-radius: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
padding: 0;
//
// background-color: #0E121B;
//
background: linear-gradient(to top,
rgba(14, 18, 27, 1) 0%,
rgba(14, 18, 27, 0.6) 100%);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
padding: 2px;
/* 边框宽度 */
background: linear-gradient(to top,
rgba(128, 128, 128, 0.3),
rgba(128, 128, 128, 0));
-webkit-mask:
linear-gradient(#fff, #fff) content-box,
linear-gradient(#fff, #fff);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
}
.header-title {
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
}
.svg {
width: 100%;
height: 45px;
}
</style>

View File

@ -0,0 +1,159 @@
<template>
<div class="custom-select" @click="toggleDropdown">
<div class="select-display">
<span class="select-text">{{ getSelectedLabel() }}</span>
<span class="select-arrow" :class="{ 'arrow-up': isDropdownOpen }"></span>
</div>
<div class="select-dropdown" v-show="isDropdownOpen">
<div
v-for="item in options"
:key="item.value"
class="select-option"
:class="{ 'selected': item.value === selectedValue }"
@click.stop="selectOption(item)"
>
{{ item.label }}
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
// props
const props = defineProps<{
options: Array<{ label: string; value: any }>
selectedValue: any
}>()
// emits
const emit = defineEmits<{
change: [value: any]
}>()
//
const isDropdownOpen = ref(false)
//
const toggleDropdown = (event: Event) => {
event.stopPropagation()
isDropdownOpen.value = !isDropdownOpen.value
}
//
const selectOption = (item: any) => {
emit('change', item.value)
isDropdownOpen.value = false
}
//
const getSelectedLabel = () => {
const selectedItem = props.options.find(
(item: any) => item.value === props.selectedValue
)
return selectedItem ? selectedItem.label : '请选择'
}
//
const handleClickOutside = (event: Event) => {
const target = event.target as HTMLElement
if (!target.closest('.custom-select')) {
isDropdownOpen.value = false
}
}
//
onMounted(() => {
document.addEventListener('click', handleClickOutside)
})
//
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside)
})
</script>
<style lang="scss" scoped>
.custom-select {
position: absolute;
top: 12px;
right: 14px;
font-size: 12px;
z-index: 1000;
}
.select-display {
display: flex;
align-items: center;
justify-content: space-between;
height: 22px;
padding: 0 10px;
background-color: rgb(48, 110, 100);
color: #fff;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.select-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.select-arrow {
margin-left: 8px;
font-size: 10px;
transition: transform 0.3s ease;
&.arrow-up {
transform: rotate(180deg);
}
}
.select-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgb(48, 110, 100);
border-radius: 6px;
margin-top: 2px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
overflow: hidden;
animation: slideDown 0.2s ease;
}
.select-option {
padding: 10px 12px;
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&.selected {
background-color: rgba(255, 255, 255, 0.2);
font-weight: bold;
}
&:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

View File

@ -4,5 +4,9 @@ import { AlarmNowListConfig } from './AlarmNowList'
import { LineDropdownConfig } from './LineDropdown' import { LineDropdownConfig } from './LineDropdown'
import { SmallBorder01CoConfig } from './SmallBorder01Co' import { SmallBorder01CoConfig } from './SmallBorder01Co'
import { videoCheckConfig } from './videoCheck' import { videoCheckConfig } from './videoCheck'
export default [MapConfig, videoCheckConfig, LineDropdownConfig, PieCircleCommenConfig, AlarmNowListConfig, SmallBorder01CoConfig] import {FiniteSpatialDistributionConfig} from './FiniteSpatialDistribution'
export default [MapConfig, videoCheckConfig, LineDropdownConfig, PieCircleCommenConfig, AlarmNowListConfig, SmallBorder01CoConfig,FiniteSpatialDistributionConfig]

View File

@ -29,6 +29,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, PropType, ref, watch, onMounted } from 'vue' import { computed, PropType, ref, watch, onMounted } from 'vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import 'echarts-gl'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook' import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core' import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers' import { CanvasRenderer } from 'echarts/renderers'

View File

@ -98,6 +98,13 @@ const fetchChartData = async (option: string) => {
} }
} }
//
const convertToChineseWeekday = (dateString: string): string => {
const date = new Date(dateString)
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
return weekdays[date.getDay()]
}
// API // API
const convertApiDataToMockFormat = async (timeRange: string) => { const convertApiDataToMockFormat = async (timeRange: string) => {
const dataArray = await fetchChartData(timeRange) const dataArray = await fetchChartData(timeRange)
@ -129,7 +136,7 @@ const convertApiDataToMockFormat = async (timeRange: string) => {
break break
case 'week': case 'week':
datavalues = [['时间', '数值'], ...dataArray.map(item => [ datavalues = [['时间', '数值'], ...dataArray.map(item => [
item.week_day_name || '', convertToChineseWeekday(item.alarm_time_),
item.avg_handle_time_seconds || 0 item.avg_handle_time_seconds || 0
])] ])]
break break

View File

@ -15,25 +15,32 @@
], ],
"week": [ "week": [
{ {
"a": 4,
"alarm_count": 10, "alarm_count": 10,
"un_alarm_count": 45,
"week_day_name": "星期一",
"avg_handle_time_seconds": 6360, "avg_handle_time_seconds": 6360,
"day_of_week": 2 "alarm_time_": "2025-08-25T13:31:00",
"day_of_week": 25
}, },
{ {
"alarm_count": 15, "a": 4,
"un_alarm_count": 45, "alarm_count": 10,
"week_day_name": "星期二", "avg_handle_time_seconds": 12300,
"avg_handle_time_seconds": 11996, "alarm_time_": "2025-08-26T12:02:00",
"day_of_week": 3 "day_of_week": 26
}, },
{ {
"alarm_count": 150, "a": 4,
"un_alarm_count": 45, "alarm_count": 100,
"week_day_name": "星期三", "avg_handle_time_seconds": 6801.01,
"avg_handle_time_seconds": 7537.6067, "alarm_time_": "2025-08-27T13:00:00",
"day_of_week": 4 "day_of_week": 27
},
{
"a": 4,
"alarm_count": 20,
"avg_handle_time_seconds": 8760,
"alarm_time_": "2025-08-28T12:16:00",
"day_of_week": 28
} }
], ],
"month": [ "month": [