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

Merge branch 'master' of http://119.45.132.149:3000/security/go-view-fetch

Browse Source
This commit is contained in:
gaohaifeng 2025-09-04 17:29:07 +08:00
commit cdde82a3af
11 changed files with 408 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

300
public/staticData/static.json
View File

@ -27,7 +27,7 @@
{ {
"rank": "TOP1", "rank": "TOP1",
"name": "株机公司", "name": "株机公司",
"value": 932 "value": 101
}, },
{ {
"rank": "TOP2", "rank": "TOP2",
@ -162,98 +162,98 @@
] ]
} }
] ]
}
},
"TopAlarmsHaz": {
"a": {
"titleText": "电动自行车停车场景数企业及场景数量",
"source": [
{
"rank": "TOP1",
"name": "株机公司",
"value": 96
},
{
"rank": "TOP2",
"name": "株洲所",
"value": 34
},
{
"rank": "TOP3",
"name": "时代新材",
"value": 19
},
{
"rank": "TOP4",
"name": "产投公司",
"value": 16
},
{
"rank": "TOP5",
"name": "四方股份",
"value": 12
}
]
}, },
"TopAlarmsHaz": { "b": {
"a": { "titleText": "电动汽车停车场场景数企业及场景数量",
"titleText": "电动自行车停放区场景数前五的企业及场景数量", "source": [
"source": [ {
{ "rank": "TOP1",
"rank": "TOP1", "name": "株机公司",
"name": "株机公司", "value": 18
"value": 96 },
}, {
{ "rank": "TOP2",
"rank": "TOP2", "name": "株洲所",
"name": "株洲所", "value": 18
"value": 34 },
}, {
{ "rank": "TOP3",
"rank": "TOP3", "name": "四方股份",
"name": "时代新材", "value": 20
"value": 19 },
}, {
{ "rank": "TOP4",
"rank": "TOP4", "name": "时代新材",
"name": "产投公司", "value": 12
"value": 16 },
}, {
{ "rank": "TOP5",
"rank": "TOP5", "name": "长江集团",
"name": "四方股份", "value": 10
"value": 12 }
} ]
] },
}, "c": {
"b": { "titleText": "生产用电动车停车场景数企业及场景数量",
"titleText": "电动汽车停车场场景数前五的企业及场景数量", "source": [
"source": [ {
{ "rank": "TOP1",
"rank": "TOP1", "name": "株机公司",
"name": "株机公司", "value": 82
"value": 18 },
}, {
{ "rank": "TOP2",
"rank": "TOP2", "name": "长客股份",
"name": "株洲所", "value": 63
"value": 18 },
}, {
{ "rank": "TOP3",
"rank": "TOP3", "name": "四方股份",
"name": "四方股份", "value": 32
"value": 20 },
}, {
{ "rank": "TOP4",
"rank": "TOP4", "name": "株洲所",
"name": "时代新材", "value": 24
"value": 12 },
}, {
{ "rank": "TOP5",
"rank": "TOP5", "name": "时代新材",
"name": "长江集团", "value": 22
"value": 10 }
} ]
]
},
"c": {
"titleText": "生产用电动车停放区场景数前五的企业及场景数量",
"source": [
{
"rank": "TOP1",
"name": "株机公司",
"value": 82
},
{
"rank": "TOP2",
"name": "长客股份",
"value": 63
},
{
"rank": "TOP3",
"name": "四方股份",
"value": 32
},
{
"rank": "TOP4",
"name": "株洲所",
"value": 24
},
{
"rank": "TOP5",
"name": "时代新材",
"value": 22
}
]
}
} }
} }
}, },
@ -330,7 +330,7 @@
{ {
"title": "调漆作业室", "title": "调漆作业室",
"label": "智控场景", "label": "智控场景",
"value": null, "value": 0,
"color": "#FFD700", "color": "#FFD700",
"image": "scene-control.png" "image": "scene-control.png"
} }
@ -419,40 +419,36 @@
} }
}, },
"T04": { "T04": {
"SceneDistribution": { "WorkshopScene": {
"a": { "a": {
"source": [ "source": [
{ {
"title": "危化品库", "name": "危化品库",
"label": "场景总数", "icon": "warehouse",
"value": 130, "metrics": [
"color": "#00E5FF", {
"image": "scene-total.png" "label": "场景总数",
"value": 130
},
{
"label": "智控场景",
"value": 0
}
]
}, },
{ {
"title": "危化品库", "name": "危废品库",
"label": "智控场景", "icon": "warehouse",
"value": 0, "metrics": [
"color": "#FFD700", {
"image": "scene-control.png" "label": "智控场景",
} "value": 152
] },
}, {
"b": { "label": "场景总数",
"source": [ "value": 0
{ }
"title": "危废品库", ]
"label": "场景总数",
"value": 152,
"color": "#00E5FF",
"image": "scene-total.png"
},
{
"title": "危废品库",
"label": "智控场景",
"value": 0,
"color": "#FFD700",
"image": "scene-control.png"
} }
] ]
} }
@ -462,32 +458,39 @@
"titleText": "危化品库场景数量前五的企业及场景数量", "titleText": "危化品库场景数量前五的企业及场景数量",
"source": [ "source": [
{ {
"company": "时代新材", "rank": "TOP1",
"quantity": 30 "name": "时代新材",
"value": 30
}, },
{ {
"company": "株洲所", "rank": "TOP2",
"quantity": 16 "name": "株洲所",
"value": 16
}, },
{ {
"company": "四方股份", "rank": "TOP3",
"quantity": 15 "name": "四方股份",
"value": 15
}, },
{ {
"company": "产投公司", "rank": "TOP4",
"quantity": 13 "name": "产投公司",
"value": 13
}, },
{ {
"company": "长江集团", "rank": "TOP5",
"quantity": 11 "name": "长江集团",
"value": 11
}, },
{ {
"company": "长客股份", "rank": "TOP6",
"quantity": 11 "name": "长客股份",
"value": 11
}, },
{ {
"company": "株机公司", "rank": "TOP7",
"quantity": 11 "name": "株机公司",
"value": 11
} }
] ]
}, },
@ -495,24 +498,29 @@
"titleText": "危废品库场景数量前五的企业及场景数量", "titleText": "危废品库场景数量前五的企业及场景数量",
"source": [ "source": [
{ {
"company": "时代新材", "rank": "TOP1",
"quantity": 27 "name": "时代新材",
"value": 27
}, },
{ {
"company": "株机公司", "rank": "TOP2",
"quantity": 26 "name": "株机公司",
"value": 26
}, },
{ {
"company": "株洲所", "rank": "TOP3",
"quantity": 20 "name": "株洲所",
"value": 20
}, },
{ {
"company": "产投公司", "rank": "TOP4",
"quantity": 16 "name": "产投公司",
"value": 16
}, },
{ {
"company": "长客股份", "rank": "TOP5",
"quantity": 12 "name": "长客股份",
"value": 12
} }
] ]
} }

