feat：危险房子圆环更新接口以及请求
This commit is contained in:
parent
5a15829710
commit
98c219c17b
@ -69,7 +69,8 @@ const option = {
|
||||
center: ['30%', '48%'],
|
||||
silent: true,
|
||||
z: 1,
|
||||
data: [{ value: 1, name: '', itemStyle: {
|
||||
data: [{
|
||||
value: 1, name: '', itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
@ -82,7 +83,8 @@ const option = {
|
||||
{ offset: 1, color: 'rgba(200, 200, 200, 0.01)' },
|
||||
]
|
||||
}
|
||||
} }],
|
||||
}
|
||||
}],
|
||||
label: { show: false },
|
||||
labelLine: { show: false }
|
||||
},
|
||||
@ -160,8 +162,7 @@ const option = {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0, 0, 0, 0.35)' }
|
||||
},
|
||||
data: dataJson.source
|
||||
}
|
||||
},
|
||||
// 内部渐变装饰环（在空洞边缘，提升质感）
|
||||
{
|
||||
|
||||
@ -4,11 +4,8 @@
|
||||
<div class="header-title">报警统计</div>
|
||||
<v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
|
||||
<!-- 使用新的下拉选择器组件 -->
|
||||
<CustomSelect
|
||||
:options="option.dateTime.dataset"
|
||||
:selectedValue="option.dateTime.selectValue"
|
||||
@change="handleSelectChange"
|
||||
/>
|
||||
<CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
|
||||
@change="handleSelectChange" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -27,6 +24,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GraphicComponent } from 'echarts/components'
|
||||
import CustomSelect from './select.vue'
|
||||
import dataJson from './data.json'
|
||||
import axiosInstance from '@/api/axios';
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -54,7 +52,7 @@ const option = computed(() => {
|
||||
function calculateTotal(data: any) {
|
||||
if (!data || !data.source) return 0
|
||||
return data.source.reduce((total: number, item: any) => {
|
||||
return total + (item[data.dimensions[1]] || 0)
|
||||
return total + (item.value || 0)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
@ -65,18 +63,20 @@ function calculatePercentage(value: number, total: number) {
|
||||
const updateChartData = (newData: any) => {
|
||||
if (!newData) return
|
||||
|
||||
// 确保数据被正确设置到图表配置中
|
||||
props.chartConfig.option.dataset = newData
|
||||
|
||||
const total = calculateTotal(newData)
|
||||
if (props.chartConfig.option.graphic?.[0]) {
|
||||
props.chartConfig.option.graphic[0].style.text = total.toString()
|
||||
}
|
||||
|
||||
// 统一显示为 “名称 百分比”
|
||||
// 统一显示为 "名称 百分比"
|
||||
props.chartConfig.option.legend.formatter = (name: string) => {
|
||||
const item = newData.source.find((it: any) => it[newData.dimensions[0]] === name)
|
||||
if (!item) return null
|
||||
const val = item[newData.dimensions[1]] ?? 0
|
||||
const item = newData.source.find((it: any) => it.name === name)
|
||||
if (!item) return name
|
||||
const val = item.value ?? 0
|
||||
let p = calculatePercentage(val, total)
|
||||
// return `{row|${name} ${p}%}`
|
||||
if(Number(p)<10){
|
||||
p=' '+p
|
||||
}
|
||||
@ -153,26 +153,123 @@ watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
if (newData) {
|
||||
props.chartConfig.option.dataset = newData
|
||||
updateChartData(newData)
|
||||
}
|
||||
},
|
||||
{ deep: false, immediate: true }
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
updateChartData(newData)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
updateChartData(props.chartConfig.option.dataset)
|
||||
})
|
||||
|
||||
// 处理下拉选择器变化
|
||||
const handleSelectChange = (value: any) => {
|
||||
props.chartConfig.option.dateTime.selectValue = value
|
||||
onMounted(async () => {
|
||||
// 初始化时立即获取数据
|
||||
const timeRange = generateTimeRange(props.chartConfig.option.dateTime.selectValue);
|
||||
const fetchedData = await fetchAlarmData(timeRange);
|
||||
if (fetchedData) {
|
||||
updateChartData(fetchedData);
|
||||
} else {
|
||||
// 如果获取失败，使用默认数据
|
||||
updateChartData(props.chartConfig.option.dataset);
|
||||
}
|
||||
});
|
||||
// 处理下拉选择器变化
|
||||
function formatDateTime(date: Date): string {
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
const seconds = date.getSeconds().toString().padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
function generateTimeRange(period: string): { startTime: string; endTime: string } {
|
||||
const now = new Date();
|
||||
let startTime: Date;
|
||||
let endTime: Date;
|
||||
endTime = new Date(now);
|
||||
endTime.setDate(endTime.getDate() + 1);
|
||||
endTime.setHours(0, 0, 0, 0);
|
||||
switch (period) {
|
||||
case 'day':
|
||||
startTime = new Date(now);
|
||||
startTime.setHours(0, 0, 0, 0);
|
||||
break;
|
||||
case 'week':
|
||||
startTime = new Date(now);
|
||||
startTime.setDate(startTime.getDate() - 7);
|
||||
startTime.setHours(0, 0, 0, 0);
|
||||
break;
|
||||
case 'month':
|
||||
startTime = new Date(now.getFullYear(), now.getMonth(), 1);
|
||||
startTime.setHours(0, 0, 0, 0);
|
||||
break;
|
||||
case 'quarter':
|
||||
const currentMonth = now.getMonth();
|
||||
const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
|
||||
startTime = new Date(now.getFullYear(), quarterStartMonth, 1);
|
||||
startTime.setHours(0, 0, 0, 0);
|
||||
break;
|
||||
case 'year':
|
||||
startTime = new Date(now.getFullYear(), 0, 1);
|
||||
startTime.setHours(0, 0, 0, 0);
|
||||
break;
|
||||
default:
|
||||
startTime = new Date(now);
|
||||
startTime.setHours(0, 0, 0, 0);
|
||||
break;
|
||||
}
|
||||
return {
|
||||
startTime: formatDateTime(startTime),
|
||||
endTime: formatDateTime(endTime),
|
||||
};
|
||||
}
|
||||
async function fetchAlarmData({ startTime, endTime }: { startTime: string; endTime: string }) {
|
||||
try {
|
||||
const res = await axiosInstance({
|
||||
method: 'GET',
|
||||
url: '/getAlarmdataRecord',
|
||||
params: { startTime, endTime },
|
||||
responseType: 'json',
|
||||
});
|
||||
if (Array.isArray(res)) {
|
||||
// 转换为图表需要的数据结构
|
||||
return {
|
||||
dimensions: ['name', 'value'],
|
||||
source: res.map((item: any) => ({
|
||||
name: item.alarmLevel,
|
||||
value: item.alarmNun
|
||||
}))
|
||||
};
|
||||
} else {
|
||||
console.warn('API returned unexpected data structure:', res);
|
||||
return undefined;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching alarm data:', error);
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
async function dataHandle(newData: any) {
|
||||
if (!newData) {
|
||||
props.chartConfig.option.dataset = { dimensions: ['name', 'value'], source: [] };
|
||||
updateChartData(props.chartConfig.option.dataset);
|
||||
return;
|
||||
}
|
||||
updateChartData(newData);
|
||||
}
|
||||
const handleSelectChange = async (value: string) => {
|
||||
props.chartConfig.option.dateTime.selectValue = value;
|
||||
const { startTime, endTime } = generateTimeRange(value);
|
||||
const fetchedData = await fetchAlarmData({ startTime, endTime });
|
||||
await dataHandle(fetchedData);
|
||||
};
|
||||
onMounted(async () => {
|
||||
const timeRange = generateTimeRange(props.chartConfig.option.dateTime.selectValue);
|
||||
const fetchedData = await fetchAlarmData(timeRange);
|
||||
await dataHandle(fetchedData);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user