feat(图表配置): 为危险化学品空间图表添加场景ID支持
- 在图表配置文件中添加sceneId字段 - 修改API调用路径以支持场景ID参数 - 简化配置界面，统一使用场景ID输入框
This commit is contained in:
parent
bd6c723b54
commit
56957276f1
@ -2,7 +2,7 @@
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.sceneId" type="textarea" size="small"></n-input>
|
||||
<n-input v-model:value="optionData.sceneId" ></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
@ -12,13 +12,9 @@
|
||||
import { PropType } from 'vue'
|
||||
import { option } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import config from './config'
|
||||
|
||||
defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
},
|
||||
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
|
||||
@ -57,6 +57,7 @@ export const seriesItem = {
|
||||
}
|
||||
}
|
||||
export const option = {
|
||||
sceneId: '',
|
||||
dateTime: {
|
||||
selectValue: 'day',
|
||||
dataset: [
|
||||
|
||||
@ -1,61 +1,22 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number v-model:value="item.lineStyle.width" :min="1" :max="100" size="small"
|
||||
placeholder="自动计算"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="item.symbolSize" :min="1" :max="100" size="small"
|
||||
placeholder="自动计算"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select v-model:value="item.label.position" :options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' }
|
||||
]" />
|
||||
<n-input v-model:value="optionData.sceneId" ></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { PropType } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -82,7 +82,7 @@ const selectedTimeRange = ref('day')
|
||||
// API调用函数
|
||||
const fetchChartData = async (option: string) => {
|
||||
try {
|
||||
const response:any = await axiosInstance.get(`/awjt/screen/handleByOption/${option}`,{baseURL:''})
|
||||
const response:any = await axiosInstance.get(`/awjt/screen/handleByOption/${option}/${props.chartConfig.option.sceneId}`,{baseURL:''})
|
||||
if (response.state === true) {
|
||||
return response.value || []
|
||||
} else {
|
||||
|
||||
@ -3,6 +3,7 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TopAlarmsConfig } from './index'
|
||||
import dataJson from './data.json'
|
||||
export const option = {
|
||||
sceneId: '',
|
||||
dateTime: {
|
||||
selectValue: 'day',
|
||||
dataset: [
|
||||
|
||||
@ -1,26 +1,20 @@
|
||||
<template>
|
||||
<div class="go-top-alarms-config">
|
||||
<n-form-item label="标题">
|
||||
<n-input v-model:value="option.title" />
|
||||
</n-form-item>
|
||||
<n-form-item label="标题大小">
|
||||
<n-input-number v-model:value="option.titleSize" />
|
||||
</n-form-item>
|
||||
<n-form-item label="下拉选项">
|
||||
<n-dynamic-input v-model:value="option.dropdownOptions" placeholder="请输入选项" />
|
||||
</n-form-item>
|
||||
<n-form-item label="默认选项">
|
||||
<n-input v-model:value="option.dropdownDefault" />
|
||||
</n-form-item>
|
||||
</div>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.sceneId" ></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
defineProps({
|
||||
option: {
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@ const calculateWidth = (value: number) => {
|
||||
// 新增：API调用函数
|
||||
const fetchCorpsData = async (option: string) => {
|
||||
try {
|
||||
const response: any = await axiosInstance.get(`/awjt/screen/corpsFive/${option}`, { baseURL: '' })
|
||||
const response: any = await axiosInstance.get(`/awjt/screen/corpsFive/${option}/${props.chartConfig.option.sceneId}`, { baseURL: '' })
|
||||
if (response.state === true) {
|
||||
displayData.value = response.value || []
|
||||
} else {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user