manager/my-bigScreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏项目初始化

Browse Source
This commit is contained in:
gaoxq
2026-03-11 21:53:42 +08:00
parent 8069e437dc
commit 429fe75039
4 changed files with 176 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
screen-vue/src/views/screen/Setting/components/Erp.vue
View File

@@ -5,11 +5,12 @@
<div class="work-section work-top-header">
<div class="work-card full-card">
<div class="chart-top-inner">
<h2>系统可视化大屏指标配置</h2>
<h2>财务可视化大屏指标配置</h2>
<div class="btn-group">
<el-button type="primary" size="default" @click="handleSave"
:loading="saveLoading" :disabled="saveLoading">保存</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>
@@ -225,6 +226,12 @@ const metric7 = ref([]);
const metric8 = 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 rawChartData = 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) => {
dragItem.value = item;
e.dataTransfer.setData('text/plain', JSON.stringify(item));
@@ -278,6 +295,9 @@ const handleDrop = (e, gridNum) => {
if (!targetArr) return;
const currentChartId = dragItem.value.chartId;
const sourceGrid = findGridNumByChartId(currentChartId);
const targetOldItem = targetArr.value[0] || null;
getAllMetricArrays().forEach((arr, index) => {
const pos = index + 1;
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 currentFixedOldId = targetArr.value[0]?.fixedOldChartId || currentChartId;
const oldSort = sourceGrid || metricHistory.value[currentChartId] || 0;
const oldChartId = gridOriginalChartId.value[gridNum] || targetOldItem?.chartId || currentChartId;
const newItem = {
...dragItem.value,
sort: gridNum,
oldSort: originalSort,
fixedOldChartId: currentFixedOldId,
oldChartId: currentFixedOldId
oldSort: oldSort,
fixedOldChartId: oldChartId,
oldChartId: oldChartId
};
targetArr.value = [newItem];
metricHistory.value[currentChartId] = gridNum;
dragItem.value = null;
};
@@ -314,6 +335,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) => {
@@ -325,7 +351,7 @@ const handleSave = async () => {
oldChartId: currentItem?.fixedOldChartId || null,
chartName: currentItem?.chartName || '',
chartCode: 'erp',
oldSort: currentItem?.oldSort || 0,
oldSort: currentItem?.oldSort || gridNum,
color: currentItem?.color || ''
};
}).filter(item => item.chartId);
@@ -337,7 +363,7 @@ const handleSave = async () => {
} catch (error) {
console.error('保存失败：', error);
} finally {
getChartList();
getChartList();
saveLoading.value = false;
}
};
@@ -353,18 +379,25 @@ async function getChartList() {
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 <= 9) {
const targetArr = getMetricArrByGridNum(sortNum);
if (targetArr) {
gridOriginalChartId.value[sortNum] = item.chartId;
targetArr.value = [{
...item,
sort: sortNum,
oldSort: item.sort,
oldSort: 0,
fixedOldChartId: item.chartId,
oldChartId: item.chartId
}];
metricHistory.value[item.chartId] = sortNum;
}
}
});

75
screen-vue/src/views/screen/Setting/components/Sys.vue
View File

@@ -10,6 +10,7 @@
<el-button type="primary" size="default" @click="handleSave"
:loading="saveLoading" :disabled="saveLoading">保存</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>
@@ -171,6 +172,12 @@ const metric7 = ref([]);
const metric8 = 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 rawChartData = 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) => {
dragItem.value = item;
e.dataTransfer.setData('text/plain', JSON.stringify(item));
@@ -217,32 +234,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;
};
@@ -260,6 +282,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) => {
@@ -268,10 +295,10 @@ const handleSave = async () => {
return {
sort: gridNum,
chartId: currentItem?.chartId || null,
oldChartId: currentItem?.fixedOldChartId || null,
oldChartId: currentItem?.oldChartId || null,
chartName: currentItem?.chartName || '',
chartCode: 'sys',
oldSort: currentItem?.oldSort || 0,
oldSort: currentItem?.oldSort || gridNum,
color: currentItem?.color || ''
};
}).filter(item => item.chartId);
@@ -283,7 +310,7 @@ const handleSave = async () => {
} catch (error) {
console.error('保存失败：', error);
} finally {
getChartList();
getChartList();
saveLoading.value = false;
}
};
@@ -298,19 +325,24 @@ async function getChartList() {
const reqParams = { chartCode: 'sys' };
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 <= 9) {
const targetArr = getMetricArrByGridNum(sortNum);
if (targetArr) {
gridOriginalChartId.value[sortNum] = item.chartId;
targetArr.value = [{
...item,
sort: sortNum,
oldSort: item.sort,
fixedOldChartId: item.chartId,
oldSort: 0,
chartId: item.chartId,
oldChartId: item.chartId
}];
metricHistory.value[item.chartId] = sortNum;
}
}
});
@@ -320,6 +352,7 @@ async function getChartList() {
}
}
// 初始化加载数据
onMounted(async () => {
await getChartList();
});

