大屏项目初始化
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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));
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user