From b2effa3c14590d2cd7db28c47046e2bb4d195fcc Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Fri, 19 Aug 2022 14:24:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E4=B8=A4=E4=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/api/cimSpecialArea.js               |   4 +-
 .../cimSpecialArea/components/cimHead.vue     | 104 +++++++++++++++
 .../cimSpecialArea/components/platform.vue    | 119 ++++++++++++++++++
 3 files changed, 225 insertions(+), 2 deletions(-)

diff --git a/front/src/api/cimSpecialArea.js b/front/src/api/cimSpecialArea.js
index 3e2d35d9..f6292d3c 100644
--- a/front/src/api/cimSpecialArea.js
+++ b/front/src/api/cimSpecialArea.js
@@ -2,14 +2,14 @@ import request from '@/utils/request'
 // 各个cim总数
 export function countByType() {
   return request({
-    url: '/renren-admin/resource/countByType',
+    url: '/resource/countByType',
     method: 'get',
   })
 }
 // cim+平台
 export function getCIMApplyApplicationList() {
   return request({
-    url: '/renren-admin/resource/getCIMApplyApplicationList',
+    url: '/resource/getCIMApplyApplicationList',
     method: 'get',
   })
 }
diff --git a/front/src/views/cimSpecialArea/components/cimHead.vue b/front/src/views/cimSpecialArea/components/cimHead.vue
index e69de29b..13fb00a4 100644
--- a/front/src/views/cimSpecialArea/components/cimHead.vue
+++ b/front/src/views/cimSpecialArea/components/cimHead.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="box">
+    <div class="header">
+      <div class="headerbox" v-for="(item, index) in headerList" :key="index">
+        <div>
+          <img :src="item.img" />
+          <h3>{{ item.name }}</h3>
+        </div>
+        <i></i>
+        <h2>{{ item.num }}个</h2>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { countByType } from '@/api/cimSpecialArea'
+  import { ref } from 'vue'
+  const headerList = ref([
+    {
+      name: 'CIM+平台',
+      img: require('@/assets/cimSpecialArea/platform.png'),
+      num: 0,
+    },
+    {
+      name: 'CIM+图层',
+      img: require('@/assets/cimSpecialArea/coverage.png'),
+      num: 0,
+    },
+    {
+      name: 'CIM+算法',
+      img: require('@/assets/cimSpecialArea/algorithm.png'),
+      num: 0,
+    },
+  ])
+  countByType().then((res) => {
+    if (res.status === 200) {
+      console.log(res.data.data, '====>各个cim总数')
+      res.data.data.map((item) => {
+        if (item.type === '平台') {
+          headerList.value[0].num = item.count
+        } else if (item.type === '图层') {
+          headerList.value[1].num = item.count
+        } else if (item.type === '组件') {
+          headerList.value[2].num = item.count
+        }
+      })
+    }
+  })
+</script>
+<style lang="less" scoped>
+  .box {
+    width: 100%;
+    height: 3.02rem;
+    background: url('~@/assets/cimSpecialArea/cimBG.png') no-repeat;
+    display: flex;
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      .headerbox {
+        width: 5.34rem;
+        height: 2rem;
+        border-radius: 00.08rem;
+        margin-top: 0.5rem;
+        margin-right: 0.6rem;
+        background: #ffffff;
+        display: flex;
+        align-items: center;
+        img {
+          width: 1.04rem;
+          height: 1.06rem;
+        }
+        h3 {
+          font-size: 20px;
+          color: #000000;
+          margin-bottom: 0;
+        }
+        h2 {
+          font-size: 34px;
+          color: #000000;
+          font-weight: bold;
+          margin-left: 1rem;
+          margin-bottom: 0;
+        }
+        i {
+          width: 0.01rem;
+          height: 1.15rem;
+          background: #cccccc;
+        }
+      }
+      .headerbox:last-child {
+        margin-right: 0;
+      }
+      .headerbox > div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-left: 0.6rem;
+        margin-right: 0.85rem;
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/cimSpecialArea/components/platform.vue b/front/src/views/cimSpecialArea/components/platform.vue
index e69de29b..90386228 100644
--- a/front/src/views/cimSpecialArea/components/platform.vue
+++ b/front/src/views/cimSpecialArea/components/platform.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="box">
+    <div>
+      <h1>CIM+平台</h1>
+      <div>
+        <swiper
+          :slidesPerView="3"
+          :spaceBetween="30"
+          :pagination="{ clickable: true }"
+          :modules="modules"
+          class="mySwiper"
+          @swiper="onSwiper"
+          @slideChange="onSlideChange"
+        >
+          <swiper-slide v-for="item in platformList" :key="item.id">
+            <div class="platformBox">
+              <h2>{{ item.name }}</h2>
+              <a-image :preview="false" :src="item.pic" :fallback="item.pic2" />
+              <p>{{ item.description }}</p>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue'
+  import { Pagination } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
+  import { getCIMApplyApplicationList } from '@/api/cimSpecialArea'
+  const modules = ref([Pagination])
+  const platformList = ref([
+    // {
+    //   name: 'CIM+青岛市更新项目申报系统',
+    //   img: require('@/assets/capacitySquare/yyzy.jpg'),
+    //   content:
+    //     'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
+    // },
+    // {
+    //   name: 'CIM+青岛市更新项目申报系统',
+    //   img: require('@/assets/capacitySquare/yyzy.jpg'),
+    //   content:
+    //     'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
+    // },
+    // {
+    //   name: 'CIM+青岛市更新项目申报系统',
+    //   img: require('@/assets/capacitySquare/yyzy.jpg'),
+    //   content:
+    //     'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
+    // },
+    // {
+    //   name: 'CIM+青岛市更新项目申报系统',
+    //   img: require('@/assets/capacitySquare/yyzy.jpg'),
+    //   content:
+    //     'CIM+城市更新应用从八个纬度开展青岛城市“体检”活动，融合城市体检数据、优化城市规划方案',
+    // },
+  ])
+  getCIMApplyApplicationList().then((res) => {
+    if (res.status === 200) {
+      res.data.data.map((val) => {
+        if (!val.pic) {
+          val.pic = require('@/assets/capacitySquare/yyzy.jpg')
+        }
+        val.pic2 = require('@/assets/capacitySquare/yyzy.jpg')
+      })
+      console.log(res.data.data, '====>平台')
+      platformList.value.push(...res.data.data)
+    }
+  })
+</script>
+<style lang="less" scoped>
+  .box {
+    width: 100%;
+    background: #f1f4fb;
+    padding: 0 1.05rem 0.2rem;
+    h1 {
+      font-size: 0.3rem;
+      color: #000000;
+      font-weight: bold;
+      padding: 0.35rem 0 0.15rem;
+      margin-bottom: 0.2rem;
+      border-bottom: 0.01rem solid #bcbdbd;
+    }
+    .platformBox {
+      width: 5.34rem;
+      height: 5.65rem;
+      padding: 0.28rem 0.35rem;
+      border: 0.03rem solid #0077ff;
+      margin-right: 0.56rem;
+      background: #ffffff;
+      h2 {
+        font-size: 0.2rem;
+        color: #000000;
+        margin-bottom: 0.28rem;
+      }
+      :deep(.ant-image) {
+        width: 4.5rem;
+        height: 3.4rem;
+      }
+      :deep(.ant-image-img) {
+        width: 100%;
+        height: 100%;
+      }
+      p {
+        font-size: 0.18rem;
+        margin: 0.2rem 0 0;
+      }
+    }
+    :deep(.swiper) {
+      height: 5.9rem;
+    }
+    :deep(.swiper-horizontal
+        > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction) {
+      bottom: -0.05rem;
+    }
+  }
+</style>