138
screen-vue/src/views/screen/Setting/components/Work.vue
View File

@@ -7,9 +7,9 @@
<div class="chart-top-inner">
<h2>工作可视化大屏指标配置</h2>
<div class="btn-group">
<el-button type="primary" size="default" @click="handleSave"
:loading="saveLoading" :disabled="saveLoading">保存</el-button>
<el-button type="primary" size="default" @click="handleSave" :loading="saveLoading" :disabled="saveLoading">保存</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>
@@ -18,11 +18,7 @@
<div class="work-col work-col-1-3 work-left-col">
<div class="work-card work-card-1-3">
<span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
<div
class="grid-content"
@drop="(e) => handleDrop(e, 1)"
@dragover="(e) => e.preventDefault()"
>
<div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
<div v-if="metric1.length > 0" class="metric-tag">
<span class="sort-num">指标{{1}}</span>
{{ metric1[0].chartName }}
@@ -33,11 +29,7 @@
</div>
<div class="work-card work-card-1-3">
<span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
<div
class="grid-content"
@drop="(e) => handleDrop(e, 2)"
@dragover="(e) => e.preventDefault()"
>
<div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
<div v-if="metric2.length > 0" class="metric-tag">
<span class="sort-num">指标{{2}}</span>
{{ metric2[0].chartName }}
@@ -48,11 +40,7 @@
</div>
<div class="work-card work-card-1-3">
<span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
<div
class="grid-content"
@drop="(e) => handleDrop(e, 3)"
@dragover="(e) => e.preventDefault()"
>
<div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
<div v-if="metric3.length > 0" class="metric-tag">
<span class="sort-num">指标{{3}}</span>
{{ metric3[0].chartName }}
@@ -65,11 +53,7 @@
<div class="work-col work-col-1-3 work-middle-col">
<div class="work-card work-card-2-3">
<span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
<div
class="grid-content"
@drop="(e) => handleDrop(e, 4)"
@dragover="(e) => e.preventDefault()"
>
<div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
<div v-if="metric4.length > 0" class="metric-tag">
<span class="sort-num">指标{{4}}</span>
{{ metric4[0].chartName }}
@@ -80,11 +64,7 @@
</div>
<div class="work-card work-card-1-3">
<span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
<div
class="grid-content"
@drop="(e) => handleDrop(e, 5)"
@dragover="(e) => e.preventDefault()"
>
<div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
<div v-if="metric5.length > 0" class="metric-tag">
<span class="sort-num">指标{{5}}</span>
{{ metric5[0].chartName }}
@@ -97,11 +77,7 @@
<div class="work-col work-col-1-3 work-right-col">
<div class="work-card work-card-1-3">
<span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
<div
class="grid-content"
@drop="(e) => handleDrop(e, 6)"
@dragover="(e) => e.preventDefault()"
>
<div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
<div v-if="metric6.length > 0" class="metric-tag">
<span class="sort-num">指标{{6}}</span>
{{ metric6[0].chartName }}
@@ -112,11 +88,7 @@
</div>
<div class="work-card work-card-1-3">
<span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
<div
class="grid-content"
@drop="(e) => handleDrop(e, 7)"
@dragover="(e) => e.preventDefault()"
>
<div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
<div v-if="metric7.length > 0" class="metric-tag">
<span class="sort-num">指标{{7}}</span>
{{ metric7[0].chartName }}
@@ -127,11 +99,7 @@
</div>
<div class="work-card work-card-1-3">
<span v-if="metric8.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(8)">×</span>
<div
class="grid-content"
@drop="(e) => handleDrop(e, 8)"
@dragover="(e) => e.preventDefault()"
>
<div class="grid-content" @drop="(e) => handleDrop(e, 8)" @dragover="(e) => e.preventDefault()">
<div v-if="metric8.length > 0" class="metric-tag">
<span class="sort-num">指标{{8}}</span>
{{ metric8[0].chartName }}
@@ -148,15 +116,7 @@
<el-input v-model="searchKey" placeholder="搜索指标项..." size="small"></el-input>
</div>
<div class="metric-list">
<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"
>
<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">
<span>{{ item.chartName }}</span>
<span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
</div>
@@ -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;
}
}
});