技术文档 优化

front/src/views/instructionManual/components/menuBook.vue

@@ -9,7 +9,10 @@
                 </div>
                 <div class="list-box">
                     <div class="list-item" v-for="(item, i) in seviceList" :key="i">
-                        <div class="item-name">{{ item.name }}</div>
+                        <div class="item-name">
+                            <div class="icon-name" :style="{ 'background-image': `url(${item.imgIcon || ''})` }"></div>
+                            {{ item.name }}
+                        </div>
                         <div class="name-box">
                             <div class="item-v" v-for="(v, j) in item.list" :key="j">{{ v }}</div>
                         </div>
@@ -17,7 +20,6 @@
                     </div>
                 </div>
             </div>
-            <!-- imgList -->
             <div class="img-box" v-for="(item, i) in imgList" :key="i">
                 <div class="title">
                     <div class="text">{{ item.name }}</div>
@@ -25,49 +27,101 @@
                 </div>
                 <div class="img-bg" :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="item.btnAction && item.btnAction()">{{ item.btnText }} >>
+                </div>
             </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-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>
 </template>
 <script setup>
 import HomeHeader from '@/views/home/components/header'
 import HomeFooter from '@/views/newHome/components/Footer'
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const seviceList = ref(
     [
         {
             name: '组件服务',
+            imgIcon: require('../../../assets/menu/zjfw.png'),
             list: ['智能算法', '图层服务', '开发组件', '业务组件'],
         },
         {
             name: '应用资源',
+            imgIcon: require('../../../assets/menu/yyzy.png'),
             list: ['办公系统', '业务系统', '门户网站', '大屏看板', '小程序', '公众号'],
         },
         {
-            name: '组件服务',
+            name: '基础设施',
+            imgIcon: require('../../../assets/menu/jcss.png'),
             list: ['视频资源', '云资源', '感知资源'],
         },
         {
-            name: '组件服务',
+            name: '数据资源',
+            imgIcon: require('../../../assets/menu/sjzy.png'),
             list: ['政务信息资源'],
         },
     ]
 )
 
 const imgList = ref([
+    {
+        name: '总体流程',
+        bgImg: require('../../../assets/menu/process.png'),
+        className: 'process-img',
+    },
     {
         name: '能力上架',
         bgImg: require('../../../assets/menu/shelves.png'),
         btnText: '立即上架',
-        className: 'shelves-img'
+        className: 'shelves-img',
+        btnAction: () => {
+            showModal()
+        }
     },
     {
         name: '能力申请',
         bgImg: require('../../../assets/menu/apply.png'),
         btnText: '立即申请',
-        className: 'apply-img'
+        className: 'apply-img',
+        btnAction: () => {
+            const newpage = router.resolve({
+                path: '/addApplication', // 跳转的页面路由
+            })
+            window.open(newpage.href, '_blank')
+        },
     },
     {
         name: '需求发布',
@@ -83,6 +137,75 @@ const imgList = ref([
     },
 ])
 
+//能力上架弹窗
+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)
+const showModal = () => {
+    visible.value = true
+}
+
+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)
+}
+
 </script>
 
 
@@ -93,7 +216,7 @@ const imgList = ref([
 }
 
 .title {
-    margin-bottom: 20px;
+    margin-bottom: 35px;
 
     .text {
         padding: 20px 0;
@@ -152,6 +275,8 @@ const imgList = ref([
         height: 350px;
         margin: 0 auto;
     }
+
+
 }
 
 .img-bg {
@@ -161,31 +286,26 @@ const imgList = ref([
 
 .process-img {
     height: 855px;
-    background-image: url('../../../assets/menu/process.png');
 }
 
 .shelves-img {
     height: 497px;
     width: 1107px;
     margin: 0 auto;
-    background-image: url('../../../assets/menu/shelves.png');
 }
 
 .apply-img {
     height: 752px;
-    background-image: url('../../../assets/menu/apply.png');
 }
 
 .demand-img {
     height: 525px;
     width: 1300px;
     margin: 0 auto;
-    background-image: url('../../../assets/menu/demand.png');
 }
 
 .down-img {
     height: 544px;
-    background-image: url('../../../assets/menu/down.png');
 }
 
 .list-box {
@@ -209,6 +329,9 @@ const imgList = ref([
             font-size: 20px;
             text-align: center;
             padding: 20px 0 10px 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         .name-box {
@@ -218,17 +341,135 @@ const imgList = ref([
             flex-wrap: wrap;
         }
 
+        .icon-name {
+            width: 30px;
+            height: 30px;
+            background-size: 100% 100%;
+            margin-right: 4px;
+        }
+
         .item-v {
             min-width: 100px;
             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;
+            background: url('../../../assets/menu/sevice-bg.png');
+            background-size: 100% 100%;
         }
     }
 }
+</style>
+
+<style lang="less" scoped>
+.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>

front/src/views/instructionManual/index.vue

@@ -1,28 +1,25 @@
 <template>
   <home-header></home-header>
   <div class="menu-container">
-    <div class="menu-box">
+    <div id="container" class="content-menu">
-      <div id="container" class="content-menu">
+      <div class="left">
-        <div class="left">
+        <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
-          <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
+          :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
-            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
+          <div class="img" :class="data.className"></div>
-            <div class="img" :class="data.className"></div>
+          {{ data.name }}
-            {{ data.name }}
-          </div>
-          <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
         </div>
-        <!-- 技术文档 -->
+        <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
-        <div class="right" v-if="titleData.name !== '新手指引'">
+      </div>
-          <div style="height: 100%">
+      <!-- 技术文档 -->
-            <iframe name="iframeName" width="1300" height="100%" id="iframeId" :frameborder="0"
+      <div class="right" v-if="titleData.name !== '新手指引'">
-              :src="doc_base_url + clickData.doc"></iframe>
+        <div style="height: 100%">
-          </div>
+          <iframe name="iframeName" width="1300" height="100%" id="iframeId" :frameborder="0"
+            :src="doc_base_url + clickData.doc"></iframe>
         </div>
       </div>
-      <menuBook v-if="titleData.name === '新手指引'"></menuBook>
     </div>
+    <menuBook v-if="titleData.name === '新手指引'"></menuBook>
   </div>
-
   <!-- <home-footer></home-footer> -->
 </template>
 <script setup>
@@ -133,7 +130,6 @@ onMounted(() => {
 
 <style scoped lang="less">
 .menu-box {
-  // overflow: hidden;
   height: 100%;
 }
 
@@ -153,6 +149,8 @@ onMounted(() => {
 .menu-container {
   width: 100%;
   padding-top: 0.74rem;
+  min-height: 1000px;
+  position: relative;
 }
 
 .content-menu {
@@ -161,12 +159,6 @@ onMounted(() => {
   justify-content: flex-start;
   margin: 0 auto;
   box-sizing: border-box;
-  // position: fixed;
-  // left: 50%;
-  // bottom: 0;
-  // transform: translateX(-50%);
-  // top: 0.6rem;
-  // top: 0;
 }
 
 .left {
@@ -175,13 +167,13 @@ onMounted(() => {
   margin-right: 20px;
   background: rgba(244, 245, 248, 1);
   overflow-y: scroll;
-  position: fixed;
+  position: absolute;
   top: 200px;
-  left: 90px;
+  left: 85px;
 }
 
 .right {
-  width: 1300px;
+  width: 1400px;
   height: calc(100% - 20px);
   position: absolute;
   top: 10px;
@@ -226,5 +218,4 @@ onMounted(() => {
   height: 100%;
   position: relative;
 }
-
 </style>