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

<template>
  <div class="application-overview">
    <!-- 右侧主内容区 -->
    <div class="main-content">
      <div style="display: flex; justify-content: space-between; padding-right: 30px">
        <!-- 搜索栏 -->
        <div class="search-bar">
          <el-input placeholder="请输入应用名称关键字" v-model="searchKeyword" class="search-input">
            <!-- <template #append>
                        <el-button type="primary" class="search-btn">搜索</el-button>
                    </template> -->
          </el-input>
          <el-button type="primary" class="search-btn" @click="getDmsDataList">搜索</el-button>
        </div>

        <!-- 应用范围过滤 -->
        <!-- <div class="filter-tabs">
                <el-radio-group v-model="activeTab" size="medium" @change="handleTabChange" v-for="item in buffOptions" :key="item.value">
                    <el-radio-button :label="item.label">{{ item.value }}</el-radio-button>
                </el-radio-group>
            </div> -->

        <!-- 应用标签过滤 -->
        <div class="filter-group">
          <el-radio-group
            v-model="tagFilter"
            size="medium"
            @change="handleTagFilterChange"
            v-for="item in tagOptions"
            :key="item.value"
          >
            <el-radio-button :label="item.label">{{ item.value }}</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <!-- 应用卡片网格 -->
      <div class="app-content">
        <div class="applications-grid">
          <div class="application-card" v-for="(app, index) in applications" :key="index">
            <div class="card-image">
              <div
                v-if="app.issf != '0'"
                style="
                  position: absolute;
                  background: #0e3a74;
                  border-radius: 5px 0px 5px 0px;
                  width: 30px;
                  height: 30px;
                "
              >
                <el-icon :size="20" color="yellow" style="position: relative; left: 5px; top: 5px">
                  <StarFilled />
                </el-icon>
              </div>
              <img :src="curUrl + app.c_picture" :alt="app.title" />
            </div>
            <div class="card-content">
              <div class="app-header">
                <h3 class="app-name">{{ app.title }}</h3>
                <!-- <span class="app-level">{{ app.buffName }}</span> -->
                <span class="app-version">{{ app.version }}</span>
              </div>
              <div class="app-tags">
                <el-tag size="small" type="success">{{ app.buffName }}</el-tag>
                <!-- <el-tag size="small" type="success">{{ app.status }}</el-tag> -->
                 <span v-for="tag in app.tags" :key="tag">
                    <el-tag size="small" v-if="tag != ''">{{ tag }}</el-tag>
                 </span>

              </div>
              <el-tooltip placement="top" effect="dark">
                <template #content>
                  <div style="max-width: 500px">{{ app.content }}</div>
                </template>
                <p class="app-description">{{ app.content }}</p>
              </el-tooltip>
              <div class="app-footer">
                <span class="app-date">{{ app.createTime }}</span>
                <el-button
                  type="primary"
                  size="small"
                  class="visit-button"
                  v-if="app.c_url"
                  @click="handleOpenPage(app)"
                  >访问</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 加载更多按钮 -->
      <!-- <div class="load-more">
        <el-button type="primary" size="medium">查看更多</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import appCenter from "@/api/appCenter";
