大屏项目初始化

This commit is contained in:
2026-03-11 21:53:42 +08:00
parent 8069e437dc
commit 429fe75039
4 changed files with 176 additions and 118 deletions

View File

@@ -5,11 +5,12 @@
<div class="work-section work-top-header"> <div class="work-section work-top-header">
<div class="work-card full-card"> <div class="work-card full-card">
<div class="chart-top-inner"> <div class="chart-top-inner">
<h2>系统可视化大屏指标配置</h2> <h2>财务可视化大屏指标配置</h2>
<div class="btn-group"> <div class="btn-group">
<el-button type="primary" size="default" @click="handleSave" <el-button type="primary" size="default" @click="handleSave"
:loading="saveLoading" :disabled="saveLoading">保存</el-button> :loading="saveLoading" :disabled="saveLoading">保存</el-button>
<el-button type="warning" size="default" @click="handleReset">重置</el-button> <el-button type="warning" size="default" @click="handleReset">重置</el-button>
<el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
</div> </div>
</div> </div>
</div> </div>
@@ -225,6 +226,12 @@ const metric7 = ref([]);
const metric8 = ref([]); const metric8 = ref([]);
const metric9 = ref([]); const metric9 = ref([]);
const gridOriginalChartId = ref({
1: null, 2: null, 3: null, 4: null,
5: null, 6: null, 7: null, 8: null, 9: null
});
const metricHistory = ref({});
const saveLoading = ref(false); const saveLoading = ref(false);
const rawChartData = ref([]); const rawChartData = ref([]);
const searchKey = ref(''); const searchKey = ref('');
@@ -261,6 +268,16 @@ const isMetricUsed = (metricId) => {
); );
}; };
const findGridNumByChartId = (chartId) => {
const arr = getAllMetricArrays();
for (let i = 0; i < arr.length; i++) {
if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
return i + 1;
}
}
return null;
};
const handleDragStart = (e, item) => { const handleDragStart = (e, item) => {
dragItem.value = item; dragItem.value = item;
e.dataTransfer.setData('text/plain', JSON.stringify(item)); e.dataTransfer.setData('text/plain', JSON.stringify(item));
@@ -278,6 +295,9 @@ const handleDrop = (e, gridNum) => {
if (!targetArr) return; if (!targetArr) return;
const currentChartId = dragItem.value.chartId; const currentChartId = dragItem.value.chartId;
const sourceGrid = findGridNumByChartId(currentChartId);
const targetOldItem = targetArr.value[0] || null;
getAllMetricArrays().forEach((arr, index) => { getAllMetricArrays().forEach((arr, index) => {
const pos = index + 1; const pos = index + 1;
if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) { if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) {
@@ -285,18 +305,19 @@ const handleDrop = (e, gridNum) => {
} }
}); });
const originalSort = dragItem.value.sort || 0; const oldSort = sourceGrid || metricHistory.value[currentChartId] || 0;
const currentFixedOldId = targetArr.value[0]?.fixedOldChartId || currentChartId; const oldChartId = gridOriginalChartId.value[gridNum] || targetOldItem?.chartId || currentChartId;
const newItem = { const newItem = {
...dragItem.value, ...dragItem.value,
sort: gridNum, sort: gridNum,
oldSort: originalSort, oldSort: oldSort,
fixedOldChartId: currentFixedOldId, fixedOldChartId: oldChartId,
oldChartId: currentFixedOldId oldChartId: oldChartId
}; };
targetArr.value = [newItem]; targetArr.value = [newItem];
metricHistory.value[currentChartId] = gridNum;
dragItem.value = null; dragItem.value = null;
}; };
@@ -314,6 +335,11 @@ const handleReset = () => {
ElMessage.info('已重置所有指标'); ElMessage.info('已重置所有指标');
}; };
const handleClearAll = () => {
getAllMetricArrays().forEach(arr => arr.value = []);
ElMessage.info('已清空所有格子');
};
const handleSave = async () => { const handleSave = async () => {
saveLoading.value = true; saveLoading.value = true;
const saveData = getAllMetricArrays().map((arr, index) => { const saveData = getAllMetricArrays().map((arr, index) => {
@@ -325,7 +351,7 @@ const handleSave = async () => {
oldChartId: currentItem?.fixedOldChartId || null, oldChartId: currentItem?.fixedOldChartId || null,
chartName: currentItem?.chartName || '', chartName: currentItem?.chartName || '',
chartCode: 'erp', chartCode: 'erp',
oldSort: currentItem?.oldSort || 0, oldSort: currentItem?.oldSort || gridNum,
color: currentItem?.color || '' color: currentItem?.color || ''
}; };
}).filter(item => item.chartId); }).filter(item => item.chartId);
@@ -337,7 +363,7 @@ const handleSave = async () => {
} catch (error) { } catch (error) {
console.error('保存失败:', error); console.error('保存失败:', error);
} finally { } finally {
getChartList(); getChartList();
saveLoading.value = false; saveLoading.value = false;
} }
}; };
@@ -353,18 +379,25 @@ async function getChartList() {
const res = await getChartListAll(reqParams); const res = await getChartListAll(reqParams);
rawChartData.value = res || []; rawChartData.value = res || [];
metricHistory.value = {};
Object.keys(gridOriginalChartId.value).forEach(key => {
gridOriginalChartId.value[key] = null;
});
rawChartData.value.forEach(item => { rawChartData.value.forEach(item => {
const sortNum = item.sort || 0; const sortNum = item.sort || 0;
if (sortNum >= 1 && sortNum <= 9) { if (sortNum >= 1 && sortNum <= 9) {
const targetArr = getMetricArrByGridNum(sortNum); const targetArr = getMetricArrByGridNum(sortNum);
if (targetArr) { if (targetArr) {
gridOriginalChartId.value[sortNum] = item.chartId;
targetArr.value = [{ targetArr.value = [{
...item, ...item,
sort: sortNum, sort: sortNum,
oldSort: item.sort, oldSort: 0,
fixedOldChartId: item.chartId, fixedOldChartId: item.chartId,
oldChartId: item.chartId oldChartId: item.chartId
}]; }];
metricHistory.value[item.chartId] = sortNum;
} }
} }
}); });

View File

@@ -10,6 +10,7 @@
<el-button type="primary" size="default" @click="handleSave" <el-button type="primary" size="default" @click="handleSave"
:loading="saveLoading" :disabled="saveLoading">保存</el-button> :loading="saveLoading" :disabled="saveLoading">保存</el-button>
<el-button type="warning" size="default" @click="handleReset">重置</el-button> <el-button type="warning" size="default" @click="handleReset">重置</el-button>
<el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
</div> </div>
</div> </div>
</div> </div>
@@ -171,6 +172,12 @@ const metric7 = ref([]);
const metric8 = ref([]); const metric8 = ref([]);
const metric9 = ref([]); const metric9 = ref([]);
const gridOriginalChartId = ref({
1: null, 2: null, 3: null, 4: null,
5: null, 6: null, 7: null, 8: null, 9: null
});
const metricHistory = ref({});
const saveLoading = ref(false); const saveLoading = ref(false);
const rawChartData = ref([]); const rawChartData = ref([]);
const searchKey = ref(''); const searchKey = ref('');
@@ -207,6 +214,16 @@ const isMetricUsed = (metricId) => {
); );
}; };
const findGridNumByChartId = (chartId) => {
const arr = getAllMetricArrays();
for (let i = 0; i < arr.length; i++) {
if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
return i + 1;
}
}
return null;
};
const handleDragStart = (e, item) => { const handleDragStart = (e, item) => {
dragItem.value = item; dragItem.value = item;
e.dataTransfer.setData('text/plain', JSON.stringify(item)); e.dataTransfer.setData('text/plain', JSON.stringify(item));
@@ -217,32 +234,37 @@ const handleDragEnd = (e) => {
e.target.style.opacity = '1'; e.target.style.opacity = '1';
}; };
const handleDrop = (e, gridNum) => { const handleDrop = (e, targetGrid) => {
e.preventDefault(); e.preventDefault();
if (!dragItem.value) return; if (!dragItem.value) return;
const targetArr = getMetricArrByGridNum(gridNum);
if (!targetArr) return;
const currentChartId = dragItem.value.chartId;
const dragChartId = dragItem.value.chartId;
const sourceGrid = findGridNumByChartId(dragChartId);
const targetArr = getMetricArrByGridNum(targetGrid);
const targetOldItem = targetArr.value[0] || null;
const oldSort = sourceGrid || metricHistory.value[dragChartId] || 0;
getAllMetricArrays().forEach((arr, index) => { getAllMetricArrays().forEach((arr, index) => {
const pos = index + 1; const gridNum = index + 1;
if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) { if (gridNum !== targetGrid) {
arr.value = []; arr.value = arr.value.filter(i => i.chartId !== dragChartId);
} }
}); });
const originalSort = dragItem.value.sort || 0;
const currentFixedOldId = targetArr.value[0]?.fixedOldChartId || currentChartId;
const newItem = { const newItem = {
...dragItem.value, ...dragItem.value,
sort: gridNum, sort: targetGrid,
oldSort: originalSort, oldSort: oldSort,
fixedOldChartId: currentFixedOldId, chartId: dragChartId,
oldChartId: currentFixedOldId oldChartId: gridOriginalChartId.value[targetGrid] || targetOldItem?.chartId || null,
}; };
targetArr.value = [newItem]; targetArr.value = [newItem];
metricHistory.value[dragChartId] = targetGrid;
if (sourceGrid && sourceGrid !== targetGrid) {
const sourceArr = getMetricArrByGridNum(sourceGrid);
sourceArr.value = [];
}
dragItem.value = null; dragItem.value = null;
}; };
@@ -260,6 +282,11 @@ const handleReset = () => {
ElMessage.info('已重置所有指标'); ElMessage.info('已重置所有指标');
}; };
const handleClearAll = () => {
getAllMetricArrays().forEach(arr => arr.value = []);
ElMessage.info('已清空所有格子');
};
const handleSave = async () => { const handleSave = async () => {
saveLoading.value = true; saveLoading.value = true;
const saveData = getAllMetricArrays().map((arr, index) => { const saveData = getAllMetricArrays().map((arr, index) => {
@@ -268,10 +295,10 @@ const handleSave = async () => {
return { return {
sort: gridNum, sort: gridNum,
chartId: currentItem?.chartId || null, chartId: currentItem?.chartId || null,
oldChartId: currentItem?.fixedOldChartId || null, oldChartId: currentItem?.oldChartId || null,
chartName: currentItem?.chartName || '', chartName: currentItem?.chartName || '',
chartCode: 'sys', chartCode: 'sys',
oldSort: currentItem?.oldSort || 0, oldSort: currentItem?.oldSort || gridNum,
color: currentItem?.color || '' color: currentItem?.color || ''
}; };
}).filter(item => item.chartId); }).filter(item => item.chartId);
@@ -283,7 +310,7 @@ const handleSave = async () => {
} catch (error) { } catch (error) {
console.error('保存失败:', error); console.error('保存失败:', error);
} finally { } finally {
getChartList(); getChartList();
saveLoading.value = false; saveLoading.value = false;
} }
}; };
@@ -298,19 +325,24 @@ async function getChartList() {
const reqParams = { chartCode: 'sys' }; const reqParams = { chartCode: 'sys' };
const res = await getChartListAll(reqParams); const res = await getChartListAll(reqParams);
rawChartData.value = res || []; rawChartData.value = res || [];
metricHistory.value = {};
Object.keys(gridOriginalChartId.value).forEach(key => {
gridOriginalChartId.value[key] = null;
});
rawChartData.value.forEach(item => { rawChartData.value.forEach(item => {
const sortNum = item.sort || 0; const sortNum = item.sort || 0;
if (sortNum >= 1 && sortNum <= 9) { if (sortNum >= 1 && sortNum <= 9) {
const targetArr = getMetricArrByGridNum(sortNum); const targetArr = getMetricArrByGridNum(sortNum);
if (targetArr) { if (targetArr) {
gridOriginalChartId.value[sortNum] = item.chartId;
targetArr.value = [{ targetArr.value = [{
...item, ...item,
sort: sortNum, sort: sortNum,
oldSort: item.sort, oldSort: 0,
fixedOldChartId: item.chartId, chartId: item.chartId,
oldChartId: item.chartId oldChartId: item.chartId
}]; }];
metricHistory.value[item.chartId] = sortNum;
} }
} }
}); });
@@ -320,6 +352,7 @@ async function getChartList() {
} }
} }
// 初始化加载数据
onMounted(async () => { onMounted(async () => {
await getChartList(); await getChartList();
}); });

