对接行业应用接口

6eede051 · 赵月辉 · 8f3cae70 · 6eede051 · 6eede051 · 6eede051
Commit 6eede051 authored Apr 26, 2024 by 赵月辉
Hide whitespace changes
Inline Side-by-side

Showing with 157 additions and 32 deletions

src/api/industry.js
+19 -0

src/layout/user-layout.vue
+61 -8

src/views/industryApplications/detail.vue
+77 -24

No files found.
--- a/src/api/industry.js
+++ b/src/api/industry.js
+import request from '@/utils/request'
+// 获取行业应用菜单
+export function industryMenu (query) {
+  return request({
+    url: '/api/v1/industryMenu',
+    method: 'get',
+    params: query
+  })
+}
+// 获取行业应用详情
+export function solutionDetail (query) {
+  return request({
+    url: '/api/v1/solutionDetail',
+    method: 'get',
+    params: query
+  })
+}
--- a/src/layout/user-layout.vue
+++ b/src/layout/user-layout.vue
@@ -5,7 +5,7 @@
        <div class="logo flex-align-center" @click="$router.push('/index')">
          <img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">
          <img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
-          <span class="logo-text">先进公共服务平台</span>
+          <span class="logo-text">先进计算公共服务平台</span>
        </div>
        <div class="menu">
@@ -14,7 +14,7 @@
              mode="horizontal"
              style="--el-menu-horizontal-height:48px"
              @select="menuSelect">
-            <el-sub-menu index="1">
+            <el-sub-menu index="computingResource">
              <template #title>计算资源</template>
              <el-menu-item
                  v-for="item in computilityMenuData"
@@ -22,14 +22,35 @@
                {{ item.name }}
              </el-menu-item>
            </el-sub-menu>
-            <el-menu-item index="/industryApplications/detail">行业应用</el-menu-item>
+            <el-sub-menu index="industryApplications">
+              <template #title>行业应用</template>
+              <el-sub-menu v-for="item in industryMenuData" :index="'one'+item.value">
+                <template #title>{{ item.name }}</template>
+                <el-sub-menu v-for="twoLevel in item.child" :index="item.name+'twoLevel'+twoLevel.value">
+                  <template #title>{{ twoLevel.name }}</template>
+                  <el-menu-item
+                      v-for="threeLevel in twoLevel.child"
+                      :index="'/industryApplications/detail?id=' + threeLevel.id">
+                    <div style="width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                      {{ threeLevel.titleIndustry }}
+                    </div>
+                  </el-menu-item>
+                </el-sub-menu>
+              </el-sub-menu>
+            </el-sub-menu>
            <el-menu-item index="/componentServices/componentServicesList">组件服务</el-menu-item>
            <el-menu-item index="/partnership/partnershipList">合作伙伴</el-menu-item>
          </el-menu>
        </div>
        <div class="right-menu">
-          <el-button type="primary" @click="$router.push('/login')">登录/注册</el-button>
+          <!--          {{ userStore.id}}-->
+          <div v-if="userStore.id" class="avatar-wrapper flex-align-center">
+            <router-link to="/console/overview" class="console">控制台</router-link>
+            <img :src="userStore.avatar" class="user-avatar"/>
+            <div class="user-name">{{ userStore.name }}</div>
+          </div>
+          <el-button v-else type="primary" @click="$router.push('/login')">登录/注册</el-button>
        </div>
      </div>
    </div>
@@ -42,7 +63,10 @@ import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AppMain from '@/layout/components/AppMain.vue'
 import { computilityMenu } from '@/api/computingResource.js'
+import { industryMenu } from '@/api/industry.js'
+import useUserStore from '@/store/modules/user.js'
+const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
@@ -51,15 +75,20 @@ const activeMenu = computed(() => {
  if (meta.activeMenu) {
    return meta.activeMenu
  }
-  const titleList = ['计算资源']
+  console.log(path)
+  console.log(fullPath)
+  const titleList = ['计算资源', '行业应用']
  return titleList.includes(meta.title) ? fullPath : path
 })
-function menuSelect (val) {
+function menuSelect (val, indexPath, item) {
  router.push(val)
+  console.log(val)
+  console.log(indexPath)
 }
 const computilityMenuData = ref([])
+const industryMenuData = ref([])
 function getComputilityMenu () {
  computilityMenu().then(res => {
@@ -67,7 +96,15 @@ function getComputilityMenu () {
  })
 }
+function getIndustryMenu () {
+  industryMenu().then(res => {
+    console.log(res.data)
+    industryMenuData.value = res.data
+  })
+}
 getComputilityMenu()
+getIndustryMenu()
 </script>
 <style lang="scss" scoped>
@@ -135,9 +172,9 @@ getComputilityMenu()
    }
    .el-sub-menu__title, .el-menu-item {
-      font-weight: 400;
+      font-weight: 500;
      font-size: 16px;
-      color: #626566;
+      color: #4e5051;
    }
  }
@@ -146,6 +183,22 @@ getComputilityMenu()
    border-radius: 2px;
    font-size: 14px;
  }
