zS/go-viee-fetch-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修复无限发送请求，修复不能独立配置，修复不能动态更新

Browse Source
This commit is contained in:
Free-sss 2025-09-04 15:31:16 +08:00
parent 5bf82ab58b
commit 30d47df4bd
7 changed files with 114 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/staticData/static.json
View File

@ -27,7 +27,7 @@
{
"rank": "TOP1",
"name": "株机公司",
"value": 932
"value": 101
},
{
"rank": "TOP2",
@ -330,7 +330,7 @@
{
"title": "调漆作业室",
"label": "智控场景",
"value": null,
"value": 0,
"color": "#FFD700",
"image": "scene-control.png"
}

3
src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts
View File

@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { TopAlarmsConfig } from './index'
import dataJson from './data.json'
import { cloneDeep } from 'lodash'
export const option = {
sceneCode: 'T04',
componentIndexKey: "a",
@ -51,6 +52,6 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TopAlarmsConfig.key
public chartConfig = TopAlarmsConfig
public option = option
public option = cloneDeep(option)
}

22
src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
View File

@ -30,15 +30,15 @@
<span class="rank-icon"></span>
{{ index + 1 }}
</span>
<span class="name" :style="{ color: option.nameColor }">{{ item.enterpriseName }}</span>
<span class="name" :style="{ color: option.nameColor }">{{ item.name }}</span>
</div>
<div class="item-value">
<span class="value" :style="{ color: option.valueColor }">{{ item.alarmCount }}</span>
<span class="value" :style="{ color: option.valueColor }">{{ item.value }}</span>
</div>
<div class="progress-bar-wrapper">
<div class="progress-bar">
<div class="progress" :style="{
width: calculateWidth(item.alarmCount),
width: calculateWidth(item.value),
background: `linear-gradient(to right, ${option.barColorStart}, ${option.barColorEnd})`
}"></div>
</div>
@ -112,14 +112,14 @@ const fetchCorpsData = async (option: string) => {
const response: any =
// await axiosInstance.get(`/awjt/screen/corpsFive/${option}/${props.chartConfig.option.sceneCode}`, { baseURL: '' })
// if (response.state === true) {
// displayData.value = response.value || []
// } else {
// console.error('API调用失败:', response)
// displayData.value = []
// }
// 使用静态数据
await getStaticData(key, props.chartConfig.option.componentIndexKey, props.chartConfig.option.sceneCode);
// if (response.state === true) {
// displayData.value = response.value || []
// } else {
// console.error('API调用失败:', response)
// displayData.value = []
// }
// 使用静态数据
await getStaticData(key, props.chartConfig.option.componentIndexKey, props.chartConfig.option.sceneCode);
displayData.value = response['source']
props.chartConfig.option.titleText = response['titleText']
} catch (error) {

3
src/packages/components/Charts/MyComponents/ParkingScene/config.ts
View File

@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { ParkingSceneConfig } from './index'
import dataJson from './data.json'
import { cloneDeep } from 'lodash'
export const option = {
sceneCode: "",
@ -25,5 +26,5 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ParkingSceneConfig.key
public chartConfig = ParkingSceneConfig
public option = option
public option = cloneDeep(option)
}

60
src/packages/components/Charts/MyComponents/ParkingScene/index.vue
View File

@ -225,52 +225,84 @@
</div>
</template>
<script setup lang="ts">
import { PropType, computed, onMounted, watch } from 'vue'
import { PropType, computed, onMounted, watch, ref } from 'vue'
import { option as configOption } from './config'
import { ParkingSceneConfig } from './index'
import axios from 'axios';
const props = defineProps({
chartConfig: {
type: Object as PropType<{ option: typeof configOption }>,
required: true
}
})
const key = ParkingSceneConfig.key;
const option = computed(() => props.chartConfig.option)
const isFetching = ref(false) // 防止重复请求
// 获取静态数据
const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
let dataTemp = option.value.dataset
try {
const response = await axios.get('/staticData/static.json');
if (response.data) {
console.log('静态数据:', response.data);
dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
const dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
if (!dataTemp) {
console.warn(`Data not found for sceneCode: ${sceneCode}, key: ${key}, componentIndexKey: ${componentIndexKey}`);
return props.chartConfig.option.dataset; // 返回默认数据
}
return dataTemp;
}
console.log("datatemp:", dataTemp)
} catch (err) {
// console.error('获取static.json失败:', err);
console.error('获取static.json失败:', err);
}
return dataTemp
return props.chartConfig.option.dataset; // 出错时返回默认数据
}
// 统一数据获取方法
const fetchData = async () => {
// 防止重复请求
if (isFetching.value) return;
isFetching.value = true;
try {
let data;
// 静态数据
data = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
props.chartConfig.option.dataset = data;
if (JSON.stringify(data) !== JSON.stringify(option.value.dataset)) {
console.log('更新数据:', data);
}
} finally {
isFetching.value = false;
}
}
watch(
() => props.chartConfig.option.dataset,
async (newData: any) => {
option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
() => [
props.chartConfig.option.sceneCode,
props.chartConfig.option.componentIndexKey,
props.chartConfig.option.dataset
],
async () => {
await fetchData();
},
{
immediate: true,
deep: false
deep: true
}
)
// 组件挂载时获取数据
onMounted(async () => {
option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
await fetchData();
})
</script>
<style lang="scss" scoped>

3
src/packages/components/Charts/MyComponents/SceneDistribution/config.ts
View File

@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { SceneDistributionConfig } from './index'
import dataJson from './data.json'
import { cloneDeep } from 'lodash'
export const option = {
sceneCode: 'T06',
@ -22,5 +23,5 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = SceneDistributionConfig.key
public chartConfig = SceneDistributionConfig
public option = option
public option = cloneDeep(option)
}

56
src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
View File

@ -221,7 +221,7 @@
</template>
<script setup lang="ts">
import { PropType, computed, onMounted } from 'vue'
import { PropType, computed, onMounted, ref, watch } from 'vue'
import { option as configOption } from './config'
import axios from 'axios'
import { SceneDistributionConfig } from './index'
@ -241,26 +241,68 @@ const getImageUrl = (name: string) => {
const key = SceneDistributionConfig.key;
// 获取静态数据
const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
let dataTemp = option.value.dataset
try {
const response = await axios.get('/staticData/static.json');
if (response.data) {
console.log('静态数据:', response.data);
dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
const dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
if (!dataTemp) {
console.warn(`Data not found for sceneCode: ${sceneCode}, key: ${key}, componentIndexKey: ${componentIndexKey}`);
return props.chartConfig.option.dataset; // 返回默认数据
}
return dataTemp;
}
console.log("datatemp:", dataTemp)
} catch (err) {
console.error('获取static.json失败:', err);
}
return dataTemp
return props.chartConfig.option.dataset; // 出错时返回默认数据
}
const isFetching = ref(false) // 防止重复请求
// 统一数据获取方法
const fetchData = async () => {
// 防止重复请求
if (isFetching.value) return;
isFetching.value = true;
try {
let data;
// 静态数据
data = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
props.chartConfig.option.dataset = data;
if (JSON.stringify(data) !== JSON.stringify(option.value.dataset)) {
console.log('更新数据:', data);
}
} finally {
isFetching.value = false;
}
}
// 监听配置变化，但避免修改被监听的值
watch(
() => [
props.chartConfig.option.sceneCode,
props.chartConfig.option.componentIndexKey,
],
async () => {
await fetchData();
},
{
immediate: true,
deep: true
}
)
// 组件挂载时获取数据
onMounted(async () => {
option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
await fetchData();
})
</script>