能力广场弹窗

front/src/views/capacitySquare/index.vue

@@ -1,23 +1,35 @@
 <template>
-  <home-header></home-header>
+  <!-- <home-header></home-header> -->
   <div class="box">
     <algorithm v-if="show === 'algorithm'"></algorithm>
     <layer v-else-if="show === 'layer'"></layer>
     <application v-else-if="show === 'application'"></application>
   </div>
-  <home-footer></home-footer>
+  <!-- <home-footer></home-footer> -->
 </template>
 <script setup>
   import { ref } from 'vue'
-  import HomeHeader from '@/views/home/components/header'
-  import HomeFooter from '@/views/newHome/components/Footer'
+  // import HomeHeader from '@/views/home/components/header'
+  // import HomeFooter from '@/views/newHome/components/Footer'
   import algorithm from './components/algorithm.vue'
   import layer from './components/layer.vue'
   import application from './components/application.vue'
-  const show = ref('application')
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const abilityToType = router.currentRoute.value.query.abilityToType
+  const show = ref('algorithm')
+  if (abilityToType === '应用资源') {
+    show.value = 'application'
+  } else if (abilityToType === '图层服务') {
+    show.value = 'layer'
+  } else if (abilityToType === '智能算法') {
+    show.value = 'algorithm'
+  } else {
+    console.log('no')
+  }
 </script>
 <style lang="less" scoped>
   .box {
-    padding-top: 0.64rem;
+    // padding-top: 0.64rem;
   }
 </style>

front/src/views/newHome/components/WorkDynamics.vue

@@ -113,6 +113,37 @@
           </div>
         </a-modal>
       </div>
+      <div @click="showAbilitySquare">
+        <p></p>
+        <p>能力广场</p>
+        <a-modal
+          v-model:visible="visibleAbilitySquare"
+          @ok="handleOkAbilitySquare"
+          class="shangjia-class"
+          @cancel="handlecancelAbilitySquare"
+        >
+          <div class="ant-modal-title" id="vcDialogTitle1">
+            <div class="showBg"></div>
+            能力广场目录
+          </div>
+          <div class="ability-to-type">
+            <div class="ability-to-type-content">
+              <div
+                v-for="item in abilitySquare"
+                :key="item"
+                @click="abilitySquareFunction(item)"
+                :class="
+                  abilitySquareFunctionData == item
+                    ? 'ability-to-type-down'
+                    : ''
+                "
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+        </a-modal>
+      </div>
     </div>
   </div>
 </template>
@@ -142,6 +173,7 @@
     abilityToTypeFunctionData.value = item
   }
   let abilityToType = ref(['组件服务', '应用资源'])
+  let abilitySquare = ref(['智能算法', '图层服务', '应用资源'])
   let componentType = ref([
     '智能算法',
     '图层服务',
@@ -154,6 +186,11 @@
   const showModal = () => {
     visible.value = true
   }
+  // 能力广场
+  const visibleAbilitySquare = ref(false)
+  const showAbilitySquare = () => {
+    visibleAbilitySquare.value = true
+  }
   let componentTypeValueOld = ref('')
   function componentTypeValueFunction(item) {
     if (componentTypeValueOld.value != item) {
@@ -252,6 +289,28 @@
   watch(abilityToTypeFunctionData, () => {
     componentTypeValue.value = ''
   })
+  // 能力广场
+  const handleOkAbilitySquare = (e) => {
+    let snumSquare = ref({})
+    snumSquare.value = {
+      abilityToType: abilitySquareFunctionData.value,
+    }
+    const applypage = router.resolve({
+      path: '/capacitySquare', // 跳转的页面路由
+      query: snumSquare.value,
+    })
+    window.open(applypage.href, '_blank')
+    console.log(e, abilitySquareFunctionData.value, 'hahhaha')
+    visibleAbilitySquare.value = false
+    abilitySquareFunctionData.value = '智能算法'
+  }
+  let abilitySquareFunctionData = ref('智能算法')
+  function abilitySquareFunction(item) {
+    abilitySquareFunctionData.value = item
+  }
+  function handlecancelAbilitySquare() {
+    abilitySquareFunctionData.value = '智能算法'
+  }
 </script>
 <style lang="less">
   .shangjia-class {
@@ -520,7 +579,7 @@
   }
 
   .fixedmount {
-    height: 1.5rem;
+    height: 2.3rem;
     display: flex;
     position: fixed;
     bottom: 2.56rem;
@@ -571,4 +630,11 @@
     background-size: contain;
     background-position: center;
   }
+  .fixedmount div:nth-child(3) p:nth-child(1) {
+    height: 0.24rem;
+    width: 0.24rem;
+    background: url('~@/assets/home/shangjia.png') no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
 </style>