Merge branch 'master' of http://119.45.132.149:3000/security/go-view-fetch
This commit is contained in:
commit
e9f0a6eaba
@ -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 |
@ -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)
|
||||
}
|
||||
@ -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>
|
||||
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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'
|
||||
}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -4,5 +4,9 @@ import { AlarmNowListConfig } from './AlarmNowList'
|
||||
import { LineDropdownConfig } from './LineDropdown'
|
||||
import { SmallBorder01CoConfig } from './SmallBorder01Co'
|
||||
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]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, ref, watch, onMounted } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import 'echarts-gl'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
|
||||
@ -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返回的数据转换为组件需要的格式
|
||||
const convertApiDataToMockFormat = async (timeRange: string) => {
|
||||
const dataArray = await fetchChartData(timeRange)
|
||||
@ -129,7 +136,7 @@ const convertApiDataToMockFormat = async (timeRange: string) => {
|
||||
break
|
||||
case 'week':
|
||||
datavalues = [['时间', '数值'], ...dataArray.map(item => [
|
||||
item.week_day_name || '',
|
||||
convertToChineseWeekday(item.alarm_time_),
|
||||
item.avg_handle_time_seconds || 0
|
||||
])]
|
||||
break
|
||||
|
||||
@ -15,25 +15,32 @@
|
||||
],
|
||||
"week": [
|
||||
{
|
||||
"a": 4,
|
||||
"alarm_count": 10,
|
||||
"un_alarm_count": 45,
|
||||
"week_day_name": "星期一",
|
||||
"avg_handle_time_seconds": 6360,
|
||||
"day_of_week": 2
|
||||
"alarm_time_": "2025-08-25T13:31:00",
|
||||
"day_of_week": 25
|
||||
},
|
||||
{
|
||||
"alarm_count": 15,
|
||||
"un_alarm_count": 45,
|
||||
"week_day_name": "星期二",
|
||||
"avg_handle_time_seconds": 11996,
|
||||
"day_of_week": 3
|
||||
"a": 4,
|
||||
"alarm_count": 10,
|
||||
"avg_handle_time_seconds": 12300,
|
||||
"alarm_time_": "2025-08-26T12:02:00",
|
||||
"day_of_week": 26
|
||||
},
|
||||
{
|
||||
"alarm_count": 150,
|
||||
"un_alarm_count": 45,
|
||||
"week_day_name": "星期三",
|
||||
"avg_handle_time_seconds": 7537.6067,
|
||||
"day_of_week": 4
|
||||
"a": 4,
|
||||
"alarm_count": 100,
|
||||
"avg_handle_time_seconds": 6801.01,
|
||||
"alarm_time_": "2025-08-27T13:00:00",
|
||||
"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": [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user