qp_onemap_ui/src/views/yygl/index.vue

<template>
  <div class="application-center">
    <!-- 顶部横幅区域 -->
    <div class="banner">
      <div class="banner-content">
        <h1 class="banner-title">应用中心</h1>
        <p class="banner-description">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收集、管理区级应用的访问地址、使用单位、使用情况等。区委办局、街镇、居村应基于区级节点开展区级时空应用建设。
        </p>
        <!-- <div>
          <el-button type="primary" class="enter-button" @click="handleEnterClick">立即体验</el-button>
        </div> -->
      </div>
    </div>

    <!-- 示范应用区域 -->
    <div class="demo-applications">
      <!-- <div class="section-title">
        <h2>示范应用</h2>
        <div class="title-line"></div>
      </div> -->

      
      <!-- <div class="applications-grid" >
        <div v-for="item in applications" :key="item.id">
          <div class="application-card">
            <div class="card-image">
              <img :src="curUrl + item.c_picture" :alt="item.title" />
            </div>
            <h3 class="card-title"> {{ item.title }}</h3>
            <div class="card-info">
              <p><strong>访问类型：</strong> {{ item.type }}</p>
              <p><strong>建设单位：</strong> {{ item.jsdw }}</p>
              <p><strong>建设时间：</strong> {{ item.createTime }}</p>
            </div>
          </div>
        </div>
      </div> -->

      <div v-for="useCaseItem in appCenterlications" :key="useCaseItem.title">
        <div class="title " v-if="useCaseItem.title != '基础能力'"  style="margin: 50px 0px;display: flex;justify-content: space-between;align-items: baseline;">
          <div></div>
          <div style="font-size: 24px;margin-top: 10px;text-align: center;font-weight: bold;">{{useCaseItem.title}}</div>
          <div style="color: #ADE8FE;cursor: pointer;" @click="handleEnterClick(useCaseItem.title)">查看更多></div>
        </div>
        <div class="warp-container" v-if="useCaseItem.title != '基础能力'" >
        <el-carousel :interval="40000" type="card" height="600px">
            <el-carousel-item v-for="item in useCaseItem.data" :key="item.title" @click="handleTabsOpenPage(item)">
                <div class="warp-page-card" >
                  <div class="warp-page-img" :style="`background-image: url(${curUrl}${item.picture});`"></div>
                  <div class="warp-page-text">
                    <div class="warp-page-text-title">{{ item.title }}</div>
                    <div class="warp-page-text-desc">{{ item.text }}</div>
                  </div>
                </div>
              </el-carousel-item>
          </el-carousel>
        </div>
      </div>


      <!-- <div v-for="useCaseItem in examplelist" :key="useCaseItem.title" :id="useCaseItem.title === '统建应用' ? 'tjyy' : useCaseItem.title === '应用支撑' ? 'yyzc' : ''">
        <div class="title " v-if="useCaseItem.title != '基础能力'"  style="margin: 50px 0px;display: flex;justify-content: space-between;align-items: baseline;">
          <div></div>
          <div style="font-size: 24px;margin-top: 10px;text-align: center;font-weight: bold;">{{useCaseItem.title}}</div>
          <div style="color: #ADE8FE;cursor: pointer;" @click="handleEnterClick">查看更多></div>
        </div>
        <div class="warp-container" v-if="useCaseItem.title != '基础能力'" >
          <div class="warp-page-card" v-for="item in useCaseItem.data" :key="item.title" @click="handleTabsOpenPage(item)">
            <div class="warp-page-img" :style="`background-image: url(${item.picture});`"></div>
            <div class="warp-page-text">
              <div class="warp-page-text-title">{{ item.title }}</div>
              <div class="warp-page-text-desc">{{ item.text }}</div>
            </div>
          </div>

        </div>
      </div> -->

    </div>

  </div>
</template>

