数据展示宽度更新

gw-ui/src/views/front/DataCommon.vue

@@ -33,6 +33,7 @@
       <div class="table-container">
         <el-table :data="tableData" stripe border v-loading="loading" @row-click="handleRowClick">
           <template v-if="isWryType">
+            <el-table-column type="index" label="序号" width="60" align="center" />
             <el-table-column prop="stnm" label="行政区" width="250" />
             <el-table-column prop="year" label="年份" width="80" />
             <el-table-column prop="cod" label="化学需氧量排放总量（吨）" width="200" />
@@ -41,11 +42,10 @@
             <el-table-column prop="tp" label="总磷排放总量（吨）" width="200" />
           </template>
           <template v-else>
+            <el-table-column type="index" label="序号" width="60" align="center" />
             <el-table-column prop="stcd" label="站码" width="100" />
             <el-table-column prop="stnm" label="站名" width="150" />
-            <el-table-column prop="rvnm" label="河流名称" width="120" />
-            <el-table-column prop="lttd" label="纬度" width="100" />
-            <el-table-column prop="lgtd" label="经度" width="100" />
+            <el-table-column prop="rvnm" label="河流名称" width="200" />
             <el-table-column prop="latestDataTime" label="最新数据时间" width="170" />
             <el-table-column prop="wt" label="水温(℃)" width="100" />
             <el-table-column prop="ph" label="pH" width="80" />

gw-ui/src/views/front/Home.vue

@@ -70,15 +70,62 @@
           <div class="unit-tags">
             <el-tag v-for="tag in unit.tags" :key="tag" size="small" :type="getTagType(tag)">{{ tag }}</el-tag>
           </div>
-          <el-button type="primary" size="small" @click="viewUnit(unit.code)">查看详情</el-button>
+          <el-button type="primary" size="small" @click="viewUnit(unit)">查看详情</el-button>
         </div>
       </div>
     </div>