+  .avatar-wrapper {
+    .user-avatar {
+      width: 30px;
+      height: 30px;
+      background: #FFF3D3;
+      border-radius: 30px;
+      margin: 0 10px 0 32px;
+    }
+    .user-name, .console {
+      font-weight: 400;
+      font-size: 16px;
+      color: #303233;
+    }
+  }
 }
 .app-main {

--- a/src/views/industryApplications/detail.vue
+++ b/src/views/industryApplications/detail.vue
@@ -10,13 +10,20 @@
    </div>
    <div class="block-title">行业概述</div>
-    <div class="content">图文内容</div>
+    <div class="sub-title">{{ titleIndustry }}</div>
+    <div class="content">
+      <div class="html-content" v-html="industryInfo"></div>
+    </div>
    <div class="block-title">解决方案</div>
-    <div class="content">图文内容</div>
+    <div class="sub-title">{{ titleSolution }}</div>
+    <div class="content">
+      <div class="html-content" v-html="solutionInfo"></div>
+    </div>
-    <div class="block-title">资讯流程</div>
+    <div class="block-title">咨询流程</div>
    <div class="flex flex-justify-center information-process">
      <div class="item">
@@ -24,51 +31,77 @@
        <img class="icon" src="@/assets/images/Information-process-1.png" alt="">
        <div class="title">需求咨询</div>
        <div class="desc">描述业务需求，提交需求咨询</div>
-        <el-button>立即资讯
+        <!--        <el-button>立即资讯-->
-          <el-icon>
+        <!--          <el-icon>-->
-            <ArrowRight/>
+        <!--            <ArrowRight/>-->
-          </el-icon>
+        <!--          </el-icon>-->
-        </el-button>
+        <!--        </el-button>-->
      </div>
      <div class="item">
        <div class="index">2</div>
        <img class="icon" src="@/assets/images/Information-process-2.png" alt="">
        <div class="title">初步沟通</div>
        <div class="desc">需求答疑，对齐核心诉求，确定合作意向</div>
-        <el-button>立即资讯
+        <!--        <el-button>立即资讯-->
-          <el-icon>
+        <!--          <el-icon>-->
-            <ArrowRight/>
+        <!--            <ArrowRight/>-->
-          </el-icon>
+        <!--          </el-icon>-->
-        </el-button>
+        <!--        </el-button>-->
      </div>
      <div class="item">
        <div class="index">3</div>
        <img class="icon" src="@/assets/images/Information-process-3.png" alt="">
        <div class="title">方案交流</div>
        <div class="desc">针对相关方案进行线上或线下的交流探讨</div>
-        <el-button>立即资讯
+        <!--        <el-button>立即资讯-->
-          <el-icon>
+        <!--          <el-icon>-->
-            <ArrowRight/>
+        <!--            <ArrowRight/>-->
-          </el-icon>
+        <!--          </el-icon>-->
-        </el-button>
+        <!--        </el-button>-->
      </div>
      <div class="item">
        <div class="index">4</div>
        <img class="icon" src="@/assets/images/Information-process-4.png" alt="">
        <div class="title">商业流程</div>
        <div class="desc">方案确定后，开始执行商务流程</div>
-        <el-button>立即资讯
+        <!--        <el-button>立即资讯-->
-          <el-icon>
+        <!--          <el-icon>-->
-            <ArrowRight/>
+        <!--            <ArrowRight/>-->
-          </el-icon>
+        <!--          </el-icon>-->
-        </el-button>
+        <!--        </el-button>-->
      </div>
    </div>
  </div>
 </template>
 <script setup name="Detail">
+import { solutionDetail } from '@/api/industry.js'
+import { useRoute } from 'vue-router'
+import { ref, watch } from 'vue'
+const route = useRoute()
+const industryInfo = ref('')
+const titleIndustry = ref('')
+const solutionInfo = ref('')
+const titleSolution = ref('')
+watch(() => route.query.id, val => {
+  if (val) {
+    getDetail()
+  }
+})
+function getDetail () {
+  solutionDetail({id: route.query.id}).then(res => {
+    industryInfo.value = res.data.industryInfo
+    titleIndustry.value = res.data.titleIndustry
+    solutionInfo.value = res.data.solutionInfo
+    titleSolution.value = res.data.titleSolution
+  })
+}
+getDetail()
 </script>
 <style scoped lang="scss">
@@ -95,15 +128,35 @@
 }
 .block-title {
-  font-weight: 500;
+  font-weight: bold;
+  color: #303233;
  font-size: 28px;
  text-align: center;
+  margin-top: 50px;
+  margin-bottom: 20px;
+}
+.sub-title {
+  font-weight: 500;
+  font-size: 20px;
+  color: #575a5b;
+  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
 }
 .content {
+  width: 1280px;
+  margin: 0 auto 30px auto;
  text-align: center;
+  :deep(.html-content) {
+    img {
+      height: auto;
+      max-width: 100%;
+    }
+  }
 }
 .information-process {