<script>
import appCenter from "@/api/appCenter";
import moment from 'moment';
export default {
  name: "ApplicationCenter",
  data() {
    return {
      applications:[],
      appCenterlications:[],
      itemAppCenterlications:[],
      tagOptions: [],
      curUrl:systemConfig.dmsDataProxy,
      examplelist:systemConfig.examplelist,
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    handleEnterClick(val) {
      let tag = this.tagOptions.find((info)=>info.value == val).label;
      sessionStorage.setItem('activeTag', parseInt(tag));
      this.$router.push('appCenter');
    },
    initData() {
      this.getDmsTagSName();
    },
    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,
          }));
          this.appCenterlications = res.content.map((item) => ({
            title: item.name,
            data: [],
          }));
          this.getDmsDataList();
        }
      });
    },
    //示范数据
    getDmsSFDataList(){
      let requestParams = {
        columnId: systemConfig.columnIds[0], // 应用中心栏目id（示范应用）
        states: 0,
        pageSize: 999,
        page: 0
      };
      appCenter.getDmsDataList(requestParams).then(res => {
        if (res.code === 200) {
          this.applications = res.content.data.map(item => ({
            ...item,
            type: item.c_fwlx === 0 ? '禁用' : '公开',
            createTime: moment(item.create_time).format('YYYY-MM-DD')
          }))
        // console.log(this.applications);
        }else{
          this.applications = [];
        }
      })
    },
    // 应用中心数据
    getDmsDataList() {
       let requestParams = {
        columnId: systemConfig.columnIds[1], // 应用中心栏目id
        states: 0,
        orderBy: JSON.stringify([{"field":"frame_time","orderByType":2}]),
        pageSize: 9999,
        page: 0
      };
      appCenter.getDmsDataList(requestParams).then((res) => {
        if (res.code === 200) {
           let arr = res.content.data.map((item) => ({
            ...item,
            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.appCenterlications.forEach(item => {
             arr.forEach(info => {
                if(info.tags.includes(item.title) == true && info.issf != '0'){
                  let str = {
                      id:info.id,
                      tags: ["盈浦街道", "夏阳街道"],
                      title: info.title,
                      text: info.content,
                      picture: info.c_picture,
                      url:info.c_url
                  }
                  item.data.push(str);
                }
              })
          })
          console.log(this.appCenterlications);
        } else {
          this.appCenterlications = [];
        }
      });
    },
    handleTabsOpenPage(item){
        // if(item.url){
        //   window.open(item.url);
        // }
    }

  }
}
</script>

<style lang="less" scoped>

:deep(.el-carousel__arrow--left) {
  background: #18a6ff; /* 左箭头背景色 */
  opacity: 0.8;
}

:deep(.el-carousel__arrow--right) {
  background: #18a6ff; /* 右箭头背景色 */
  opacity: 0.8;
}

.application-center {
  width: 100%;
  min-height: 100vh;
  background-color: #01012f;
  color: #ffffff;
  overflow-x: hidden;
}

/* 顶部横幅样式 */
.banner {
  width: 100%;
  // height: calc(100vh - 120px);
  height: 552px;
  background: url('@static/images/yyzx/bg.png');
  background-size: cover;
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  overflow: hidden;

  // &::before {
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background: rgba(8, 34, 74, 0.7);
  //   z-index: 1;
  // }

  .banner-content {
    position: relative;
    z-index: 2;
    text-align: right;
    max-width: 500px;
    padding: 0 10%;
    justify-content: right;
    display: grid;
  }

  .banner-title {
    font-size: 56px;
    font-weight: bold;
    letter-spacing: 0.5rem;
    // margin-bottom: 20px;
    color: #ffffff;
    text-align: right;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }

  .banner-description {
    font-size: 16px;
    line-height: 1.8;
    margin: 40px 0px;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
  }

  .enter-button {
    padding: 12px 36px;
    font-size: 18px;
    border-radius: 10px;
    background-color: #1890ff;
    border: none;
    transition: all 0.3s ease;

    &:hover {
      background-color: #40a9ff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
    }
  }
}

/* 示范应用区域样式 */
.demo-applications {
  // padding: 60px 20px;
//   max-width: 1400px;
  // width: 80%;
  margin: 0 auto;
  padding-left: 120px;
  padding-right: 120px;
  padding-bottom: 120px;

  .section-title {
    text-align: center;
    margin-bottom: 60px;

    h2 {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #ffffff;
    }

    .title-line {
      width: 80px;
      height: 3px;
      background-color: #1890ff;
      margin: 0 auto;
    }
  }

  .applications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    gap: 30px;
    margin: 60px 0 60px 0px;
    .application-card {
      background: rgba(24, 144, 255, 0.1);
      border: 1px solid rgba(24, 144, 255, 0.3);
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;

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

      .card-image {
        width: 100%;
        height: 200px;
        overflow: hidden;

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

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

      .card-title {
        font-size: 18px;
        font-weight: bold;
        padding: 20px 20px 15px;
        margin: 0;
        color: #ffffff;
        border-bottom: 1px solid rgba(24, 144, 255, 0.3);
      }

      .card-info {
        padding: 15px 20px 20px;
        font-size: 14px;
        // color: rgba(255, 255, 255, 0.8);
        color: #ffffff;

        p {
          margin: 8px 0;
          line-height: 1.6;

          strong {
            // color: rgba(24, 144, 255, 0.9);
            color: #ffffff;
          }
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner {
    height: 400px;

    .banner-title {
      font-size: 36px;
    }

    .banner-description {
      font-size: 14px;
    }

    .enter-button {
      padding: 10px 28px;
      font-size: 16px;
    }
  }

  .demo-applications {
    padding: 40px 15px;

    .section-title h2 {
      font-size: 28px;
    }

    .applications-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
}

.el-carousel__item:nth-child(2n) {
    background-color: #01012f;
    border-radius: 20px;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #01012f;
    border-radius: 20px;
}

.warp-container{
    display: grid;
    justify-content: flex-start;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
  .warp-page-card{
    cursor: pointer;
    justify-content: flex-start;
    width: 100%;
    height: 600px;
    // display: grid;
    border: 1px solid transparent;
    border-radius: 16px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(345deg, #08113e, #2220), linear-gradient(345deg, #fffdfd6b, #00000000, #00000000, #00000000);
    .warp-page-img{
      cursor: pointer;
      height: 400px;
      background-size: cover;
      border-radius: 16px 16px 0px 0px;
    }
    .warp-page-text{
      padding: 0px 20px 20px 20px;
      // height: 200px;
      // font-size: 24px;
      color: #c7c2c2;
      .warp-page-text-title{
        font-weight: bold;
        margin: 10px 0px;
        color: #ffffff;
      }
      .warp-page-text-desc{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5; /* 限制显示4行 */
        line-clamp: 5; /* 标准属性 */
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    transition: all 0.3s ease;
    // &:hover {
    //   background-color: #152736;
    //   transform: translateY(-5px);
    //   box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
    // }
  }
}
</style>