+
+    <el-dialog :title="unitDetailTitle" v-model="unitDialogVisible" width="900px" append-to-body>
+      <div class="unit-detail-content">
+        <div class="unit-detail-header">
+          <div class="detail-icon" :style="{ background: selectedUnit?.color }">
+            <svg-icon :icon-class="selectedUnit?.icon" />
+          </div>
+          <div class="detail-info">
+            <h3>{{ selectedUnit?.name }}</h3>
+            <p>{{ selectedUnit?.code }}</p>
+          </div>
+          <div class="detail-stats">
+            <div class="detail-stat">
+              <span class="num">{{ bizList.length }}</span>
+              <span class="label">业务域数量</span>
+            </div>
+            <div class="detail-stat">
+              <span class="num">{{ selectedUnit?.stationCount }}</span>
+              <span class="label">监测站点</span>
+            </div>
+          </div>
+        </div>
+        
+        <div class="biz-section">
+          <h4>业务域列表</h4>
+          <div class="biz-card-grid">
+            <div class="biz-card" v-for="biz in bizList" :key="biz.bizCode">
+              <div class="biz-header">
+                <span class="biz-name">{{ biz.bizName }}</span>
+                <el-tag size="small" :type="getBizTypeTag(biz.bizType)">{{ biz.bizType }}</el-tag>
+              </div>
+              <div class="biz-info">
+                <div class="info-item">
+                  <span class="info-label">共享频率</span>
+                  <span class="info-value">{{ biz.dataFreq || '-' }}</span>
+                </div>
+              </div>
+              <div class="biz-note">
+                <span class="note-label">数据说明</span>
+                <p class="note-content">{{ biz.bizNote || '暂无说明' }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import request from '@/utils/request'
 
 const units = ref([
   {
@@ -100,7 +147,7 @@ const units = ref([
     tags: ['水质', '生态']
   },
   {
-    code: 'JS-SL',
+    code: 'JS_SL',
     name: '江苏省水利厅',
     icon: 'table',
     color: '#f59e0b',
@@ -109,7 +156,7 @@ const units = ref([
     tags: ['水文', '工情']
   },
   {
-    code: 'JS-ST',
+    code: 'JS_ST',
     name: '江苏省生态环境厅',
     icon: 'monitor',
     color: '#ef4444',
@@ -118,7 +165,7 @@ const units = ref([
     tags: ['水质', '生态']
   },
   {
-    code: 'ZJ-SL',
+    code: 'ZJ_SL',
     name: '浙江省水利厅',
     icon: 'server',
     color: '#8b5cf6',
@@ -127,7 +174,7 @@ const units = ref([
     tags: ['水文', '工情']
   },
   {
-    code: 'ZJ-ST',
+    code: 'ZJ_ST',
     name: '浙江省生态环境厅',
     icon: 'chart',
     color: '#ec4899',
@@ -136,7 +183,7 @@ const units = ref([
     tags: ['水质', '生态']
   },
   {
-    code: 'SH-SW',
+    code: 'SH_SW',
     name: '上海市水务局',
     icon: 'table',
     color: '#06b6d4',
@@ -145,7 +192,7 @@ const units = ref([
     tags: ['水文', '工情']
   },
   {
-    code: 'SH-ST',
+    code: 'SH_ST',
     name: '上海市生态环境局',
     icon: 'monitor',
     color: '#84cc16',
@@ -155,6 +202,14 @@ const units = ref([
   }
 ])
 
+const unitDialogVisible = ref(false)
+const selectedUnit = ref(null)
+const bizList = ref([])
+
+const unitDetailTitle = computed(() => {
+  return selectedUnit.value ? `${selectedUnit.value.name} - 业务域详情` : '单位详情'
+})
+
 function getTagType(tag) {
   const types = {
     '水文': 'primary',
@@ -165,8 +220,30 @@ function getTagType(tag) {
   return types[tag] || 'info'
 }
 
-function viewUnit(code) {
-  console.log('查看单位:', code)
+function getBizTypeTag(bizType) {
+  const types = {
+    '水位': 'primary',
+    '水质': 'success',
+    '调度': 'warning',
+    '工程': 'danger'
+  }
+  return types[bizType] || 'info'
+}
+
+function viewUnit(unit) {
+  selectedUnit.value = unit
+  loadBizList(unit.code)
+  unitDialogVisible.value = true
+}
+
+function loadBizList(unitCode) {
+  request({
+    url: '/gx/biz/front/list',
+    method: 'get',
+    params: { bizUnit: unitCode }
+  }).then(res => {
+    bizList.value = res.data || []
+  })
 }
 </script>
 
@@ -399,4 +476,148 @@ function viewUnit(code) {
 .value.danger {
   color: #ef4444;
 }
+
+.unit-detail-content {
+  padding: 10px 0;
+}
+
+.unit-detail-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+
+.detail-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.detail-icon :deep(svg) {
+  width: 30px;
+  height: 30px;
+  color: #fff;
+}
+
+.detail-info h3 {
+  font-size: 18px;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+  color: #1f1f1f;
+}
+
+.detail-info p {
+  font-size: 14px;
+  color: #646464;
+  margin: 0;
+}
+
+.detail-stats {
+  margin-left: auto;
+  display: flex;
+  gap: 30px;
+}
+
+.detail-stat {
+  text-align: center;
+}
+
+.detail-stat .num {
+  display: block;
+  font-size: 24px;
+  font-weight: bold;
+  color: #1c97e7;
+}
+
+.detail-stat .label {
+  font-size: 12px;
+  color: #909399;
+}
+
+.biz-section h4 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0 0 15px 0;
+  color: #1f1f1f;
+}
+
+.biz-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+}
+
+.biz-card {
+  background: #f8fafc;
+  border-radius: 10px;
+  padding: 16px;
+  border: 1px solid #e4e7ed;
+  transition: all 0.3s ease;
+}
+
+.biz-card:hover {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border-color: #dcdfe6;
+}
+
+.biz-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.biz-name {
+  font-size: 15px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.biz-info {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 12px;
+}
+
+.info-item {
+  flex: 1;
+}
+
+.info-label {
+  font-size: 12px;
+  color: #909399;
+  margin-right: 8px;
+}
+
+.info-value {
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.biz-note {
+  padding-top: 12px;
+  border-top: 1px dashed #e4e7ed;
+}
+
+.note-label {
+  font-size: 12px;
+  color: #909399;
+  margin-right: 8px;
+}
+
+.note-content {
+  font-size: 13px;
+  color: #606266;
+  margin: 0;
+  line-height: 1.6;
+  word-break: break-all;
+}
 </style>