handleDragStart(e, item)"
- @dragend="handleDragEnd"
- >
+
handleDragStart(e, item)" @dragend="handleDragEnd">
{{ item.chartName }}
@@ -180,6 +140,12 @@ const metric6 = ref([]);
const metric7 = 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 rawChartData = 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) => {
dragItem.value = item;
e.dataTransfer.setData('text/plain', JSON.stringify(item));
@@ -226,32 +202,37 @@ const handleDragEnd = (e) => {
e.target.style.opacity = '1';
};
-const handleDrop = (e, gridNum) => {
+const handleDrop = (e, targetGrid) => {
e.preventDefault();
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) => {
- const pos = index + 1;
- if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) {
- arr.value = [];
+ const gridNum = index + 1;
+ if (gridNum !== targetGrid) {
+ arr.value = arr.value.filter(i => i.chartId !== dragChartId);
}
});
- const originalSort = dragItem.value.sort || 0;
- const currentFixedOldId = targetArr.value[0]?.fixedOldChartId || currentChartId;
-
const newItem = {
...dragItem.value,
- sort: gridNum,
- oldSort: originalSort,
- fixedOldChartId: currentFixedOldId,
- oldChartId: currentFixedOldId
+ sort: targetGrid,
+ oldSort: oldSort,
+ chartId: dragChartId,
+ oldChartId: gridOriginalChartId.value[targetGrid] || targetOldItem?.chartId || null,
};
-
+
targetArr.value = [newItem];
+ metricHistory.value[dragChartId] = targetGrid;
+
+ if (sourceGrid && sourceGrid !== targetGrid) {
+ const sourceArr = getMetricArrByGridNum(sourceGrid);
+ sourceArr.value = [];
+ }
+
dragItem.value = null;
};
@@ -269,6 +250,11 @@ const handleReset = () => {
ElMessage.info('已重置所有指标');
};
+const handleClearAll = () => {
+ getAllMetricArrays().forEach(arr => arr.value = []);
+ ElMessage.info('已清空所有格子');
+};
+
const handleSave = async () => {
saveLoading.value = true;
const saveData = getAllMetricArrays().map((arr, index) => {
@@ -277,10 +263,10 @@ const handleSave = async () => {
return {
sort: gridNum,
chartId: currentItem?.chartId || null,
- oldChartId: currentItem?.fixedOldChartId || null,
+ oldChartId: currentItem?.oldChartId || null,
chartName: currentItem?.chartName || '',
chartCode: 'work',
- oldSort: currentItem?.oldSort || 0,
+ oldSort: currentItem?.oldSort || gridNum,
color: currentItem?.color || ''
};
}).filter(item => item.chartId);
@@ -292,7 +278,7 @@ const handleSave = async () => {
} catch (error) {
console.error('保存失败:', error);
} finally {
- getChartList();
+ getChartList()
saveLoading.value = false;
}
};
@@ -307,19 +293,25 @@ async function getChartList() {
const reqParams = { chartCode: 'work' };
const res = await getChartListAll(reqParams);
rawChartData.value = res || [];
+ metricHistory.value = {};
+ Object.keys(gridOriginalChartId.value).forEach(key => {
+ gridOriginalChartId.value[key] = null;
+ });
rawChartData.value.forEach(item => {
const sortNum = item.sort || 0;
if (sortNum >= 1 && sortNum <= 8) {
const targetArr = getMetricArrByGridNum(sortNum);
if (targetArr) {
+ gridOriginalChartId.value[sortNum] = item.chartId;
targetArr.value = [{
...item,
- sort: sortNum,
- oldSort: item.sort,
- fixedOldChartId: item.chartId,
+ sort: sortNum,
+ oldSort: 0,
+ chartId: item.chartId,
oldChartId: item.chartId
}];
+ metricHistory.value[item.chartId] = sortNum;
}
}
});
diff --git a/src/main/java/com/mini/mybigscreen/biz/controller/ChartInfoController.java b/src/main/java/com/mini/mybigscreen/biz/controller/ChartInfoController.java
index d8508e5..28149c0 100644
--- a/src/main/java/com/mini/mybigscreen/biz/controller/ChartInfoController.java
+++ b/src/main/java/com/mini/mybigscreen/biz/controller/ChartInfoController.java
@@ -2,6 +2,7 @@ package com.mini.mybigscreen.biz.controller;
import cn.hutool.core.util.StrUtil;
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.Message;
import com.mini.mybigscreen.Model.Result;
@@ -31,27 +32,26 @@ public class ChartInfoController {
public Result> getListAll(String chartCode) {
LambdaQueryWrapper
query = new LambdaQueryWrapper()
.eq(StrUtil.isNotBlank(chartCode), ChartInfo::getChartCode, chartCode)
- .orderByAsc(ChartInfo::getSort);
+ .orderByDesc(ChartInfo::getCreateTime);
return Result.success(chartInfoService.list(query));
}
@PostMapping("setting")
public Result save(@RequestBody List configs) {
for (ChartConfig config : configs) {
-
- System.out.println(config);
-// LambdaQueryWrapper newQuery = new LambdaQueryWrapper()
-// .eq(ChartInfo::getChartId, config.getChartId())
-// .eq(ChartInfo::getChartCode, config.getChartCode());
-// ChartInfo newChartInfo = chartInfoService.getOne(newQuery);
-// newChartInfo.setSort(config.getSort());
-// chartInfoService.updateById(newChartInfo);
-// LambdaQueryWrapper oldQuery = new LambdaQueryWrapper()
-// .eq(ChartInfo::getChartId, config.getOldChartId())
-// .eq(ChartInfo::getChartCode, config.getChartCode());
-// ChartInfo oldChartInfo = chartInfoService.getOne(oldQuery);
-// oldChartInfo.setSort(config.getOldSort());
-// chartInfoService.updateById(oldChartInfo);
+ if (!config.getChartId().equals(config.getOldChartId())){
+ LambdaQueryWrapper newQuery = new LambdaQueryWrapper()
+ .eq(ChartInfo::getChartId, config.getChartId())
+ .eq(ChartInfo::getChartCode, config.getChartCode());
+ ChartInfo newChartInfo = chartInfoService.getOne(newQuery);
+ newChartInfo.setSort(config.getSort());
+ chartInfoService.updateById(newChartInfo);
+ LambdaUpdateWrapper updateWrapper = new LambdaUpdateWrapper()
+ .eq(ChartInfo::getChartId, config.getOldChartId())
+ .eq(ChartInfo::getChartCode, config.getChartCode())
+ .set(ChartInfo::getSort, null);
+ chartInfoService.update(updateWrapper);
+ }
}
return Result.success(new Message("配置保存成功", 200));
}