大屏页面初始化

screen-vue/src/api/bizChart.ts

@@ -11,11 +11,36 @@ export function getChartList(params) {
   })
 }
 
-
+/**
+ * 获取指标信息列表
+ */
 export function getChartListAll(params) {
   return request({
     url: '/biz/chartInfo/listAll',
     method: 'get', 
     params: params
   })
+}
+
+/**
+ * 保存/更新指标信息列表
+ */
+export function getChartSave(data) {
+  return request({
+    url: '/biz/chartInfo/save',
+    method: 'post', 
+    data
+  })
+}
+
+
+/**
+ * 配置更新指标信息列表
+ */
+export function getChartSetting(data) {
+  return request({
+    url: '/biz/chartInfo/setting',
+    method: 'post', 
+    data
+  })
 }

screen-vue/src/api/bizRole.js

@@ -25,7 +25,7 @@ export function getHomeRoleUserList(params) {
 /**
  * 获取角色授权的菜单
  */
-export function getHomeRoleMenus(params: any) {
+export function getHomeRoleMenus(params) {
   return request({
     url: '/biz/homeRole/roleMenus',
     method: 'get', 

screen-vue/src/views/screen/Setting/components/Erp.vue

@@ -1,8 +1,662 @@
 <template>
+  <div class="work-layout-container">
+    <div class="main-wrapper">
+      <div class="left-area">
+        <div class="work-section work-top-header">
+          <div class="work-card full-card">
+            <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="warning" size="default" @click="handleReset">重置</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="work-section work-main-section">
+          <div class="layout-row top-row">
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric1.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{1}}</span>
+                    {{ metric1[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric2.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{2}}</span>
+                    {{ metric2[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric3.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{3}}</span>
+                    {{ metric3[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="layout-row middle-row">
+            <div class="work-col work-col-1-2">
+              <div class="inner-layout double-col-horizontal">
+                <div class="work-col work-col-1-2">
+                  <div class="work-card full-height-card">
+                    <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 v-if="metric4.length > 0" class="metric-tag">
+                        <span class="sort-num">指标{{4}}</span>
+                        {{ metric4[0].chartName }}
+                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                      </div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="work-col work-col-1-2">
+                  <div class="work-card full-height-card">
+                    <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 v-if="metric5.length > 0" class="metric-tag">
+                        <span class="sort-num">指标{{5}}</span>
+                        {{ metric5[0].chartName }}
+                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                      </div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-2">
+              <div class="work-card full-height-card">
+                <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 v-if="metric6.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{6}}</span>
+                    {{ metric6[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="layout-row bottom-row">
+            <div class="work-col work-col-1-2">
+              <div class="inner-layout double-col-horizontal">
+                <div class="work-col work-col-1-2">
+                  <div class="work-card full-height-card">
+                    <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 v-if="metric7.length > 0" class="metric-tag">
+                        <span class="sort-num">指标{{7}}</span>
+                        {{ metric7[0].chartName }}
+                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                      </div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="work-col work-col-1-2">
+                  <div class="work-card full-height-card">
+                    <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 v-if="metric8.length > 0" class="metric-tag">
+                        <span class="sort-num">指标{{8}}</span>
+                        {{ metric8[0].chartName }}
+                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric8[0].chartId }}</small>
+                      </div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{8}}）</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-2">
+              <div class="work-card full-height-card">
+                <span v-if="metric9.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(9)">×</span>
+                <div 
+                  class="grid-content" 
+                  @drop="(e) => handleDrop(e, 9)" 
+                  @dragover="(e) => e.preventDefault()"
+                >
+                  <div v-if="metric9.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{9}}</span>
+                    {{ metric9[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric9[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{9}}）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="right-area">
+        <div class="search-box">
+          <el-input v-model="searchKey" placeholder="搜索指标项..." size="default"></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"
+          >
+            <span>{{ item.chartName }}</span>
+            <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { ElMessage, ElButton, ElInput } from 'element-plus';
+import { getChartListAll, getChartSetting } from '@/api/bizChart'
+
+const metric1 = ref([]);
+const metric2 = ref([]);
+const metric3 = ref([]);
+const metric4 = ref([]);
+const metric5 = ref([]);
+const metric6 = ref([]);
+const metric7 = ref([]);
+const metric8 = ref([]);
+const metric9 = ref([]);
+
+const saveLoading = ref(false);
+const rawChartData = ref([]);
+const searchKey = ref('');
+const dragItem = ref(null);
+
+const allMetricList = computed({
+  get() {
+    if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
+    return rawChartData.value.filter(item => {
+      if (!item || !item.chartName) return false;
+      const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
+      const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
+      return nameVal.includes(searchVal);
+    });
+  },
+  set(val) {
+    rawChartData.value = val;
+  }
+});
+
+const getAllMetricArrays = () => ([
+  metric1, metric2, metric3, metric4, 
+  metric5, metric6, metric7, metric8, metric9
+]);
+
+const getMetricArrByGridNum = (gridNum) => {
+  return getAllMetricArrays()[gridNum - 1];
+};
+
+const isMetricUsed = (metricId) => {
+  if (!metricId) return false;
+  return getAllMetricArrays().some(
+    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
+  );
+};
+
+const handleDragStart = (e, item) => {
+  dragItem.value = item;
+  e.dataTransfer.setData('text/plain', JSON.stringify(item));
+  e.target.style.opacity = '0.6';
+};
+
+const handleDragEnd = (e) => {
+  e.target.style.opacity = '1';
+};
+
+const handleDrop = (e, gridNum) => {
+  e.preventDefault();
+  if (!dragItem.value) return;
+  const targetArr = getMetricArrByGridNum(gridNum);
+  if (!targetArr) return;
+  const currentChartId = dragItem.value.chartId;  
+  getAllMetricArrays().forEach((arr, index) => {
+    const pos = index + 1;
+    if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) {
+      arr.value = [];
+    }
+  });
+  const currentFixedOldId = targetArr.value[0]?.fixedOldChartId || currentChartId;
+  const newItem = {
+    ...dragItem.value,
+    sort: gridNum,
+    oldSort: targetArr.value[0]?.sort || gridNum,
+    fixedOldChartId: currentFixedOldId,
+    oldChartId: currentFixedOldId
+  };
+
+  targetArr.value = [newItem];
+  dragItem.value = null;
+};
+
+const handleDeleteMetric = (gridNum) => {
+  const targetArr = getMetricArrByGridNum(gridNum);
+  if (targetArr) {
+    targetArr.value = [];
+  }
+};
+
+const handleReset = () => {
+  getAllMetricArrays().forEach(arr => arr.value = []);
+  searchKey.value = '';
+  getChartList();
+  ElMessage.info('已重置所有指标');
+};
+
+const handleSave = async () => {
+  saveLoading.value = true;
+  
+  const saveData = getAllMetricArrays().map((arr, index) => {
+    const gridNum = index + 1;
+    const currentItem = arr.value[0];
+    return {
+      sort: gridNum,
+      chartId: currentItem?.chartId || null,
+      oldChartId: currentItem?.fixedOldChartId || null,
+      chartName: currentItem?.chartName || '',
+      chartCode: 'erp',
+      oldSort: currentItem?.oldSort || gridNum,
+      color: currentItem?.color || ''
+    };
+  }).filter(item => item.chartId);
+
+  try {
+    const res = await getChartSetting(saveData);
+    ElMessage.success(res?.msg || '保存成功');
+    return saveData;
+  } catch (error) {
+    console.error('保存失败：', error);
+  } finally {
+    saveLoading.value = false;
+  }
+};
+
+const getRandomColor = () => {
+  const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b', '#86909c', '#7b68ee'];
+  return colors[Math.floor(Math.random() * colors.length)];
+};
+
+async function getChartList(){
+  try {
+    const reqParams = {
+      chartCode: 'erp'
+    }
+    const res = await getChartListAll(reqParams)
+    rawChartData.value = res || [];
+
+    rawChartData.value.forEach(item => {
+      const sortNum = item.sort || 0;
+      if (sortNum >= 1 && sortNum <= 9) {
+        const targetArr = getMetricArrByGridNum(sortNum);
+        if (targetArr) {
+          targetArr.value = [{
+            ...item,
+            sort: sortNum,
+            oldSort: item.sort,
+            fixedOldChartId: item.chartId,
+            oldChartId: item.chartId
+          }];
+        }
+      }
+    });
+  } catch (error) {
+    console.error('获取数据失败:', error);
+    rawChartData.value = [];
+  }
+}
+
+onMounted(async () => {
+  await getChartList();
+});
 </script>
 
-<style>
+<style scoped>
+.work-layout-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: #0a1a33;
+  overflow: hidden;
+}
+
+.main-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.left-area {
+  width: calc(85% - 1px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.right-area {
+  width: calc(15% - 1px);
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.5);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-top-header {
+  height: calc(6% - 1px);
+  box-sizing: border-box;
+}
+
+.work-main-section {
+  height: calc(94% - 1px);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.layout-row {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+  height: calc(100% / 3); 
+}
+
+.work-col-1-3 {
+  width: calc(100% / 3); 
+  box-sizing: border-box;
+}
+
+.work-col-1-2 {
+  width: calc(100% / 2);
+  box-sizing: border-box;
+}
+
+.inner-layout.double-col-horizontal {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.full-height-card {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.3);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  overflow: hidden;
+  position: relative;
+}
+
+.work-section {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.chart-top-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  color: #e0e6ff;
+  box-sizing: border-box;
+}
+
+.chart-top-inner h2 {
+  font-size: 16px;
+  margin: 0;
+  font-weight: 600;
+}
+
+.btn-group {
+  display: flex;
+  gap: 8px;
+}
+
+.work-col {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.work-card {
+  width: 100%;
+  background-color: rgba(15, 52, 96, 0.3);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  overflow: hidden;
+  position: relative;
+}
+
+.full-card {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.delete-icon {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  color: #ff6b6b;
+  font-size: 18px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: rgba(255, 107, 107, 0.1);
+  z-index: 10;
+  transition: all 0.2s ease;
+}
+
+.delete-icon:hover {
+  background-color: rgba(255, 107, 107, 0.3);
+  transform: scale(1.1);
+}
+
+.grid-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  box-sizing: border-box;
+  cursor: drop;
+}
+
+.metric-tag {
+  padding: 0;
+  background: none;
+  color: #e0e6ff;
+  font-size: 18px;
+  white-space: nowrap;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sort-num {
+  font-size: 14px;
+  color: #88a0c2;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.empty-tip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #88a0c2;
+  font-size: 14px;
+  pointer-events: none;
+}
+
+.search-box {
+  padding: 4px 0;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+
+.metric-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
+}
+
+.metric-list::-webkit-scrollbar {
+  width: 1px;
+}
+
+.metric-list::-webkit-scrollbar-track {
+  background: transparent; 
+}
+
+.metric-list::-webkit-scrollbar-thumb {
+  background: rgba(60, 156, 255, 0.2);
+  border-radius: 0.5px;
+}
+
+.metric-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(60, 156, 255, 0.4);
+}
+
+.metric-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 6px;
+  margin-bottom: 6px;
+  border-radius: 6px;
+  color: #e0e6ff;
+  cursor: grab;
+  font-size: 14px;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+
+.metric-item.active {
+  background-color: rgba(60, 156, 255, 0.3);
+  border: 1px solid #3c9cff;
+}
+
+.metric-item:hover {
+  background-color: rgba(60, 156, 255, 0.15);
+}
+
+.color-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: 6px;
+}
 </style>

screen-vue/src/views/screen/Setting/components/Sys.vue

@@ -1,8 +1,597 @@
 <template>
+  <div class="work-layout-container">
+    <div class="main-wrapper">
+      <div class="left-area">
+        <div class="work-section work-top-header">
+          <div class="work-card full-card">
+            <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="warning" size="default" @click="handleReset">重置</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="work-section work-main-section">
+          <div class="layout-row top-row">
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric1.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{1}}</span>
+                    {{ metric1[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric2.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{2}}</span>
+                    {{ metric2[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric3.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{3}}</span>
+                    {{ metric3[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="layout-row middle-row">
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric4.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{4}}</span>
+                    {{ metric4[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric5.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{5}}</span>
+                    {{ metric5[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric6.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{6}}</span>
+                    {{ metric6[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="layout-row bottom-row">
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric7.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{7}}</span>
+                    {{ metric7[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <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 v-if="metric8.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{8}}</span>
+                    {{ metric8[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric8[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{8}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <span v-if="metric9.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(9)">×</span>
+                <div class="grid-content" @drop="(e) => handleDrop(e, 9)" @dragover="(e) => e.preventDefault()">
+                  <div v-if="metric9.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{9}}</span>
+                    {{ metric9[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric9[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{9}}）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-area">
+        <div class="search-box">
+          <el-input v-model="searchKey" placeholder="搜索指标项..." size="default"></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">
+            <span>{{ item.chartName }}</span>
+            <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { ElMessage, ElButton, ElInput } from 'element-plus';
+import { getChartListAll, getChartSetting } from '@/api/bizChart'
+
+const metric1 = ref([]);
+const metric2 = ref([]);
+const metric3 = ref([]);
+const metric4 = ref([]);
+const metric5 = ref([]);
+const metric6 = ref([]);
+const metric7 = ref([]);
+const metric8 = ref([]);
+const metric9 = ref([]);
+
+const saveLoading = ref(false);
+const rawChartData = ref([]);
+const searchKey = ref('');
+const dragItem = ref(null);
+
+const allMetricList = computed({
+  get() {
+    if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
+    return rawChartData.value.filter(item => {
+      if (!item || !item.chartName) return false;
+      const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
+      const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
+      return nameVal.includes(searchVal);
+    });
+  },
+  set(val) {
+    rawChartData.value = val;
+  }
+});
+
+const getAllMetricArrays = () => ([
+  metric1, metric2, metric3, metric4, 
+  metric5, metric6, metric7, metric8, metric9
+]);
+
+const getMetricArrByGridNum = (gridNum) => {
+  return getAllMetricArrays()[gridNum - 1];
+};
+
+const isMetricUsed = (metricId) => {
+  if (!metricId) return false;
+  return getAllMetricArrays().some(
+    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
+  );
+};
+
+const handleDragStart = (e, item) => {
+  dragItem.value = item;
+  e.dataTransfer.setData('text/plain', JSON.stringify(item));
+  e.target.style.opacity = '0.6';
+};
+
+const handleDragEnd = (e) => {
+  e.target.style.opacity = '1';
+};
+
+const handleDrop = (e, gridNum) => {
+  e.preventDefault();
+  if (!dragItem.value) return;
+  const targetArr = getMetricArrByGridNum(gridNum);
+  if (!targetArr) return;
+  const currentChartId = dragItem.value.chartId;
+  
+  getAllMetricArrays().forEach((arr, index) => {
+    const pos = index + 1;
+    if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) {
+      arr.value = [];
+    }
+  });
+
+  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
+  };
+  
+  targetArr.value = [newItem];
+  dragItem.value = null;
+};
+
+const handleDeleteMetric = (gridNum) => {
+  const targetArr = getMetricArrByGridNum(gridNum);
+  if (targetArr) {
+    targetArr.value = [];
+  }
+};
+
+const handleReset = () => {
+  getAllMetricArrays().forEach(arr => arr.value = []);
+  searchKey.value = '';
+  getChartList();
+  ElMessage.info('已重置所有指标');
+};
+
+const handleSave = async () => {
+  saveLoading.value = true;
+  const saveData = getAllMetricArrays().map((arr, index) => {
+    const gridNum = index + 1;
+    const currentItem = arr.value[0];
+    return {
+      sort: gridNum,
+      chartId: currentItem?.chartId || null,
+      oldChartId: currentItem?.fixedOldChartId || null,
+      chartName: currentItem?.chartName || '',
+      chartCode: 'sys',
+      oldSort: currentItem?.oldSort || 0,
+      color: currentItem?.color || ''
+    };
+  }).filter(item => item.chartId);
+
+  try {
+    const res = await getChartSetting(saveData);
+    ElMessage.success(res?.msg);
+    return saveData;
+  } catch (error) {
+    console.error('保存失败：', error);
+  } finally {
+	getChartList();
+    saveLoading.value = false;
+  }
+};
+
+const getRandomColor = () => {
+  const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b', '#86909c', '#7b68ee'];
+  return colors[Math.floor(Math.random() * colors.length)];
+};
+
+async function getChartList() {
+  try {
+    const reqParams = { chartCode: 'sys' };
+    const res = await getChartListAll(reqParams);
+    rawChartData.value = res || [];
+
+    rawChartData.value.forEach(item => {
+      const sortNum = item.sort || 0;
+      if (sortNum >= 1 && sortNum <= 9) {
+        const targetArr = getMetricArrByGridNum(sortNum);
+        if (targetArr) {
+          targetArr.value = [{
+            ...item,
+            sort: sortNum,
+            oldSort: item.sort,
+            fixedOldChartId: item.chartId,
+            oldChartId: item.chartId
+          }];
+        }
+      }
+    });
+  } catch (error) {
+    console.error('获取数据失败:', error);
+    rawChartData.value = [];
+  }
+}
+
+onMounted(async () => {
+  await getChartList();
+});
 </script>
 
-<style>
+<style scoped>
+.work-layout-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: #0a1a33;
+  overflow: hidden;
+}
+
+.main-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.left-area {
+  width: calc(85% - 1px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.right-area {
+  width: calc(15% - 1px);
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.5);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-top-header {
+  height: calc(6% - 1px);
+  box-sizing: border-box;
+}
+
+.work-main-section {
+  height: calc(94% - 1px);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.layout-row {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+  height: calc(100% / 3); 
+}
+
+.work-col-1-3 {
+  width: calc(100% / 3); 
+  box-sizing: border-box;
+}
+
+.full-height-card {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.3);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  overflow: hidden;
+  position: relative;
+}
+
+.work-section {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.chart-top-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  color: #e0e6ff;
+  box-sizing: border-box;
+}
+
+.chart-top-inner h2 {
+  font-size: 16px;
+  margin: 0;
+  font-weight: 600;
+}
+
+.btn-group {
+  display: flex;
+  gap: 8px;
+}
+
+.work-col {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.work-card {
+  width: 100%;
+  background-color: rgba(15, 52, 96, 0.3);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  overflow: hidden;
+  position: relative;
+}
+
+.full-card {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.delete-icon {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  color: #ff6b6b;
+  font-size: 18px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: rgba(255, 107, 107, 0.1);
+  z-index: 10;
+  transition: all 0.2s ease;
+}
+
+.delete-icon:hover {
+  background-color: rgba(255, 107, 107, 0.3);
+  transform: scale(1.1);
+}
+
+.grid-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  box-sizing: border-box;
+  cursor: drop;
+}
+
+.metric-tag {
+  padding: 0;
+  background: none;
+  color: #e0e6ff;
+  font-size: 18px;
+  white-space: nowrap;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sort-num {
+  font-size: 14px;
+  color: #88a0c2;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.empty-tip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #88a0c2;
+  font-size: 14px;
+  pointer-events: none;
+}
+
+.search-box {
+  padding: 4px 0;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+
+.metric-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
+}
+
+.metric-list::-webkit-scrollbar {
+  width: 1px;
+}
+
+.metric-list::-webkit-scrollbar-track {
+  background: transparent; 
+}
+
+.metric-list::-webkit-scrollbar-thumb {
+  background: rgba(60, 156, 255, 0.2);
+  border-radius: 0.5px;
+}
+
+.metric-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(60, 156, 255, 0.4);
+}
+
+.metric-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 6px;
+  margin-bottom: 6px;
+  border-radius: 6px;
+  color: #e0e6ff;
+  cursor: grab;
+  font-size: 14px;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+
+.metric-item.active {
+  background-color: rgba(60, 156, 255, 0.3);
+  border: 1px solid #3c9cff;
+}
+
+.metric-item:hover {
+  background-color: rgba(60, 156, 255, 0.15);
+}
+
+.color-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: 6px;
+}
 </style>

screen-vue/src/views/screen/Setting/components/Work.vue

@@ -1,8 +1,586 @@
 <template>
+  <div class="work-layout-container">
+    <div class="main-wrapper">
+      <div class="left-area">
+        <div class="work-section work-top-header">
+          <div class="work-card full-card">
+            <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="warning" size="default" @click="handleReset">重置</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="work-section work-main-section">
+          <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 v-if="metric1.length > 0" class="metric-tag">
+                  <span class="sort-num">指标{{1}}</span>
+                  {{ metric1[0].chartName }}
+                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                </div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+              </div>
+            </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 v-if="metric2.length > 0" class="metric-tag">
+                  <span class="sort-num">指标{{2}}</span>
+                  {{ metric2[0].chartName }}
+                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                </div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+              </div>
+            </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 v-if="metric3.length > 0" class="metric-tag">
+                  <span class="sort-num">指标{{3}}</span>
+                  {{ metric3[0].chartName }}
+                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                </div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+              </div>
+            </div>
+          </div>
+          <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 v-if="metric4.length > 0" class="metric-tag">
+                  <span class="sort-num">指标{{4}}</span>
+                  {{ metric4[0].chartName }}
+                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                </div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+              </div>
+            </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 v-if="metric5.length > 0" class="metric-tag">
+                  <span class="sort-num">指标{{5}}</span>
+                  {{ metric5[0].chartName }}
+                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                </div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+              </div>
+            </div>
+          </div>
+          <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 v-if="metric6.length > 0" class="metric-tag">
+                  <span class="sort-num">指标{{6}}</span>
+                  {{ metric6[0].chartName }}
+                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                </div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+              </div>
+            </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 v-if="metric7.length > 0" class="metric-tag">
+                  <span class="sort-num">指标{{7}}</span>
+                  {{ metric7[0].chartName }}
+                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                </div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+              </div>
+            </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 v-if="metric8.length > 0" class="metric-tag">
+                  <span class="sort-num">指标{{8}}</span>
+                  {{ metric8[0].chartName }}
+                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric8[0].chartId }}</small>
+                </div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{8}}）</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-area">
+        <div class="search-box">
+          <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"
+          >
+            <span>{{ item.chartName }}</span>
+            <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getChartListAll, getChartSetting } from '@/api/bizChart'
+
+const metric1 = ref([]);
+const metric2 = ref([]);
+const metric3 = ref([]);
+const metric4 = ref([]);
+const metric5 = ref([]);
+const metric6 = ref([]);
+const metric7 = ref([]);
+const metric8 = ref([]);
+
+const saveLoading = ref(false);
+const rawChartData = ref([]);
+const searchKey = ref('');
+const dragItem = ref(null);
+
+const allMetricList = computed({
+  get() {
+    if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
+    return rawChartData.value.filter(item => {
+      if (!item || !item.chartName) return false;
+      const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
+      const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
+      return nameVal.includes(searchVal);
+    });
+  },
+  set(val) {
+    rawChartData.value = val;
+  }
+});
+
+const getAllMetricArrays = () => ([
+  metric1, metric2, metric3, metric4, 
+  metric5, metric6, metric7, metric8
+]);
+
+const getMetricArrByGridNum = (gridNum) => {
+  return getAllMetricArrays()[gridNum - 1];
+};
+
+const isMetricUsed = (metricId) => {
+  if (!metricId) return false;
+  return getAllMetricArrays().some(
+    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
+  );
+};
+
+const handleDragStart = (e, item) => {
+  dragItem.value = item;
+  e.dataTransfer.setData('text/plain', JSON.stringify(item));
+  e.target.style.opacity = '0.6';
+};
+
+const handleDragEnd = (e) => {
+  e.target.style.opacity = '1';
+};
+
+const handleDrop = (e, gridNum) => {
+  e.preventDefault();
+  if (!dragItem.value) return;
+  const targetArr = getMetricArrByGridNum(gridNum);
+  if (!targetArr) return;
+  const currentChartId = dragItem.value.chartId;
+  
+  getAllMetricArrays().forEach((arr, index) => {
+    const pos = index + 1;
+    if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) {
+      arr.value = [];
+    }
+  });
+
+  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
+  };
+  
+  targetArr.value = [newItem];
+  dragItem.value = null;
+};
+
+const handleDeleteMetric = (gridNum) => {
+  const targetArr = getMetricArrByGridNum(gridNum);
+  if (targetArr) {
+    targetArr.value = [];
+  }
+};
+
+const handleReset = () => {
+  getAllMetricArrays().forEach(arr => arr.value = []);
+  searchKey.value = '';
+  getChartList();
+  ElMessage.info('已重置所有指标');
+};
+
+const handleSave = async () => {
+  saveLoading.value = true;
+  const saveData = getAllMetricArrays().map((arr, index) => {
+    const gridNum = index + 1;
+    const currentItem = arr.value[0];
+    return {
+      sort: gridNum,
+      chartId: currentItem?.chartId || null,
+      oldChartId: currentItem?.fixedOldChartId || null,
+      chartName: currentItem?.chartName || '',
+      chartCode: 'work',
+      oldSort: currentItem?.oldSort || 0,
+      color: currentItem?.color || ''
+    };
+  }).filter(item => item.chartId);
+
+  try {
+    const res = await getChartSetting(saveData);
+    ElMessage.success(res?.msg);
+    return saveData;
+  } catch (error) {
+    console.error('保存失败：', error);
+  } finally {
+	getChartList();
+    saveLoading.value = false;
+  }
+};
+
+const getRandomColor = () => {
+  const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b', '#86909c'];
+  return colors[Math.floor(Math.random() * colors.length)];
+};
+
+async function getChartList() {
+  try {
+    const reqParams = { chartCode: 'work' };
+    const res = await getChartListAll(reqParams);
+    rawChartData.value = res || [];
+
+    rawChartData.value.forEach(item => {
+      const sortNum = item.sort || 0;
+      if (sortNum >= 1 && sortNum <= 8) {
+        const targetArr = getMetricArrByGridNum(sortNum);
+        if (targetArr) {
+          targetArr.value = [{
+            ...item,
+            sort: sortNum, 
+            oldSort: item.sort,
+            fixedOldChartId: item.chartId,
+            oldChartId: item.chartId
+          }];
+        }
+      }
+    });
+  } catch (error) {
+    console.error('获取数据失败:', error);
+    rawChartData.value = [];
+  }
+}
+
+onMounted(async () => {
+  await getChartList();
+});
 </script>
 
-<style>
+<style scoped>
+.work-layout-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: #0a1a33;
+  overflow: hidden;
+}
+
+.main-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.left-area {
+  width: calc(85% - 1px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.right-area {
+  width: calc(15% - 1px);
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.5);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-top-header {
+  height: calc(6% - 1px);
+  box-sizing: border-box;
+}
+
+.work-main-section {
+  height: calc(94% - 1px);
+  box-sizing: border-box;
+}
+
+.work-section {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.chart-top-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  color: #e0e6ff;
+  box-sizing: border-box;
+}
+
+.chart-top-inner h2 {
+  font-size: 16px;
+  margin: 0;
+  font-weight: 600;
+}
+
+.btn-group {
+  display: flex;
+  gap: 8px;
+}
+
+.work-col {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.work-col-1-3 {
+  width: calc(100% / 3 - 2px);
+  box-sizing: border-box;
+}
+
+.work-card {
+  width: 100%;
+  background-color: rgba(15, 52, 96, 0.3);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  overflow: hidden;
+  position: relative;
+}
+
+.work-card-1-3 {
+  height: calc(100% / 3 - 2px);
+}
+
+.work-card-2-3 {
+  height: calc(200% / 3 - 2px);
+}
+
+.full-card {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.delete-icon {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  color: #ff6b6b;
+  font-size: 18px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: rgba(255, 107, 107, 0.1);
+  z-index: 10;
+  transition: all 0.2s ease;
+}
+
+.delete-icon:hover {
+  background-color: rgba(255, 107, 107, 0.3);
+  transform: scale(1.1);
+}
+
+.grid-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  box-sizing: border-box;
+  cursor: drop;
+}
+
+.metric-tag {
+  padding: 0;
+  background: none;
+  color: #e0e6ff;
+  font-size: 18px;
+  white-space: nowrap;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sort-num {
+  font-size: 14px;
+  color: #88a0c2;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.empty-tip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #88a0c2;
+  font-size: 14px;
+  pointer-events: none;
+}
+
+.search-box {
+  padding: 4px 0;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+
+.metric-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
+}
+
+.metric-list::-webkit-scrollbar {
+  width: 1px;
+}
+
+.metric-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.metric-list::-webkit-scrollbar-thumb {
+  background: rgba(60, 156, 255, 0.2);
+  border-radius: 0.5px;
+}
+
+.metric-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(60, 156, 255, 0.4);
+}
+
+.metric-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 6px;
+  margin-bottom: 6px;
+  border-radius: 6px;
+  color: #e0e6ff;
+  cursor: grab;
+  font-size: 14px;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+
+.metric-item.active {
+  background-color: rgba(60, 156, 255, 0.3);
+  border: 1px solid #3c9cff;
+}
+
+.metric-item:hover {
+  background-color: rgba(60, 156, 255, 0.15);
+}
+
+.color-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: 6px;
+}
 </style>

screen-vue/src/views/screen/Setting/index.vue

@@ -35,7 +35,6 @@
 
 <script setup>
 import { ref } from 'vue';
-
 import HomeIndex from './components/Home.vue'
 import WorkIndex from './components/Work.vue'
 import ErpIndex from './components/Erp.vue'
@@ -163,7 +162,6 @@ const activeMenu = ref(1)
   background: transparent;
   border: 1px solid rgba(26, 80, 139, 0.3);
   border-radius: 12px;
-  padding: 16px;
   backdrop-filter: blur(2px);
   overflow: auto;
   box-sizing: border-box;

screen-vue/src/views/screen/index.vue

@@ -113,7 +113,6 @@ const handleQuery = () => {
   });
 };
 
-// 新增设置按钮点击事件
 const handleSetting = () => {
   router.push('/screen/Setting/index');
 };
@@ -193,7 +192,6 @@ onMounted(() => {
   background-color: rgba(60, 156, 255, 0.25) !important;
 }
 
-/* 新增设置弹窗样式 */
 .dark-message-box {
   background-color: #0f3460 !important;
   border: 1px solid #1a508b !important;

src/main/java/com/mini/mybigscreen/Model/ChartConfig.java

@@ -0,0 +1,18 @@
+package com.mini.mybigscreen.Model;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+@Data
+public class ChartConfig implements Serializable {
+
+    private Integer sort;
+    private String chartId;
+    private String oldChartId;
+    private String chartName;
+
+    private String chartCode;
+    private Integer oldSort;
+    private String color;
+}

src/main/java/com/mini/mybigscreen/biz/controller/ChartInfoController.java

@@ -2,13 +2,15 @@ package com.mini.mybigscreen.biz.controller;
 
 import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.mini.mybigscreen.Model.ChartConfig;
+import com.mini.mybigscreen.Model.Message;
 import com.mini.mybigscreen.Model.Result;
 import com.mini.mybigscreen.biz.domain.ChartInfo;
 import com.mini.mybigscreen.biz.service.ChartInfoService;
 import jakarta.annotation.Resource;
-import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.RequestMapping;
+
-import org.springframework.web.bind.annotation.RestController;
+import java.util.List;
 
 /**
  * <p>
@@ -32,4 +34,23 @@ public class ChartInfoController {
                 .orderByAsc(ChartInfo::getSort);
         return Result.success(chartInfoService.list(query));
     }
+
+    @PostMapping("setting")
+    public Result<Message> save(@RequestBody List<ChartConfig> configs) {
+        for (ChartConfig config : configs) {
+            LambdaQueryWrapper<ChartInfo> newQuery = new LambdaQueryWrapper<ChartInfo>()
+                    .eq(ChartInfo::getChartId, config.getChartId())
+                    .eq(ChartInfo::getChartCode, config.getChartCode());
+            ChartInfo newChartInfo = chartInfoService.getOne(newQuery);
+            newChartInfo.setSort(config.getSort());
+            chartInfoService.updateById(newChartInfo);
+            LambdaQueryWrapper<ChartInfo> oldQuery = new LambdaQueryWrapper<ChartInfo>()
+                    .eq(ChartInfo::getChartId, config.getOldChartId())
+                    .eq(ChartInfo::getChartCode, config.getChartCode());
+            ChartInfo oldChartInfo = chartInfoService.getOne(oldQuery);
+            oldChartInfo.setSort(config.getOldSort());
+            chartInfoService.updateById(oldChartInfo);
+        }
+        return Result.success(new Message("配置保存成功", 200));
+    }
 }

src/main/java/com/mini/mybigscreen/biz/domain/ChartInfo.java

@@ -43,7 +43,7 @@ public class ChartInfo implements Serializable {
      * 序号
      */
     @TableField("sort")
-    private Long sort;
+    private Integer sort;
 
     /**
      * 组件名称