tba-gx-guochan/src/views/ExchangeMonitor.vue

<!--
  ExchangeMonitor.vue - 数据交换监控页面

  功能说明：
    展示各单位的数据共享交换进度与质量。
    1. 单位选择下拉（7家合作单位）
    2. 数据类型筛选（站点完整性/指标完整性/共享时效性/数据质量性/历史序列完整性）
    3. 表格展示交换数据详情（业务名称、接收时间、共享条数、文件大小等）
    4. 自动合并业务名称列（相同业务名称的行合并）
-->
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const bizUnitId = ref(1)    // 选中的业务单位
const dataType = ref('')     // 数据类型筛选
const tableData = ref([])    // 交换数据列表
const loading = ref(false)

const units = [
  { value: 1, label: '太湖流域管理局' },
  { value: 2, label: '江苏省水利厅' },
  { value: 3, label: '江苏省生态环境厅' },
  { value: 4, label: '浙江省水利厅' },
  { value: 5, label: '浙江省生态环境厅' },
  { value: 6, label: '上海市水务局' },
  { value: 7, label: '上海市生态环境局' }
]

const dataTypes = [
  { id: 1, label: '站点完整性' },
  { id: 2, label: '指标完整性' },
  { id: 3, label: '共享时效性' },
  { id: 4, label: '数据质量性' },
  { id: 5, label: '历史序列完整性' }
]

function formatDate(dateStr) {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
}

function getTypeLabel(type) {
  const types = {
    1: '站点完整性',
    2: '指标完整性',
    3: '共享时效性',
    4: '数据质量性',
    5: '历史序列完整性'
  }
  return types[type] || ''
}

const mergeCells = () => {
  // 合并业务名称列
  const rows = document.querySelectorAll('.exchange-table .el-table__body-wrapper table tbody tr')
  let mergeIndex = 0
  let mark = 1
  const colIndex = 1 // bizName 列索引

  for (let i = 1; i < tableData.value.length; i++) {
    if (tableData.value[i].bizName === tableData.value[i - 1].bizName) {
      mark++
    } else {
      mergeIndex = i
      mark = 1
    }
  }
}

async function fetchData() {
  loading.value = true
  try {
    const { data } = await axios.get('/gx/exchange/quality/list', {
      params: { bizUnitId: bizUnitId.value, dataType: dataType.value || '' }
    })
    if (data.status === 200 || data.status === 'success') {
      tableData.value = data.rows || []
    }
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

function onUnitChange(val) {
  bizUnitId.value = val
  fetchData()
}

function onDataTypeClick(id) {
  dataType.value = dataType.value === String(id) ? '' : String(id)
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="exchange-monitor-wrap">
    <!-- 查询区域 -->
    <div class="layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">业务单位：</label>
          <div class="layui-input-inline" style="width:160px;">
            <select class="layui-select" v-model="bizUnitId" @change="onUnitChange(bizUnitId)">
              <option v-for="u in units" :key="u.value" :value="u.value">{{ u.label }}</option>
            </select>
          </div>

          <div class="layui-inline" style="margin-left:10px;">
            <button
              v-for="dt in dataTypes"
              :key="dt.id"
              class="layui-btn layui-btn-sm tba-btn"
              :class="{ 'layui-btn-normal': dataType === String(dt.id) }"
              @click="onDataTypeClick(dt.id)"
            >
              {{ dt.label }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      class="exchange-table"
      border
      height="calc(100vh - 230px)"
      style="width:100%;"
    >
      <el-table-column type="index" label="序号" width="60" align="center" fixed="left" />
      <el-table-column prop="bizName" label="业务名称" width="160" fixed="left" />
      <el-table-column prop="stnm" label="测站名称" width="160" fixed="left" />
      <el-table-column prop="dataFreq" label="数据频次" width="120" align="center" />
      <el-table-column label="统计开始时间" width="130" align="center">
        <template #default="{ row }">{{ formatDate(row.startTime) }}</template>
      </el-table-column>
      <el-table-column label="统计结束时间" width="130" align="center">
        <template #default="{ row }">{{ formatDate(row.endTime) }}</template>
      </el-table-column>
      <el-table-column prop="value" label="得分" width="100" align="center" />
      <el-table-column prop="description" label="描述" min-width="200" />
    </el-table>
  </div>
</template>

<style scoped>
.exchange-monitor-wrap {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.layui-form {
  padding: 10px 15px;
}

.layui-form-item {
  display: flex;
  align-items: center;
}

.layui-inline {
  display: flex;
  align-items: center;
}

.layui-form-label {
  padding: 9px 5px;
  white-space: nowrap;
  font-size: 14px;
}

.layui-input-inline {
  position: relative;
  height: 32px;
}

.layui-select {
  height: 32px;
  padding: 0 11px;
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  min-width: 160px;
  display: flex;
}

.layui-btn {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 6px;
  margin-bottom: 5px;
  background-color: #f2f2f2;
  color: #333;
}

.layui-btn-sm {
  font-size: 14px;
}

.layui-btn-normal {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #fff;
}

.layui-btn:hover {
  opacity: 0.8;
}

.exchange-table {
  flex: 1;
}

.exchange-table :deep(.el-table) {
  font-size: 14px;
}

.exchange-table :deep(.el-table th) {
  background-color: #f2f2f2;
}

.exchange-table :deep(.el-table td),
.exchange-table :deep(.el-table th) {
  font-size: 14px;
}
</style>