feat(图表): 替换mock数据为真实API请求并调整风险级别类型
修改风险级别选项值为数字类型以匹配后端API 移除mock数据依赖,通过axios调用真实接口获取图表数据 更新数据处理逻辑以适应API返回格式
This commit is contained in:
parent
920865c6f8
commit
fc2230a992
@ -37,7 +37,7 @@ import { mergeTheme } from '@/packages/public/chart'
|
||||
import config, { includes } from './config'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent } from 'echarts/components'
|
||||
import CustomSelect from './select.vue'
|
||||
import mockData from './mock.json'
|
||||
import axios from 'axios'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -57,22 +57,40 @@ const props = defineProps({
|
||||
const selectedOption = ref('总数')
|
||||
|
||||
// 新增风险级别相关状态
|
||||
const selectedRiskLevel = ref('全部')
|
||||
const selectedRiskLevel = ref(0)
|
||||
const riskLevelOptions = ref([
|
||||
{ label: '全部', value: '全部' },
|
||||
{ label: '重大风险', value: '重大风险' },
|
||||
{ label: '较大风险', value: '较大风险' },
|
||||
{ label: '一般风险', value: '一般风险' },
|
||||
{ label: '低风险', value: '低风险' }
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '重大风险', value: 1 },
|
||||
{ label: '较大风险', value: 2 },
|
||||
{ label: '一般风险', value: 3 },
|
||||
{ label: '低风险', value: 4 }
|
||||
])
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent])
|
||||
|
||||
// API调用函数
|
||||
const fetchChartData = async (timeType: string, riskLevel: number) => {
|
||||
try {
|
||||
const response = await axios.get(`/screen/alarmByOption/${timeType}/${riskLevel}`)
|
||||
if (response.data.state === true) {
|
||||
return response.data.value || []
|
||||
} else {
|
||||
console.error('API调用失败:', response.data)
|
||||
return []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取图表数据失败:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
// 数据处理函数
|
||||
const processChartData = (timeType: string, riskLevel: string) => {
|
||||
const rawData = mockData[timeType as keyof typeof mockData] || []
|
||||
const processChartData = async (timeType: string, riskLevel: number) => {
|
||||
|
||||
// 调用API获取数据
|
||||
const rawData = await fetchChartData(timeType, riskLevel)
|
||||
|
||||
// 根据时间类型处理数据格式
|
||||
let processedData: Array<{time: string, value: number}> = []
|
||||
@ -108,22 +126,6 @@ const processChartData = (timeType: string, riskLevel: string) => {
|
||||
processedData = []
|
||||
}
|
||||
|
||||
// 根据风险级别过滤数据(这里可以根据实际需求调整过滤逻辑)
|
||||
if (riskLevel !== '全部') {
|
||||
// 示例:根据风险级别调整数值(实际项目中应该有对应的风险级别数据)
|
||||
const riskMultiplier = {
|
||||
'重大风险': 0.4,
|
||||
'较大风险': 0.3,
|
||||
'一般风险': 0.2,
|
||||
'低风险': 0.1
|
||||
}[riskLevel] || 1
|
||||
|
||||
processedData = processedData.map(item => ({
|
||||
...item,
|
||||
value: Math.round(item.value * riskMultiplier)
|
||||
}))
|
||||
}
|
||||
|
||||
return {
|
||||
dimensions: ['time', 'value'],
|
||||
source: processedData
|
||||
@ -131,8 +133,8 @@ const processChartData = (timeType: string, riskLevel: string) => {
|
||||
}
|
||||
|
||||
// 更新图表数据
|
||||
const updateChartData = () => {
|
||||
const newData = processChartData(props.chartConfig.option.dateTime.selectValue, selectedRiskLevel.value)
|
||||
const updateChartData = async () => {
|
||||
const newData = await processChartData(props.chartConfig.option.dateTime.selectValue, selectedRiskLevel.value)
|
||||
props.chartConfig.option.dataset = newData
|
||||
}
|
||||
|
||||
|
@ -67,6 +67,10 @@ export default ({ mode }) =>
|
||||
'/awjt/': {
|
||||
target: 'http://127.0.0.1:8921/',
|
||||
changeOrigin: true
|
||||
},
|
||||
'/screen/': {
|
||||
target: 'http://127.0.0.1:8080/',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user