|
@@ -23,8 +23,11 @@ const iconSize = ref(20) // 图标的尺寸
|
|
|
// 表格数据
|
|
|
const tableDataList = reactive<Array<any>>([])
|
|
|
|
|
|
-const loading = ref<Boolean>(true) // 是否在加载
|
|
|
-const dataState = ref<Boolean>(false) //数据是否加载成功
|
|
|
+// 数据的加载情况
|
|
|
+const loadDataState = reactive({
|
|
|
+ loading: true,
|
|
|
+ state: false
|
|
|
+})
|
|
|
|
|
|
// 配置表格分页数据
|
|
|
const paginationConfig = reactive<TablePaginationSetting>({
|
|
@@ -46,7 +49,7 @@ const chartInfo = reactive<OptionsProps>({
|
|
|
legendData: [],
|
|
|
xAxisData: [],
|
|
|
seriesData: [],
|
|
|
- loadingState: ref(loading) as unknown as boolean
|
|
|
+ loadingState: loadDataState.loading
|
|
|
})
|
|
|
|
|
|
/**
|
|
@@ -88,8 +91,10 @@ const createTableData = (data: any) => {
|
|
|
// 把所有的表格需要的数据假如valInfo,其中index字段需要单独拿出来用x轴的信息填充
|
|
|
props.resDataFieldsInfo['values'].map((key: string) => {
|
|
|
valInfo[key] = Object.values(data[key])
|
|
|
+ // console.log(data[key])
|
|
|
})
|
|
|
valInfo['index'] = xInfo
|
|
|
+ // console.log(valInfo)
|
|
|
// 生成表格数据
|
|
|
let newList = reactive<Array<any>>([])
|
|
|
|
|
@@ -98,14 +103,13 @@ const createTableData = (data: any) => {
|
|
|
let fieldList = tableFieldsInfo.map((field) => field.name)
|
|
|
|
|
|
// 生成每一行的数据
|
|
|
- xInfo.map(() => {
|
|
|
+ for (let i = 0; i < xInfo.length; i++) {
|
|
|
let newItem: any = {}
|
|
|
- fieldList.map((item, index) => {
|
|
|
- newItem[item] = valInfo[item][index]
|
|
|
+ fieldList.map((item) => {
|
|
|
+ newItem[item] = valInfo[item][i]
|
|
|
})
|
|
|
newList.push(newItem)
|
|
|
- })
|
|
|
-
|
|
|
+ }
|
|
|
tableDataList.splice(0, tableDataList.length, ...newList)
|
|
|
paginationConfig.total = xInfo.length
|
|
|
}
|
|
@@ -139,7 +143,7 @@ const getData = async (type: number) => {
|
|
|
.post(props.requestConfig.url, { ...props.requestConfig.otherOptions, type })
|
|
|
.then((info) => {
|
|
|
let data = info.data
|
|
|
- dataState.value = true
|
|
|
+ loadDataState.state = true
|
|
|
// 生成表格字段
|
|
|
createTableField()
|
|
|
// 生成表格数据
|
|
@@ -160,11 +164,11 @@ const getData = async (type: number) => {
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
- dataState.value = false
|
|
|
+ loadDataState.state = false
|
|
|
console.log(err)
|
|
|
})
|
|
|
.finally(() => {
|
|
|
- loading.value = false
|
|
|
+ loadDataState.loading = false
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -195,8 +199,10 @@ watch(
|
|
|
deep: true
|
|
|
}
|
|
|
)
|
|
|
-getData(1)
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
+ if (!props.waitTimeSelect) getData(1)
|
|
|
+
|
|
|
if (props.tabInfo) activeTab.value = props.tabInfo[0].name
|
|
|
})
|
|
|
</script>
|
|
@@ -229,7 +235,7 @@ onMounted(() => {
|
|
|
<div class="chartContent" v-if="selectShape === 1">
|
|
|
<div class="yesterDayDataBox">
|
|
|
<StatisticText
|
|
|
- v-if="staticFields && dataState"
|
|
|
+ v-if="staticFields && loadDataState.state"
|
|
|
:fields-info="staticFields"
|
|
|
:value-class="'chartStaticValue'"
|
|
|
></StatisticText>
|
|
@@ -240,7 +246,7 @@ onMounted(() => {
|
|
|
:legend-data="chartInfo.legendData"
|
|
|
:series-data="chartInfo.seriesData"
|
|
|
:x-axis-data="chartInfo.xAxisData"
|
|
|
- :loading-state="chartInfo.loadingState"
|
|
|
+ :loading-state="loadDataState.loading"
|
|
|
class="chart"
|
|
|
></TimeLineChart>
|
|
|
</div>
|
|
@@ -248,8 +254,8 @@ onMounted(() => {
|
|
|
<Table
|
|
|
ref="chartTable"
|
|
|
v-if="props.needTable"
|
|
|
+ :loading-state="loadDataState.loading"
|
|
|
:data-list="tableDataList"
|
|
|
- :data-loading="loading"
|
|
|
:need-rowindex="true"
|
|
|
:need-average="false"
|
|
|
:need-right-tools="false"
|