9
src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue
View File

@ -103,6 +103,15 @@ watch(
{ deep: true, immediate: true } { deep: true, immediate: true }
) )
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
updateChartData(newData) updateChartData(newData)
}) })

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

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

@ -18,9 +18,22 @@
<n-dropdown v-if='option.isShowButton' trigger="hover" :options="dropdownOptions" @select="handleSelect"> <n-dropdown v-if='option.isShowButton' trigger="hover" :options="dropdownOptions" @select="handleSelect">
<div class="dropdown-button"> <div class="dropdown-button">
{{ selectedOption }} {{ selectedOption }}
<svg-icon icon-class="arrow-down" class="arrow-down-icon" /> <div class="arrow-down-icon">
<svg viewBox="0 0 1024 1024" width="14" height="14">
<path
d="M512 768c-6.3 0-12.6-2.4-17.4-7.3L285.3 551.4c-9.8-9.8-9.8-25.6 0-35.4s25.6-9.8 35.4 0L512 707.3l191.3-191.3c9.8-9.8 25.6-9.8 35.4 0s9.8 25.6 0 35.4L529.4 760.7c-4.8 4.9-11.1 7.3-17.4 7.3z"
fill="currentColor"></path>
</svg>
</div>
</div> </div>
</n-dropdown> </n-dropdown>
<!-- <n-dropdown v-if='option.isShowButton' trigger="hover" :options="dropdownOptions" @select="handleSelect">
<div class="dropdown-button">
{{ selectedOption }}
<svg-icon icon-class="arrow-down" class="arrow-down-icon" />
</div>
</n-dropdown> -->
</div> </div>
<div class="content"> <div class="content">
<ul> <ul>
@ -30,15 +43,15 @@
<span class="rank-icon"></span> <span class="rank-icon"></span>
{{ index + 1 }} {{ index + 1 }}
</span> </span>
<span class="name" :style="{ color: option.nameColor }">{{ item.enterpriseName }}</span> <span class="name" :style="{ color: option.nameColor }">{{ item.name }}</span>
</div> </div>
<div class="item-value"> <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>
<div class="progress-bar-wrapper"> <div class="progress-bar-wrapper">
<div class="progress-bar"> <div class="progress-bar">
<div class="progress" :style="{ <div class="progress" :style="{
width: calculateWidth(item.alarmCount), width: calculateWidth(item.value),
background: `linear-gradient(to right, ${option.barColorStart}, ${option.barColorEnd})` background: `linear-gradient(to right, ${option.barColorStart}, ${option.barColorEnd})`
}"></div> }"></div>
</div> </div>
@ -51,7 +64,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, PropType, onMounted } from 'vue' import { ref, computed, PropType, onMounted, watch } from 'vue'
import { option as configOption } from './config' import { option as configOption } from './config'
import SmallBorder from '../SmallBorder/index.vue' import SmallBorder from '../SmallBorder/index.vue'
import CustomSelect from './select.vue' import CustomSelect from './select.vue'
@ -80,11 +93,11 @@ const dropdownOptions = computed(() => {
// 修改：基于API数据计算进度条宽度 // 修改：基于API数据计算进度条宽度
const calculateWidth = (value: number) => { const calculateWidth = (value: number) => {
if (displayData.value.length === 0 || displayData.value[0].alarmCount === 0) { if (displayData.value.length === 0 || displayData.value[0].value === 0) {
return '0%' return '0%'
} }
const firstRowValue = displayData.value[0].alarmCount const firstRowValue = displayData.value[0].value
return `${(value / firstRowValue) * 100}%` // 当前行的alarmCount/第一行的alarmCount值 return `${(value / firstRowValue) * 100}%` // 当前行的value/第一行的value值
} }
const key = TopAlarmsConfig.key; const key = TopAlarmsConfig.key;
const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => { const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
@ -112,16 +125,32 @@ const fetchCorpsData = async (option: string) => {
const response: any = const response: any =
// await axiosInstance.get(`/awjt/screen/corpsFive/${option}/${props.chartConfig.option.sceneCode}`, { baseURL: '' }) // await axiosInstance.get(`/awjt/screen/corpsFive/${option}/${props.chartConfig.option.sceneCode}`, { baseURL: '' })
// if (response.state === true) { // if (response.state === true) {
// displayData.value = response.value || [] // displayData.value = response.value || []
// } else { // } else {
// console.error('API调用失败:', response) // console.error('API调用失败:', response)
// displayData.value = [] // displayData.value = []
// } // }
// 使用静态数据 // 使用静态数据
await getStaticData(key, props.chartConfig.option.componentIndexKey, props.chartConfig.option.sceneCode); await getStaticData(key, props.chartConfig.option.componentIndexKey, props.chartConfig.option.sceneCode);
displayData.value = response['source'] // 数据校验：检查响应是否存在且包含有效数据
props.chartConfig.option.titleText = response['titleText'] if (response && response['source'] && Array.isArray(response['source']) && response['source'].length > 0) {
// 检查新数据是否与现有数据相同（简单比较长度和第一项）
const isNewDataDifferent =
!displayData.value ||
displayData.value.length !== response['source'].length ||
JSON.stringify(displayData.value) !== JSON.stringify(response['source']);
// 只有当数据不为空且与现有数据不同时才更新
if (isNewDataDifferent) {
displayData.value = response['source'];
}
}
// 标题文本更新（即使数据相同也更新标题）
if (response && response['titleText']) {
props.chartConfig.option.titleText = response['titleText'];
}
} catch (error) { } catch (error) {
console.error('获取企业数据失败:', error) console.error('获取企业数据失败:', error)
displayData.value = [] displayData.value = []
@ -138,7 +167,20 @@ const handleSelectChange = async (value: any) => {
await fetchCorpsData(value) await fetchCorpsData(value)
} }
watch(
() => [
props.chartConfig.option.sceneCode,
props.chartConfig.option.componentIndexKey,
props.chartConfig.option.dataset
],
async () => {
await fetchCorpsData('day');
},
{
immediate: true,
deep: true
}
)
// 新增：组件挂载时初始化数据 // 新增：组件挂载时初始化数据

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

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

@ -225,52 +225,83 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <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 { option as configOption } from './config'
import { ParkingSceneConfig } from './index' import { ParkingSceneConfig } from './index'
import axios from 'axios'; import axios from 'axios';
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<{ option: typeof configOption }>, type: Object as PropType<{ option: typeof configOption }>,
required: true required: true
} }
}) })
const key = ParkingSceneConfig.key; const key = ParkingSceneConfig.key;
const option = computed(() => props.chartConfig.option) const option = computed(() => props.chartConfig.option)
const isFetching = ref(false) // 防止重复请求
// 获取静态数据
const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => { const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
let dataTemp = option.value.dataset
try { try {
const response = await axios.get('/staticData/static.json'); const response = await axios.get('/staticData/static.json');
if (response.data) { if (response.data) {
console.log('静态数据:', response.data); console.log('静态数据:', response.data);
dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source']; const dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
if (!dataTemp) { if (!dataTemp) {
console.warn(`Data not found for sceneCode: ${sceneCode}, key: ${key}, componentIndexKey: ${componentIndexKey}`); 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) { } 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( watch(
() => props.chartConfig.option.dataset, () => [
async (newData: any) => { props.chartConfig.option.sceneCode,
option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode); props.chartConfig.option.componentIndexKey
],
async () => {
await fetchData();
}, },
{ {
immediate: true, immediate: true,
deep: false deep: true
} }
) )
// 组件挂载时获取数据
onMounted(async () => { onMounted(async () => {
option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode); await fetchData();
}) })
</script> </script>
<style lang="scss" scoped> <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 { CreateComponentType } from '@/packages/index.d'
import { SceneDistributionConfig } from './index' import { SceneDistributionConfig } from './index'
import dataJson from './data.json' import dataJson from './data.json'
import { cloneDeep } from 'lodash'
export const option = { export const option = {
sceneCode: 'T06', sceneCode: 'T06',
@ -22,5 +23,5 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType { export default class Config extends PublicConfigClass implements CreateComponentType {
public key = SceneDistributionConfig.key public key = SceneDistributionConfig.key
public chartConfig = SceneDistributionConfig public chartConfig = SceneDistributionConfig
public option = option public option = cloneDeep(option)
} }

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

@ -197,7 +197,7 @@
</svg> </svg>
<div class="go-scene-distribution"> <div class="go-scene-distribution">
<div class="header-title">{{ option.titleText }}</div> <div class="header-title">场景分布概况</div>
<div class="content"> <div class="content">
@ -221,7 +221,7 @@
</template> </template>
<script setup lang="ts"> <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 { option as configOption } from './config'
import axios from 'axios' import axios from 'axios'
import { SceneDistributionConfig } from './index' import { SceneDistributionConfig } from './index'
@ -241,26 +241,68 @@ const getImageUrl = (name: string) => {
const key = SceneDistributionConfig.key; const key = SceneDistributionConfig.key;
// 获取静态数据
const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => { const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
let dataTemp = option.value.dataset
try { try {
const response = await axios.get('/staticData/static.json'); const response = await axios.get('/staticData/static.json');
if (response.data) { if (response.data) {
console.log('静态数据:', response.data); console.log('静态数据:', response.data);
dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source']; const dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
if (!dataTemp) { if (!dataTemp) {
console.warn(`Data not found for sceneCode: ${sceneCode}, key: ${key}, componentIndexKey: ${componentIndexKey}`); 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) { } catch (err) {
console.error('获取static.json失败:', 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 () => { onMounted(async () => {
option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode); await fetchData();
}) })
</script> </script>

7
src/packages/components/Charts/MyComponents/WorkshopScene/config.ts
View File

@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { WorkshopSceneConfig } from './index' import { WorkshopSceneConfig } from './index'
import dataJson from './data.json' import dataJson from './data.json'
import { cloneDeep } from 'lodash'
export enum FontWeightEnum { export enum FontWeightEnum {
NORMAL = '常规', NORMAL = '常规',
BOLD = '加粗', BOLD = '加粗',
@ -22,8 +23,10 @@ export const FontStyleObject = {
[FontStyleEnum.ITALIC]: 'italic', [FontStyleEnum.ITALIC]: 'italic',
} }
export const option = { export const option = {
sceneCode: 'T06',
componentIndexKey: "a",
dataset: dataJson.source, dataset: dataJson.source,
title: '场景分布概况', titleText: '场景分布概况',
titleColor: '#eee', titleColor: '#eee',
titleSize: 16, titleSize: 16,
iconColor: '#00E5FF', iconColor: '#00E5FF',
@ -48,5 +51,5 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType { export default class Config extends PublicConfigClass implements CreateComponentType {
public key = WorkshopSceneConfig.key public key = WorkshopSceneConfig.key
public chartConfig = WorkshopSceneConfig public chartConfig = WorkshopSceneConfig
public option = option public option = cloneDeep(option)
} }

10
src/packages/components/Charts/MyComponents/WorkshopScene/config.vue
View File

@ -1,5 +1,15 @@
<template> <template>
<collapse-item name="信息" :expanded="true"> <collapse-item name="信息" :expanded="true">
<setting-item-box name="场景 Code " :alone="true">
<setting-item>
<n-input v-model:value="optionData.sceneCode"></n-input>
</setting-item>
</setting-item-box>
<setting-item-box name="组件 key " :alone="true">
<setting-item>
<n-input v-model:value="optionData.componentIndexKey"></n-input>
</setting-item>
</setting-item-box>
<setting-item-box name="标题" :alone="true"> <setting-item-box name="标题" :alone="true">
<setting-item> <setting-item>
<n-input v-model:value="optionData.title" type="textarea" size="small"></n-input> <n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>

70
src/packages/components/Charts/MyComponents/WorkshopScene/index.vue
View File

@ -12,7 +12,7 @@
marginLeft: option.paddingX + 'px', marginLeft: option.paddingX + 'px',
marginTop: option.paddingY + 'px', marginTop: option.paddingY + 'px',
letterSpacing: option.letterSpacing + 'px' letterSpacing: option.letterSpacing + 'px'
}">{{ option.title }}</span> }">{{ option.titleText }}</span>
</div> </div>
</div> </div>
<a class="link" :style="{ color: option.linkColor }">{{ option.linkText }}</a> <a class="link" :style="{ color: option.linkColor }">{{ option.linkText }}</a>
@ -64,11 +64,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, computed } from 'vue' import { PropType, computed, onMounted, ref, watch } from 'vue'
import { option as configOption } from './config' import { option as configOption } from './config'
import bg1 from './assets/6.png' import bg1 from './assets/6.png'
import bg2 from './assets/04.png' import bg2 from './assets/04.png'
import SmallBorder from '../SmallBorder/index.vue' import SmallBorder from '../SmallBorder/index.vue'
import { WorkshopSceneConfig } from './index'
import axios from 'axios'
const backgrounds = [bg1, bg2] const backgrounds = [bg1, bg2]
@ -79,7 +81,71 @@ const props = defineProps({
} }
}) })
const option = computed(() => props.chartConfig.option) const option = computed(() => props.chartConfig.option)
const isFetching = ref(false) // 防止重复请求
const key = WorkshopSceneConfig.key
// 获取静态数据
const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
try {
const response = await axios.get('/staticData/static.json');
if (response.data) {
console.log('静态数据:', response.data);
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;
}
} catch (err) {
console.error('获取static.json失败:', err);
}
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.sceneCode,
props.chartConfig.option.componentIndexKey,
],
async () => {
await fetchData();
},
{
immediate: true,
deep: true
}
)
// 组件挂载时获取数据
onMounted(async () => {
await fetchData();
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>