From 4d94b59a5546b6f7dc5a3237745bd64360253a94 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Tue, 2 Aug 2022 13:46:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=80=E6=9C=AF=E6=96=87=E6=A1=A3-=E5=9B=9B?=
 =?UTF-8?q?=E4=B8=AA=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/assets/menu/imgBG-long.png          | Bin 0 -> 4343 bytes
 front/src/assets/menu/imgBG.png               | Bin 0 -> 3635 bytes
 .../instructionManual/components/menuBook.vue | 294 +++++++++++++++++-
 front/src/views/instructionManual/index.vue   |   1 +
 4 files changed, 284 insertions(+), 11 deletions(-)
 create mode 100644 front/src/assets/menu/imgBG-long.png
 create mode 100644 front/src/assets/menu/imgBG.png

diff --git a/front/src/assets/menu/imgBG-long.png b/front/src/assets/menu/imgBG-long.png
new file mode 100644
index 0000000000000000000000000000000000000000..95974faaabb4bcc353cc825c0221c1c5e08f2fc3
GIT binary patch
literal 4343
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

literal 0
HcmV?d00001

diff --git a/front/src/assets/menu/imgBG.png b/front/src/assets/menu/imgBG.png
new file mode 100644
index 0000000000000000000000000000000000000000..95b9da2af29a4d6932c5e99d04fbfe46c726b0ff
GIT binary patch
literal 3635
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
BDtiC`

literal 0
HcmV?d00001

diff --git a/front/src/views/instructionManual/components/menuBook.vue b/front/src/views/instructionManual/components/menuBook.vue
index c79f13c6..34183224 100644
--- a/front/src/views/instructionManual/components/menuBook.vue
+++ b/front/src/views/instructionManual/components/menuBook.vue
@@ -14,7 +14,15 @@
               {{ item.name }}
             </div>
             <div class="name-box">
-              <div class="item-v" v-for="(v, j) in item.list" :key="j">
+              <div
+                class="item-v"
+                v-for="(v, j) in item.list"
+                :key="j"
+                :style="{
+                  'background-image': `url(${item.imgBG || ''})`,
+                  width: `${item.width || ''}`,
+                }"
+              >
                 {{ v }}
               </div>
             </div>
@@ -34,7 +42,9 @@
           :class="item.className"
           :style="{ 'background-image': `url(${item.bgImg || ''})` }"
         ></div>
-        <div v-if="item.btnText" class="btn">{{ item.btnText }} >></div>
+        <div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
+          {{ item.btnText }} >>
+        </div>
       </div>
       <!-- 联系我们 -->
       <div class="img-bg callus-box">
@@ -53,20 +63,76 @@
           </p>
         </div>
       </div>
+      <!-- 能力上架弹窗 -->
+      <a-modal
+        v-model:visible="visible"
+        @ok="handleOk"
+        class="shangjia-class"
+        @cancel="handlecancel"
+      >
+        <div class="ant-modal-title" id="vcDialogTitle1">
+          <div class="showBg"></div>
+          能力上架申请
+        </div>
+        <div class="ability-to-type">
+          <div class="title">能力类型选择</div>
+          <div class="ability-to-type-content">
+            <div
+              v-for="item in abilityToType"
+              :key="item"
+              @click="abilityToTypeFunction(item)"
+              :class="
+                abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
+              "
+            >
+              {{ item }}
+            </div>
+          </div>
+        </div>
+        <div
+          class="component-type"
+          v-if="abilityToTypeFunctionData == '组件服务'"
+        >
+          <div class="title">组件类型选择</div>
+          <div class="component-type-content">
+            <!-- <a-checkbox-group
+                v-model:value="value1"
+                name="checkboxgroup"
+                :options="componentType"
+              /> -->
+            <a-radio-group v-model:value="componentTypeValue">
+              <a-radio
+                @click="componentTypeValueFunction(item)"
+                v-for="item in componentType"
+                :key="item"
+                :value="item"
+              >
+                {{ item }}
+              </a-radio>
+            </a-radio-group>
+          </div>
+        </div>
+      </a-modal>
     </div>
   </div>
 </template>
 <script setup>
   import HomeHeader from '@/views/home/components/header'
   import HomeFooter from '@/views/newHome/components/Footer'
-  import { ref, onMounted } from 'vue'
+  import { ref, onMounted, watch } from 'vue'
   import TheOverallProcess from './TheOverallProcess.vue'
+  import { useRouter } from 'vue-router'
+  import { message } from 'ant-design-vue'
+
+  const router = useRouter()
 
   const seviceList = ref([
     {
       name: '组件服务',
       img: require('@/assets/menu/service-component.png'),
       list: ['智能算法', '图层服务', '开发组件', '业务组件'],
+      imgBG: require('../../../assets/menu/imgBG.png'),
+      width: '124px',
     },
     {
       name: '应用资源',
@@ -79,18 +145,24 @@
         '小程序',
         '公众号',
       ],
+      imgBG: require('../../../assets/menu/imgBG.png'),
+      width: '124px',
     },
     {
       name: '基础设施',
       img: require('@/assets/menu/service-infrastructure.png'),
 
       list: ['视频资源', '云资源', '感知资源'],
+      imgBG: require('../../../assets/menu/imgBG.png'),
+      width: '124px',
     },
     {
       name: '数据资源',
       img: require('@/assets/menu/service-data.png'),
 
       list: ['政务信息资源'],
+      imgBG: require('../../../assets/menu/imgBG-long.png'),
+      width: '200px',
     },
   ])
 
@@ -120,8 +192,203 @@
       className: 'down-img',
     },
   ])
-</script>
+  // 能力上架弹窗
+  function handlecancel() {
+    abilityToTypeFunctionData.value = '组件服务'
+    componentTypeValue.value = ''
+  }
+  let abilityToTypeFunctionData = ref('组件服务')
+  function abilityToTypeFunction(item) {
+    abilityToTypeFunctionData.value = item
+  }
+  let abilityToType = ref(['组件服务', '应用资源'])
+  let componentType = ref([
+    '智能算法',
+    '图层服务',
+    '开发组件',
+    // '办公组件',
+    '业务组件',
+    // '其他',
+  ])
+  const visible = ref(false)
+  let componentTypeValueOld = ref('')
+  function componentTypeValueFunction(item) {
+    if (componentTypeValueOld.value != item) {
+      componentTypeValue.value = item
+      componentTypeValueOld.value = item
+    } else {
+      componentTypeValue.value = ''
+    }
+  }
+  let componentTypeValue = ref('')
+  const handleOk = (e) => {
+    let snum = ref({})
+    if (abilityToTypeFunctionData.value == '组件服务') {
+      if (!componentTypeValue.value || componentTypeValue.value == '') {
+        message.error('请选择组件类型！')
+        return
+      } else if (
+        componentTypeValue.value === '智能算法' ||
+        componentTypeValue.value === '开发组件' ||
+        componentTypeValue.value === '业务组件' ||
+        componentTypeValue.value === '图层服务'
+      ) {
+        snum.value = {
+          abilityToType: abilityToTypeFunctionData.value,
+          componentTypeValue: componentTypeValue.value,
+        }
+      } else {
+        message.error('功能开发中！')
+        return
+      }
+    } else {
+      snum.value = {
+        abilityToType: abilityToTypeFunctionData.value,
+      }
+    }
+    const applypage = router.resolve({
+      path: '/nenglishangjia', // 跳转的页面路由
+      query: snum.value,
+    })
+    window.open(applypage.href, '_blank')
+    visible.value = false
+    abilityToTypeFunctionData.value = '组件服务'
+    componentTypeValue.value = ''
+    console.log(e)
+  }
 
+  // 跳转
+  const toWhere = (data) => {
+    console.log(data, 'wwwwwww')
+    if (data === '能力上架') {
+      visible.value = true
+    } else if (data === '能力申请') {
+      const newpage = router.resolve({
+        path: '/addApplication', // 跳转的页面路由
+      })
+      window.open(newpage.href, '_blank')
+    } else if (data === '需求发布') {
+      const newpage = router.resolve({
+        path: '/DetailsPageconetent',
+        query: {
+          select: '组件服务',
+        },
+      })
+      window.location.href = newpage.href
+    } else if (data === '资源下架') {
+      window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
+      const newpage = router.resolve({
+        path: '/personalCenter',
+      })
+      window.location.href = newpage.href
+    }
+  }
+  watch(abilityToTypeFunctionData, () => {
+    componentTypeValue.value = ''
+  })
+</script>
+<style lang="less">
+  .shangjia-class {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    margin-left: -2.6rem;
+    margin-top: -1.44rem;
+    font-size: 0.14rem;
+    font-weight: 500;
+
+    .ant-radio-inner {
+      height: 0.16rem;
+      width: 0.16rem;
+    }
+    .ant-radio-inner::after {
+      background-color: unset;
+      background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
+      background-size: cover;
+      background-position: center;
+    }
+    .ant-modal-content {
+      border-radius: 0.1rem;
+      .ability-to-type,
+      .component-type {
+        display: flex;
+        margin-top: 0.2rem;
+        .title {
+          white-space: nowrap;
+          margin-right: 0.2rem;
+          display: flex;
+          align-items: center;
+          height: 0.26rem;
+        }
+        .component-type-content {
+          width: 100%;
+          height: unset;
+          border: unset;
+          background: unset;
+          .ant-radio-group {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: 0.15rem;
+          }
+        }
+      }
+
+      .ability-to-type {
+        .ability-to-type-content {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          height: unset;
+          border: unset;
+          background: unset;
+          div {
+            margin-right: 0.15rem;
+            cursor: pointer;
+            font-size: 0.14rem;
+            width: 0.9rem;
+            height: 0.26rem;
+            border-radius: 0.13rem;
+            color: #333333;
+            background: #f5f5f5;
+            border: 0.01rem #cccccc solid;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-weight: 500;
+          }
+
+          .ability-to-type-down {
+            background: #0087ff;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .ant-modal-title {
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-modal-footer {
+      border: 0;
+      text-align: center;
+      padding-bottom: 0.2rem;
+      button {
+        margin-right: 0.2rem;
+        border-radius: 0.08rem;
+      }
+    }
+
+    .showBg {
+      height: 0.24rem;
+      width: 0.24rem;
+      background: url('~@/assets/home/shenqing.png') no-repeat;
+      background-size: cover;
+      background-position: center;
+      margin-right: 0.1rem;
+    }
+  }
+</style>
 <style lang="less" scoped>
   .menu-box {
     width: 1920px;
@@ -252,7 +519,7 @@
     .list-item {
       padding: 10px 20px;
       width: 310px;
-      height: 330px;
+      height: 356px;
       background: rgba(23, 85, 177, 0.43);
       border: 1px solid #74a9f8;
       border-radius: 10px;
@@ -274,16 +541,21 @@
       }
 
       .item-v {
-        min-width: 100px;
+        width: 124px;
+        height: 74px;
+        line-height: 74px;
         color: #fff;
         font-size: 20px;
         text-align: center;
-        padding: 10px;
-        // border: 1px solid rgba(255, 255, 255, 0.4);
-        // border-radius: 6px;
-        // background: rgba(255, 255, 255, 0.2);
-        margin: 0 16px 20px 16px;
+        margin: 0 0 20px;
+        background-size: 100% 100%;
       }
+      .item-v:nth-child(2n) {
+        margin-left: 16px;
+      }
+      // .item-v:last-child {
+      //   width: 200px;
+      // }
     }
   }
 </style>
diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
index ccbc5966..0995a93f 100644
--- a/front/src/views/instructionManual/index.vue
+++ b/front/src/views/instructionManual/index.vue
@@ -207,6 +207,7 @@
     min-height: 600px;
   }
   .manual {
+    cursor: pointer;
     z-index: 10;
     width: 74px;
     height: 136px;