|
|
@@ -1,16 +1,25 @@
|
|
|
<template>
|
|
|
- <el-dialog v-model="visible" :title="`指标数据 - ${title}`" width="850px" :close-on-click-modal="false" destroy-on-close>
|
|
|
+ <el-dialog v-model="visible" :title="`指标数据 - ${title}`" width="1000px" :close-on-click-modal="false" destroy-on-close>
|
|
|
<div v-if="visible">
|
|
|
<el-form :inline="true" class="toolbar">
|
|
|
<el-form-item>
|
|
|
<el-input v-model="query.searchValue" placeholder="输入指标值或原始值" clearable style="width: 160px" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="时间范围">
|
|
|
+ <el-form-item label="">
|
|
|
<el-date-picker v-model="query.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 380px" />
|
|
|
</el-form-item>
|
|
|
- <!-- <el-form-item label="维度筛选">
|
|
|
- <el-select v-model="dimensionSelectedText" style="width: 120px" placeholder="全部维度" />
|
|
|
- </el-form-item> -->
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-select v-model="dimensionsKey" style="width: 110px" placeholder="全部维度" clearable @change="handleDimensionChange">
|
|
|
+ <el-option v-for="item in dimensions" :key="item.code" :label="item.name" :value="item.code" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" v-if="dimensionsKey">
|
|
|
+ <el-date-picker v-if="dimensionsType === 'date'" v-model="dimensionsValue" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 140px" placeholder="选择日期" />
|
|
|
+ <el-select v-else-if="dimensionsType === 'text'" v-model="dimensionsValue" style="width: 120px" placeholder="选择维度值">
|
|
|
+ <el-option v-for="item in dimensionsValues" :key="item" :label="item.name" :value="item" />
|
|
|
+ </el-select>
|
|
|
+ <el-input v-else type="number" v-model="dimensionsValue" style="width: 120px" placeholder="输入维度值" />
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="">
|
|
|
<el-button type="primary" :icon="Filter" @click="fetchList(1)">筛选</el-button>
|
|
|
<!-- <el-button @click="exportData">导出</el-button> -->
|
|
|
@@ -21,25 +30,18 @@
|
|
|
<el-table-column label="时间" align="center" prop="collectionTime" width="180" />
|
|
|
<el-table-column v-if="detail.computeStrategy !== 'aggregation'" prop="value" :label="`指标值${detail.unit ? ' (' + detail.unit + ')' : ''}`" min-width="140" align="center" />
|
|
|
<template v-else>
|
|
|
- <el-table-column prop="maxValue" :label="`最大值${detail.unit ? ' (' + detail.unit + ')' : ''}`" align="center" />
|
|
|
- <el-table-column prop="minValue" :label="`最小值${detail.unit ? ' (' + detail.unit + ')' : ''}`" align="center" />
|
|
|
- <el-table-column prop="avgValue" :label="`平均值${detail.unit ? ' (' + detail.unit + ')' : ''}`" align="center" />
|
|
|
- <el-table-column prop="sumValue" :label="`总和${detail.unit ? ' (' + detail.unit + ')' : ''}`" align="center" />
|
|
|
- <el-table-column prop="countValue" label="数量值" align="center" />
|
|
|
+ <el-table-column prop="maxValue" :label="`最大值${detail.unit ? ' (' + detail.unit + ')' : ''}`" align="center" min-width="140" />
|
|
|
+ <el-table-column prop="minValue" :label="`最小值${detail.unit ? ' (' + detail.unit + ')' : ''}`" align="center" min-width="140" />
|
|
|
+ <el-table-column prop="avgValue" :label="`平均值${detail.unit ? ' (' + detail.unit + ')' : ''}`" align="center" min-width="140" />
|
|
|
+ <el-table-column prop="sumValue" :label="`总和${detail.unit ? ' (' + detail.unit + ')' : ''}`" align="center" min-width="140" />
|
|
|
+ <el-table-column prop="countValue" label="数量值" align="center" min-width="140" />
|
|
|
</template>
|
|
|
- <!-- <el-table-column label="原始值" width="120" align="left">
|
|
|
- <template #default="scope">{{ scope.row.rawValue ?? scope.row.originValue ?? "-" }}</template>
|
|
|
- </el-table-column> -->
|
|
|
- <!-- <el-table-column label="监测点" prop="monitorPoint" width="120" align="left"> </el-table-column>
|
|
|
- <el-table-column label="深度" prop="depth" width="120" align="left"> </el-table-column>
|
|
|
- <el-table-column label="设备" prop="device" width="120" align="left"> </el-table-column>
|
|
|
- <el-table-column v-for="k in dimKeys" :key="k" :label="dimNameMap[k] || k" min-width="120" show-overflow-tooltip>
|
|
|
- <template #default="scope">{{ (scope.row.dimensions && scope.row.dimensions[k]) ?? scope.row[k] ?? "-" }}</template>
|
|
|
- </el-table-column> -->
|
|
|
+
|
|
|
+ <el-table-column v-for="item in dimensions" :key="item.code" :label="item.name" align="center" :prop="`dimensionValues.${item.code}`" min-width="140" />
|
|
|
</el-table>
|
|
|
|
|
|
<div class="pager flex-end">
|
|
|
- <el-pagination background layout="prev, pager, next, ->, total, sizes" :page-sizes="[20, 50, 100, 200]" :total="total" :page-size="query.pageSize" :current-page="query.pageNum" @current-change="(p:number)=>fetchList(p)" @size-change="(s:number)=>{query.pageSize=s;fetchList(1)}" />
|
|
|
+ <el-pagination background layout="prev, pager, next, ->, total, sizes" :page-sizes="[1, 20, 50, 100]" :total="total" :page-size="query.pageSize" :current-page="query.pageNum" @current-change="(p:number)=>fetchList(p)" @size-change="(s:number)=>{query.pageSize=s;fetchList(1)}" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
@@ -53,6 +55,11 @@ import api from "/@/api/datahub";
|
|
|
|
|
|
const visible = ref(false);
|
|
|
const loading = ref(false);
|
|
|
+const dimensions = ref<any[]>([]);
|
|
|
+const dimensionsValues = ref<any[]>([]);
|
|
|
+const dimensionsKey = ref("");
|
|
|
+const dimensionsType = ref("");
|
|
|
+const dimensionsValue = ref("");
|
|
|
const code = ref("");
|
|
|
const title = ref("");
|
|
|
const detail = reactive<any>({}); // 详情含 unit/维度等
|
|
|
@@ -63,48 +70,35 @@ const total = ref(0);
|
|
|
const query = reactive({
|
|
|
searchValue: "",
|
|
|
keyWord: "",
|
|
|
+ dimensions: "",
|
|
|
year: "",
|
|
|
accurate: "h",
|
|
|
dateRange: [],
|
|
|
pageNum: 1,
|
|
|
- pageSize: 20,
|
|
|
+ pageSize: 10,
|
|
|
});
|
|
|
|
|
|
-const dimensionFilters = reactive<Record<string, any>>({});
|
|
|
+function handleDimensionChange(value: string) {
|
|
|
+ if (!value) {
|
|
|
+ dimensionsValues.value = [];
|
|
|
+ dimensionsValue.value = "";
|
|
|
+ dimensionsType.value = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
-const dimKeys = computed(() => {
|
|
|
- const set = new Set<string>();
|
|
|
- list.value.forEach((row: any) => {
|
|
|
- if (row?.dimensions && typeof row.dimensions === "object") {
|
|
|
- Object.keys(row.dimensions).forEach((k) => set.add(k));
|
|
|
- }
|
|
|
- });
|
|
|
- return Array.from(set);
|
|
|
-});
|
|
|
-const dimNameMap = computed<Record<string, string>>(() => {
|
|
|
- const map: Record<string, string> = {};
|
|
|
- (detail.dimensions || []).forEach((d: any) => {
|
|
|
- map[d.key || d.name] = d.name || d.key;
|
|
|
+ dimensionsType.value = dimensions.value.find((item) => item.code === value)?.valueType || "";
|
|
|
+
|
|
|
+ api.indicator.getDimensionValues({ code: code.value, dimensionCode: value }).then((res: any) => {
|
|
|
+ dimensionsValues.value = res?.values || [];
|
|
|
});
|
|
|
- return map;
|
|
|
-});
|
|
|
-const dimensionSelectedText = computed(() => {
|
|
|
- const entries = Object.entries(dimensionFilters).filter(([, v]) => v !== "" && v !== undefined && v !== null);
|
|
|
- if (!entries.length) return "全部维度";
|
|
|
- return entries.map(([k, v]) => `${dimNameMap.value[k] || k}:${v}`).join("；");
|
|
|
-});
|
|
|
+}
|
|
|
|
|
|
function buildParams() {
|
|
|
const params: any = {
|
|
|
...query,
|
|
|
code: code.value,
|
|
|
};
|
|
|
- // 维度 JSON 字符串
|
|
|
- const dims: Record<string, any> = {};
|
|
|
- Object.entries(dimensionFilters).forEach(([k, v]) => {
|
|
|
- if (v !== "" && v !== undefined && v !== null) dims[k] = v;
|
|
|
- });
|
|
|
- if (Object.keys(dims).length) params.dimensions = JSON.stringify(dims);
|
|
|
+ if (dimensionsKey.value && dimensionsValue.value) params.dimensions = { [dimensionsKey.value]: dimensionsValue.value };
|
|
|
return params;
|
|
|
}
|
|
|
|
|
|
@@ -117,6 +111,11 @@ function fetchDetail() {
|
|
|
}
|
|
|
|
|
|
function fetchList(p?: number) {
|
|
|
+ if (dimensionsKey.value && !dimensionsValue.value) {
|
|
|
+ ElMessage.warning("请选择或输入维度值");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
if (typeof p === "number") query.pageNum = p;
|
|
|
loading.value = true;
|
|
|
const params = buildParams();
|
|
|
@@ -136,16 +135,12 @@ function open(row: any) {
|
|
|
code.value = row?.code || "";
|
|
|
title.value = `${row?.name || "-"} (${code.value})`;
|
|
|
visible.value = true;
|
|
|
+ dimensions.value = row?.dimensions || [];
|
|
|
// 清空筛选
|
|
|
- Object.assign(query, { searchValue: "", keyWord: "", year: "", startTime: "", endTime: "", accurate: "", accurateRanges: "", orderBy: "", pageNum: 1, pageSize: 20 });
|
|
|
- Object.keys(dimensionFilters).forEach((k) => delete (dimensionFilters as any)[k]);
|
|
|
+ Object.assign(query, { searchValue: "", keyWord: "", year: "", startTime: "", endTime: "", accurate: "", accurateRanges: "", orderBy: "", pageNum: 1, pageSize: 10 });
|
|
|
fetchDetail().then(() => fetchList(1));
|
|
|
}
|
|
|
|
|
|
-function exportData() {
|
|
|
- ElMessage.info("导出功能请在接口确定后接入");
|
|
|
-}
|
|
|
-
|
|
|
defineExpose({ open });
|
|
|
</script>
|
|
|
|