View File

@@ -7,9 +7,9 @@
<div class="chart-top-inner"> <div class="chart-top-inner">
<h2>工作可视化大屏指标配置</h2> <h2>工作可视化大屏指标配置</h2>
<div class="btn-group"> <div class="btn-group">
<el-button type="primary" size="default" @click="handleSave" <el-button type="primary" size="default" @click="handleSave" :loading="saveLoading" :disabled="saveLoading">保存</el-button>
:loading="saveLoading" :disabled="saveLoading">保存</el-button>
<el-button type="warning" size="default" @click="handleReset">重置</el-button> <el-button type="warning" size="default" @click="handleReset">重置</el-button>
<el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
</div> </div>
</div> </div>
</div> </div>
@@ -18,11 +18,7 @@
<div class="work-col work-col-1-3 work-left-col"> <div class="work-col work-col-1-3 work-left-col">
<div class="work-card work-card-1-3"> <div class="work-card work-card-1-3">
<span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span> <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
<div <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
class="grid-content"
@drop="(e) => handleDrop(e, 1)"
@dragover="(e) => e.preventDefault()"
>
<div v-if="metric1.length > 0" class="metric-tag"> <div v-if="metric1.length > 0" class="metric-tag">
<span class="sort-num">指标{{1}}</span> <span class="sort-num">指标{{1}}</span>
{{ metric1[0].chartName }} {{ metric1[0].chartName }}
@@ -33,11 +29,7 @@
</div> </div>
<div class="work-card work-card-1-3"> <div class="work-card work-card-1-3">
<span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span> <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
<div <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
class="grid-content"
@drop="(e) => handleDrop(e, 2)"
@dragover="(e) => e.preventDefault()"
>
<div v-if="metric2.length > 0" class="metric-tag"> <div v-if="metric2.length > 0" class="metric-tag">
<span class="sort-num">指标{{2}}</span> <span class="sort-num">指标{{2}}</span>
{{ metric2[0].chartName }} {{ metric2[0].chartName }}
@@ -48,11 +40,7 @@
</div> </div>
<div class="work-card work-card-1-3"> <div class="work-card work-card-1-3">
<span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span> <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
<div <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
class="grid-content"
@drop="(e) => handleDrop(e, 3)"
@dragover="(e) => e.preventDefault()"
>
<div v-if="metric3.length > 0" class="metric-tag"> <div v-if="metric3.length > 0" class="metric-tag">
<span class="sort-num">指标{{3}}</span> <span class="sort-num">指标{{3}}</span>
{{ metric3[0].chartName }} {{ metric3[0].chartName }}
@@ -65,11 +53,7 @@
<div class="work-col work-col-1-3 work-middle-col"> <div class="work-col work-col-1-3 work-middle-col">
<div class="work-card work-card-2-3"> <div class="work-card work-card-2-3">
<span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span> <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
<div <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
class="grid-content"
@drop="(e) => handleDrop(e, 4)"
@dragover="(e) => e.preventDefault()"
>
<div v-if="metric4.length > 0" class="metric-tag"> <div v-if="metric4.length > 0" class="metric-tag">
<span class="sort-num">指标{{4}}</span> <span class="sort-num">指标{{4}}</span>
{{ metric4[0].chartName }} {{ metric4[0].chartName }}
@@ -80,11 +64,7 @@
</div> </div>
<div class="work-card work-card-1-3"> <div class="work-card work-card-1-3">
<span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span> <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
<div <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
class="grid-content"
@drop="(e) => handleDrop(e, 5)"
@dragover="(e) => e.preventDefault()"
>
<div v-if="metric5.length > 0" class="metric-tag"> <div v-if="metric5.length > 0" class="metric-tag">
<span class="sort-num">指标{{5}}</span> <span class="sort-num">指标{{5}}</span>
{{ metric5[0].chartName }} {{ metric5[0].chartName }}
@@ -97,11 +77,7 @@
<div class="work-col work-col-1-3 work-right-col"> <div class="work-col work-col-1-3 work-right-col">
<div class="work-card work-card-1-3"> <div class="work-card work-card-1-3">
<span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span> <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
<div <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
class="grid-content"
@drop="(e) => handleDrop(e, 6)"
@dragover="(e) => e.preventDefault()"
>
<div v-if="metric6.length > 0" class="metric-tag"> <div v-if="metric6.length > 0" class="metric-tag">
<span class="sort-num">指标{{6}}</span> <span class="sort-num">指标{{6}}</span>
{{ metric6[0].chartName }} {{ metric6[0].chartName }}
@@ -112,11 +88,7 @@
</div> </div>
<div class="work-card work-card-1-3"> <div class="work-card work-card-1-3">
<span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span> <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
<div <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
class="grid-content"
@drop="(e) => handleDrop(e, 7)"
@dragover="(e) => e.preventDefault()"
>
<div v-if="metric7.length > 0" class="metric-tag"> <div v-if="metric7.length > 0" class="metric-tag">
<span class="sort-num">指标{{7}}</span> <span class="sort-num">指标{{7}}</span>
{{ metric7[0].chartName }} {{ metric7[0].chartName }}
@@ -127,11 +99,7 @@
</div> </div>
<div class="work-card work-card-1-3"> <div class="work-card work-card-1-3">
<span v-if="metric8.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(8)">×</span> <span v-if="metric8.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(8)">×</span>
<div <div class="grid-content" @drop="(e) => handleDrop(e, 8)" @dragover="(e) => e.preventDefault()">
class="grid-content"
@drop="(e) => handleDrop(e, 8)"
@dragover="(e) => e.preventDefault()"
>
<div v-if="metric8.length > 0" class="metric-tag"> <div v-if="metric8.length > 0" class="metric-tag">
<span class="sort-num">指标{{8}}</span> <span class="sort-num">指标{{8}}</span>
{{ metric8[0].chartName }} {{ metric8[0].chartName }}
@@ -148,15 +116,7 @@
<el-input v-model="searchKey" placeholder="搜索指标项..." size="small"></el-input> <el-input v-model="searchKey" placeholder="搜索指标项..." size="small"></el-input>
</div> </div>
<div class="metric-list"> <div class="metric-list">
<div <div v-for="item in allMetricList" :key="item.chartId" class="metric-item" :class="{ active: isMetricUsed(item.chartId) }" draggable="true" @dragstart="(e) => handleDragStart(e, item)" @dragend="handleDragEnd">
v-for="item in allMetricList"
:key="item.chartId"
class="metric-item"
:class="{ active: isMetricUsed(item.chartId) }"
draggable="true"
@dragstart="(e) => handleDragStart(e, item)"
@dragend="handleDragEnd"
>
<span>{{ item.chartName }}</span> <span>{{ item.chartName }}</span>
<span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span> <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
</div> </div>
@@ -180,6 +140,12 @@ const metric6 = ref([]);
const metric7 = ref([]); const metric7 = ref([]);
const metric8 = ref([]); const metric8 = ref([]);
const gridOriginalChartId = ref({
1: null, 2: null, 3: null, 4: null,
5: null, 6: null, 7: null, 8: null
});
const metricHistory = ref({});
const saveLoading = ref(false); const saveLoading = ref(false);
const rawChartData = ref([]); const rawChartData = ref([]);
const searchKey = ref(''); const searchKey = ref('');
@@ -216,6 +182,16 @@ const isMetricUsed = (metricId) => {
); );
}; };
const findGridNumByChartId = (chartId) => {
const arr = getAllMetricArrays();
for (let i = 0; i < arr.length; i++) {
if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
return i + 1;
}
}
return null;
};
const handleDragStart = (e, item) => { const handleDragStart = (e, item) => {
dragItem.value = item; dragItem.value = item;
e.dataTransfer.setData('text/plain', JSON.stringify(item)); e.dataTransfer.setData('text/plain', JSON.stringify(item));
@@ -226,32 +202,37 @@ const handleDragEnd = (e) => {
e.target.style.opacity = '1'; e.target.style.opacity = '1';
}; };
const handleDrop = (e, gridNum) => { const handleDrop = (e, targetGrid) => {
e.preventDefault(); e.preventDefault();
if (!dragItem.value) return; if (!dragItem.value) return;
const targetArr = getMetricArrByGridNum(gridNum); const dragChartId = dragItem.value.chartId;
if (!targetArr) return; const sourceGrid = findGridNumByChartId(dragChartId);
const currentChartId = dragItem.value.chartId; const targetArr = getMetricArrByGridNum(targetGrid);
const targetOldItem = targetArr.value[0] || null;
const oldSort = sourceGrid || metricHistory.value[dragChartId] || 0;
getAllMetricArrays().forEach((arr, index) => { getAllMetricArrays().forEach((arr, index) => {
const pos = index + 1; const gridNum = index + 1;
if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) { if (gridNum !== targetGrid) {
arr.value = []; arr.value = arr.value.filter(i => i.chartId !== dragChartId);
} }
}); });
const originalSort = dragItem.value.sort || 0;
const currentFixedOldId = targetArr.value[0]?.fixedOldChartId || currentChartId;
const newItem = { const newItem = {
...dragItem.value, ...dragItem.value,
sort: gridNum, sort: targetGrid,
oldSort: originalSort, oldSort: oldSort,
fixedOldChartId: currentFixedOldId, chartId: dragChartId,
oldChartId: currentFixedOldId oldChartId: gridOriginalChartId.value[targetGrid] || targetOldItem?.chartId || null,
}; };
targetArr.value = [newItem]; targetArr.value = [newItem];
metricHistory.value[dragChartId] = targetGrid;
if (sourceGrid && sourceGrid !== targetGrid) {
const sourceArr = getMetricArrByGridNum(sourceGrid);
sourceArr.value = [];
}
dragItem.value = null; dragItem.value = null;
}; };
@@ -269,6 +250,11 @@ const handleReset = () => {
ElMessage.info('已重置所有指标'); ElMessage.info('已重置所有指标');
}; };
const handleClearAll = () => {
getAllMetricArrays().forEach(arr => arr.value = []);
ElMessage.info('已清空所有格子');
};
const handleSave = async () => { const handleSave = async () => {
saveLoading.value = true; saveLoading.value = true;
const saveData = getAllMetricArrays().map((arr, index) => { const saveData = getAllMetricArrays().map((arr, index) => {
@@ -277,10 +263,10 @@ const handleSave = async () => {
return { return {
sort: gridNum, sort: gridNum,
chartId: currentItem?.chartId || null, chartId: currentItem?.chartId || null,
oldChartId: currentItem?.fixedOldChartId || null, oldChartId: currentItem?.oldChartId || null,
chartName: currentItem?.chartName || '', chartName: currentItem?.chartName || '',
chartCode: 'work', chartCode: 'work',
oldSort: currentItem?.oldSort || 0, oldSort: currentItem?.oldSort || gridNum,
color: currentItem?.color || '' color: currentItem?.color || ''
}; };
}).filter(item => item.chartId); }).filter(item => item.chartId);
@@ -292,7 +278,7 @@ const handleSave = async () => {
} catch (error) { } catch (error) {
console.error('保存失败:', error); console.error('保存失败:', error);
} finally { } finally {
getChartList(); getChartList()
saveLoading.value = false; saveLoading.value = false;
} }
}; };
@@ -307,19 +293,25 @@ async function getChartList() {
const reqParams = { chartCode: 'work' }; const reqParams = { chartCode: 'work' };
const res = await getChartListAll(reqParams); const res = await getChartListAll(reqParams);
rawChartData.value = res || []; rawChartData.value = res || [];
metricHistory.value = {};
Object.keys(gridOriginalChartId.value).forEach(key => {
gridOriginalChartId.value[key] = null;
});
rawChartData.value.forEach(item => { rawChartData.value.forEach(item => {
const sortNum = item.sort || 0; const sortNum = item.sort || 0;
if (sortNum >= 1 && sortNum <= 8) { if (sortNum >= 1 && sortNum <= 8) {
const targetArr = getMetricArrByGridNum(sortNum); const targetArr = getMetricArrByGridNum(sortNum);
if (targetArr) { if (targetArr) {
gridOriginalChartId.value[sortNum] = item.chartId;
targetArr.value = [{ targetArr.value = [{
...item, ...item,
sort: sortNum, sort: sortNum,
oldSort: item.sort, oldSort: 0,
fixedOldChartId: item.chartId, chartId: item.chartId,
oldChartId: item.chartId oldChartId: item.chartId
}]; }];
metricHistory.value[item.chartId] = sortNum;
} }
} }
}); });

View File

@@ -2,6 +2,7 @@ package com.mini.mybigscreen.biz.controller;
import cn.hutool.core.util.StrUtil; import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.mini.mybigscreen.Model.ChartConfig; import com.mini.mybigscreen.Model.ChartConfig;
import com.mini.mybigscreen.Model.Message; import com.mini.mybigscreen.Model.Message;
import com.mini.mybigscreen.Model.Result; import com.mini.mybigscreen.Model.Result;
@@ -31,27 +32,26 @@ public class ChartInfoController {
public Result<?> getListAll(String chartCode) { public Result<?> getListAll(String chartCode) {
LambdaQueryWrapper<ChartInfo> query = new LambdaQueryWrapper<ChartInfo>() LambdaQueryWrapper<ChartInfo> query = new LambdaQueryWrapper<ChartInfo>()
.eq(StrUtil.isNotBlank(chartCode), ChartInfo::getChartCode, chartCode) .eq(StrUtil.isNotBlank(chartCode), ChartInfo::getChartCode, chartCode)
.orderByAsc(ChartInfo::getSort); .orderByDesc(ChartInfo::getCreateTime);
return Result.success(chartInfoService.list(query)); return Result.success(chartInfoService.list(query));
} }
@PostMapping("setting") @PostMapping("setting")
public Result<Message> save(@RequestBody List<ChartConfig> configs) { public Result<Message> save(@RequestBody List<ChartConfig> configs) {
for (ChartConfig config : configs) { for (ChartConfig config : configs) {
if (!config.getChartId().equals(config.getOldChartId())){
System.out.println(config); LambdaQueryWrapper<ChartInfo> newQuery = new LambdaQueryWrapper<ChartInfo>()
// LambdaQueryWrapper<ChartInfo> newQuery = new LambdaQueryWrapper<ChartInfo>() .eq(ChartInfo::getChartId, config.getChartId())
// .eq(ChartInfo::getChartId, config.getChartId()) .eq(ChartInfo::getChartCode, config.getChartCode());
// .eq(ChartInfo::getChartCode, config.getChartCode()); ChartInfo newChartInfo = chartInfoService.getOne(newQuery);
// ChartInfo newChartInfo = chartInfoService.getOne(newQuery); newChartInfo.setSort(config.getSort());
// newChartInfo.setSort(config.getSort()); chartInfoService.updateById(newChartInfo);
// chartInfoService.updateById(newChartInfo); LambdaUpdateWrapper<ChartInfo> updateWrapper = new LambdaUpdateWrapper<ChartInfo>()
// LambdaQueryWrapper<ChartInfo> oldQuery = new LambdaQueryWrapper<ChartInfo>() .eq(ChartInfo::getChartId, config.getOldChartId())
// .eq(ChartInfo::getChartId, config.getOldChartId()) .eq(ChartInfo::getChartCode, config.getChartCode())
// .eq(ChartInfo::getChartCode, config.getChartCode()); .set(ChartInfo::getSort, null);
// ChartInfo oldChartInfo = chartInfoService.getOne(oldQuery); chartInfoService.update(updateWrapper);
// oldChartInfo.setSort(config.getOldSort()); }
// chartInfoService.updateById(oldChartInfo);
} }
return Result.success(new Message("配置保存成功", 200)); return Result.success(new Message("配置保存成功", 200));
} }