import moment from "moment";
export default {
  name: "ApplicationOverview",
  data() {
    return {
      searchKeyword: "",
      activeTab: "all",
      tagFilter: sessionStorage.getItem("activeTag")
        ? parseInt(sessionStorage.getItem("activeTag"))
        : "all",
      curUrl: systemConfig.dmsDataProxy,
      buffOptions: [],
      tagOptions: [],
      applications: [],
      itemApplications: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    handleTabChange() {
      // console.log(this.activeTab);
      if (this.activeTab == "all") {
        this.applications = this.itemApplications;
      } else {
        this.applications = this.itemApplications.filter((item) => item.appbuff == this.activeTab);
      }
    },
    handleTagFilterChange() {
      if (this.tagFilter == "all") {
        sessionStorage.setItem("activeTag", "");
        this.applications = this.itemApplications;
      } else {
        sessionStorage.setItem("activeTag", this.tagFilter);
        this.applications = this.itemApplications.filter((item) =>
          item.apptags.split(",").includes(this.tagFilter.toString())
        );
      }
    },
    initData() {
      this.getDmsCNameAType();
      this.getDmsTagSName();
      this.getDmsDataList();
    },
    handleOpenPage(param) {
      if (param.c_url) {
        if(param.c_url.indexOf(":2024") > -1){
          window.open(param.c_url + "?token=" + localStorage.getItem("token"), "_blank");
        }else{
          window.open(param.c_url, "_blank");
        }
      }
    },
    getDmsTagSName() {
      let requestParams = {
        sName: "tag",
      };
      appCenter.getDmsSName(requestParams).then((res) => {
        if (res.code === 200) {
          this.tagOptions = res.content.map((item) => ({
            label: item.index,
            value: item.name,
          }));
          let allOption = {
            label: "all",
            value: "全部",
          };
          this.tagOptions.unshift(allOption);
        }
      });
    },
    getDmsCNameAType() {
      let allOption = {
        label: "all",
        value: "全部",
      };
      this.buffOptions.unshift(allOption);
      let obj = this.$getDmsTypes("applevel");
      for (let key in obj) {
        this.buffOptions.push({
          label: key,
          value: obj[key],
        });
      }
      // let requestParams = {
      //   cName: "applevel",
      //   type: 0,
      // };
      // appCenter.getDmsCNameAType(requestParams).then((res) => {
      //   if (res.code === 200) {
      //       this.buffOptions = res.content.map(item => ({
      //         label: item.index,
      //         value: item.name
      //       }));
      //       let allOption = {
      //         label: 'all',
      //         value: '全部'
      //       }
      //       this.buffOptions.unshift(allOption);

      //   }
      // });
    },
    getDmsDataList() {
      let requestParams = {
        columnId: systemConfig.columnIds[1], // 应用中心栏目id
        states: 0,
        orderBy: JSON.stringify([{ field: "frame_time", orderByType: 2 }]),
        pageSize: 9999,
        page: 0,
      };
      if (this.searchKeyword) {
        requestParams.search = JSON.stringify([
          {
            field: "title",
            searchType: 2,
            content: { value: "%" + this.searchKeyword + "%" },
          },
        ]);
      }
      appCenter.getDmsDataList(requestParams).then((res) => {
        if (res.code === 200) {
          this.itemApplications = res.content.data.map((item) => ({
            ...item,
            status:
              item.status === 0
                ? "待审核"
                : item.status === 1
                  ? "待发布"
                  : item.status === 2
                    ? "未完成"
                    : "已完成",
            buffName:
              this.buffOptions.find((info) => info.label == item.appbuff.trim())?.value || "",
            tags: item.apptags
              .split(",")
              .map((tag) => this.tagOptions.find((info) => info.label == tag.trim())?.value || ""),
            createTime: moment(item.create_time).format("YYYY-MM-DD HH:mm:ss"),
          }));
          this.applications = this.itemApplications;
          // this.handleTabChange();
          this.handleTagFilterChange();
        } else {
          this.applications = [];
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.application-overview {
  display: flex;
  width: 100%;
  background-color: #00002a;
  color: #ffffff;
}

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

/* 搜索栏样式 */
.search-bar {
  margin-bottom: 20px;

  .search-input {
    width: 400px;

    // ::v-deep .el-input__inner {
    //   background-color: rgba(255, 255, 255, 0.1);
    //   border: 1px solid rgba(255, 255, 255, 0.2);
    //   color: #ffffff;

    //   &::placeholder {
    //     color: rgba(255, 255, 255, 0.6);
    //   }
    // }

    // ::v-deep .el-input__prepend {
    //   background-color: rgba(255, 255, 255, 0.1);
    //   border-color: rgba(255, 255, 255, 0.2);
    //   color: rgba(255, 255, 255, 0.8);
    // }
  }
  .search-btn {
    margin-left: 10px;
  }
}

/* 过滤标签样式 */
.filter-tabs {
  margin-bottom: 30px;

  :deep(.el-radio-group) {
    .el-radio-button {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.8);

      &:first-child .el-radio-button__inner {
        border-left-color: rgba(255, 255, 255, 0.2);
      }

      .el-radio-button__inner {
        background-color: transparent;
        border-color: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.8);
      }

      &.is-active {
        background-color: #1890ff;

        .el-radio-button__inner {
          background-color: #1890ff;
          border-color: #1890ff;
          color: #ffffff;
        }
      }
    }
  }
}
.app-content {
  // height: 640px;
  height: calc(100vh - 160px);
  overflow: auto;
  padding-right: 20px;
}

/* 应用卡片网格样式 */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

/* 应用卡片样式 */
.application-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(24, 144, 255, 0.2);
    border-color: rgba(24, 144, 255, 0.4);
  }

  .card-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    // &:hover img {
    //   transform: scale(1.05);
    // }
  }

  .card-content {
    padding: 15px;
  }

  .app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .app-name {
      font-size: 16px;
      font-weight: bold;
      margin: 0;
      color: #ffffff;
    }
    .app-level {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      background-color: rgba(27, 117, 236, 0.8);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .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 {
    margin-bottom: 10px;

    .el-tag {
      margin-right: 5px;
      margin-bottom: 5px;
    }
  }

  .app-description {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .app-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

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

    .visit-button {
      padding: 4px 12px;
      font-size: 12px;
      border-radius: 4px;
    }
  }
}

/* 加载更多按钮 */
.load-more {
  text-align: center;
  margin-bottom: 30px;

  .el-button {
    padding: 10px 30px;
    background-color: rgba(24, 144, 255, 0.2);
    border-color: rgba(24, 144, 255, 0.4);
    color: #1890ff;

    &:hover {
      background-color: rgba(24, 144, 255, 0.3);
      border-color: rgba(24, 144, 255, 0.6);
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .applications-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .sidebar {
    width: 180px;

    .sidebar-menu .menu-item {
      padding: 12px 15px;

      i {
        font-size: 16px;
      }
    }
  }

  .main-content {
    padding: 15px 20px;
  }

  .search-input {
    width: 300px !important;
  }

  .applications-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
  }
}

/* 在你的组件或全局样式文件中 */
.custom-tooltip-width {
  width: 200px; /* 设置你想要的宽度 */
}
</style>