qp_onemap_ui/src/views/yygl/manage/index.vue

<template>
  <div class="application-management">
    <!-- 右侧主内容区 -->
    <div class="main-content">
      <!-- 过滤条件区域 -->
      <div class="filter-section">
        <!-- 应用范围过滤 -->
        <div class="filter-group">
          <span class="filter-title">应用范围：</span>
          <el-radio-group v-model="scopeFilter" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="district">区级</el-radio-button>
            <el-radio-button label="street">街道</el-radio-button>
            <el-radio-button label="community">社区</el-radio-button>
          </el-radio-group>
        </div>

        <!-- 应用状态过滤 -->
        <div class="filter-group">
          <span class="filter-title">应用状态：</span>
          <el-radio-group v-model="statusFilter" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="online">在等</el-radio-button>
            <el-radio-button label="offline">在建</el-radio-button>
            <el-radio-button label="suspended">在维</el-radio-button>
            <el-radio-button label="expired">停用</el-radio-button>
          </el-radio-group>
        </div>

        <!-- 应用标签过滤 -->
        <div class="filter-group">
          <span class="filter-title">应用标签：</span>
          <el-radio-group v-model="tagFilter" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="special">特色应用</el-radio-button>
            <el-radio-button label="code">代码平台</el-radio-button>
            <el-radio-button label="government">仅供演示</el-radio-button>
            <el-radio-button label="demo">示范应用</el-radio-button>
            <el-radio-button label="water">水务</el-radio-button>
            <el-radio-button label="test">测试</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <!-- 搜索栏区域 -->
      <div class="search-section">
        <el-input 
          placeholder="请输入应用名称模块相关关键字" 
          v-model="searchKeyword" 
          class="search-input" 
          clearable
        >
          <template #prepend><el-icon><search /></el-icon></template>
        </el-input>
        <el-button type="primary" class="search-btn">搜索</el-button>
        <el-button class="reset-btn">重置</el-button>
        <el-button type="success" class="add-btn">+ 应用介入</el-button>
      </div>

      <!-- 应用列表区域 -->
      <div class="applications-section">
        <div class="section-header">
          <span class="total-count">共检索43个应用</span>
          <div class="sort-control">
            <span>排序：</span>
            <el-select v-model="sortBy" size="small" style="width: 120px;">
              <el-option label="上架时间" value="publishTime"></el-option>
              <el-option label="下架时间" value="romveTime"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 应用列表 -->
        <div class="applications-list">
          <div class="application-item" v-for="(app, index) in applications" :key="index">
            <div class="app-info">
              <div class="app-logo">
                <img :src="app.logo" :alt="app.name" />
              </div>
              <div class="app-details">
                <div class="app-header">
                  <h3 class="app-name">{{ app.name }}</h3>
                  <span class="app-version">{{ app.version }}</span>
                </div>
                <div class="app-tags">
                  <el-tag size="small" type="primary" v-if="app.isPublic">区属应用</el-tag>
                  <el-tag size="small" v-if="app.tag">{{ app.tag }}</el-tag>
                </div>
              </div>
            </div>

            <div class="app-metrics">
              <div class="metric-item">
                <span class="metric-label">应用范围</span>
                <span class="metric-value">{{ app.buff }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">状态</span>
                <span class="metric-value" :class="`status-${app.status}`">{{ app.statusText }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">使用单位</span>
                <span class="metric-value">{{ app.usingUnit }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">访问量</span>
                <span class="metric-value">{{ app.visitCount }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">上架时间</span>
                <span class="metric-value">{{ app.createDate }}</span>
              </div>
            </div>

            <div class="app-actions">
              <!-- <span class="app-date">{{ app.createDate }}</span> -->
              <el-button type="primary" size="small" class="detail-btn">查看详情</el-button>
            </div>
          </div>
        </div>

        <!-- 分页控件 -->
        <div class="pagination-section">
          <span class="total-text">共43个应用</span>
          <el-pagination
            layout="prev, pager, next, jumper, total"
            :total="43"
            :current-page="currentPage"
            :page-size="10"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ApplicationManagement",
  data() {
    return {
      // 过滤条件
      scopeFilter: 'all',
      statusFilter: 'all',
      tagFilter: 'all',
      searchKeyword: '',
      
      // 排序条件
      sortBy: 'publishTime',
      
      // 分页信息
      currentPage: 1,
      
      // 应用列表数据
      applications: [
        {
          logo: require('@/assets/images/common/app-bg-1.png'),
          name: '水系统综合管理',
          version: 'v1.0',
          isPublic: true,
          tag: '水务',
          buff: '市级',
          status: 'offline',
          statusText: '在维',
          usingUnit: '暂无',
          visitCount: 64,
          createDate: '2025-10-29 16:10:17'
        },
        {
          logo: require('@/assets/images/common/app-bg-2.png'),
          name: '虹口区历史脉管理系统开发',
          version: 'v1.0',
          isPublic: true,
          tag: '',
          buff: '区级',
          status: 'online',
          statusText: '在线',
          usingUnit: '虹口区文旅局',
          visitCount: 8,
          createDate: '2025-09-15 18:02:32'
        },
        {
          logo: require('@/assets/images/common/app-bg-3.png'),
          name: '虹口区智慧环卫监管平台',
          version: 'v1.0',
          isPublic: true,
          tag: '',
          buff: '街道',
          status: 'offline',
          statusText: '在维',
          usingUnit: '虹口区城管局',
          visitCount: 14,
          createDate: '2025-09-15 18:01:57'
        },
        {
          logo: require('@/assets/images/common/app-bg-4.png'),
          name: '上海市虹口区一网统管平台',
          version: 'v1.0',
          isPublic: true,
          tag: '',
          buff: '街道',
          status: 'online',
          statusText: '在线',
          usingUnit: '虹口区政府办',
          visitCount: 15,
          createDate: '2025-09-15 18:01:09'
        },
        {
          logo: require('@/assets/images/common/u661.png'),
          name: '上海公共交通服务保障',
          version: 'v1.0',
          isPublic: true,
          tag: '',
          buff: '社区',
          status: 'offline',
          statusText: '在维',
          usingUnit: '虹口区体育局',
          visitCount: 13,
          createDate: '2025-09-15 18:00:22'
        }
      ]
    }
  },
  methods: {
    // 处理分页变化
    handleCurrentChange(page) {
      this.currentPage = page;
      // 这里可以添加分页数据加载逻辑
    }
  }
}
</script>

<style lang="less" scoped>
.application-management {
  width: 100%;
  background-color: #08224a;
  color: #ffffff;
}

/* 右侧主内容区 */
.main-content {
  padding: 20px 30px;
  overflow-y: auto;
}

/* 过滤条件区域 */
.filter-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* 搜索栏区域 */
.search-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
}

.search-input {
  // width: 400px;
  margin-right: 10px;
}

.search-btn, .reset-btn, .add-btn {
  padding: 8px 16px;
  font-size: 14px;
}

/* 应用列表区域 */
.applications-section {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.total-count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* 应用列表 */
.applications-list {
  margin-bottom: 20px;
}

.application-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: rgba(24, 144, 255, 0.4);
    background-color: rgba(24, 144, 255, 0.05);
  }
}

.app-info {
  display: flex;
  align-items: center;
  // flex: 1;
  width: 500px;
  gap: 15px;
}

.app-logo {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.app-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-name {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: #ffffff;
}

.app-version {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.app-tags {
  display: flex;
  gap: 5px;
}

/* 应用指标 */
.app-metrics {
  display: flex;
  gap: 40px;
  flex: 1;
  justify-content: space-around;
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.metric-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.metric-value {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.status-online {
  color: #67c23a;
}

.status-offline {
  color: #e6a23c;
}

.status-suspended {
  color: #909399;
}

.status-expired {
  color: #f56c6c;
}

/* 应用操作 */
.app-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.app-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.detail-btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* 分页控件 */
.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.total-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .app-metrics {
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .main-content {
    padding: 15px 20px;
  }
  
  .filter-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-input {
    width: 300px;
  }
  
  .application-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .app-metrics {
    width: 100%;
    justify-content: space-around;
  }
  
  .app-actions {
    width: 100%;
    justify-content: space-between;
  }
}
</style>