Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev

2022-06-21 15:04:37 +08:00 · 2022-06-21 15:04:37 +08:00 · 7e5a658977
parent 4c105474fc 8bc5bff98d
commit 7e5a658977
104 changed files with 9255 additions and 562 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,7 @@
 back/dist-西海岸-后台管理.zip
+front/public/index.html
+front/public/index.html
+back/public/index.html
+back/dist-西海岸-后台管理-带配置文件.zip
+back/dist-市局-后台管理-带配置文件.zip
+front/public/index.html
--- a/back/public/index.html
+++ b/back/public/index.html
@ -2,7 +2,7 @@
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-11 10:11:40
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-13 11:21:09
+ * @LastEditTime: 2022-06-20 16:20:34
 * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@ -29,7 +29,8 @@
    };
    // window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/#/vueTemplateDemo';  
    // window.SITE_CONFIG['frontUrl'] = 'http://124.222.94.39:9796/#/vueTemplateDemo';
-    window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/#/vueTemplateDemo';  
+    // window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/#/vueTemplateDemo';  
+    window.SITE_CONFIG['frontUrl'] = 'http://10.134.135.9:9797/#/vueTemplateDemo'; 
    window.SITE_CONFIG['menuList'] = [];                     // 左侧菜单列表（后台返回，未做处理）
    window.SITE_CONFIG['permissions'] = [];                  // 页面按钮操作权限（后台返回，未做处理）
    window.SITE_CONFIG['dynamicRoutes'] = [];                // 动态路由列表
@ -70,7 +71,8 @@
      // window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';

            // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
-      window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
+      // window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
+      window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
      // WebSocket地址
      window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
    </script>
--- a/back/src/assets/font/convergence-typeface.ttf
+++ b/back/src/assets/font/convergence-typeface.ttf
--- a/back/src/assets/font/header-typeface.ttf
+++ b/back/src/assets/font/header-typeface.ttf
--- a/back/src/assets/font/num-typeface.otf
+++ b/back/src/assets/font/num-typeface.otf
--- a/back/src/assets/font/text-typeface.otf
+++ b/back/src/assets/font/text-typeface.otf
--- a/back/src/assets/img/activitiMyWorkDynamics/header-bak.png
+++ b/back/src/assets/img/activitiMyWorkDynamics/header-bak.png
--- a/back/src/assets/img/activitiMyWorkDynamics/no-img.png
+++ b/back/src/assets/img/activitiMyWorkDynamics/no-img.png
--- a/back/src/router/index.js
+++ b/back/src/router/index.js
@ -5,6 +5,13 @@ import { isURL } from '@/utils/validate'
 import store from '@/store'
 import Cookies from 'js-cookie'

+
+// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
+const originalPush = Router.prototype.push
+Router.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+
 Vue.use(Router)

 // 页面路由(独立页面)
--- a/back/src/store/index.js
+++ b/back/src/store/index.js
@ -12,7 +12,7 @@ export default new Vuex.Store({
    // 导航条, 布局风格, default(白色) / colorful(鲜艳)
    navbarLayoutType: 'colorful',
    // 侧边栏, 布局皮肤, default(白色) / dark(黑色)
-    sidebarLayoutSkin: 'dark',
+    sidebarLayoutSkin: 'default',
    // 侧边栏, 折叠状态
    sidebarFold: false,
    // 侧边栏, 菜单
--- a/back/src/views/main-navbar.vue
+++ b/back/src/views/main-navbar.vue
@ -1,81 +1,124 @@
 <template>
-  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
+  <nav
+    class="aui-navbar"
+    :class="`aui-navbar--${$store.state.navbarLayoutType}`"
+  >
    <div class="aui-navbar__header">
      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
-        <a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
-        <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
+        <a class="aui-navbar__brand-mini" href="javascript:;">{{
+          $t("brand.mini")
+        }}</a>
+        <a class="aui-navbar__brand-lg" href="javascript:;">{{
+          $t("brand.lg")
+        }}</a>
+        <span>——</span>
+        <span class="back-title-text">后台管理系统</span>
      </h1>
    </div>
    <div class="aui-navbar__body">
      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
-        <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
+        <!--    <el-menu-item
+          index="1"
+          @click="$store.state.sidebarFold = !$store.state.sidebarFold"
+        >
+          <svg
+            class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
+            aria-hidden="true"
+          >
+            <use xlink:href="#icon-outdent"></use>
+          </svg>
        </el-menu-item>
        <el-menu-item index="2" @click="refresh()">
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
-        </el-menu-item>
+          <svg
+            class="
+              icon-svg
+              aui-navbar__icon-menu aui-navbar__icon-menu--refresh
+            "
+            aria-hidden="true"
+          >
+            <use xlink:href="#icon-sync"></use>
+          </svg>
+        </el-menu-item> -->
      </el-menu>
      <el-menu class="aui-navbar__menu" mode="horizontal">
        <el-menu-item index="1">
          <el-dropdown placement="bottom" :show-timeout="0">
-            <el-button size="mini">{{ $t('_lang') }}</el-button>
+            <el-button size="mini">{{ $t("_lang") }}</el-button>
            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="(val, key) in i18nMessages" :key="key" @click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
+              <el-dropdown-item
+                v-for="(val, key) in i18nMessages"
+                :key="key"
+                @click.native="$i18n.locale = key"
+                >{{ val._lang }}</el-dropdown-item
+              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
        <el-menu-item index="2">
          <a href="//115.28.200.119:9091" target="_blank">
-            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
+            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+              <use xlink:href="#icon-earth"></use>
+            </svg>
          </a>
        </el-menu-item>
        <el-menu-item index="3" v-if="$hasPermission('sys:notice:all')">
          <el-badge :is-dot="messageTip">
-            <a href="#"  @click="myNoticeRouter()"><i class="el-icon-bell"></i></a>
+            <a href="#" @click="myNoticeRouter()"
+              ><i class="el-icon-bell"></i
+            ></a>
          </el-badge>
        </el-menu-item>
        <el-menu-item index="4" @click="fullscreenHandle()">
-          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
+          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+            <use xlink:href="#icon-fullscreen"></use>
+          </svg>
        </el-menu-item>
        <el-menu-item index="5" class="aui-navbar__avatar">
          <el-dropdown placement="bottom" :show-timeout="0">
            <span class="el-dropdown-link">
-              <img src="~@/assets/img/avatar.png">
+              <img src="~@/assets/img/avatar.png" />
              <span>{{ $store.state.user.name }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
-              <el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
+              <el-dropdown-item @click.native="updatePasswordHandle()">{{
+                $t("updatePassword.title")
+              }}</el-dropdown-item>
+              <el-dropdown-item @click.native="logoutHandle()">{{
+                $t("logout")
+              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
-    <update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
+    <update-password
+      v-if="updatePasswordVisible"
+      ref="updatePassword"
+    ></update-password>
  </nav>
 </template>
 <script>
-import { messages } from '@/i18n'
-import screenfull from 'screenfull'
-import UpdatePassword from './main-navbar-update-password'
-import { clearLoginInfo } from '@/utils'
+import { messages } from "@/i18n";
+import screenfull from "screenfull";
+import UpdatePassword from "./main-navbar-update-password";
+import { clearLoginInfo } from "@/utils";
 // import Cookies from 'js-cookie'
 // var socket = null
 export default {
-  inject: ['refresh'],
-  data () {
+  inject: ["refresh"],
+  data() {
    return {
      i18nMessages: messages,
      updatePasswordVisible: false,
-      messageTip: false
-    }
+      messageTip: false,
+    };
  },
  components: {
-    UpdatePassword
+    UpdatePassword,
  },
-  created () {
+  created() {
    // var vue = this
    // socket = new WebSocket(`${window.SITE_CONFIG['socketURL']}?token=${Cookies.get('token')}`)
    // socket.onopen = function () {}
@ -101,56 +144,96 @@ export default {
    // }

    // 未读通知数
-    this.getUnReadCount()
+    this.getUnReadCount();
  },
  methods: {
-    myNoticeRouter () {
-      this.$router.replace('notice-notice-user')
+    myNoticeRouter() {
+      this.$router.replace("notice-notice-user");
    },
-    getUnReadCount () {
-      this.$http.get('/sys/notice/mynotice/unread').then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        if (res.data > 0) {
-          this.messageTip = true
-        }
-      }).catch(() => {})
+    getUnReadCount() {
+      this.$http
+        .get("/sys/notice/mynotice/unread")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          if (res.data > 0) {
+            this.messageTip = true;
+          }
+        })
+        .catch(() => {});
    },
    // 全屏
-    fullscreenHandle () {
+    fullscreenHandle() {
      if (!screenfull.enabled) {
        return this.$message({
-          message: this.$t('fullscreen.prompt'),
-          type: 'warning',
-          duration: 500
-        })
+          message: this.$t("fullscreen.prompt"),
+          type: "warning",
+          duration: 500,
+        });
      }
-      screenfull.toggle()
+      screenfull.toggle();
    },
    // 修改密码
-    updatePasswordHandle () {
-      this.updatePasswordVisible = true
+    updatePasswordHandle() {
+      this.updatePasswordVisible = true;
      this.$nextTick(() => {
-        this.$refs.updatePassword.init()
-      })
+        this.$refs.updatePassword.init();
+      });
    },
    // 退出
-    logoutHandle () {
-      this.$confirm(this.$t('prompt.info', { handle: this.$t('logout') }), this.$t('prompt.title'), {
-        confirmButtonText: this.$t('confirm'),
-        cancelButtonText: this.$t('cancel'),
-        type: 'warning'
-      }).then(() => {
-        this.$http.post('/logout').then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
-          }
-          clearLoginInfo()
-          this.$router.push({ name: 'login' })
-        }).catch(() => {})
-      }).catch(() => {})
+    logoutHandle() {
+      this.$confirm(
+        this.$t("prompt.info", { handle: this.$t("logout") }),
+        this.$t("prompt.title"),
+        {
+          confirmButtonText: this.$t("confirm"),
+          cancelButtonText: this.$t("cancel"),
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.$http
+            .post("/logout")
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              clearLoginInfo();
+              this.$router.push({ name: "login" });
+            })
+            .catch(() => {});
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@font-face {
+  font-family: "header-typeface";
+  src: url("~@/assets/font/header-typeface.ttf");
+}
+.aui-navbar {
+  width: 100%;
+  height: 50px;
+  background-image: url("~@/assets/img/activitiMyWorkDynamics/header-bak.png");
+  .aui-navbar__header {
+    width: 25%;
+    .aui-navbar__brand {
+      margin-left: 20px;
+      a {
+        font-size: 22px;
+        color: #ffffff;
+      }
+      .aui-navbar__brand-mini {
+        display: block;
+      }
+      .back-title-text {
+        margin-top: 5px;
+        font-family: header-typeface;
+      }
    }
  }
 }
-</script>
+</style>
--- a/back/src/views/main-sidebar-sub-menu.vue
+++ b/back/src/views/main-sidebar-sub-menu.vue
@ -1,89 +1,135 @@
 <template>
-  <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
+  <el-submenu
+    v-if="menu.children && menu.children.length >= 1"
+    :index="menu.id"
+    :popper-append-to-body="false"
+  >
    <template slot="title">
-      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
-      <span>{{ menu.name }}</span>
+      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
+        <use :xlink:href="`#${menu.icon}`"></use>
+      </svg>
+      <span class="first-level-text">{{ menu.name }}</span>
    </template>
-    <sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
+    <sub-menu
+      v-for="item in menu.children"
+      :key="item.id"
+      :menu="item"
+    ></sub-menu>
  </el-submenu>
  <el-menu-item v-else :index="menu.id" ref="li">
    <a
-      :href="isBrowserTabOpen(menu.id) ? getBrowserTabOpenURL(menu.id) : 'javascript:;'"
+      :href="
+        isBrowserTabOpen(menu.id)
+          ? getBrowserTabOpenURL(menu.id)
+          : 'javascript:;'
+      "
      :target="isBrowserTabOpen(menu.id) ? '_blank' : '_self'"
-      @click="isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)">
-      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+      @click="
+        isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)
+      "
+    >
+      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
+        <use :xlink:href="`#${menu.icon}`"></use>
+      </svg>
      <span>{{ menu.name }}</span>
    </a>
  </el-menu-item>
 </template>

 <script>
-import SubMenu from './main-sidebar-sub-menu'
+import SubMenu from "./main-sidebar-sub-menu";
 export default {
-  name: 'sub-menu',
-  data () {
+  name: "sub-menu",
+  data() {
    return {
-      browserTabOpenList: [
-        '1156748733921165314',
-      ]
-    }
+      browserTabOpenList: ["1156748733921165314"],
+    };
  },
  props: {
    menu: {
      type: Object,
-      required: true
-    }
+      required: true,
+    },
  },
  components: {
-    SubMenu
+    SubMenu,
  },
-  created () {
+  created() {
    this.$nextTick(() => {
      if (this.$refs.li) {
-        let $li = this.$refs.li.$el
-        let $a = $li.firstElementChild
+        let $li = this.$refs.li.$el;
+        let $a = $li.firstElementChild;
        if ($a) {
-          let pl = '0', pr = '0'
+          let pl = "0",
+            pr = "0";
          if ($li.currentStyle) {
-            pl = $li.currentStyle['paddingLeft']
-            pr = $li.currentStyle['paddingRight']
+            pl = $li.currentStyle["paddingLeft"];
+            pr = $li.currentStyle["paddingRight"];
          } else {
-            pl = window.document.defaultView.getComputedStyle($li, null)['paddingLeft']
-            pr = window.document.defaultView.getComputedStyle($li, null)['paddingRight']
+            pl = window.document.defaultView.getComputedStyle($li, null)[
+              "paddingLeft"
+            ];
+            pr = window.document.defaultView.getComputedStyle($li, null)[
+              "paddingRight"
+            ];
          }
-          $li.setAttribute('style', `padding-left: 0; padding-right: 0;`)
-          $a.setAttribute('style', `padding-left: ${pl}; padding-right: ${pr};`)
+          $li.setAttribute("style", `padding-left: 0; padding-right: 0;`);
+          $a.setAttribute(
+            "style",
+            `padding-left: ${pl}; padding-right: ${pr};`
+          );
        }
      }
-    })
+    });
  },
  methods: {
    // 是否通过浏览器Tab打开菜单
-    isBrowserTabOpen (menuId) {
-      return this.browserTabOpenList.filter(item => item === menuId).length >= 1;
+    isBrowserTabOpen(menuId) {
+      return (
+        this.browserTabOpenList.filter((item) => item === menuId).length >= 1
+      );
    },
    // 获取浏览器Tab打开菜单URL
-    getBrowserTabOpenURL (menuId) {
-      var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
-      return route ? route.meta.iframeURL : '';
+    getBrowserTabOpenURL(menuId) {
+      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
+        (item) => item.meta.menuId === menuId
+      )[0];
+      return route ? route.meta.iframeURL : "";
    },
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
-    gotoRouteHandle (menuId) {
-      var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
+    gotoRouteHandle(menuId) {
+      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
+        (item) => item.meta.menuId === menuId
+      )[0];
      if (route) {
-        this.$router.push({ name: route.name })
+        this.$router.push({ name: route.name });
      }
-    }
-  }
-}
+    },
+  },
+};
 </script>

 <style lang="scss">
 .aui-sidebar__menu {
-  .el-menu-item > a {
-    display: block;
-    color: inherit;
-    text-decoration: none;
+  .first-level-text {
+    font-size: 16px;
+    color: #212121;
+    font-weight: bold;
+  }
+  .el-menu-item {
+    a {
+      display: block;
+      color: inherit;
+      text-decoration: none;
+    }
+    span {
+      font-size: 16px;
+    }
+  }
+  .is-active {
+    color: #ffffff;
+    background-color: #0058e1;
+    border: none;
  }
 }
 </style>
--- a/back/src/views/main-theme-tools.vue
+++ b/back/src/views/main-theme-tools.vue
@ -1,21 +1,34 @@
 <template>
  <div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
    <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
-      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
+      <svg class="icon-svg" aria-hidden="true">
+        <use xlink:href="#icon-setting"></use>
+      </svg>
    </div>
    <div class="aui-theme-tools__content">
      <div class="aui-theme-tools__item">
        <h3>Navbar</h3>
-        <el-checkbox v-model="$store.state.navbarLayoutType" true-label="colorful">colorful 鲜艳</el-checkbox>
+        <el-checkbox
+          v-model="$store.state.navbarLayoutType"
+          true-label="colorful"
+          >colorful 鲜艳</el-checkbox
+        >
      </div>
      <div class="aui-theme-tools__item">
        <h3>Sidebar</h3>
-        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark">dark 黑色</el-checkbox>
+        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
+          >dark 黑色</el-checkbox
+        >
      </div>
      <div class="aui-theme-tools__item">
        <h3>Theme</h3>
        <el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
-          <el-radio v-for="item in themeList" :key="item.name" :label="item.name">{{ `${item.name} ${item.desc}` }}</el-radio>
+          <el-radio
+            v-for="item in themeList"
+            :key="item.name"
+            :label="item.name"
+            >{{ `${item.name} ${item.desc}` }}</el-radio
+          >
        </el-radio-group>
      </div>
    </div>
@ -24,38 +37,47 @@

 <script>
 export default {
-  data () {
+  data() {
    return {
      isOpen: false,
-      themeList: require('@/element-ui/config.js'),
-      themeColor: 'turquoise'
-    }
+      themeList: require("@/element-ui/config.js"),
+      themeColor: "turquoise",
+    };
  },
  methods: {
-    themeColorChangeHandle (val) {
+    themeColorChangeHandle(val) {
      var styleList = [
        {
-          id: 'J_elementTheme',
-          url: `${process.env.BASE_URL}element-theme/${val}/index.css?t=${new Date().getTime()}`
+          id: "J_elementTheme",
+          url: `${
+            process.env.BASE_URL
+          }element-theme/${val}/index.css?t=${new Date().getTime()}`,
        },
        {
-          id: 'J_auiTheme',
-          url: `${process.env.BASE_URL}element-theme/${val}/aui.css?t=${new Date().getTime()}`
-        }
-      ]
+          id: "J_auiTheme",
+          url: `${
+            process.env.BASE_URL
+          }element-theme/${val}/aui.css?t=${new Date().getTime()}`,
+        },
+      ];
      for (var i = 0; i < styleList.length; i++) {
-        var el = document.querySelector(`#${styleList[i].id}`)
+        var el = document.querySelector(`#${styleList[i].id}`);
        if (el) {
-          el.href = styleList[i].url
-          continue
+          el.href = styleList[i].url;
+          continue;
        }
-        el = document.createElement('link')
-        el.id = styleList[i].id
-        el.href = styleList[i].url
-        el.rel = 'stylesheet'
-        document.querySelector('head').appendChild(el)
+        el = document.createElement("link");
+        el.id = styleList[i].id;
+        el.href = styleList[i].url;
+        el.rel = "stylesheet";
+        document.querySelector("head").appendChild(el);
      }
-    }
-  }
-}
+    },
+  },
+};
 </script>
+<style scoped lang="scss">
+.aui-theme-tools__toggle {
+  background-color: #0058e1;
+}
+</style>
--- a/back/src/views/modules/ability/bsabilityimport.vue
+++ b/back/src/views/modules/ability/bsabilityimport.vue
@ -0,0 +1,128 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-20 10:38:17
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-20 11:33:13
+ * @Description: 告诉大家这是什么
+-->
+<template>
+    <div class="bsabilityimport">
+      <div class="item" @click="downloadTemplate()">
+        <svg t="1655692930310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1593" width="200" height="200"><path d="M599.13 0.476L33.55 109.306a20.778 20.778 0 0 0-16.492 20.42v764.308a20.778 20.778 0 0 0 16.372 20.48l565.58 108.83a20.837 20.837 0 0 0 3.81 0.654 19.29 19.29 0 0 0 12.622-4.465 21.313 21.313 0 0 0 7.56-16.015V20.361a21.313 21.313 0 0 0-7.56-16.074 19.23 19.23 0 0 0-16.313-3.81z m-206.11 696.08l-46.14-83.348c-10.597-18.575-20.241-37.864-32.148-59.951h-2.203c-10.538 21.67-20.004 40.305-29.767 58.344l-43.937 76.323-87.278-5 115.557-175.985L158.454 342.8l91.147-5.953 41.317 70.608c9.466 16.55 18.337 33.697 30.541 55.784h2.798c9.824-22.683 18.159-40.543 27.03-58.404l38.935-77.395 86.683-5.953-108.592 188.249L483.93 701.915zM966.519 122.76H663.487v143.36h40.364v40.96h-40.364v102.4h40.364v40.96h-40.364V552.9h40.364v40.96h-40.364v122.939h40.364v40.96h-40.364v143.419h302.972a40.781 40.781 0 0 0 40.424-40.96V163.72a40.781 40.781 0 0 0-40.364-40.96zM905.912 757.7H744.275v-40.96h161.637z m0-163.9H744.275v-40.9h161.637z m0-143.418H744.275v-40.9h161.637z m0-143.42H744.275v-40.84h161.637z" fill="#1296db" p-id="1594"></path></svg>
+        <span>下载模板</span>
+        </div>
+            <el-upload
+            ref="addUpload"
+              class="item"
+            :action="fileUploadUrl"
+            :on-success="onSuccess"
+            :on-remove="onRemove"
+            :show-file-list='false'
+            :on-error="onErrorFile"
+            :on-exceed='onExceed'
+            :limit='1'
+            :on-preview="onPreview"
+            list-type="text"
+          >
+          <svg t="1655692986683" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2083" width="200" height="200"><path d="M192 256v29h9.9c-6.5-9.3-9.9-19-9.9-29z m384 128c-41.9 0-82.3-2.2-120-6.4L590.2 512 467.5 634.8c34.4 3.4 70.8 5.2 108.5 5.2 212.1 0 384-57.3 384-128V256c0 70.7-171.9 128-384 128z m-263.9-99h51.3l17.2 17.2c57.2 11.3 124 17.8 195.4 17.8 212.1 0 384-57.3 384-128S788.1 64 576 64s-384 57.3-384 128c0 36.6 46.2 69.7 120.1 93zM576 704c-59.1 0-115.2-4.5-165.2-12.4L363.4 739H192v93c0 70.7 171.9 128 384 128s384-57.3 384-128V576c0 70.7-171.9 128-384 128z" fill="#E6C27C" p-id="2084"></path><path d="M336.9 349H198.6l98.9 98.9H64v128.2h233.5L198.6 675h138.3l162.9-163z" fill="#497CAD" p-id="2085"></path></svg>
+          <div>导入数据</div>
+        </el-upload>
+    </div>
+</template>
+<script>
+import Cookies from 'js-cookie'
+export default {
+  name: '',
+  components: {
+
+  },
+  props: {
+
+  },
+  data () {
+    return {
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/resource//importResource?token=' + Cookies.get('ucsToken')
+    }
+  },
+  methods: {
+    downloadTemplate () {
+      window.open(window.SITE_CONFIG.apiURL + '/%E8%83%BD%E5%8A%9B%E8%B5%84%E6%BA%90%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx?token=' + Cookies.get('ucsToken'))
+    },
+    onSuccess (res, file) {
+      this.$message({
+        message: '导入成功',
+        type: 'success'
+      })
+      this.$refs.addUpload.clearFiles()
+    },
+    onErrorFile () {
+      this.$message('导入失败！')
+      this.$refs.addUpload.clearFiles() // 去掉文件列表
+    },
+    onRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    onPreview (file) {
+      console.log('点击预览===============>', file)
+      window.open(file.response.data)
+    },
+    onExceed (files, fileList) {
+      this.$message.warning('当前附件数量已达上限，请先删除部分附件！')
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.bsabilityimport {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 250px 300px;
+  .item {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgba(0, 0, 0, 0);
+    span {
+      font-size: 20px;
+      font-weight: 600;
+      margin-top: 20px;
+    }
+    div {
+      font-size: 20px;
+      font-weight: 600;
+      margin-top: 20px;
+    }
+  }
+  .item:hover {
+    cursor: pointer;
+    border: 1px solid #1296db;
+    border-radius: 10px;
+    svg {
+      animation: turn 2s linear infinite;
+      animation-iteration-count: 1;
+    }
+  }
+}
+
+@keyframes turn {
+  0% {
+    -webkit-transform: rotateY(0deg);
+  }
+  25% {
+    -webkit-transform: rotateY(90deg);
+  }
+  50% {
+    -webkit-transform: rotateY(180deg);
+  }
+  75% {
+    -webkit-transform: rotateY(270deg);
+  }
+  100% {
+    -webkit-transform: rotateY(360deg);
+  }
+}
+</style>
--- a/back/src/views/modules/activiti/my-work-dynamics.vue
+++ b/back/src/views/modules/activiti/my-work-dynamics.vue
@ -8,46 +8,72 @@
          clearable
        />
      </el-col>
-      <el-button type="primary" @click="flashTableData">查询</el-button>
-      <el-button type="primary" @click="restTableData">重置</el-button>
+      <el-button type="primary" class="button-new" @click="flashTableData"
+        >查询</el-button
+      >
+      <el-button type="primary" class="button-new" @click="restTableData"
+        >重置</el-button
+      >
      <div style="float: right">
        <el-button
-        size="mini"
-        type="text"
-        icon="el-icon-delete"
-        @click="deleteData"
-        >批量删除</el-button>
+          size="mini"
+          type="text"
+          icon="el-icon-delete"
+          class="button-text-new"
+          @click="deleteData"
+          >批量删除</el-button
+        >
        <el-button
          type="primary"
+          class="button-new"
          @click="addDataDialogVisabled = true"
-          >动态发布</el-button>
+          >动态发布</el-button
+        >
      </div>
-
    </el-row>

    <el-row style="margin-top: 20px">
-      <el-table :data="tableData"  border @selection-change="tableChange" >
-        <el-table-column width="60" type="selection" align="center"></el-table-column> <!--  全选 -->
-        <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
+      <el-table :data="tableData" border @selection-change="tableChange">
+        <el-table-column
+          width="60"
+          type="selection"
+          align="center"
+        ></el-table-column>
+        <!--  全选 -->
+        <el-table-column
+          label="序号"
+          width="60"
+          type="index"
+          align="center"
+        ></el-table-column>
        <el-table-column label="动态标题" prop="title">
          <template slot-scope="scope">
            <div class="boxtitle">
-              {{scope.row.title}}
+              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="内容" prop="content">
          <template slot-scope="scope">
            <div class="boxcontent">
-              {{scope.row.content}}
+              {{ scope.row.content }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="图片地址" prop="imageUrl"></el-table-column>
-        <el-table-column label="创建时间" prop="createDate"  sortable></el-table-column>
+        <el-table-column
+          label="创建时间"
+          prop="createDate"
+          sortable
+        ></el-table-column>
        <el-table-column width="200" label="操作" align="center">
          <template slot-scope="scope">
-            <el-button size="mini" @click="openEditDialog(scope.row)" type="text" icon="el-icon-setting"
+            <el-button
+              size="mini"
+              @click="openEditDialog(scope.row)"
+              type="text"
+              icon="el-icon-setting"
+              class="button-text-new"
              >编辑</el-button
            >
            <!-- <el-button size="mini" type="success" icon="el-icon-plus"
@ -57,27 +83,37 @@
              size="mini"
              type="text"
              icon="el-icon-delete"
+              class="button-text-new"
              @click="deleteData(scope.row)"
              >删除</el-button
            >
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              class="button-text-new"
+              @click="openPreviewData(scope.row)"
+              >预览</el-button
+            >
          </template>
        </el-table-column>
      </el-table>
-    <!-- 分页 -->
-    </el-row><el-pagination
-        style="margin-top: 20px; text-align: center"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="queryData.pageIndex"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="queryData.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="queryData.total"
-      >
-      </el-pagination>
+      <!-- 分页 --> </el-row
+    ><el-pagination
+      style="margin-top: 20px; text-align: center"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="queryData.pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="queryData.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="queryData.total"
+    >
+    </el-pagination>

    <!-- 新增项目 -->
-    <el-dialog :close-on-click-modal="false"
+    <el-dialog
+      :close-on-click-modal="false"
      title="新增项目"
      :visible.sync="addDataDialogVisabled"
      @close="addDataDialogClose"
@ -98,6 +134,18 @@
            show-word-limit
          ></el-input>
        </el-form-item>
+        <el-form-item prop="title" label="摘要">
+          <el-input
+            v-model="addDataFrom.note1"
+            autocomplete="off"
+            placeholder="摘要"
+            maxlength="1000"
+            show-word-limit
+            type="textarea"
+            @input="noteExceed"
+            :rows="3"
+          ></el-input>
+        </el-form-item>
        <el-form-item prop="content" label="内容">
          <el-input
            v-model="addDataFrom.content"
@ -111,7 +159,7 @@
          ></el-input>
        </el-form-item>
        <el-form-item>
-       <!-- <el-upload
+          <!-- <el-upload
          class="avatar-uploader"
          :action="fileUploadUrl"
          :show-file-list="false"
@ -123,32 +171,41 @@

        </el-upload> -->

-        <el-upload
-          ref="addUpload"
-          class="upload-demo"
-          :action="fileUploadUrl"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-          :on-remove="addUploadRemoveFile"
-          :on-exceed="handleExceed"
-          :on-preview="showView"
-          :limit="1"
-          list-type="picture">
-          <el-button size="small" type="primary">点击上传</el-button>
-          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-        </el-upload>
+          <el-upload
+            ref="addUpload"
+            class="upload-demo"
+            :action="fileUploadUrl"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+            :on-remove="addUploadRemoveFile"
+            :on-exceed="handleExceed"
+            :on-preview="showView"
+            :limit="1"
+            list-type="picture"
+          >
+            <el-button size="small" type="primary" class="button-new"
+              >点击上传</el-button
+            >
+            <div slot="tip" class="el-upload__tip">
+              只能上传jpg/png文件，且不超过500kb
+            </div>
+          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDataDialogVisabled = false">取 消</el-button>
-        <el-button type="primary" @click="addDataDialogConfirm"
+        <el-button
+          type="primary"
+          @click="addDataDialogConfirm"
+          class="button-new"
          >确 定</el-button
        >
      </div>
    </el-dialog>

-<!-- 编辑项目 -->
- <el-dialog :close-on-click-modal="false"
+    <!-- 编辑项目 -->
+    <el-dialog
+      :close-on-click-modal="false"
      title="编辑项目"
      :visible.sync="editDataDialogVisabled"
      @close="editDataDialogClose"
@ -169,6 +226,18 @@
            show-word-limit
          ></el-input>
        </el-form-item>
+        <el-form-item prop="title" label="摘要">
+          <el-input
+            v-model="eidtDataForm.note1"
+            autocomplete="off"
+            placeholder="摘要"
+            maxlength="1000"
+            show-word-limit
+            type="textarea"
+            @input="noteExceed"
+            :rows="3"
+          ></el-input>
+        </el-form-item>
        <el-form-item prop="content" label="内容">
          <el-input
            v-model="eidtDataForm.content"
@ -182,7 +251,7 @@
          ></el-input>
        </el-form-item>
        <el-form-item>
-       <!-- <el-upload
+          <!-- <el-upload
          class="avatar-uploader"
          :action="fileUploadUrl"
          :show-file-list="false"
@ -191,30 +260,81 @@
          <img v-if="eidtDataForm.imageUrl" :src="eidtDataForm.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
-        <el-upload
-          ref="editUpload"
-          class="upload-demo"
-          :action="fileUploadUrl"
-          :on-success="eidtHandleAvatarSuccess"
-          :before-upload="editBeforeAvatarUpload"
-          :limit="1"
-          :file-list="editDialogShowFileList"
-          :on-remove="editUploadRemoveFile"
-          :on-exceed="handleExceed"
-          :on-preview="showView"
-          list-type="picture">
-          <el-button size="small" type="primary">点击上传</el-button>
-          <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
-        </el-upload>
-      </el-form-item>
+          <el-upload
+            ref="editUpload"
+            class="upload-demo"
+            :action="fileUploadUrl"
+            :on-success="eidtHandleAvatarSuccess"
+            :before-upload="editBeforeAvatarUpload"
+            :limit="1"
+            :file-list="editDialogShowFileList"
+            :on-remove="editUploadRemoveFile"
+            :on-exceed="handleExceed"
+            :on-preview="showView"
+            list-type="picture"
+          >
+            <el-button size="small" type="primary" class="button-new"
+              >点击上传</el-button
+            >
+            <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
+          </el-upload>
+        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDataDialogVisabled = false">取 消</el-button>
-        <el-button type="primary" @click="eidtDataDialogConfirm">确 定</el-button>
+        <el-button
+          type="primary"
+          @click="eidtDataDialogConfirm"
+          class="button-new"
+          >确 定</el-button
+        >
      </div>
    </el-dialog>
+    <!-- 预览项目 -->
+    <el-dialog
+      :close-on-click-modal="false"
+      title="预览项目"
+      :visible.sync="perviewDataDialogVisabled"
+      @close="perviewDataDialogClose"
+      width="1300px"
+      top="10vh"
+    >
+      <div class="preview-dialog">
+        <div class="preview-title">
+          <div class="title-text">
+            <span>{{ previewData.title }}</span>
+          </div>
+          <div class="title-time">
+            <span>发布时间：</span>
+            <span>{{ previewData.updateDate }}</span>
+          </div>
+        </div>
+        <div class="preview-note">
+          <span>摘要：</span>
+          <span>{{ previewData.note1 }}</span>
+        </div>
+        <div class="preview-image">
+          <img
+            width="100%"
+            v-if="previewData.imageUrl != ''"
+            :src="previewData.imageUrl"
+            alt=""
+          />
+          <img
+            width="100%"
+            v-else
+            src="~@/assets/img/activitiMyWorkDynamics/no-img.png"
+            alt=""
+          />
+        </div>
+        <div class="preview-content">
+          <span>{{ previewData.content }}</span>
+        </div>
+      </div>
+    </el-dialog>
+
    <el-dialog :visible.sync="dialogVisibleImg">
-      <img width="100%" :src="previewImg" alt="">
+      <img width="100%" :src="previewImg" alt="" />
    </el-dialog>
  </el-card>
 </template>
@ -222,15 +342,15 @@
 <script>
 // @ is an alias to /src
 export default {
-  data () {
+  data() {
    return {
-      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
+      fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
      // 表格筛选条件对象
      queryData: {
-        keyworld: '',
+        keyworld: "",
        pageIndex: 1,
        pageSize: 10,
-        total: 0
+        total: 0,
      },
      // 表格数据数组对象
      tableData: [],
@ -241,310 +361,429 @@ export default {
      // imageUrl: '',
      // 新增数据表单对象
      addDataFrom: {
-        title: '',
-        content: '',
-        imageUrl: '',
-        delFlag: 0
+        title: "",
+        note1: "",
+        content: "",
+        imageUrl: "",
+        delFlag: 0,
      },
      // 新增数据表单验证对象
      addDataFromRules: {
-        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
-        content: [
-          { required: true, message: '请输入内容', trigger: 'blur' }
-        ],
+        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
+        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        imageUrl: [
-          { required: true, message: '请输入图片地址', trigger: 'blur' }
-        ]
+          { required: true, message: "请输入图片地址", trigger: "blur" },
+        ],
      },
      editDataDialogVisabled: false,
      eidtDataForm: {
-        title: '',
-        content: '',
-        imageUrl: ''
+        title: "",
+        note1: "",
+        content: "",
+        imageUrl: "",
      },
      eidtDataFromRules: {
-        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
-        content: [
-          { required: true, message: '请输入内容', trigger: 'blur' }
-        ],
+        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
+        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        imageUrl: [
-          { required: true, message: '请输入图片地址', trigger: 'blur' }
-        ]
+          { required: true, message: "请输入图片地址", trigger: "blur" },
+        ],
      },
-      previewImg: '', // 预览图片
+      perviewDataDialogVisabled: false,
+      previewData: {
+        title: "",
+        note1: "",
+        content: "",
+        imageUrl: "",
+        delFlag: 0,
+      },
+      previewImg: "", // 预览图片
      deleteDataArr: [],
-      dialogVisibleImg: false
-    }
+      dialogVisibleImg: false,
+    };
  },
-  created () {
-    this.getTableData()
+  created() {
+    this.getTableData();
  },
  methods: {
-    tableChange (val) {
-      this.deleteDataArr = val.map(item => item.id)
-      console.log(this.deleteDataArr)
+    tableChange(val) {
+      this.deleteDataArr = val.map((item) => item.id);
+      console.log(this.deleteDataArr);
    },
-    restTableData () {
-      this.queryData.keyworld = ''
-      this.getTableData()
+    restTableData() {
+      this.queryData.keyworld = "";
+      this.getTableData();
    },
-    showView (file) {
-      this.previewImg = file.url
-      this.dialogVisibleImg = true
+    showView(file) {
+      this.previewImg = file.url;
+      this.dialogVisibleImg = true;
    },
-    getTableData () {
-      this.$http.get('/workdynamics/page', {
-        params: {
-          limit: this.queryData.pageSize,
-          page: this.queryData.pageIndex,
-          name: this.queryData.keyworld
-        }
-      })
+    getTableData() {
+      this.$http
+        .get("/workdynamics/page", {
+          params: {
+            limit: this.queryData.pageSize,
+            page: this.queryData.pageIndex,
+            name: this.queryData.keyworld,
+          },
+        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
-            return this.$message.error(res.msg)
+            return this.$message.error(res.msg);
          }
-          this.tableData = res.data.list
-          this.queryData.total = res.data.total
+          this.tableData = res.data.list;
+          this.queryData.total = res.data.total;
        })
-        .catch(() => {})
+        .catch(() => {});
    },
-    flashTableData () {
-      this.queryData.pageIndex = 1
-      this.getTableData()
+    flashTableData() {
+      this.queryData.pageIndex = 1;
+      this.getTableData();
    },
    // 分页大小更改
-    handleSizeChange (value) {
-      this.queryData.pageSize = value
-      this.getTableData()
+    handleSizeChange(value) {
+      this.queryData.pageSize = value;
+      this.getTableData();
    },
    // 当前索引更改
-    handleCurrentChange (val) {
-      this.queryData.pageIndex = val
-      this.getTableData()
+    handleCurrentChange(val) {
+      this.queryData.pageIndex = val;
+      this.getTableData();
    },
    // 新增数据窗口关闭事件
-    addDataDialogClose () {
-      this.$refs.addDataFormRef.resetFields()
-      this.addDataFrom.imageUrl = ''
-      this.$refs.addUpload.clearFiles()
+    addDataDialogClose() {
+      this.$refs.addDataFormRef.resetFields();
+      this.addDataFrom.imageUrl = "";
+      this.$refs.addUpload.clearFiles();
      // this.addDataFrom.imagesFiles = []
      // this.$refs.addDataFromUploadRef.clearFiles()
    },
-    editDataDialogClose () {
-      this.$refs.editDataFormRef.resetFields()
-      this.eidtDataForm.imageUrl = ''
-      this.$refs.editUpload.clearFiles()
+    editDataDialogClose() {
+      this.$refs.editDataFormRef.resetFields();
+      this.eidtDataForm.imageUrl = "";
+      this.$refs.editUpload.clearFiles();
    },
    // 追加数据
-    addDataDialogConfirm () {
+    addDataDialogConfirm() {
      this.$refs.addDataFormRef.validate(async (valid) => {
        if (valid) {
+          //console.log("新增新增", this.addDataFrom);
          this.$http
-            .post('/workdynamics/insert', this.addDataFrom)
+            .post("/workdynamics/insert", this.addDataFrom)
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg)
+                return this.$message.error(res.msg);
              }
-              this.$message.success('新增成功')
-              this.addDataDialogVisabled = false
-              this.getTableData()
+              this.$message.success("新增成功");
+              this.addDataDialogVisabled = false;
+              this.getTableData();
            })
-            .catch(() => {})
+            .catch(() => {});
        } else {
-          this.$message.success('表单数据填写不完整')
+          this.$message.success("表单数据填写不完整");
        }
-      })
+      });
    },
    // 限定图片
-    handleExceed () {
-      this.$message({ type: 'error', message: '最多支持一张图片上传' })
+    handleExceed() {
+      this.$message({ type: "error", message: "最多支持一张图片上传" });
    },
    // 限制标题
-    titleExceed (str) {
+    titleExceed(str) {
      if (str.length >= 200) {
-        this.$message.error('标题文字不能超过200字')
+        this.$message.error("标题文字不能超过200字");
      }
    },
    // 限制内容
-    contentExceed (str) {
+    contentExceed(str) {
      if (str.length >= 2000) {
-        this.$message.error('内容文字不能超过2000字')
+        this.$message.error("内容文字不能超过2000字");
+      }
+    },
+    //限制摘要
+    noteExceed(str) {
+      if (str.length >= 1000) {
+        this.$message.error("摘要文字不能超过1000字");
      }
    },
    // 删除数据
-    deleteData (row) {
-      console.log(row)
-      this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+    deleteData(row) {
+      console.log(row);
+      this.$confirm("此操作将删除当前数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
      })
        .then(async () => {
-          let ids = []
+          let ids = [];
          if (this.deleteDataArr.length > 1) {
-            ids = this.deleteDataArr
+            ids = this.deleteDataArr;
          } else {
-            ids = [row.id]
+            ids = [row.id];
          }
-          console.log(ids)
-          this.$http.delete('/workdynamics/delete', {
-            data: ids
-          })
+          console.log(ids);
+          this.$http
+            .delete("/workdynamics/delete", {
+              data: ids,
+            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg)
+                return this.$message.error(res.msg);
              }
              this.$message({
-                type: 'success',
-                message: '删除成功!'
-              })
-              this.getTableData()
-            })
+                type: "success",
+                message: "删除成功!",
+              });
+              this.getTableData();
+            });
        })
        .catch(() => {
          this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
-        })
+            type: "info",
+            message: "已取消删除",
+          });
+        });
    },
-    handleAvatarSuccess (res, file) {
+    //预览工作动态信息
+    async openPreviewData(row) {
+      console.log("预览预览", row);
+      const { data: res } = await this.$http.get(
+        `workdynamics/select/${row.id}`
+      );
+
      if (res.code !== 0) {
-        return this.$message.error(res.msg)
+        return this.$message.error(res.msg);
      }

-      this.addDataFrom.imageUrl = res.data
+      this.previewData = res.data;
+
+      this.perviewDataDialogVisabled = true;
+    },
+    perviewDataDialogClose() {
+      this.perviewDataDialogVisabled = false;
+    },
+    handleAvatarSuccess(res, file) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg);
+      }
+
+      this.addDataFrom.imageUrl = res.data;
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
-    beforeAvatarUpload (file) {
+    beforeAvatarUpload(file) {
      const isImage =
-        file.type === 'image/jpeg' ||
-        file.type === 'image/jpg' ||
-        file.type === 'image/png'
-      const isLt2M = file.size / 1024 / 1024 < 2
+        file.type === "image/jpeg" ||
+        file.type === "image/jpg" ||
+        file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
-        this.$message.error('上传头像图片只能是 JPG 格式!')
+        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
-      return isImage && isLt2M
+      return isImage && isLt2M;
    },
-    eidtHandleAvatarSuccess (res, file) {
+    eidtHandleAvatarSuccess(res, file) {
      if (res.code !== 0) {
-        return this.$message.error(res.msg)
+        return this.$message.error(res.msg);
      }

-      this.eidtDataForm.imageUrl = res.data
+      this.eidtDataForm.imageUrl = res.data;
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
-    editBeforeAvatarUpload (file) {
+    editBeforeAvatarUpload(file) {
      const isImage =
-        file.type === 'image/jpeg' ||
-        file.type === 'image/jpg' ||
-        file.type === 'image/png'
-      const isLt2M = file.size / 1024 / 1024 < 2
+        file.type === "image/jpeg" ||
+        file.type === "image/jpg" ||
+        file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
-        this.$message.error('上传头像图片只能是 JPG 格式!')
+        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
-      return isImage && isLt2M
+      return isImage && isLt2M;
    },
-    async openEditDialog (row) {
-      const { data: res } = await this.$http.get(`workdynamics/select/${row.id}`)
+    async openEditDialog(row) {
+      const { data: res } = await this.$http.get(
+        `workdynamics/select/${row.id}`
+      );

      if (res.code !== 0) {
-        return this.$message.error(res.msg)
+        return this.$message.error(res.msg);
      }

-      this.eidtDataForm = res.data
+      this.eidtDataForm = res.data;

-      this.editDataDialogVisabled = true
+      this.editDataDialogVisabled = true;
    },
-    eidtDataDialogConfirm () {
+    eidtDataDialogConfirm() {
      this.$refs.editDataFormRef.validate(async (valid) => {
        if (valid) {
-          console.log(this.eidtDataForm)
+          console.log(this.eidtDataForm);
          this.$http
-            .put('/workdynamics/update', this.eidtDataForm)
+            .put("/workdynamics/update", this.eidtDataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg)
+                return this.$message.error(res.msg);
              }
-              this.$message.success('编辑成功')
-              this.editDataDialogVisabled = false
-              this.getTableData()
+              this.$message.success("编辑成功");
+              this.editDataDialogVisabled = false;
+              this.getTableData();
            })
-            .catch(() => {})
+            .catch(() => {});
        } else {
-          this.$message.success('表单数据填写不完整')
+          this.$message.success("表单数据填写不完整");
        }
-      })
+      });
    },
-    addUploadRemoveFile (file, fileList) {
-      this.$refs.addUpload.clearFiles()
-      this.addDataFrom.imageUrl = ''
+    addUploadRemoveFile(file, fileList) {
+      this.$refs.addUpload.clearFiles();
+      this.addDataFrom.imageUrl = "";
+    },
+    editUploadRemoveFile(file, fileList) {
+      this.$refs.editUpload.clearFiles();
+      this.eidtDataForm.imageUrl = "";
    },
-    editUploadRemoveFile (file, fileList) {
-      this.$refs.editUpload.clearFiles()
-      this.eidtDataForm.imageUrl = ''
-    }
  },
  computed: {
-    editDialogShowFileList () {
+    editDialogShowFileList() {
      if (this.eidtDataForm.imageUrl) {
-        return [{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }]
+        return [
+          { name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl },
+        ];
      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.boxtitle {
+  width: 100%;
+  max-height: 200px;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.boxcontent {
+  width: 100%;
+  max-height: 200px;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.preview-dialog {
+  width: 100%;
+  height: 723px;
+  overflow: auto;
+  /* 滚动条凹槽的颜色，还可以设置边框属性 */
+  ::-webkit-scrollbar-track-piece {
+    background-color: #f8f8f8;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+
+  /* 滚动条的宽度 */
+  ::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  .preview-title {
+    width: 100%;
+    height: 100px;
+    //margin-top: -40px;
+    border-bottom: solid #c6c6c6 1px;
+    .title-text {
+      text-align: center;
+      span {
+        font-size: 24px;
+        color: #0558e1;
+      }
+    }
+    .title-time {
+      width: 100%;
+      height: 30px;
+      margin-top: 14px;
+      text-align: center;
+      line-height: 30px;
+      span {
+        font-size: 16px;
+        color: #212121;
+      }
+    }
+  }
+  .preview-note {
+    width: 100%;
+    height: 100px;
+    text-align: left;
+    margin-top: 24px;
+    text-indent: 2em;
+  }
+  .preview-image {
+    width: 900px;
+    //height: 100%;
+    margin-top: 16px;
+    padding-top: 5px;
+    text-align: center;
+    padding-left: 300px;
+  }
+  .preview-content {
+    line-height: 30px;
+    text-indent: 2em;
+    margin-top: 16px;
+    span {
+      font-size: 16px;
+      color: #212121;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 5;
+      -webkit-box-orient: vertical;
    }
  }
 }
-</script>
-<style scoped>
-.avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-  }
-  .avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-  }
-   .boxtitle{
-    width: 100%;
-    max-height: 200px;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display:-webkit-box;
-    -webkit-box-orient: vertical;
-  }
-  .boxcontent{
-    width: 100%;
-    max-height: 200px;
-    -webkit-line-clamp: 4;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display:-webkit-box;
-    -webkit-box-orient: vertical;
-  }
-
+.button-new {
+  background-color: #0558e1;
+  border: none;
+}
+.button-text-new {
+  color: #0558e1;
+}
+.el-icon-delete {
+  color: #0558e1;
+}
 </style>
--- a/back/src/views/modules/bscatalogue/ManagementPop.vue
+++ b/back/src/views/modules/bscatalogue/ManagementPop.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-05-06 11:17:55
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-08 17:19:11
+ * @LastEditTime: 2022-06-20 17:40:52
 * @Description: 编目弹窗
 -->
 <template>
@ -441,17 +441,7 @@ export default {
      const newData = [...this.data]
      this.editData = {}
      newData.forEach(val => {
-        if (val.key === key) {
-          this.editData = val
-        } else {
-          if (val.children) {
-            val.children.forEach(item => {
-              if (item.key === key) {
-                this.editData = item
-              }
-            })
-          }
-        }
+        this.handleChangeFor(val, key)
      })
      if (this.editData) {
        this.editData[column] = value
@ -459,6 +449,17 @@ export default {
      }
      console.log(this.data)
    },
+    handleChangeFor (val, key) {
+      if (val.key === key) {
+        this.editData = val
+      } else {
+        if (val.children) {
+          val.children.forEach(item => {
+            this.handleChangeFor(item, key)
+          })
+        }
+      }
+    },
    edit (key) {
      if (this.flag) {
        const newData = [...this.data]
--- a/front/public/index.html
+++ b/front/public/index.html
@ -1,8 +1,8 @@
 <!--
 * @Author: hisense.wuhongjian
 * @Date: 2022-03-29 16:45:25
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-16 12:46:36
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-20 18:38:34
 * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@ -28,21 +28,25 @@
     <!-- 站点配置 -->
  <script>
    window.SITE_CONFIG = {};
-    window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
-    window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
-    window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
-    window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
-
    // window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
    // window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
    // window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
    // window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';

-
-    // window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
-    // window.SITE_CONFIG['previewUrl'] = 'http://localhost:8080/';
-    // window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
-    // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
+    // window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
+    // window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
+    // window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
+    // window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
+    // 西海岸版本
+    // window.SITE_CONFIG['backUrl'] = 'http://10.134.135.9:9797';
+    // window.SITE_CONFIG['previewUrl'] = 'http://10.134.135.9:9796/';
+    // window.SITE_CONFIG['frontUrl'] = 'http://10.134.135.9:9796/document/#/devModelFile/';
+    // window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
+    // 开发
+    window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
+    window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796';
+    window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
+    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
    // 穿透版本
    // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
    // window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
@ -60,6 +64,7 @@

    <script type="text/javascript" src="./static/config/basicConfig.js"></script>
    <script type="text/javascript" src="./static/config/mapConfig.js"></script>
+    <script type="text/javascript" src="./static/config/footerData.js"></script>
    <!--  ==========地图相关配置========== -->
    <script type="text/javascript" src="./leaflet/libs/leaflet/1.3.1/leaflet.js"></script>
    <script type="text/javascript" src="./static/js/jquery-3.6.0.min.js"></script>
--- a/front/public/static/config/footerData.js
+++ b/front/public/static/config/footerData.js
@ -0,0 +1,48 @@
+/*
+ * @Author: zhangfeihu
+ * @Date: 2022-06-16 16:37:31
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-06-20 16:18:04
+ * @FilePath: \qiantai\front\public\static\config\footerData.js
+ * @Description: 底部菜单数据配置配置
+ */
+const footerDataList = {
+  // 市局
+  // company: {
+  //   left: '青岛市大数据发展管理局建设',
+  //   right: '海信网络科技股份有限公司'
+  // },
+  // address: [
+  //   {
+  //     name: '鲁IC备00000000号',
+  //     value: '政府标识码3702000106',
+  //   },
+  //   {
+  //     name: '版权所有：青岛市大数据发展管理局',
+  //     value: '地址：山东省青岛市香港中路17号市级机关办公楼',
+  //   },
+  //   {
+  //     name: '电话：0532-8561234',
+  //     value: '传真：0532-2145122',
+  //   },
+  // ]
+  // 西海岸
+  company: {
+    left: '青岛西海岸新区大数据发展促进局建设',
+    right: 'v0.81'
+  },
+  address: [
+    {
+      name: '鲁IC备00000000号',
+      value: '政府标识码3702000106',
+    },
+    {
+      name: '版权所有：青岛西海岸新区大数据发展促进局',
+      value: '地址：青岛市西海岸新区长江中路369号',
+    },
+    {
+      name: '电话：0532-86986596',
+      value: '传真：0532-86986596',
+    },
+  ]
+}
--- a/front/src/api/capabilityCloud.js
+++ b/front/src/api/capabilityCloud.js
@ -0,0 +1,60 @@
+import request from '@/utils/request'
+//能力云图-知识库
+export function KnowledgeBaseStatic() {
+  return request({
+    url: '/census/center/v2/knowledgeInfo',
+    method: 'get',
+  })
+}
+//能力云图-概览总数
+export function wholeAmount() {
+  return request({
+    url: '/census/center/v2/whole_amount',
+    method: 'get',
+  })
+}
+//能力云图-概览ehcarts
+export function trafficStatistics(data) {
+  return request({
+    url: '/census/center/v2/trafficStatistics',
+    method: 'post',
+    data,
+  })
+}
+//能力云图-应用资源总数
+export function applicationNum() {
+  return request({
+    url: '/census/center/v2/applicationNum',
+    method: 'get',
+  })
+}
+//能力云图-区市应用资源排名
+export function districtResourceRank() {
+  return request({
+    url: '/census/center/v2/districtResourceRank',
+    method: 'get',
+  })
+}
+//能力云图-委办局应用资源分布
+export function cityResourceRank() {
+  return request({
+    url: '/census/center/v2/cityResourceRank',
+    method: 'get',
+  })
+}
+//能力云图-组件服务
+export function assemblerBaseStatic() {
+  return request({
+    url: '/census/center/v2/assemblerInfo',
+    method: 'get',
+  })
+}
+//能力云图-组件服务排行
+export function componentServiceRank(params) {
+  return request({
+    url: '/census/center/v2/componentServiceRank',
+    method: 'get',
+    params
+  })
+}
+
--- a/front/src/api/file.js
+++ b/front/src/api/file.js
@ -2,7 +2,7 @@
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-20 17:16:35
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-05-26 22:40:46
+ * @LastEditTime: 2022-06-19 18:42:39
 * @Description: 告诉大家这是什么
 */
 import request from '@/utils/request'
@ -46,3 +46,40 @@ export function correct(params) {
 export function paddleocr(params) {
  return axios.post('http://15.72.183.90:7008/paddleocr', params, config2)
 }
+
+// 能力云图-数据资源
+export function count() {
+  return axios.post(
+    'http://10.134.135.24:30058/share-portal/platform/index/abilityMarket/count',
+    config2
+  )
+}
+export function getVideoList(params) {
+    return axios.get(
+      'http://10.134.135.9:8001/hx-weather-warning/camera/getCameraListByName?name=' +
+        params.name +
+        '&pageNo=' +
+        params.pageNo +
+        '&pageSize=' +
+        params.pageSize,
+      config2
+    )
+  }
+// 能力云图-数据资源-总数据数
+export function getRecord(params) {
+  return axios.get(
+    'http://10.134.135.24:30090/api/share-portal/platform/catalogue/query?serviceName=' +
+    params.serviceName +
+    '&orderField=' +
+    params.orderField +
+    '&orderType=' +
+    params.orderType +
+    '&pageNum=' +
+    params.pageNum +
+    '&pageSize=' +
+    params.pageSize +
+    '&serviceType=' +
+    params.serviceType,
+    config2
+  )
+}
--- a/front/src/assets/capabilityCloud/Component_services_bg.png
+++ b/front/src/assets/capabilityCloud/Component_services_bg.png
--- a/front/src/assets/capabilityCloud/Component_services_content_bg.png
+++ b/front/src/assets/capabilityCloud/Component_services_content_bg.png
--- a/front/src/assets/capabilityCloud/Component_services_snum.png
+++ b/front/src/assets/capabilityCloud/Component_services_snum.png
--- a/front/src/assets/capabilityCloud/Component_services_title.png
+++ b/front/src/assets/capabilityCloud/Component_services_title.png
--- a/front/src/assets/capabilityCloud/Component_services_title_bg.png
+++ b/front/src/assets/capabilityCloud/Component_services_title_bg.png
--- a/front/src/assets/capabilityCloud/Knowledge-look.png
+++ b/front/src/assets/capabilityCloud/Knowledge-look.png
--- a/front/src/assets/capabilityCloud/Knowledge-title.png
+++ b/front/src/assets/capabilityCloud/Knowledge-title.png
--- a/front/src/assets/capabilityCloud/Knowledge-up.png
+++ b/front/src/assets/capabilityCloud/Knowledge-up.png
--- a/front/src/assets/capabilityCloud/bg.png
+++ b/front/src/assets/capabilityCloud/bg.png
--- a/front/src/assets/capabilityCloud/bt.png
+++ b/front/src/assets/capabilityCloud/bt.png
--- a/front/src/assets/capabilityCloud/font/DIN-Bold.otf
+++ b/front/src/assets/capabilityCloud/font/DIN-Bold.otf
--- a/front/src/assets/capabilityCloud/font/SourceHanSansCN-Regular.otf
+++ b/front/src/assets/capabilityCloud/font/SourceHanSansCN-Regular.otf
--- a/front/src/assets/capabilityCloud/font/ZhiheiJ-W5.ttf
+++ b/front/src/assets/capabilityCloud/font/ZhiheiJ-W5.ttf
--- a/front/src/assets/capabilityCloud/header.png
+++ b/front/src/assets/capabilityCloud/header.png
--- a/front/src/assets/capabilityCloud/infrastructure_gz.png
+++ b/front/src/assets/capabilityCloud/infrastructure_gz.png
--- a/front/src/assets/capabilityCloud/infrastructure_sz.png
+++ b/front/src/assets/capabilityCloud/infrastructure_sz.png
--- a/front/src/assets/capabilityCloud/infrastructure_title.png
+++ b/front/src/assets/capabilityCloud/infrastructure_title.png
--- a/front/src/assets/capabilityCloud/infrastructure_yz.png
+++ b/front/src/assets/capabilityCloud/infrastructure_yz.png
--- a/front/src/assets/capabilityCloud/jszyys.png
+++ b/front/src/assets/capabilityCloud/jszyys.png
--- a/front/src/assets/capabilityCloud/pt_bg.png
+++ b/front/src/assets/capabilityCloud/pt_bg.png
--- a/front/src/assets/capabilityCloud/resources-left.png
+++ b/front/src/assets/capabilityCloud/resources-left.png
--- a/front/src/assets/capabilityCloud/resources-right.png
+++ b/front/src/assets/capabilityCloud/resources-right.png
--- a/front/src/assets/capabilityCloud/resources-title.png
+++ b/front/src/assets/capabilityCloud/resources-title.png
--- a/front/src/assets/capabilityCloud/select.png
+++ b/front/src/assets/capabilityCloud/select.png
--- a/front/src/assets/capabilityCloud/select_sj.png
+++ b/front/src/assets/capabilityCloud/select_sj.png
--- a/front/src/assets/capabilityCloud/top_bg.png
+++ b/front/src/assets/capabilityCloud/top_bg.png
--- a/front/src/assets/capabilityCloud/tyyys.png
+++ b/front/src/assets/capabilityCloud/tyyys.png
--- a/front/src/assets/capabilityCloud/zyys.png
+++ b/front/src/assets/capabilityCloud/zyys.png
--- a/front/src/assets/capabilityCloud/字体/DIN-Bold.otf
+++ b/front/src/assets/capabilityCloud/字体/DIN-Bold.otf
--- a/front/src/assets/capabilityCloud/字体/SourceHanSansCN-Regular.otf
+++ b/front/src/assets/capabilityCloud/字体/SourceHanSansCN-Regular.otf
--- a/front/src/assets/capabilityCloud/字体/腾祥智黑简-W5.ttf
+++ b/front/src/assets/capabilityCloud/字体/腾祥智黑简-W5.ttf
--- a/front/src/assets/detailsAll/business/business_element_content.png
+++ b/front/src/assets/detailsAll/business/business_element_content.png
--- a/front/src/assets/detailsAll/business/business_module_bg.png
+++ b/front/src/assets/detailsAll/business/business_module_bg.png
--- a/front/src/assets/detailsAll/business/business_next.png
+++ b/front/src/assets/detailsAll/business/business_next.png
--- a/front/src/assets/detailsAll/business/business_previous.png
+++ b/front/src/assets/detailsAll/business/business_previous.png
--- a/front/src/assets/detailsAll/business/business_right_bg.png
+++ b/front/src/assets/detailsAll/business/business_right_bg.png
--- a/front/src/assets/detailsAll/business/business_usage_mode_bg.png
+++ b/front/src/assets/detailsAll/business/business_usage_mode_bg.png
--- a/front/src/assets/detailsAll/kfzj_sybg.png
+++ b/front/src/assets/detailsAll/kfzj_sybg.png
--- a/front/src/config/default/setting.config.js
+++ b/front/src/config/default/setting.config.js
@ -2,7 +2,7 @@
 * @Author: hisense.wuhongjian
 * @Date: 2022-03-29 17:48:03
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-15 19:40:28
+ * @LastEditTime: 2022-06-20 16:10:57
 * @Description: 告诉大家这是什么
 */
 /**
@ -50,7 +50,7 @@ const setting = {
  //路由模式，可选值为 history 或 hash
  routerMode: 'hash',
  //不经过token校验的路由
-  routesWhiteList: ['/login', '/register', '/callback', '/404', '/403'],
+  routesWhiteList: ['/login', '/register', '/callback', '/404', '/403', '/capabilityCloud'], // 新增统计云图白名单
  //加载时显示文字
  loadingText: '正在加载中...',
  //token名称
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@ -376,6 +376,16 @@ export const constantRoutes = [
      icon: 'error-warning-line',
    },
  },
+  // 能力云图
+  {
+    path: '/capabilityCloud',
+    name: 'capabilityCloud',
+    component: () => import('@/views/capabilityCloud'),
+    meta: {
+      title: '能力云图',
+      icon: 'error-warning-line',
+    },
+  },
  // 赋能案例详情
  {
    path: '/AssignCaseDetailPage',
--- a/front/src/views/assignCase/components/AssignCaseDetailPage.vue
+++ b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
@ -1,8 +1,8 @@
 <!--
 * @Author: hisense.zhangfeihu
 * @Date: 2022-06-13 10:22:27
- * @LastEditors: hisense.zhangfeihu
- * @LastEditTime: 2022-06-13 14:31:19
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-20 18:58:40
 * @Description: 赋能案例-详情页
 -->
 <template>
@ -281,8 +281,8 @@
          }
        } else {
          if (
-            scrollTop.value > domArr.value[i].offsetTop - 50 &&
-            scrollTop.value < domArr.value[i + 1].offsetTop - 50
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
          ) {
            selectNow.value = domArr.value[i].id
          }
--- a/front/src/views/capabilityCloud/components/ApplicationResources.vue
+++ b/front/src/views/capabilityCloud/components/ApplicationResources.vue
@ -0,0 +1,426 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:16:10
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 17:52:19
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="application-resources">
+    <div class="top"><span class="title">应用资源</span></div>
+    <div class="bottom">
+      <div class="left">
+        <div class="item">
+          <div class="img"></div>
+          <div class="content">
+            <div class="name">总应用数</div>
+            <div claSS="num">{{ num1 }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="img"></div>
+          <div class="content">
+            <div class="name">建设中应用数</div>
+            <div claSS="num">{{ num2 }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="img"></div>
+          <div class="content">
+            <div class="name">停用应用数</div>
+            <div claSS="num">{{ num3 }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="nav">
+          <div
+            :class="{ select: select == '委办局应用资源分布' }"
+            @click="selectNav('委办局应用资源分布')"
+          >
+            委办局应用资源分布
+            <i v-show="select == '委办局应用资源分布'"></i>
+          </div>
+          <div
+            :class="{ select: select == '区市应用资源排名' }"
+            @click="selectNav('区市应用资源排名')"
+          >
+            区市应用资源排名
+            <i v-show="select == '区市应用资源排名'"></i>
+          </div>
+        </div>
+        <div class="echarts-box2" id="echarts-box2"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import * as echarts from 'echarts'
+  import { ref, onMounted } from 'vue'
+  import {
+    applicationNum,
+    districtResourceRank,
+    cityResourceRank,
+  } from '@/api/capabilityCloud'
+  const num1 = ref(0)
+  const num2 = ref(0)
+  const num3 = ref(0)
+  const select = ref('区市应用资源排名')
+  let myChart = null
+  const selectNav = (val) => {
+    select.value = val
+    switch (val) {
+      case '区市应用资源排名':
+        districtResourceRank().then((res) => {
+          res.data.data = res.data.data.splice(0, 5)
+          option.xAxis.data = []
+          option.series[0].data = []
+          option.series[1].data = []
+          option.yAxis[0].max = res.data.data[0].count * 1.5
+          res.data.data.forEach((val) => {
+            option.xAxis.data.push(val.deptName)
+            option.series[0].data.push(val.count)
+            option.series[1].data.push(val.count)
+          })
+          myChart.setOption(option)
+        })
+        break
+      case '委办局应用资源分布':
+        cityResourceRank().then((res) => {
+          res.data.data = res.data.data.splice(0, 5)
+          option.xAxis.data = []
+          option.series[0].data = []
+          option.series[1].data = []
+          option.yAxis[0].max = res.data.data[0].count * 1.5
+          res.data.data.forEach((val) => {
+            option.xAxis.data.push(val.deptName)
+            option.series[0].data.push(val.count)
+            option.series[1].data.push(val.count)
+          })
+          myChart.setOption(option)
+        })
+        break
+    }
+  }
+  applicationNum().then((res) => {
+    num1.value =
+      res.data.data.filter((val) => val.type == '总应用数')[0].amount || 0
+    num2.value =
+      res.data.data.filter((val) => val.type == '建设中应用数')[0].amount || 0
+    num3.value =
+      res.data.data.filter((val) => val.type == '停用应用数')[0].amount || 0
+  })
+  const option = {
+    animation: true,
+    grid: {
+      top: '5%',
+      bottom: '15%',
+      right: '5%',
+    },
+    xAxis: {
+      data: [],
+      axisLine: {
+        show: true, //隐藏X轴轴线
+      },
+      axisTick: {
+        show: false, //隐藏X轴轴线
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(77, 128, 254, 0.2)',
+          width: 2,
+        },
+      },
+      axisLabel: {
+        show: true,
+        fontSize: 14,
+        textStyle: {
+          color: 'rgb(255,255,255,0.5)', //X轴文字颜色
+        },
+        // interval: 0,
+        // rotate: 30,
+        interval: 0,
+        formatter: function (value) {
+          var ret = '' //拼接加 返回的类目项
+          var maxLength = 6 //每项显示文字个数
+          var valLength = value.length //X轴类目项的文字个数
+          var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
+          if (rowN > 1) {
+            //如果类目项的文字大于3,
+            for (var i = 0; i < rowN; i++) {
+              var temp = '' //每次截取的字符串
+              var start = i * maxLength //开始截取的位置
+              var end = start + maxLength //结束截取的位置
+              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+              temp = value.substring(start, end) + '\n'
+              ret += temp //凭借最终的字符串
+            }
+            return ret
+          } else {
+            return value
+          }
+        },
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        gridIndex: 0,
+        min: 0,
+        max: 100,
+        interval: 25,
+        // splitNumber: 4,
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(77, 128, 254, 0.2)',
+            width: 2,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(77, 128, 254, 0.2)',
+          },
+        },
+        axisLabel: {
+          show: false,
+          margin: 14,
+          fontSize: 16,
+          textStyle: {
+            color: '#65D5FF',
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: '设备在线率',
+        type: 'bar',
+        barWidth: 30,
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(146, 225, 255, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 151, 251, 1)',
+              },
+            ]),
+            label: {
+              // 标签显示位置
+              show: true,
+              position: 'top', // insideTop 或者横向的 insideLeft
+              color: '#fff',
+            },
+          },
+        },
+        data: [],
+        z: 10,
+        zlevel: 0,
+      },
+      {
+        // 分隔
+        type: 'pictorialBar',
+        itemStyle: {
+          normal: {
+            color: '#0F375F',
+          },
+        },
+        symbolRepeat: 'fixed',
+        symbolMargin: 6,
+        symbol: 'rect',
+        symbolClip: true,
+        symbolSize: [32, 2],
+        symbolPosition: 'start',
+        symbolOffset: [1, 1],
+        data: [],
+        width: 2,
+        z: 0,
+        zlevel: 1,
+      },
+    ],
+    dataZoom: [
+      {
+        type: 'slider',
+        show: false,
+        xAxisIndex: [0],
+        endValue: 4,
+        startValue: 0,
+      },
+    ],
+  }
+
+  onMounted(() => {
+    const chart = document.getElementById('echarts-box2')
+    if (chart) {
+      myChart = echarts.init(chart)
+      myChart.setOption(option)
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    }
+    selectNav('委办局应用资源分布')
+  })
+</script>
+<style lang="less" scoped>
+  .application-resources {
+    width: 9.24rem;
+    height: 4.65rem;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.2rem;
+      .left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .item {
+          width: 2.6rem;
+          height: 1.12rem;
+          background: linear-gradient(
+            to bottom,
+            rgba(33, 54, 88, 0.5),
+            rgba(33, 54, 88, 0)
+          );
+          margin-top: 0.14rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .img {
+            width: 0.66rem;
+            height: 0.66rem;
+            margin-left: 0.26rem;
+            margin-right: 0.26rem;
+            text-decoration: none;
+            outline: none;
+            -webkit-transition: all 800ms ease-out;
+            -moz-transition: all 800ms ease-out;
+            transition: all 800ms ease-out;
+          }
+          .img:hover {
+            width: 0.7rem;
+            height: 0.7rem;
+            -webkit-transform: rotateY(180deg);
+            -moz-transform: rotateY(180deg);
+            transform: rotateY(180deg);
+            -webkit-transition-delay: 0.2s;
+            -moz-transition-delay: 0.2s;
+            transition-delay: 0.2s;
+          }
+          .content {
+            width: 1.5rem;
+            .name {
+              font-size: 16px;
+              color: #fff;
+            }
+            .num {
+              font-size: 32px;
+              color: #1ef6f5;
+            }
+          }
+        }
+        .item:nth-of-type(1) {
+          margin-top: 0;
+          .img {
+            background: url('~@/assets/capabilityCloud/zyys.png') no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .item:nth-of-type(2) .img {
+          background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        .item:nth-of-type(3) .img {
+          background: url('~@/assets/capabilityCloud/tyyys.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .right {
+        width: 6.53rem;
+        height: 3.54rem;
+        over-flow: hidden;
+        position: relative;
+        .nav {
+          position: absolute;
+          z-index: 10;
+          top: 0.3rem;
+          left: 0;
+          display: flex;
+          justify-content: space-between;
+          padding: 0 1.5rem;
+          & > div {
+            cursor: pointer;
+            background: rgba(8, 153, 231, 0.3);
+            padding: 0.1rem 0.2rem;
+            margin-left: 0.1rem;
+            color: #fff;
+            position: relative;
+            i {
+              display: inline-block;
+              width: 100%;
+              height: 0.1rem;
+              background: url('~@/assets/capabilityCloud/select_sj.png')
+                no-repeat;
+              background-position: center;
+              position: absolute;
+              top: 0.4rem;
+              left: 0;
+            }
+          }
+          .select {
+            background: url(~@/assets/capabilityCloud/select.png) no-repeat;
+            background-size: 100%;
+          }
+        }
+        .echarts-box2 {
+          width: 6.53rem;
+          height: 4.04rem;
+        }
+      }
+    }
+  }
+  .application-resources:hover {
+    border: 2px solid;
+    animation: turn 5s linear infinite;
+  }
+  @keyframes turn {
+    0% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+    25% {
+      border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
+    }
+    50% {
+      border-image: linear-gradient(to left, #003194, #00ffea) 1;
+    }
+    75% {
+      border-image: linear-gradient(to top, #003194, #00ffea) 1;
+    }
+    100% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+  }
+</style>
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@ -0,0 +1,586 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-06-19 18:19:58
+ * @Description: 能力云图-组件服务
+-->
+<template>
+  <div class="component-services">
+    <div class="component-services-top">
+      <span class="title">组件服务</span>
+    </div>
+    <div class="component-services-content">
+      <!-- 上架总量 -->
+      <div class="component-services-content-left">
+        <div class="component-services-content-left-top">组件</div>
+        <div class="component-services-content-left-bottom">
+          <div
+            class="component-services-content-left-bottom-son"
+            v-for="(item, index) in snum"
+            :key="index"
+          >
+            <P>{{ item.title }}</P>
+            <p class="num">{{ item.num }}</p>
+          </div>
+        </div>
+      </div>
+      <!-- 组件数量和调用趋势 -->
+      <div class="component-services-content-right">
+        <div class="component-services-content-right-left">
+          <div class="component-services-content-right-left-title">
+            组件数量
+          </div>
+          <div class="component-services-content-right-left-content">
+            <div
+              v-for="(item, index) in servicesSnum"
+              :key="index"
+              class="component-services-content-right-left-content-son"
+            >
+              <p>{{ item.type }}</p>
+              <p class="num">{{ item.amount }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="component-services-content-right-right">
+          <div class="component-services-content-right-right-title">
+            <div class="component-services-content-right-right-title-top">
+              <div
+                class="component-services-content-right-right-title-top-left"
+              >
+                调用趋势
+              </div>
+              <div
+                class="component-services-content-right-right-title-top-right"
+              >
+                <div
+                  @click="timeSwitch('周')"
+                  :class="timeSwitchindex == '周' ? 'timeDown' : ''"
+                >
+                  周
+                </div>
+                <div
+                  @click="timeSwitch('月')"
+                  :class="timeSwitchindex == '月' ? 'timeDown' : ''"
+                >
+                  月
+                </div>
+              </div>
+            </div>
+            <div class="component-services-content-right-right-title-bottom">
+              次
+            </div>
+          </div>
+          <div class="callTheTrend" id="callTheTrend"></div>
+          <div class="component-services-content-right-right-bottom">
+            <div class="component-services-content-right-right-bottom-left">
+              <div
+                class="components-can-assign"
+                @click="ranking('total')"
+                :class="dataclick == 'total' ? 'down' : ''"
+              >
+                组件赋能排行
+              </div>
+              <div
+                class="components-scores"
+                @click="ranking('score')"
+                :class="dataclick == 'score' ? 'down' : ''"
+              >
+                组件评分排行
+              </div>
+            </div>
+            <div class="component-services-content-right-right-bottom-right">
+              <div>
+                <span>TOP</span>
+                <span>名称</span>
+                <span>应用数</span>
+              </div>
+              <div v-for="(item, index) in dataList" :key="index">
+                <span>{{ index + 1 }}</span>
+                <a-tooltip>
+                  <template #title>{{ item.name }}</template>
+                  <span>{{ item.name }}</span>
+                </a-tooltip>
+                <span>{{ item.count || 0 }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import * as echarts from 'echarts'
+  import {
+    assemblerBaseStatic,
+    componentServiceRank,
+  } from '@/api/capabilityCloud'
+  import * as moment from 'moment'
+  let snum = ref([
+    { title: '上架总量', num: '0000' },
+    { title: '总调用次数(API)', num: '0' },
+    { title: '健康度(API)', num: '100%' },
+  ])
+  let dataclick = ref('total')
+  let dataList = ref([])
+  let timeSwitchindex = ref('周')
+  let servicesSnum = ref([])
+  let callTheTrendData = ref({ time: [], snum: [] })
+  //年月切换
+  const timeSwitch = (name) => {
+    timeSwitchindex.value = name
+    callTheTrendData.value.time = []
+    callTheTrendData.value.snum = []
+    if (name == '周') {
+      for (let i = 0; i < 7; i++) {
+        let time = moment()
+          .subtract('days', 6 - i)
+          .format('MM-DD')
+        callTheTrendData.value.time.push(time)
+        callTheTrendData.value.snum.push('0')
+        console.log('time', callTheTrendData.value, name)
+      }
+      callTheTrend(callTheTrendData.value)
+    } else {
+      for (let i = 0; i < 31; i++) {
+        let time = moment()
+          .subtract('days', 30 - i)
+          .format('MM-DD')
+        callTheTrendData.value.time.push(time)
+        callTheTrendData.value.snum.push('0')
+        console.log('time', callTheTrendData.value, name)
+      }
+      callTheTrend(callTheTrendData.value)
+    }
+  }
+  //调用趋势echarts图
+  const callTheTrend = (dataFrom) => {
+    echarts.init(document.getElementById('callTheTrend')).dispose()
+    let chartDom = document.getElementById('callTheTrend')
+    let myChart = echarts.init(chartDom)
+    let option
+    option = {
+      grid: {
+        top: '10%',
+        left: '0%',
+        right: '5%',
+        bottom: '0%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(28,119,205,0.8)',
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)',
+              size: 18,
+            },
+          },
+          data: dataFrom.time,
+        },
+      ],
+      yAxis: [
+        {
+          name: '个',
+          type: 'value',
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)',
+              size: 18,
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          type: 'line',
+          smooth: true,
+          lineStyle: {
+            normal: {
+              width: 3,
+            },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(244,124,37, 1)',
+                  },
+                  {
+                    offset: 0.8,
+                    color: 'rgba(244,124,37, 0)',
+                  },
+                ],
+                false
+              ),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10,
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: '#ffe22e',
+                  },
+                  {
+                    offset: 0.8,
+                    color: '#f47c25',
+                  },
+                ],
+                false
+              ),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: '3px',
+            },
+          },
+          data: dataFrom.snum,
+        },
+      ],
+    }
+    option && myChart.setOption(option)
+  }
+  //组件复制排名接口
+  const ranking = (name) => {
+    dataclick.value = name
+    let params = {
+      type: name,
+    }
+    debugger
+    componentServiceRank(params).then((res) => {
+      dataList.value = res.data.data
+      console.log('res', dataList.value)
+    })
+  }
+  //组件服务数量接口
+  const NumberOfComponentServices = () => {
+    assemblerBaseStatic().then((res) => {
+      snum.value[0].num = res.data.data[0].amount
+      res.data.data.map((item, index) => {
+        if (index != 0) {
+          servicesSnum.value.push(item)
+        }
+      })
+    })
+  }
+  const init = () => {
+    timeSwitch(timeSwitchindex.value)
+    NumberOfComponentServices()
+    ranking(dataclick.value)
+  }
+  onMounted(() => {
+    init()
+    callTheTrend(callTheTrendData.value)
+  })
+</script>
+<style lang="less" scoped>
+  .component-services {
+    height: 4.63rem;
+    width: 7.84rem;
+    position: relative;
+    background: rgba(0, 108, 188, 0.1);
+    border: 0.01rem rgba(0, 108, 188, 0.7) solid;
+    border-radius: 0.03rem;
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .component-services-top {
+      width: 7.84rem;
+      height: 0.44rem;
+      position: absolute;
+      top: 0;
+      background: url('~@/assets/capabilityCloud/Component_services_bg.png')
+        no-repeat;
+      background-size: cover;
+      background-position: center;
+      line-height: 0.44rem;
+      text-align: center;
+      .title {
+        font-size: 0.24rem;
+      }
+    }
+    .component-services-content {
+      padding: 0.28rem 0 0.28rem 0.28rem;
+      width: 7.84rem;
+      height: 4.65rem;
+      display: flex;
+      .component-services-content-left {
+        margin-right: 0.18rem;
+        .component-services-content-left-top {
+          width: 1.16rem;
+          height: 1.04rem;
+          margin-left: 0.15rem;
+          line-height: 1.04rem;
+          text-align: center;
+          color: rgba(255, 255, 255, 0.9);
+          font-size: 0.2rem;
+          background: url('~@/assets/capabilityCloud/Component_services_title.png')
+            no-repeat;
+          background-size: cover;
+          background-position: center;
+        }
+        .component-services-content-left-bottom {
+          width: 1.48rem;
+          margin-top: -0.15rem;
+          padding-top: 0.52rem;
+          background: url('~@/assets/capabilityCloud/Component_services_content_bg.png')
+            no-repeat;
+          background-size: cover;
+          background-position: center;
+          .component-services-content-left-bottom-son {
+            text-align: center;
+            margin-bottom: 0.56rem;
+            & > p:first-child {
+              color: #ffffff;
+              font-size: 0.16rem;
+              line-height: 0.16rem;
+              margin-bottom: 0.12rem;
+              margin-top: ;
+            }
+            & > p:last-child {
+              color: #1ef6f5;
+              font-size: 0.28rem;
+              line-height: 0.28rem;
+            }
+          }
+          .component-services-content-left-bottom-son:last-child {
+            margin-bottom: 0rem;
+          }
+        }
+      }
+      .component-services-content-right {
+        width: (100% - 1.66rem);
+        margin-top: 0.35rem;
+        display: flex;
+        .component-services-content-right-left {
+          width: 1.6rem;
+          height: 3.72rem;
+          background: -webkit-linear-gradient(#214677, transparent);
+          margin-right: 0.13rem;
+          .component-services-content-right-left-title {
+            font-size: 0.2rem;
+            color: #ffffff;
+            padding: 0.14rem 0 0.1rem 0;
+            border-bottom: #00ffff 0.01rem solid;
+            text-align: center;
+            margin: 0 0.13rem;
+          }
+          .component-services-content-right-left-content {
+            padding-top: 0.14rem;
+            .component-services-content-right-left-content-son {
+              background: url('~@/assets/capabilityCloud/Component_services_snum.png')
+                no-repeat;
+              background-size: 1.1rem 0.59rem;
+              background-position: center;
+              text-align: center;
+              & > p:first-child {
+                color: #ffffff;
+                font-size: 0.16rem;
+                line-height: 0.16rem;
+                margin-bottom: 0.12rem;
+              }
+              & > p:last-child {
+                color: #1ef6f5;
+                font-size: 0.28rem;
+                line-height: 0.28rem;
+                padding-bottom: 0.24rem;
+                margin: 0;
+              }
+            }
+            .component-services-content-right-left-content-son :first-child {
+              & > p:last-child {
+                color: #1ef6f5;
+                font-size: 0.28rem;
+                line-height: 0.28rem;
+                padding-bottom: 0.38rem;
+              }
+            }
+          }
+        }
+        .component-services-content-right-right {
+          width: 3.96rem;
+          .component-services-content-right-right-title {
+            .component-services-content-right-right-title-top {
+              display: flex;
+              align-items: center;
+              .component-services-content-right-right-title-top-left {
+                font-size: 0.18rem;
+                height: 0.2rem;
+                line-height: 0.18rem;
+                color: #ffffff;
+                background: url('~@/assets/capabilityCloud/Component_services_title_bg.png')
+                  no-repeat;
+                background-size: 0.7rem 0.08rem;
+                background-position: bottom;
+              }
+              .component-services-content-right-right-title-top-right {
+                margin-left: 0.15rem;
+                display: flex;
+                color: #ffffff;
+                font-size: 0.14rem;
+                & > div {
+                  font-size: 0.14rem;
+                  height: 0.26rem;
+                  width: 0.4rem;
+                  border: 0.01rem solid #61d2d2;
+                  text-align: center;
+                  line-height: 0.24rem;
+                  margin-right: 0.05rem;
+                  border-radius: 0.12rem;
+                  background: #05315b;
+                  cursor: pointer;
+                }
+                .timeDown {
+                  background: #005ea3;
+                  border: #00ffff 0.01rem solid;
+                }
+              }
+            }
+            .component-services-content-right-right-title-bottom {
+              color: rgba(255, 255, 255, 0.5);
+              line-height: 0.14rem;
+            }
+          }
+          .callTheTrend {
+            height: 1.32rem;
+            width: 100%;
+          }
+          .component-services-content-right-right-bottom {
+            display: flex;
+            padding-top: 0.13rem;
+            .component-services-content-right-right-bottom-left {
+              width: 1.28rem;
+              border-right: 0.01rem rgba(0, 108, 188, 0.7) solid;
+              margin-right: 0.2rem;
+              .components-can-assign,
+              .components-scores {
+                margin-top: 0.13rem;
+                height: 0.88rem;
+                width: 1.25rem;
+                font-size: 0.16rem;
+                color: rgba(255, 255, 255, 0.6);
+                line-height: 0.88rem;
+                text-align: center;
+                cursor: pointer;
+                background: linear-gradient(
+                  to right,
+                  rgba(0, 117, 203, 0.2),
+                  rgba(0, 117, 203, 0)
+                );
+              }
+              .components-can-assign:hover,
+              .components-scores:hover {
+                border-left: 0.02rem solid #00ffff;
+                background: linear-gradient(
+                  to right,
+                  rgba(0, 117, 203, 1),
+                  rgba(0, 117, 203, 0)
+                );
+                color: #ffffff;
+              }
+              .down {
+                border-left: 0.02rem solid #00ffff;
+                background: linear-gradient(
+                  to right,
+                  rgba(0, 117, 203, 1),
+                  rgba(0, 117, 203, 0)
+                );
+                color: #ffffff;
+              }
+              .components-can-assign {
+                margin-top: 0;
+              }
+            }
+            .component-services-content-right-right-bottom-right {
+              width: 2.5rem;
+              font-size: 0.16rem;
+              border: 0.01rem rgba(0, 108, 188, 0.7) solid;
+              color: rgba(255, 255, 255, 0.8);
+              & > div {
+                & > span {
+                  display: inline-block;
+                  height: 0.32rem;
+                  line-height: 0.32rem;
+                  border-right: 0.01rem rgba(0, 108, 188, 0.7) solid;
+                  border-bottom: 0.01rem rgba(0, 108, 188, 0.7) solid;
+                }
+                & > span:first-child {
+                  width: 0.47rem;
+                  text-align: center;
+                }
+                & > span:nth-child(2) {
+                  width: 1.47rem;
+                  padding-left: 0.05rem;
+                }
+                & > span:last-child {
+                  width: 0.5rem;
+                  color: #1ffefd;
+                  text-align: center;
+                  border-right: 0;
+                }
+              }
+              & > div:first-child {
+                color: #1ffefd;
+                background: #27528c;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .component-services:hover {
+    border: 2px solid;
+    animation: turn 5s linear infinite;
+  }
+  @keyframes turn {
+    0% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+    25% {
+      border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
+    }
+    50% {
+      border-image: linear-gradient(to left, #003194, #00ffea) 1;
+    }
+    75% {
+      border-image: linear-gradient(to top, #003194, #00ffea) 1;
+    }
+    100% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+  }
+</style>
--- a/front/src/views/capabilityCloud/components/DataResources.vue
+++ b/front/src/views/capabilityCloud/components/DataResources.vue
@ -0,0 +1,317 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 18:08:39
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="data-resources">
+    <div class="resources-top">
+      <span class="title">数据资源</span>
+    </div>
+    <div class="resources-bottom">
+      <div class="resources-left">
+        <div v-for="(item, index) in resourcesLeft" :key="index">
+          <h3>{{ item.name }}</h3>
+          <h2 class="num">{{ item.num || '0' }}</h2>
+        </div>
+        <img :src="leftImg" alt="" />
+      </div>
+      <div class="resources-right">
+        <div class="resources-right-title">
+          <h3>数据赋能排行</h3>
+        </div>
+        <div class="resources-right-table">
+          <a-table
+            :data-source="assignRankings"
+            :columns="columns"
+            :pagination="false"
+            bordered="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue'
+  import { count, getRecord } from '@/api/file'
+  // import { abc } from './dataABC.json'
+  // 左侧数据
+  const resourcesLeft = ref([
+    {
+      name: '总数据数',
+      num: '',
+    },
+    {
+      name: '总申请次数',
+      num: '',
+    },
+    {
+      name: '满足率',
+      num: '',
+    },
+  ])
+  // 右侧数据
+  const assignRankings = ref([
+    {
+      index: '1',
+      name: ' ',
+      operation: ' ',
+    },
+    {
+      index: '2',
+      name: ' ',
+      operation: ' ',
+    },
+    {
+      index: '3',
+      name: ' ',
+      operation: ' ',
+    },
+    {
+      index: '4',
+      name: ' ',
+      operation: ' ',
+    },
+    {
+      index: '5',
+      name: ' ',
+      operation: ' ',
+    },
+  ])
+  const columns = ref([
+    {
+      title: 'Top',
+      dataIndex: 'index',
+      key: 'index',
+      width: '15%',
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      width: '55%',
+      ellipsis: true,
+    },
+    {
+      title: '应用数',
+      dataIndex: 'operation',
+      key: 'operation',
+      width: '30%',
+    },
+  ])
+  // 左侧图片
+  const leftImg = require('@/assets/capabilityCloud/resources-left.png')
+  // 请求左侧数据开始
+  const obj = {
+    serviceName: '',
+    orderField: 'updateTime',
+    orderType: 'desc',
+    pageNum: 1,
+    pageSize: 5,
+    serviceType: 'data',
+  }
+  getRecord(obj).then((res) => {
+    if (res.data.data) {
+      // res.data.data.list.forEach((val) => {
+      //   val.name = val.serviceName
+      //   val.createDate = val.updateTime
+      //   val.id = val.serviceId // "requestNum": 0, // "requestQuantity": 0, // "starNum": 4, // "shareStatus": "2"
+      // })
+      // resourceList.data = res.data.data.list || []
+      resourcesLeft.value[0].num = res.data.data.total || '0' // getShoppingCartList(resourceData.value.data.records)
+      console.log('数据资源~~~~~~~~~~~', resourcesLeft.value[0].num)
+    }
+  })
+  // 请求左侧数据结束
+  // 请求右侧数据开始
+  const contentData = ref([])
+  count().then((res) => {
+    contentData.value = res.data.data
+    console.log(contentData.value)
+    // 总申请次数
+    resourcesLeft.value[1].num = contentData.value.requestCount || '0'
+    // 总满足率
+    resourcesLeft.value[2].num =
+      contentData.value.satisfactionRate * 100 + '%' || '0' + '%'
+    // 排行
+    for (let i = 1; i < 6; i++) {
+      // TOP
+      assignRankings.value[i - 1].index = i
+      //
+      assignRankings.value[i - 1].name =
+        contentData.value.resourceTop5[i - 1].service_name || ''
+      assignRankings.value[i - 1].opacity =
+        contentData.value.resourceTop5[i - 1].count || ' '
+    }
+  })
+  // 请求右侧数据结束
+</script>
+<style lang="less" scoped>
+  .data-resources {
+    width: 4.4rem;
+    height: 4.63rem;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 0.02rem;
+    border: 0.01rem solid rgba(0, 108, 188, 0.7);
+    box-sizing: border-box;
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .resources-top {
+      height: 0.6rem;
+      background: url('~@/assets/capabilityCloud/resources-title.png') no-repeat;
+      text-align: center;
+      font-size: 0.24rem;
+    }
+    .resources-bottom {
+      width: 100%;
+      display: flex;
+      .resources-left {
+        width: 1.56rem;
+        height: 2.75rem;
+        background-image: linear-gradient(#214678, transparent);
+        text-align: center;
+        margin-left: 0.18rem;
+        position: relative;
+        div {
+          margin: 0 0.1rem;
+          border-bottom: 0.01rem solid #1f557c;
+          h3 {
+            font-size: 0.16rem;
+            color: #ffffff;
+            margin-bottom: 0rem;
+            padding-top: 0.16rem;
+          }
+          .num {
+            font-size: 0.28rem;
+            color: #1ef6f5;
+            margin-bottom: 0rem;
+          }
+        }
+        div:last-of-type {
+          border-bottom: none;
+        }
+        img {
+          width: 90%;
+          position: absolute;
+          left: 50%;
+          bottom: -1.38rem;
+          margin-left: -45%;
+          animation: move 5s linear 0s infinite;
+          @keyframes move {
+            from {
+              transform: rotateY(360deg);
+            }
+            to {
+              transform: rotateY(0deg);
+            }
+          }
+        }
+      }
+      .resources-right {
+        margin-left: 0.18rem;
+        width: 2.35rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .resources-right-title {
+          width: 2.24rem;
+          height: 1rem;
+          text-align: center;
+          background: url('~@/assets/capabilityCloud/resources-right.png')
+            no-repeat center;
+          display: flex;
+          align-items: center;
+          h3 {
+            font-size: 0.18rem;
+            color: #ffffff;
+            width: 100%;
+            height: 0.38rem;
+            line-height: 0.38rem;
+            background: linear-gradient(
+              to right,
+              rgba(0, 0, 0, 0) 0%,
+              #1b76cc 50%,
+              rgba(0, 0, 0, 0) 100%
+            );
+            text-shadow: 0rem 0rem 0.02rem rgba(0, 0, 0, 0.6);
+          }
+        }
+        .resources-right-table {
+          width: 100%;
+          :deep(.ant-table-thead > tr > th) {
+            background-color: #1f557c;
+            border: none;
+            color: #1ef6f5;
+            height: 0.32rem;
+            padding: 0;
+          }
+          :deep(.ant-table-row) {
+            height: 0.45rem;
+          }
+          :deep(.ant-table-cell) {
+            text-align: center;
+            transition: all 0s;
+            background: transparent;
+            border-bottom: 0.01rem solid #1f557c;
+            border-right: 0.01rem solid #1f557c;
+            padding: 0;
+          }
+          :deep(.ant-table-cell:nth-child(1)) {
+            border-left: 0.01rem solid #1f557c;
+          }
+          :deep(.ant-table-cell:nth-child(2)) {
+            text-align: left;
+            padding-left: 0.1rem;
+          }
+          :deep(.ant-table-cell:nth-child(3)) {
+            color: #1ef6f5;
+          }
+          :deep(.ant-table-tbody) {
+            color: #ffffff;
+          }
+          :deep(.ant-table) {
+            border: none;
+            background: transparent;
+          }
+          :deep(.ant-table-content > table) {
+            border: none;
+          }
+          :deep(.ant-table-container) {
+            border: none;
+          }
+          :deep(.ant-table-cell-row-hover) {
+            transition: all 0s;
+            background: transparent;
+          }
+        }
+      }
+    }
+  }
+  .data-resources:hover {
+    border: 2px solid;
+    animation: turn 5s linear infinite;
+  }
+  @keyframes turn {
+    0% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+    25% {
+      border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
+    }
+    50% {
+      border-image: linear-gradient(to left, #003194, #00ffea) 1;
+    }
+    75% {
+      border-image: linear-gradient(to top, #003194, #00ffea) 1;
+    }
+    100% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+  }
+</style>
--- a/front/src/views/capabilityCloud/components/Infrastructure.vue
+++ b/front/src/views/capabilityCloud/components/Infrastructure.vue
@ -0,0 +1,203 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-06-19 18:45:10
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="infrastructure">
+    <div class="infrastructure-top">
+      <span class="title">基础设施</span>
+    </div>
+    <div class="infrastructure-content">
+      <div
+        class="infrastructure-content-son"
+        v-for="(item, index) in myDataList"
+        :key="index"
+      >
+        <div
+          class="num-class"
+          :style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`"
+        >
+          <div>{{ item.title }}</div>
+          <div>{{ item.snum }}</div>
+        </div>
+        <div class="health-degree">
+          <div class="health-degree-title">健康度</div>
+          <a-progress
+            :stroke-color="{
+              '0%': '#108ee9',
+              '100%': '#87d068',
+            }"
+            :percent="item.percentage"
+            :show-info="false"
+          />
+        </div>
+        <div class="percentage" :style="fontFormat(item.title)">
+          {{ item.percentage }}%
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+    import { ref } from 'vue'
+    import { getVideoList } from '@/api/file.js'
+    let myDataList = ref([
+      {
+        title: '视频资源数量',
+        snum: '0',
+        percentage: '100',
+        img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
+      },
+      {
+        title: '云资源',
+        snum: '0',
+        percentage: '0',
+        img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
+      },
+      {
+        title: '感知资源',
+        snum: '0',
+        percentage: '0',
+        img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
+      },
+    ])
+    function fontFormat(name) {
+      switch (name) {
+        case '视频资源数量':
+          return 'color: #32ff91;'
+          break
+        case '云资源':
+          return 'color: #f4fd25;'
+          break
+        case '感知资源':
+          return 'color: #ff1d18;'
+          break
+      }
+    }
+    const params = {
+      name: '',
+      pageNo: 1,
+      pageSize: 10,
+    }
+    getVideoList(params).then((res) => {
+              // 赋值
+              myDataList.value[1].sum = res.data.data.total
+            })
+</script>
+<style lang="less" scoped>
+  .infrastructure {
+    width: 4.4rem;
+    height: 4.63rem;
+    position: relative;
+    background: rgba(0, 108, 188, 0.1);
+    border: 0.01rem rgba(0, 108, 188, 0.7) solid;
+    border-radius: 0.03rem;
+    padding: 0.2rem;
+    padding-top: 0;
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .infrastructure-top {
+      width: 4.4rem;
+      height: 0.44rem;
+      position: absolute;
+      top: 0;
+      background: url('~@/assets/capabilityCloud/infrastructure_title.png')
+        no-repeat;
+      background-size: cover;
+      background-position: center;
+      line-height: 0.44rem;
+      text-align: center;
+      .title {
+        font-size: 0.24rem;
+      }
+    }
+    .infrastructure-content {
+      width: 4rem;
+      margin-top: 0.62rem;
+      .infrastructure-content-son {
+        display: flex;
+        width: 4rem;
+        height: 1.17rem;
+        background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
+        align-items: center;
+        margin-bottom: 0.14rem;
+        padding-left: 0.1rem;
+      }
+      .num-class {
+        width: 1.5rem;
+        height: 1rem;
+        text-align: center;
+        margin-right: 0.2rem;
+        & > div:first-child {
+          font-size: 0.18rem;
+          color: #ffffff;
+          margin-bottom: 0.1rem;
+          line-height: 0.18rem;
+          margin-top: 0.3rem;
+        }
+        & > div:last-child {
+          font-size: 0.36rem;
+          line-height: 0.36rem;
+          color: #1ce2e5;
+        }
+      }
+      .health-degree {
+        width: 1.35rem;
+        .health-degree-title {
+          font-size: 0.14rem;
+          color: rgba(255, 255, 255, 0.6);
+          margin-bottom: 0.08rem;
+        }
+        :deep(.ant-progress-outer) {
+          height: 0.27rem;
+        }
+        :deep(.ant-progress-inner) {
+          height: 0.27rem;
+          border-radius: 0.14rem;
+          border: 0.01rem solid rgba(8, 153, 231, 0.6);
+          background: rgba(21, 65, 123, 0.6);
+          div {
+            height: 0.27rem !important;
+          }
+        }
+      }
+      // .health-degree:
+      .percentage {
+        height: 0.57rem;
+        font-size: 0.24rem;
+        line-height: 0.24rem;
+        font-family: 'DIN-Bold';
+        margin-left: 0.1rem;
+        display: flex;
+        align-items: flex-end;
+      }
+    }
+  }
+  .infrastructure:hover {
+    border: 2px solid;
+    animation: turn 5s linear infinite;
+  }
+  @keyframes turn {
+    0% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+    25% {
+      border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
+    }
+    50% {
+      border-image: linear-gradient(to left, #003194, #00ffea) 1;
+    }
+    75% {
+      border-image: linear-gradient(to top, #003194, #00ffea) 1;
+    }
+    100% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+  }
+</style>
--- a/front/src/views/capabilityCloud/components/KnowledgeBase.vue
+++ b/front/src/views/capabilityCloud/components/KnowledgeBase.vue
@ -0,0 +1,122 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-06-19 18:59:06
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="knowledge-base">
+    <div class="knowledge-top">
+      <span class="title">知识库</span>
+    </div>
+    <div class="knowledge-content">
+      <div v-for="(item, index) in contentBox" :key="index">
+        <img :src="item.photo" alt="" />
+        <h3>{{ item.name }}</h3>
+        <h3>{{ item.type }}</h3>
+        <h6 class="num">{{ item.num }}</h6>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue'
+  import { KnowledgeBaseStatic } from '@/api/capabilityCloud'
+  const contentBoxData = ref([])
+  const contentBox = ref([
+    {
+      photo: require('@/assets/capabilityCloud/Knowledge-up.png'),
+      name: '知识库',
+      type: '上架总量',
+      num: '',
+    },
+    {
+      photo: require('@/assets/capabilityCloud/Knowledge-look.png'),
+      name: '知识库',
+      type: '浏览总量',
+      num: '',
+    },
+  ])
+  KnowledgeBaseStatic().then((res) => {
+    contentBoxData.value = res.data.data
+    contentBoxData.value.forEach((item) => {
+      if (item.type == '知识库上架总量') {
+        contentBox.value[0].num = item.amount
+      } else {
+        contentBox.value[1].num = item.amount
+      }
+    })
+  })
+</script>
+<style lang="less" scoped>
+  .knowledge-base {
+    width: 1.52rem;
+    height: 4.63rem;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 0.02rem;
+    border: 0.01rem solid rgba(0, 108, 188, 0.7);
+    box-sizing: border-box;
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .knowledge-top {
+      height: 0.6rem;
+      background: url('~@/assets/capabilityCloud/Knowledge-title.png') no-repeat;
+      text-align: center;
+      font-size: 0.24rem;
+    }
+    .knowledge-content {
+      width: 100%;
+
+      div {
+        width: 1.18rem;
+        height: 1.76rem;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-image: linear-gradient(#214678, transparent);
+        margin-bottom: 0.2rem;
+        img {
+          margin: 0.27rem 0 0.12rem;
+        }
+        h3 {
+          font-size: 0.16rem;
+          font-weight: normal;
+          color: #ffffff;
+          margin-bottom: 0rem;
+        }
+        .num {
+          font-weight: 300;
+          font-size: 0.28rem;
+          color: #1ef6f5;
+          margin-bottom: 0.27rem;
+        }
+      }
+    }
+  }
+  .knowledge-base:hover {
+    border: 2px solid;
+    animation: turn 5s linear infinite;
+  }
+  @keyframes turn {
+    0% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+    25% {
+      border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
+    }
+    50% {
+      border-image: linear-gradient(to left, #003194, #00ffea) 1;
+    }
+    75% {
+      border-image: linear-gradient(to top, #003194, #00ffea) 1;
+    }
+    100% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+  }
+</style>
--- a/front/src/views/capabilityCloud/components/PlatformOverview.vue
+++ b/front/src/views/capabilityCloud/components/PlatformOverview.vue
@ -0,0 +1,325 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 17:52:04
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="platform-overview">
+    <div class="top"><span class="title">平台概览</span></div>
+    <div class="bottom">
+      <div class="left">
+        <div class="box">
+          <div class="item">
+            <div class="name">平台访问量</div>
+            <div claSS="num">{{ num1 }}</div>
+          </div>
+        </div>
+        <div class="box">
+          <div class="item">
+            <div class="name">用户量</div>
+            <div claSS="num">{{ num2 }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="right" :key="showKey">
+        <div class="title_echarts">浏览趋势</div>
+        <div class="echarts-box" id="echarts-box"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import * as echarts from 'echarts'
+  import * as moment from 'moment'
+  import { ref, onMounted } from 'vue'
+  import { wholeAmount, trafficStatistics } from '@/api/capabilityCloud'
+  const num1 = ref(0)
+  const num2 = ref(0)
+  const showKey = ref(0)
+  wholeAmount().then((res) => {
+    num1.value =
+      res.data.data.filter((val) => val.type == '平台访问量')[0].amount || 0
+    num2.value =
+      res.data.data.filter((val) => val.type == '用户量')[0].amount || 0
+  })
+  // 获取近七天日期
+  const getDate = () => {
+    const date = []
+    for (let i = 0; i < 7; i++) {
+      date.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
+    }
+    return date.reverse()
+  }
+  const dateList = getDate()
+  var charts = {
+    unit: '次',
+    names: ['浏览'],
+    lineX: dateList,
+    value: [[]],
+  }
+  var color = ['rgba(23, 255, 243']
+  var lineY = []
+
+  for (var i = 0; i < charts.names.length; i++) {
+    var x = i
+    if (x > color.length - 1) {
+      x = color.length - 1
+    }
+    var data = {
+      name: charts.names[i],
+      type: 'line',
+      color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+        {
+          offset: 0,
+          color: '#00b5ff',
+        },
+        {
+          offset: 1,
+          color: '#39da78',
+        },
+      ]),
+      smooth: true,
+      areaStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(33, 34, 35, 0.35)',
+              },
+              {
+                offset: 0.8,
+                color: color[x] + ', 0)',
+              },
+            ],
+            false
+          ),
+          shadowColor: 'rgba(0, 0, 0, 0.1)',
+          shadowBlur: 10,
+        },
+      },
+      symbol: 'circle',
+      symbolSize: 5,
+      data: charts.value[i],
+    }
+    lineY.push(data)
+  }
+  var option = {
+    tooltip: {
+      backgroundColor: 'rgba(17,61,116,0.8)',
+      borderWidth: 0,
+      trigger: 'axis',
+      formatter: function (val) {
+        console.log(val)
+        let res = `<div style="background:rgba(17,61,116,0.8);border:1px soild rgba(28,119,205,0.8);color:#fff;padding:0">
+                      <span>日期 : ${val[0].name}</span>
+                      <div style="margin-left: 18px">浏览次数 : ${val[0].value}</div>
+                  </div>`
+        return res
+      },
+    },
+    legend: {
+      data: charts.names,
+      textStyle: {
+        fontSize: 12,
+        color: 'rgb(0,253,255,0.6)',
+      },
+      right: '4%',
+    },
+    grid: {
+      top: '14%',
+      left: '4%',
+      right: '5%',
+      bottom: '12%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: charts.lineX,
+      axisLabel: {
+        textStyle: {
+          color: 'rgb(255,255,255,0.5)',
+        },
+      },
+    },
+    yAxis: {
+      name: charts.unit,
+      type: 'value',
+      axisLabel: {
+        formatter: '{value}',
+        textStyle: {
+          color: 'rgb(255,255,255,0.5)',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgb(23,255,243,0.3)',
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgb(255,255,255,0.5)',
+        },
+      },
+    },
+    series: lineY,
+  }
+  onMounted(() => {
+    trafficStatistics({
+      startDate: dateList[0],
+      endDate: dateList[dateList.length - 1],
+    }).then((res) => {
+      res.data.data.browseDayList.forEach((val, index) => {
+        charts.value[0].push(val[dateList[index]] + '')
+      })
+      const chart = document.getElementById('echarts-box')
+      if (chart) {
+        const myChart = echarts.init(chart)
+        myChart.setOption(option)
+        window.addEventListener('resize', function () {
+          myChart.resize()
+        })
+      }
+    })
+  })
+</script>
+<style lang="less" scoped>
+  .platform-overview {
+    width: 9.24rem;
+    height: 4.65rem;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.2rem;
+      .left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .box {
+          width: 1.94rem;
+          height: 1.94rem;
+          background: url('~@/assets/capabilityCloud/pt_bg.png') no-repeat;
+          background-size: 100% 100%;
+          animation: turn 10s linear infinite;
+          .item {
+            width: 1.94rem;
+            height: 1.94rem;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            animation: turn2 10s linear infinite;
+            .name {
+              font-size: 16px;
+              color: #fff;
+            }
+            .num {
+              font-size: 32px;
+              color: #fdc623;
+            }
+          }
+        }
+      }
+      .right {
+        width: 6.53rem;
+        height: 3.54rem;
+        position: relative;
+        .title_echarts {
+          font-size: 0.18rem;
+          height: 0.21rem;
+          line-height: 0.18rem;
+          color: #ffffff;
+          background: url('~@/assets/capabilityCloud/Component_services_title_bg.png')
+            no-repeat;
+          background-size: 0.7rem 0.08rem;
+          background-position: bottom left;
+          position: absolute;
+          top: 0;
+          left: 0.2rem;
+        }
+        .echarts-box {
+          width: 6.53rem;
+          height: 4.04rem;
+        }
+      }
+    }
+  }
+
+  @keyframes turn {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    25% {
+      -webkit-transform: rotate(90deg);
+    }
+    50% {
+      -webkit-transform: rotate(180deg);
+    }
+    75% {
+      -webkit-transform: rotate(270deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @keyframes turn2 {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    25% {
+      -webkit-transform: rotate(-90deg);
+    }
+    50% {
+      -webkit-transform: rotate(-180deg);
+    }
+    75% {
+      -webkit-transform: rotate(-270deg);
+    }
+    100% {
+      -webkit-transform: rotate(-360deg);
+    }
+  }
+  .platform-overview:hover {
+    border: 2px solid;
+    animation: turn3 5s linear infinite;
+  }
+  @keyframes turn3 {
+    0% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+    25% {
+      border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
+    }
+    50% {
+      border-image: linear-gradient(to left, #003194, #00ffea) 1;
+    }
+    75% {
+      border-image: linear-gradient(to top, #003194, #00ffea) 1;
+    }
+    100% {
+      border-image: linear-gradient(to right, #003194, #00ffea) 1;
+    }
+  }
+</style>
--- a/front/src/views/capabilityCloud/index.vue
+++ b/front/src/views/capabilityCloud/index.vue
@ -0,0 +1,77 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:11:03
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-06-19 17:57:14
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="capability-cloud">
+    <div class="header"><span class="title">数字资源驾驶舱</span></div>
+    <div class="main">
+      <platform-overview></platform-overview>
+      <application-resources></application-resources>
+    </div>
+    <div class="main">
+      <component-services></component-services>
+      <infrastructure></infrastructure>
+      <data-resources></data-resources>
+      <knowledge-base></knowledge-base>
+    </div>
+  </div>
+</template>
+<script setup>
+  import PlatformOverview from '@/views/capabilityCloud/components/PlatformOverview.vue'
+  import ApplicationResources from '@/views/capabilityCloud/components/ApplicationResources.vue'
+  import ComponentServices from '@/views/capabilityCloud/components/ComponentServices.vue'
+  import Infrastructure from '@/views/capabilityCloud/components/Infrastructure.vue'
+  import DataResources from '@/views/capabilityCloud/components/DataResources.vue'
+  import KnowledgeBase from '@/views/capabilityCloud/components/KnowledgeBase.vue'
+</script>
+<style lang="less">
+  @font-face {
+    font-family: 'SourceHanSansCN-Regular';
+    src: url('~@/assets/capabilityCloud/font/SourceHanSansCN-Regular.otf');
+  }
+  @font-face {
+    font-family: 'DIN-Bold';
+    src: url('~@/assets/capabilityCloud/font/DIN-Bold.otf');
+  }
+  @font-face {
+    font-family: 'ZhiheiJ-W5.ttf';
+    src: url('~@/assets/capabilityCloud/font/ZhiheiJ-W5.ttf');
+  }
+  .capability-cloud {
+    font-family: SourceHanSansCN-Regular;
+    .title {
+      font-family: ZhiheiJ-W5;
+      background: -webkit-linear-gradient(90deg, #99a8d0, #fff);
+      font-weight: 600;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .num {
+      font-family: DIN-Bold;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .capability-cloud {
+    height: 10.8rem;
+    background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+    & > .header {
+      height: 1.04rem;
+      text-align: center;
+      background: url('~@/assets/capabilityCloud/header.png') no-repeat;
+      font-size: 0.46rem;
+    }
+    & > .main {
+      margin-top: 0.2rem;
+      padding: 0 0.24rem;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+</style>
--- a/front/src/views/capacityOnTheShelf/Algorithm.vue
+++ b/front/src/views/capacityOnTheShelf/Algorithm.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-13 10:22:27
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 11:06:06
+ * @LastEditTime: 2022-06-20 09:59:01
 * @Description: 算法上架
 -->
 <template>
@ -22,7 +22,35 @@
      </div>
    </div>
    <div class="vue-box">
-      <algorithm-essential-information
+      <put-on-the-shelf
+        v-if="showView === '基本信息' && refData.name"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :videoList="videoList"
+        :externalField="['算法名称', '算法描述', '共享条件', '共享类型']"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '算法优势'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :configure="sfys"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '应用场景'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :configure="yycj"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '部署与使用'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :fileList="fileList"
+        :imgList="imgList"
+        :externalField="['接口服务', '接口请求方式']"
+        :configure="bs"
+      ></put-on-the-shelf>
+      <!-- <algorithm-essential-information
        v-if="showView === '基本信息' && refData.name"
        :refData="refData"
        :dataFrom="dataFrom"
@ -37,14 +65,19 @@
        v-else-if="showView === '应用场景'"
        :refData="refData"
        :dataFrom="dataFrom"
-      ></algorithm-scenarios>
-      <algorithm-deployment-use
+      ></algorithm-scenarios> -->
+      <!-- <algorithm-scenarios
+        v-else-if="showView === '应用场景'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+      ></algorithm-scenarios> -->
+      <!-- <algorithm-deployment-use
        v-else-if="showView === '部署与使用'"
        :refData="refData"
        :dataFrom="dataFrom"
        :fileList="fileList"
        :imgList="imgList"
-      ></algorithm-deployment-use>
+      ></algorithm-deployment-use> -->
    </div>
    <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
      <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
@ -57,10 +90,11 @@
  </div>
 </template>
 <script setup>
-  import AlgorithmEssentialInformation from '@/views/capacityOnTheShelf/components/AlgorithmEssentialInformation.vue'
-  import AlgorithmAdvantage from '@/views/capacityOnTheShelf/components/AlgorithmAdvantage.vue'
-  import AlgorithmScenarios from '@/views/capacityOnTheShelf/components/AlgorithmScenarios.vue'
-  import AlgorithmDeploymentUse from '@/views/capacityOnTheShelf/components/AlgorithmDeploymentUse.vue'
+  // import AlgorithmEssentialInformation from '@/views/capacityOnTheShelf/components/AlgorithmEssentialInformation.vue'
+  // import AlgorithmAdvantage from '@/views/capacityOnTheShelf/components/AlgorithmAdvantage.vue'
+  // import AlgorithmScenarios from '@/views/capacityOnTheShelf/components/AlgorithmScenarios.vue'
+  import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
+  // import AlgorithmDeploymentUse from '@/views/capacityOnTheShelf/components/AlgorithmDeploymentUse.vue'
  import { ref, onBeforeUnmount } from 'vue'
  import { useRouter } from 'vue-router'
  import { getCategoryTree } from '@/api/personalCenter'
@ -70,6 +104,94 @@
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const showView = ref('基本信息')
+  const sfys = ref([
+    {
+      name: '算法优势',
+      list: [
+        {
+          name: '算法优势名称',
+          field: 'name',
+          type: 'input',
+          note1: '',
+        },
+        {
+          name: '算法优势描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const yycj = ref([
+    {
+      name: '应用场景',
+      list: [
+        {
+          name: '应用场景名称',
+          field: 'name',
+          type: 'input',
+          note1: '',
+        },
+        {
+          name: '应用场景描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '应用场景图片',
+          field: 'img',
+          type: 'image',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const bs = ref([
+    {
+      name: '计费标准信息',
+      list: [
+        {
+          name: '计费方式',
+          field: 'type',
+          type: 'radio',
+          options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
+          note1: '',
+        },
+        {
+          name: '计费标准',
+          field: 'price',
+          type: 'number',
+          company: '元',
+          note1: '',
+        },
+        {
+          name: '计费标准描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+      ],
+    },
+    {
+      name: '常见问题',
+      list: [
+        {
+          name: '问题',
+          field: 'question',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '答复',
+          field: 'answer',
+          type: 'textArea',
+          note1: '',
+        },
+      ],
+    },
+  ])
  const navList = ref([])
  const navList2 = ref([])
  const fileList = ref({})
@ -79,7 +201,13 @@
  const refData = ref({})
  const submitFlag = ref(true)
  const dataFrom = ref({
-    infoList: [],
+    infoList: [
+      {
+        attrType: '组件类型',
+        attrValue: '智能算法',
+        delFlag: 0,
+      },
+    ],
    delFlag: 0,
    type: '组件服务',
    deptId: '',
@ -187,7 +315,6 @@
  }
  init()
  mybus.on('chageDataFrom', (obj) => {
-    console.log(obj, dataFrom.value.infoList)
    dataFrom.value.infoList = dataFrom.value.infoList.filter(
      (item) => item.attrType !== obj.attrType
    )
@ -195,6 +322,7 @@
      obj.attrValue = ''
    }
    dataFrom.value.infoList.push(obj)
+    console.log('数据变更=================》', obj, dataFrom.value.infoList)
  })
  mybus.on('chageFileList', (obj) => {
    fileList.value = obj
@ -208,10 +336,10 @@
  //datafrom外面数据
  mybus.on('chageDataFromDwon', (obj) => {
    switch (obj.attrType) {
-      case '名称':
+      case '算法名称':
        dataFrom.value.name = obj.attrValue
        break
-      case '描述':
+      case '算法描述':
        dataFrom.value.description = obj.attrValue
        break
      case '共享条件':
--- a/front/src/views/capacityOnTheShelf/Application.vue
+++ b/front/src/views/capacityOnTheShelf/Application.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-13 10:22:27
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-15 17:55:02
+ * @LastEditTime: 2022-06-17 19:31:27
 * @Description: 应用上架
 -->
 <template>
@ -22,7 +22,34 @@
      </div>
    </div>
    <div class="vue-box">
-      <application-essential-information
+      <put-on-the-shelf
+        v-if="showView === '基本信息' && refData.name"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :videoList="videoList"
+        :imgList="imgList"
+        :externalField="['应用名称', '应用描述']"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '功能介绍'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :configure="gnjs"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '关联组件'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :configure="glzj"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '部署与应用'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :externalField="['共享条件', '共享类型']"
+        :configure="bs"
+      ></put-on-the-shelf>
+      <!-- <application-essential-information
        v-if="showView === '基本信息' && refData.name"
        :refData="refData"
        :dataFrom="dataFrom"
@ -45,7 +72,7 @@
        :dataFrom="dataFrom"
        :fileList="fileList"
        :imgList="imgList"
-      ></application-deployment-use>
+      ></application-deployment-use> -->
    </div>
    <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
      <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
@ -58,10 +85,11 @@
  </div>
 </template>
 <script setup>
-  import ApplicationEssentialInformation from '@/views/capacityOnTheShelf/components/ApplicationEssentialInformation.vue'
-  import ApplicationFunctionIntroduction from '@/views/capacityOnTheShelf/components/ApplicationFunctionIntroduction.vue'
-  import ApplicationAssociatedComponents from '@/views/capacityOnTheShelf/components/ApplicationAssociatedComponents.vue'
-  import ApplicationDeploymentUse from '@/views/capacityOnTheShelf/components/ApplicationDeploymentUse.vue'
+  // import ApplicationEssentialInformation from '@/views/capacityOnTheShelf/components/ApplicationEssentialInformation.vue'
+  // import ApplicationFunctionIntroduction from '@/views/capacityOnTheShelf/components/ApplicationFunctionIntroduction.vue'
+  // import ApplicationAssociatedComponents from '@/views/capacityOnTheShelf/components/ApplicationAssociatedComponents.vue'
+  // import ApplicationDeploymentUse from '@/views/capacityOnTheShelf/components/ApplicationDeploymentUse.vue'
+  import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
  import { ref, onBeforeUnmount } from 'vue'
  import { useRouter } from 'vue-router'
  import { getCategoryTree } from '@/api/personalCenter'
@ -85,6 +113,75 @@
    type: '应用资源',
    deptId: '',
  })
+  const gnjs = ref([
+    {
+      name: '功能介绍',
+      list: [
+        {
+          name: '功能名称',
+          field: 'name',
+          type: 'input',
+          note1: '',
+        },
+        {
+          name: '功能描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '功能图片',
+          field: 'img',
+          type: 'image',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const glzj = ref([
+    {
+      name: '关联组件',
+      list: [
+        {
+          name: '关联组件名称',
+          field: 'name',
+          type: 'input',
+          note1: '',
+        },
+        {
+          name: '关联组件描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '关联组件地址',
+          field: 'url',
+          type: 'input',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const bs = ref([
+    {
+      name: '常见问题',
+      list: [
+        {
+          name: '问题',
+          field: 'question',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '答复',
+          field: 'answer',
+          type: 'textArea',
+          note1: '',
+        },
+      ],
+    },
+  ])
  getUser().then((res) => {
    dataFrom.value.deptId = res.data.data.deptId
  })
@ -209,10 +306,10 @@
  //datafrom外面数据
  mybus.on('chageDataFromDwon', (obj) => {
    switch (obj.attrType) {
-      case '名称':
+      case '应用名称':
        dataFrom.value.name = obj.attrValue
        break
-      case '描述':
+      case '应用描述':
        dataFrom.value.description = obj.attrValue
        break
      case '共享条件':
--- a/front/src/views/capacityOnTheShelf/BusinessComponent.vue
+++ b/front/src/views/capacityOnTheShelf/BusinessComponent.vue
@ -0,0 +1,454 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-20 09:35:51
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-21 10:37:49
+ * @Description: 业务组件
+-->
+<template>
+  <div class="box">
+    <div class="header">能力上架申请</div>
+    <div class="top">
+      <div
+        v-for="(nav, index) in navList"
+        :key="nav"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+      >
+        <span class="bg-box">
+          <span>{{ index + 1 }}</span>
+        </span>
+        <span>{{ nav.name }}</span>
+        <div class="line" v-if="index !== navList.length - 1"></div>
+      </div>
+    </div>
+    <div class="vue-box">
+      <put-on-the-shelf
+        v-if="showView === '基本信息' && refData.name"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :videoList="videoList"
+        :externalField="[
+          '组件名称',
+          '组件描述',
+          '共享条件',
+          '共享类型',
+          '部门联系人',
+          '部门联系人电话',
+        ]"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '功能介绍'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :configure="gnjs"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '应用场景'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :configure="yycj"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '部署与使用'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :fileList="fileList"
+        :fileList2="fileList2"
+        :imgList="imgList"
+        :configure="bs"
+      ></put-on-the-shelf>
+    </div>
+    <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
+      <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
+      <button v-show="showView === '部署与使用'" @click="preview()">
+        预览
+      </button>
+      <button v-show="showView !== '部署与使用'" @click="next()">下一步</button>
+      <button v-show="showView === '部署与使用'" @click="submit()">提交</button>
+    </div>
+  </div>
+</template>
+<script setup>
+  import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
+  import { ref, onBeforeUnmount } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { getCategoryTree } from '@/api/personalCenter'
+  import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
+  import { getUser, getUserInfo } from '@/api/home'
+  import { message } from 'ant-design-vue'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const showView = ref('基本信息')
+  const gnjs = ref([
+    {
+      name: '功能介绍',
+      list: [
+        {
+          name: '功能名称',
+          field: 'name',
+          type: 'input',
+          note1: '',
+        },
+        {
+          name: '功能描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '功能图片',
+          field: 'img',
+          type: 'image',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const yycj = ref([
+    {
+      name: '应用场景',
+      list: [
+        {
+          name: '应用场景名称',
+          field: 'name',
+          type: 'input',
+          note1: '',
+        },
+        {
+          name: '应用场景描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '应用场景图片',
+          field: 'img',
+          type: 'image',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const bs = ref([
+    {
+      name: '计费标准信息',
+      list: [
+        {
+          name: '计费方式',
+          field: 'type',
+          type: 'radio',
+          options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
+          note1: '',
+        },
+        {
+          name: '计费标准',
+          field: 'price',
+          type: 'number',
+          company: '元',
+          note1: '',
+        },
+        {
+          name: '计费标准描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+      ],
+    },
+    {
+      name: '常见问题',
+      list: [
+        {
+          name: '问题',
+          field: 'question',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '答复',
+          field: 'answer',
+          type: 'textArea',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const navList = ref([])
+  const navList2 = ref([])
+  const fileList = ref({})
+  const fileList2 = ref({})
+  const imgList = ref({})
+  const videoList = ref({})
+  const data = ref({})
+  const refData = ref({})
+  const submitFlag = ref(true)
+  const dataFrom = ref({
+    infoList: [
+      {
+        attrType: '组件类型',
+        attrValue: '业务组件',
+        delFlag: 0,
+      },
+    ],
+    delFlag: 0,
+    type: '组件服务',
+    deptId: '',
+  })
+  getUser().then((res) => {
+    dataFrom.value.deptId = res.data.data.deptId
+  })
+  const back = () => {
+    navList.value.forEach((val, index) => {
+      if (val.key === showView.value && index > 0) {
+        showView.value = navList2.value[index - 1]
+        refData.value = data.value.filter(
+          (item) => item.name === showView.value
+        )[0]
+        console.log('表单数据=============>', dataFrom.value)
+      }
+    })
+  }
+  const next = () => {
+    let i = -1
+    navList.value.forEach((val, index) => {
+      if (val.key === showView.value && index < navList.value.length - 1) {
+        i = index + 1
+      }
+    })
+    if (i !== -1) {
+      showView.value = navList2.value[i]
+      refData.value = data.value.filter(
+        (item) => item.name === showView.value
+      )[0]
+      console.log('表单数据=============>', dataFrom.value, refData.value)
+    }
+  }
+  // 预览
+  const preview = () => {
+    dataFrom.value.infoList = dataFrom.value.infoList.filter(
+      (item) => item.attrValue !== ''
+    )
+    console.log('预览==============>', dataFrom.value)
+    window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
+    const newpage = router.resolve({
+      path: '/details',
+    })
+    window.open(newpage.href, '_blank')
+  }
+  const submit = () => {
+    console.log('提交数据=============>', dataFrom.value)
+    if (submitFlag.value) {
+      submitFlag.value = false
+      dataFrom.value.infoList = dataFrom.value.infoList.filter(
+        (item) => item.attrValue !== ''
+      )
+      shangjiainsert(dataFrom.value).then((res) => {
+        const instanceId = res.data.data
+        dataFrom.value.id = res.data.data
+        getUser().then((res6) => {
+          getUserInfo(res6.data.data.id).then((res2) => {
+            const deptId = res2.data.data.deptId
+            const userId = res2.data.data.id
+            const userName = res2.data.data.realName
+            const params = {
+              instanceId: instanceId,
+              deptId: deptId,
+              userId: userId,
+              userName: userName,
+              resourceDTO: [dataFrom.value],
+            }
+            shangjiaapply(params).then((res3) => {
+              console.log('res3', res3)
+              if (res3.data.code == 0) {
+                message.success('上架成功！')
+                submitFlag.value = true
+                window.setTimeout(() => {
+                  window.close()
+                }, 1000)
+              }
+            })
+          })
+        })
+      })
+    }
+  }
+  const init = () => {
+    getCategoryTree().then((res) => {
+      // console.clear()
+      res.data.data = res.data.data
+        .filter((item) => item.name === '组件服务一')[0]
+        .children.filter((item) => item.name === '业务组件')[0]
+      navList.value = []
+      navList2.value = []
+      res.data.data.children.forEach((val) => {
+        console.log(val)
+        navList.value.push({
+          name: val.name,
+          key: val.name,
+        })
+        navList2.value.push(val.name)
+      })
+      data.value = res.data.data.children
+      refData.value = data.value.filter(
+        (item) => item.name === showView.value
+      )[0]
+      console.log('所有编目结构==============>', res.data.data)
+    })
+  }
+  init()
+  mybus.on('chageDataFrom', (obj) => {
+    dataFrom.value.infoList = dataFrom.value.infoList.filter(
+      (item) => item.attrType !== obj.attrType
+    )
+    if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
+      obj.attrValue = ''
+    }
+    dataFrom.value.infoList.push(obj)
+    console.log('数据变更=================》', obj, dataFrom.value.infoList)
+  })
+  mybus.on('chageFileList', (obj) => {
+    fileList.value = obj
+  })
+  mybus.on('chageFileList2', (obj) => {
+    fileList2.value = obj
+  })
+  mybus.on('chageImgList', (obj) => {
+    imgList.value = obj
+  })
+  mybus.on('chageVideoList', (obj) => {
+    videoList.value = obj
+  })
+  //datafrom外面数据
+  mybus.on('chageDataFromDwon', (obj) => {
+    switch (obj.attrType) {
+      case '组件名称':
+        dataFrom.value.name = obj.attrValue
+        break
+      case '组件描述':
+        dataFrom.value.description = obj.attrValue
+        break
+      case '共享条件':
+        dataFrom.value.shareCondition = obj.attrValue
+        break
+      case '共享类型':
+        dataFrom.value.shareType = obj.attrValue
+        break
+      case '部门联系人':
+        dataFrom.value.deptContacts = obj.attrValue
+        break
+      case '部门联系人电话':
+        dataFrom.value.deptPhone = obj.attrValue
+        break
+      case '服务接口':
+        dataFrom.value.apiUrl = obj.attrValue
+        break
+      case '接口请求方式':
+        dataFrom.value.apiMethodType = obj.attrValue
+        break
+    }
+    // console.log('dataFrom.value', dataFrom.value)
+  })
+  onBeforeUnmount(() => {
+    mybus.off('chageDataFrom')
+    mybus.off('chageFileList')
+    mybus.off('chageFileList2')
+    mybus.off('chageImgList')
+    mybus.off('chageDataFromDwon')
+  })
+</script>
+<style lang="less" scoped>
+  .box {
+    position: relative;
+    top: 64px;
+    margin: 15px 400px;
+    padding: 10px;
+    background: #fff;
+    .header {
+      font-size: 28px;
+      font-weight: 600;
+    }
+    .vue-box {
+      padding: 0 100px;
+    }
+    .top {
+      margin: 10px 20px 0;
+      padding: 15px 30px;
+      background: #edf4fc;
+      display: flex;
+      justify-content: space-between;
+      div {
+        font-size: 18px;
+        color: #999;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .bg-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 45px;
+          height: 45px;
+          border-radius: 50%;
+          border: 1px solid rgb(214, 214, 214);
+          margin-right: 10px;
+          transition: all 0.3s ease;
+          span {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            border: 1px solid #999;
+          }
+        }
+        .line {
+          margin-left: 10px;
+          width: 130px;
+          height: 1px;
+          background: #999;
+        }
+      }
+      .finish {
+        color: #0087ff;
+        .bg-box {
+          background: #9ccefa;
+          color: #fff;
+          border: 1px solid #9ccefa;
+          span {
+            background: #0087ff;
+            border: 1px solid #0087ff;
+          }
+        }
+        .line {
+          background: #0087ff;
+        }
+      }
+    }
+    .btn {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 400px 0;
+      button {
+        cursor: pointer;
+        width: 80px;
+        height: 35px;
+        text-align: center;
+        color: #fff;
+        border: none;
+        border-radius: 6px;
+        background: #0087ff;
+      }
+      button:nth-of-type(1) {
+        color: #0087ff;
+        background: #e1edfa;
+      }
+      button:nth-of-type(2) {
+        background: #01c5dc;
+      }
+    }
+    .first {
+      justify-content: center;
+    }
+  }
+</style>
--- a/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
+++ b/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
@ -0,0 +1,454 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-20 09:35:17
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-21 10:37:45
+ * @Description: 开发组件
+-->
+<template>
+  <div class="box">
+    <div class="header">能力上架申请</div>
+    <div class="top">
+      <div
+        v-for="(nav, index) in navList"
+        :key="nav"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+      >
+        <span class="bg-box">
+          <span>{{ index + 1 }}</span>
+        </span>
+        <span>{{ nav.name }}</span>
+        <div class="line" v-if="index !== navList.length - 1"></div>
+      </div>
+    </div>
+    <div class="vue-box">
+      <put-on-the-shelf
+        v-if="showView === '基本信息' && refData.name"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :videoList="videoList"
+        :externalField="[
+          '组件名称',
+          '组件描述',
+          '共享条件',
+          '共享类型',
+          '部门联系人',
+          '部门联系人电话',
+        ]"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '功能介绍'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :configure="gnjs"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '应用场景'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :configure="yycj"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '部署与使用'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :fileList="fileList"
+        :fileList2="fileList2"
+        :imgList="imgList"
+        :configure="bs"
+      ></put-on-the-shelf>
+    </div>
+    <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
+      <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
+      <button v-show="showView === '部署与使用'" @click="preview()">
+        预览
+      </button>
+      <button v-show="showView !== '部署与使用'" @click="next()">下一步</button>
+      <button v-show="showView === '部署与使用'" @click="submit()">提交</button>
+    </div>
+  </div>
+</template>
+<script setup>
+  import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
+  import { ref, onBeforeUnmount } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { getCategoryTree } from '@/api/personalCenter'
+  import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
+  import { getUser, getUserInfo } from '@/api/home'
+  import { message } from 'ant-design-vue'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const showView = ref('基本信息')
+  const gnjs = ref([
+    {
+      name: '功能介绍',
+      list: [
+        {
+          name: '功能名称',
+          field: 'name',
+          type: 'input',
+          note1: '',
+        },
+        {
+          name: '功能描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '功能图片',
+          field: 'img',
+          type: 'image',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const yycj = ref([
+    {
+      name: '应用场景',
+      list: [
+        {
+          name: '应用场景名称',
+          field: 'name',
+          type: 'input',
+          note1: '',
+        },
+        {
+          name: '应用场景描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '应用场景图片',
+          field: 'img',
+          type: 'image',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const bs = ref([
+    {
+      name: '计费标准信息',
+      list: [
+        {
+          name: '计费方式',
+          field: 'type',
+          type: 'radio',
+          options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
+          note1: '',
+        },
+        {
+          name: '计费标准',
+          field: 'price',
+          type: 'number',
+          company: '元',
+          note1: '',
+        },
+        {
+          name: '计费标准描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+      ],
+    },
+    {
+      name: '常见问题',
+      list: [
+        {
+          name: '问题',
+          field: 'question',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '答复',
+          field: 'answer',
+          type: 'textArea',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const navList = ref([])
+  const navList2 = ref([])
+  const fileList = ref({})
+  const fileList2 = ref({})
+  const imgList = ref({})
+  const videoList = ref({})
+  const data = ref({})
+  const refData = ref({})
+  const submitFlag = ref(true)
+  const dataFrom = ref({
+    infoList: [
+      {
+        attrType: '组件类型',
+        attrValue: '开发组件',
+        delFlag: 0,
+      },
+    ],
+    delFlag: 0,
+    type: '组件服务',
+    deptId: '',
+  })
+  getUser().then((res) => {
+    dataFrom.value.deptId = res.data.data.deptId
+  })
+  const back = () => {
+    navList.value.forEach((val, index) => {
+      if (val.key === showView.value && index > 0) {
+        showView.value = navList2.value[index - 1]
+        refData.value = data.value.filter(
+          (item) => item.name === showView.value
+        )[0]
+        console.log('表单数据=============>', dataFrom.value)
+      }
+    })
+  }
+  const next = () => {
+    let i = -1
+    navList.value.forEach((val, index) => {
+      if (val.key === showView.value && index < navList.value.length - 1) {
+        i = index + 1
+      }
+    })
+    if (i !== -1) {
+      showView.value = navList2.value[i]
+      refData.value = data.value.filter(
+        (item) => item.name === showView.value
+      )[0]
+      console.log('表单数据=============>', dataFrom.value, refData.value)
+    }
+  }
+  // 预览
+  const preview = () => {
+    dataFrom.value.infoList = dataFrom.value.infoList.filter(
+      (item) => item.attrValue !== ''
+    )
+    console.log('预览==============>', dataFrom.value)
+    window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
+    const newpage = router.resolve({
+      path: '/details',
+    })
+    window.open(newpage.href, '_blank')
+  }
+  const submit = () => {
+    console.log('提交数据=============>', dataFrom.value)
+    if (submitFlag.value) {
+      submitFlag.value = false
+      dataFrom.value.infoList = dataFrom.value.infoList.filter(
+        (item) => item.attrValue !== ''
+      )
+      shangjiainsert(dataFrom.value).then((res) => {
+        const instanceId = res.data.data
+        dataFrom.value.id = res.data.data
+        getUser().then((res6) => {
+          getUserInfo(res6.data.data.id).then((res2) => {
+            const deptId = res2.data.data.deptId
+            const userId = res2.data.data.id
+            const userName = res2.data.data.realName
+            const params = {
+              instanceId: instanceId,
+              deptId: deptId,
+              userId: userId,
+              userName: userName,
+              resourceDTO: [dataFrom.value],
+            }
+            shangjiaapply(params).then((res3) => {
+              console.log('res3', res3)
+              if (res3.data.code == 0) {
+                message.success('上架成功！')
+                submitFlag.value = true
+                window.setTimeout(() => {
+                  window.close()
+                }, 1000)
+              }
+            })
+          })
+        })
+      })
+    }
+  }
+  const init = () => {
+    getCategoryTree().then((res) => {
+      // console.clear()
+      res.data.data = res.data.data
+        .filter((item) => item.name === '组件服务一')[0]
+        .children.filter((item) => item.name === '开发组件')[0]
+      navList.value = []
+      navList2.value = []
+      res.data.data.children.forEach((val) => {
+        console.log(val)
+        navList.value.push({
+          name: val.name,
+          key: val.name,
+        })
+        navList2.value.push(val.name)
+      })
+      data.value = res.data.data.children
+      refData.value = data.value.filter(
+        (item) => item.name === showView.value
+      )[0]
+      console.log('所有编目结构==============>', res.data.data)
+    })
+  }
+  init()
+  mybus.on('chageDataFrom', (obj) => {
+    dataFrom.value.infoList = dataFrom.value.infoList.filter(
+      (item) => item.attrType !== obj.attrType
+    )
+    if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
+      obj.attrValue = ''
+    }
+    dataFrom.value.infoList.push(obj)
+    console.log('数据变更=================》', obj, dataFrom.value.infoList)
+  })
+  mybus.on('chageFileList', (obj) => {
+    fileList.value = obj
+  })
+  mybus.on('chageFileList2', (obj) => {
+    fileList2.value = obj
+  })
+  mybus.on('chageImgList', (obj) => {
+    imgList.value = obj
+  })
+  mybus.on('chageVideoList', (obj) => {
+    videoList.value = obj
+  })
+  //datafrom外面数据
+  mybus.on('chageDataFromDwon', (obj) => {
+    switch (obj.attrType) {
+      case '组件名称':
+        dataFrom.value.name = obj.attrValue
+        break
+      case '组件描述':
+        dataFrom.value.description = obj.attrValue
+        break
+      case '共享条件':
+        dataFrom.value.shareCondition = obj.attrValue
+        break
+      case '共享类型':
+        dataFrom.value.shareType = obj.attrValue
+        break
+      case '部门联系人':
+        dataFrom.value.deptContacts = obj.attrValue
+        break
+      case '部门联系人电话':
+        dataFrom.value.deptPhone = obj.attrValue
+        break
+      case '服务接口':
+        dataFrom.value.apiUrl = obj.attrValue
+        break
+      case '接口请求方式':
+        dataFrom.value.apiMethodType = obj.attrValue
+        break
+    }
+    // console.log('dataFrom.value', dataFrom.value)
+  })
+  onBeforeUnmount(() => {
+    mybus.off('chageDataFrom')
+    mybus.off('chageFileList')
+    mybus.off('chageFileList2')
+    mybus.off('chageImgList')
+    mybus.off('chageDataFromDwon')
+  })
+</script>
+<style lang="less" scoped>
+  .box {
+    position: relative;
+    top: 64px;
+    margin: 15px 400px;
+    padding: 10px;
+    background: #fff;
+    .header {
+      font-size: 28px;
+      font-weight: 600;
+    }
+    .vue-box {
+      padding: 0 100px;
+    }
+    .top {
+      margin: 10px 20px 0;
+      padding: 15px 30px;
+      background: #edf4fc;
+      display: flex;
+      justify-content: space-between;
+      div {
+        font-size: 18px;
+        color: #999;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .bg-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 45px;
+          height: 45px;
+          border-radius: 50%;
+          border: 1px solid rgb(214, 214, 214);
+          margin-right: 10px;
+          transition: all 0.3s ease;
+          span {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            border: 1px solid #999;
+          }
+        }
+        .line {
+          margin-left: 10px;
+          width: 130px;
+          height: 1px;
+          background: #999;
+        }
+      }
+      .finish {
+        color: #0087ff;
+        .bg-box {
+          background: #9ccefa;
+          color: #fff;
+          border: 1px solid #9ccefa;
+          span {
+            background: #0087ff;
+            border: 1px solid #0087ff;
+          }
+        }
+        .line {
+          background: #0087ff;
+        }
+      }
+    }
+    .btn {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 400px 0;
+      button {
+        cursor: pointer;
+        width: 80px;
+        height: 35px;
+        text-align: center;
+        color: #fff;
+        border: none;
+        border-radius: 6px;
+        background: #0087ff;
+      }
+      button:nth-of-type(1) {
+        color: #0087ff;
+        background: #e1edfa;
+      }
+      button:nth-of-type(2) {
+        background: #01c5dc;
+      }
+    }
+    .first {
+      justify-content: center;
+    }
+  }
+</style>
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@ -0,0 +1,574 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-17 14:11:08
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-20 16:40:33
+ * @Description: 上架
+-->
+<template>
+  <div class="put-on-the-shelf">
+    <div v-for="title in props.refData.children" :key="title.id">
+      <div class="top">
+        <div></div>
+        <div>{{ title.name }}</div>
+        <div></div>
+      </div>
+      <template v-if="title.isConfigure">
+        <div class="bottom">
+          <div class="items" v-if="data[title.name].length > 0">
+            <div
+              class="item"
+              v-for="(val, index) in data[title.name]"
+              :key="'key1' + val.name + index"
+            >
+              <p>
+                <span>{{ title.name }}-{{ index + 1 }}</span>
+                <span></span>
+              </p>
+              <p
+                v-for="attr in props.configure.filter(
+                  (item, index2) => item.name === title.name
+                )[0].list"
+                :key="'key2' + attr.name + index2"
+              >
+                <span>{{ attr.name }}</span>
+                <span v-if="attr.type === 'image'">
+                  <a-image :width="85" :height="60" :src="val.img" />
+                </span>
+                <span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
+              </p>
+              <div class="del">
+                <i class="delImg" @click="del(title.name, index)"></i>
+                <div @click="del(title.name, index)">删除</div>
+              </div>
+            </div>
+          </div>
+          <div class="add">添加更多{{ title.name }}</div>
+          <div
+            class="form"
+            v-for="(val, index) in props.configure.filter(
+              (item) => item.name === title.name
+            )[0].list"
+            :key="'key3' + val.name + index"
+          >
+            <span>{{ val.name }}</span>
+            <a-input
+              v-model:value="val.note1"
+              :maxlength="24"
+              :placeholder="'请填写' + val.name + ',不超过24个字符'"
+              v-if="val.type == 'input'"
+            />
+            <a-textarea
+              v-model:value="val.note1"
+              :showCount="true"
+              :maxlength="200"
+              :placeholder="'请填写' + val.name"
+              v-else-if="val.type == 'textArea'"
+            />
+            <a-input-number
+              v-model:value="val.note1"
+              :min="0"
+              :max="9999"
+              :step="0.01"
+              string-mode
+              :placeholder="'请填写' + val.name"
+              v-else-if="val.type == 'number'"
+            />
+            <a-radio-group
+              v-model:value="val.note1"
+              :options="val.options"
+              v-else-if="val.type == 'radio'"
+            />
+            <upload
+              :key="showKey"
+              type="图片"
+              btnName="上传图片"
+              :maxCount="1"
+              :data="val"
+              :list="[]"
+              tip="支持图片类型，大小不超过100M"
+              v-else-if="val.type == 'image'"
+            ></upload>
+          </div>
+          <div class="submit">
+            <a-button type="primary" @click="add(title.name)">提交</a-button>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="bottom">
+          <div class="form" v-for="item in title.children" :key="item.id">
+            <span>{{ item.name }}</span>
+            <a-input
+              v-if="item.type == 'input'"
+              v-model:value="item.note1"
+              :placeholder="'请输入' + item.name"
+            />
+            <a-radio-group
+              v-else-if="item.type == 'radio'"
+              v-model:value="item.note1"
+              :options="item.options"
+            />
+            <a-textarea
+              v-else-if="item.type == 'textArea'"
+              v-model:value="item.note1"
+              :showCount="true"
+              :maxlength="200"
+              :placeholder="'请输入' + item.name"
+            />
+            <upload
+              v-else-if="item.type == 'image'"
+              type="图片"
+              btnName="上传图片"
+              :maxCount="1"
+              :data="item"
+              :list="props.imgList"
+              tip="支持图片类型，大小不超过100M"
+            ></upload>
+            <upload
+              v-else-if="item.type == 'file' && item.name !== '使用手册'"
+              type="文件"
+              btnName="上传附件"
+              :maxCount="1"
+              :data="item"
+              :list="props.fileList"
+              tip="支持文件类型，大小不超过100M"
+            ></upload>
+            <upload
+              v-else-if="item.name == '使用手册'"
+              type="文件"
+              btnName="上传附件"
+              :maxCount="1"
+              :data="item"
+              :busType="2"
+              :list="props.fileList2"
+              tip="支持文件类型，大小不超过100M"
+            ></upload>
+            <upload
+              v-else-if="item.type == 'video'"
+              type="视频"
+              btnName="上传视频"
+              :maxCount="1"
+              :data="item"
+              :list="props.videoList"
+              tip="支持视频类型，大小不超过100M"
+            ></upload>
+            <a-select
+              v-else-if="item.type == 'select'"
+              style="width: 240px"
+              v-model:value="item.note1"
+              :placeholder="'请选择' + item.name"
+            >
+              <a-select-option
+                v-for="(itemSelect, indexSelect) in item.options"
+                :key="indexSelect"
+                :value="itemSelect.dictLabel"
+              >
+                {{ itemSelect.dictLabel }}
+              </a-select-option>
+            </a-select>
+            <div
+              v-else-if="item.type == 'checkBox'"
+              class="application-Area"
+              id="application-Area"
+              :key="showKey"
+            >
+              <div
+                v-for="(itemson, indexson) in item.options"
+                :key="indexson"
+                class="application-Area-son"
+                @click="ApplicationArea(item, itemson)"
+                :class="
+                  item.note2.indexOf(itemson.dictLabel) != -1
+                    ? 'application-Area-down'
+                    : ''
+                "
+              >
+                {{ itemson.dictLabel }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  import upload from '@/views/components/upload'
+  import { message } from 'ant-design-vue'
+  import { getCategoryTreePage } from '@/api/personalCenter'
+  const props = defineProps({
+    // 展示数据
+    refData: { type: Object, default: null },
+    // 表单数据
+    dataFrom: { type: Array, default: null },
+    // 文件回显
+    fileList: { type: Array, default: null },
+    fileList2: { type: Array, default: null },
+    // 图片回显
+    imgList: { type: Array, default: null },
+    // 视频回显
+    videoList: { type: Array, default: null },
+    // 外部字段
+    externalField: { type: Array, default: null },
+    // 多条的配置
+    configure: { type: Array, default: null },
+    // [{
+    //   name:'计费标准信息',
+    //   list:[
+    //     {
+    //       name:'计费方式',
+    //       type:'radio',
+    //       field:'type',
+    //       options:
+    //         {
+    //           name:'一次性买断',
+    //           value:'1'
+    //         },
+    //         {
+    //           name:'按调用次数',
+    //           value:'2'
+    //         },
+    //         {
+    //           name:'按并发路数',
+    //           value:'3'
+    //         },
+    //         {
+    //           name:'按年计费',
+    //           value:'4'
+    //         }
+    //       ],
+    //       note1:''
+    //     },
+    //     {
+    //       name:'计费标准',
+    //       field:'price',
+    //       type:'number',
+    //       company:'元',
+    //       note1: ''
+    //     },
+    //     {
+    //       name:'计费标准描述',
+    //       field:'desc',
+    //       type:'textArea',
+    //       note1:''
+    //     }
+    //   ]
+    // }]
+  })
+  console.log('props==========>', props)
+  const data = ref({
+    list: [],
+  })
+  const showKey = ref(0)
+  props.refData.children.map((item) => {
+    if (
+      props.configure &&
+      props.configure.filter((val) => val.name === item.name).length > 0
+    ) {
+      item.isConfigure = true
+      data.value[item.name] = []
+      console.log('item==========>', item, data.value)
+    } else {
+      item.isConfigure = false
+    }
+  })
+  let arr = props.refData.children.filter((item) => {
+    if (props.configure) {
+      if (!item.isConfigure) {
+        return item
+      }
+    } else {
+      return item
+    }
+  })
+  data.value.list = []
+  // 获取字典数据
+  arr.forEach((val) => {
+    val.children.forEach((item) => {
+      if (item.isLinkToDic === 'true' && item.linkValue) {
+        getCategoryTreePage({
+          page: 1,
+          limit: 20,
+          dictTypeId: item.linkValue,
+          deFlage: 0,
+        }).then((res) => {
+          if (item.type === 'radio') {
+            item.options = res.data.data.list.map((radio) => radio.dictLabel)
+          } else if (item.type === 'select' || item.type === 'checkBox') {
+            if (item.type === 'checkBox') {
+              if (!item.note2) {
+                item.note2 = []
+              }
+            }
+            item.options = res.data.data.list
+          }
+          data.value.list.push(item)
+        })
+      } else {
+        data.value.list.push(item)
+      }
+    })
+  })
+  if (props.dataFrom) {
+    console.log(props.dataFrom, data.value.list)
+    props.dataFrom.infoList.forEach((item) => {
+      if (
+        props.configure &&
+        props.configure.filter((val) => val.name === item.attrType).length > 0
+      ) {
+        data.value[item.attrType] = JSON.parse(item.attrValue)
+      } else if (item.attrType === '应用领域') {
+        props.refData.children.forEach((val) => {
+          val.children.forEach((child) => {
+            if (child.name === item.attrType) {
+              // 通过;分割成数组
+              child.note2 = item.attrValue.split(';')
+              showKey.value++
+              console.log('应用领域', item, item.attrValue.split(';'), child)
+            }
+          })
+        })
+        //  item.note1 = item.attrValue.split(';')
+      }
+    })
+  }
+  const add = (title) => {
+    let list = props.configure.filter((item) => item.name === title)[0].list
+    let flag = true
+    list.forEach((item) => {
+      console.log(item)
+      if (item.type !== 'number' && !item.note1.length > 0) {
+        flag = false
+      } else if (item.type === 'number' && !item.note1 > 0) {
+        flag = false
+      }
+    })
+    if (flag) {
+      let obj = {}
+      list.forEach((item) => {
+        obj[item.field] = item.note1
+      })
+      data.value[title].push(obj)
+      console.log(data.value[title])
+      mybus.emit('chageDataFrom', {
+        attrType: title,
+        attrValue: JSON.stringify(data.value[title]),
+        delFlag: 0,
+      })
+      list.forEach((item) => {
+        item.note1 = ''
+        showKey.value++
+      })
+    } else {
+      message.warning('请填写完整')
+    }
+  }
+  const del = (title, index) => {
+    data.value[title].splice(index, 1)
+    mybus.emit('chageDataFrom', {
+      attrType: title,
+      attrValue: JSON.stringify(data.value[title]),
+      delFlag: 0,
+    })
+  }
+  const ApplicationArea = (item, itemson) => {
+    console.log(item, itemson)
+    if (item.note2.indexOf(itemson.dictLabel) === -1) {
+      item.note2.push(itemson.dictLabel)
+    } else {
+      item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
+    }
+    mybus.emit('chageDataFrom', {
+      attrType: item.name,
+      attrValue: item.note2.join(';'),
+      delFlag: 0,
+    })
+  }
+  watch(data.value.list, (newProps, oldProps) => {
+    console.log(newProps, oldProps)
+    newProps.forEach((val) => {
+      console.log('数据发生改变==========>', val)
+      if (
+        props.configure &&
+        props.configure.filter((item) => item.name === val.name).length > 0
+      ) {
+        mybus.emit('chageDataFrom', {
+          attrType: val.name,
+          attrValue: val.note1,
+          delFlag: 0,
+        })
+      } else if (
+        props.externalField &&
+        props.externalField.indexOf(val.name) > -1
+      ) {
+        mybus.emit('chageDataFromDwon', {
+          attrType: val.name,
+          attrValue: val.note1,
+          delFlag: 0,
+        })
+      } else {
+        if (val.name !== '应用领域') {
+          mybus.emit('chageDataFrom', {
+            attrType: val.name,
+            attrValue: val.note1,
+            delFlag: 0,
+          })
+        }
+      }
+    })
+  })
+</script>
+<style lang="less" scoped>
+  .put-on-the-shelf {
+    height: 680px;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 100px 25px;
+    & > div {
+      width: 100%;
+      margin-top: 60px;
+      .top {
+        color: #333333;
+        font-size: 22px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 25px;
+        div:first-child,
+        div:last-child {
+          width: 245px;
+          height: 1px;
+          background: #f0f0f0;
+        }
+        div:nth-child(2) {
+          margin: 0 30px;
+        }
+      }
+      .bottom {
+        margin-top: 25px;
+        .items {
+          background: #fafafa;
+          padding: 10px;
+          p {
+            display: flex;
+            justify-content: space-between;
+            span:nth-of-type(1) {
+              width: 200px;
+            }
+            span:nth-of-type(2) {
+              width: 100%;
+              font-weight: 600;
+            }
+          }
+          p:nth-of-type(1) > span:nth-of-type(1) {
+            font-size: 18px;
+            font-weight: 600;
+          }
+          .del {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            .delImg {
+              cursor: pointer;
+              display: inline-block;
+              width: 16px;
+              height: 18px;
+              background: url(~@/assets/home/sf_del.png) no-repeat;
+              margin-right: 5px;
+            }
+            div {
+              cursor: pointer;
+            }
+          }
+        }
+        .add {
+          margin-top: 10px;
+          font-size: 16px;
+          color: #007efb;
+        }
+        .form {
+          margin-top: 20px;
+          display: flex;
+          justify-content: flex-start;
+          span:first-child {
+            width: 120px;
+          }
+          :deep(.ant-input-textarea) {
+            width: 570px;
+          }
+          :deep(.ant-radio-group) {
+            width: 570px;
+          }
+          :deep(.ant-input-number) {
+            width: 200px;
+          }
+          :deep(.ant-input) {
+            resize: none;
+            width: 570px;
+          }
+          .ant-btn {
+            width: 100px;
+            height: 32px;
+            text-align: center;
+            background: #d9ebff;
+            color: #0087ff;
+            border: 1px solid #0087ff;
+            border-radius: 6px;
+          }
+        }
+        .submit {
+          margin-top: 40px;
+          display: flex;
+          justify-content: flex-end;
+          .ant-btn {
+            width: 80px;
+            height: 28px;
+            text-align: center;
+            background: #d9ebff;
+            color: #0087ff;
+            border: 1px solid #0087ff;
+            border-radius: 6px;
+          }
+        }
+      }
+    }
+    & > div:nth-of-type(1) {
+      margin-top: 0;
+    }
+  }
+  .application-Area {
+    width: 570px;
+    display: grid;
+    margin-top: -5px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    .application-Area-son {
+      cursor: pointer;
+      font-size: 14px;
+      width: 90px;
+      height: 26px;
+      border-radius: 13px;
+      color: #333333;
+      background: #f5f5f5;
+      border: 1px #cccccc solid;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 10px;
+      font-weight: 500;
+    }
+    .application-Area-down {
+      background: #0087ff;
+      color: #fff;
+    }
+  }
+  :deep(.ant-image-img) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+</style>
--- a/front/src/views/components/upload/index.vue
+++ b/front/src/views/components/upload/index.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-09 15:41:19
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-17 11:15:33
+ * @LastEditTime: 2022-06-20 16:38:35
 * @Description: 上传组件
 -->
 <template>
@ -46,11 +46,12 @@
    data: { type: Array, default: null },
    list: { type: Array, default: null },
    emitFlag: { type: String, default: '' },
+    busType: { type: Number, default: 0 },
  })
  console.log('window.SITE_CONFIG.apiURL', window.SITE_CONFIG.apiURL)
  const apiURL = window.SITE_CONFIG.apiURL
  const fileList = ref([])
-  if (props.list.length > 0) {
+  if (props.list && props.list.length > 0) {
    fileList.value = JSON.parse(JSON.stringify(props.list))
  }
  const beforeUpload = (file) => {
@ -107,7 +108,13 @@
          mybus.emit('chageImgList', fileList.value)
        }
      } else if (props.type === '文件') {
-        mybus.emit('chageFileList', fileList.value)
+        console.log('busType', props.busType)
+        if (props.busType == 2) {
+          console.log('busType', props.busType)
+          mybus.emit('chageFileList2', fileList.value)
+        } else {
+          mybus.emit('chageFileList', fileList.value)
+        }
      } else if (props.type === '视频') {
        mybus.emit('chageVideoList', fileList.value)
      }
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:32:22
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 10:39:37
+ * @LastEditTime: 2022-06-20 18:58:46
 * @Description: 算法详情页
 -->
 <template>
@ -117,8 +117,8 @@
          }
        } else {
          if (
-            scrollTop.value > domArr.value[i].offsetTop - 50 &&
-            scrollTop.value < domArr.value[i + 1].offsetTop - 50
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
          ) {
            selectNow.value = domArr.value[i].id
          }
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:32:22
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-15 18:10:36
+ * @LastEditTime: 2022-06-20 18:59:18
 * @Description: 应用详情页
 -->
 <template>
@ -88,7 +88,7 @@
  document.body.scrollTop = 0
  mybus.on('flyToView', (id) => {
    let top = document.querySelector('#' + id).offsetTop - 50
-    // console.log(top, document.querySelector('#' + id).offsetTop)
+    // console.log(top, document.querySelector('#' + id).offsetTop-50)
    document.documentElement.scrollTop = top
    document.body.scrollTop = top
  })
@ -109,8 +109,8 @@
          }
        } else {
          if (
-            scrollTop.value > domArr.value[i].offsetTop - 50 &&
-            scrollTop.value < domArr.value[i + 1].offsetTop - 50
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
          ) {
            selectNow.value = domArr.value[i].id
          }
--- a/front/src/views/detailsAll/BusinessDetails.vue
+++ b/front/src/views/detailsAll/BusinessDetails.vue
@ -0,0 +1,154 @@
+<!--
+ * @Author: hisense.gaoyuanwei
+ * @Date: 2022-06-20 10:12:22
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-20 18:58:56
+ * @Description: 业务组件详情页
+-->
+<template>
+  <div class="business-details" :class="{ fixed2: scrollTop >= 600 }">
+    <!-- 头部基本信息 -->
+    <business-top-details :dataList="dataList.data"></business-top-details>
+    <!-- 导航 -->
+    <business-navigation
+      :dataList="dataList.data"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></business-navigation>
+    <!-- 组件展示 -->
+    <business-presentation
+      :dataList="dataList.data"
+      id="business-presentation"
+      class="scrollBox"
+    ></business-presentation>
+    <!-- 功能介绍-->
+    <business-function-intorduction
+      :dataList="dataList.data"
+      id="function-introduction"
+      class="scrollBox"
+    ></business-function-intorduction>
+    <!-- 应用场景 -->
+    <business-application-scenarios
+      :dataList="dataList.data"
+      id="application-scenarios"
+      class="scrollBox"
+    ></business-application-scenarios>
+    <!-- 应用案例 -->
+    <business-application-case
+      :dataList="dataList.data"
+      id="application-case"
+      class="scrollBox"
+    ></business-application-case>
+    <!-- 使用方式 -->
+    <business-usage-mode
+      :dataList="dataList.data"
+      id="business-usage-mode"
+      class="scrollBox"
+    ></business-usage-mode>
+    <!-- 常见问题-->
+    <business-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></business-common-problem>
+  </div>
+</template>
+<script setup>
+  import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
+  import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
+  import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
+  import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
+  import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
+  import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
+  import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
+  import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { updateVisits, selectOne } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
+  })
+
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+      })
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
+  }
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
+</script>
+<style lang="less" scoped>
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+  }
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
+</style>
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@ -0,0 +1,161 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:32:22
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-20 18:59:01
+ * @Description: 开发组件详情页
+-->
+<template>
+  <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
+    <!-- 头部基本信息 -->
+    <developer-top-details :dataList="dataList.data"></developer-top-details>
+    <!-- 导航 -->
+    <developer-navigation
+      :dataList="dataList.data"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></developer-navigation>
+    <!-- 组件展示  视频 -->
+    <Developer-presentation
+      :dataList="dataList.data"
+      id="eveloper-presentation"
+      class="scrollBox"
+    ></Developer-presentation>
+    <!-- 功能介绍-->
+    <developer-function-intorduction
+      :dataList="dataList.data"
+      id="function-introduction"
+      class="scrollBox"
+    ></developer-function-intorduction>
+    <!-- 应用场景 -->
+    <developer-application-scenarios
+      :dataList="dataList.data"
+      id="application-scenarios"
+      class="scrollBox"
+    ></developer-application-scenarios>
+    <!-- 应用案例 -->
+    <developer-application-case
+      :dataList="dataList.data"
+      id="application-case"
+      class="scrollBox"
+    ></developer-application-case>
+    <!-- 组件试用 -->
+    <developer-trial
+      :dataList="dataList.data"
+      id="developer-trial"
+      class="scrollBox"
+    ></developer-trial>
+    <!-- 归属部门与服务商-->
+    <developer-owning-department-and-service-provider
+      :dataList="dataList.data"
+      id="department-and-service-provider"
+      class="scrollBox"
+    ></developer-owning-department-and-service-provider>
+    <!-- 常见问题-->
+    <developer-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></developer-common-problem>
+  </div>
+</template>
+<script setup>
+  import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
+  import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
+  import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
+  import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
+  import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
+  import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
+  import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
+  import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
+  import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { updateVisits, selectOne } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
+  })
+
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+      })
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
+  }
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
+</script>
+<style lang="less" scoped>
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+  }
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
+</style>
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@ -12,7 +12,9 @@
        <span class="name">{{ props.dataList.name }}</span>
        <div class="label-content">
          <p class="lable-father">
-            <span class="label">{{ props.dataList.type }}</span>
+            <span class="label">
+              {{ componentType || props.dataList.type }}
+            </span>
            <span class="label">{{ props.dataList.shareType }}</span>
            <span class="label">{{ props.dataList.shareCondition }}</span>
          </p>
@ -77,6 +79,7 @@
      },
    })
  }
+  const componentType = ref('')
  // 收藏
  const goTOCollection = () => {
    console.log('收藏===================》', props.dataList)
@ -89,6 +92,12 @@
    applicationArea.value = props.dataList.infoList.filter(
      (val) => val.attrType === '应用领域'
    )[0].attrValue
+    let obj = props.dataList.infoList.filter(
+      (val) => val.attrType === '组件类型'
+    )[0]
+    if (obj) {
+      componentType.value = obj.attrValue
+    }
  }
  watch(
    () => props.dataList,
@ -97,6 +106,12 @@
        applicationArea.value = props.dataList.infoList.filter(
          (val) => val.attrType === '应用领域'
        )[0].attrValue
+        let obj = props.dataList.infoList.filter(
+          (val) => val.attrType === '组件类型'
+        )[0]
+        if (obj) {
+          componentType.value = obj.attrValue
+        }
      }
    }
  )
--- a/front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue
@ -0,0 +1,303 @@
+<!-- 应用案例 -->
+<template>
+  <div class="application-scenarios-and-case" v-if="flag">
+    <div
+      class="application-scenarios-and-case-son"
+      v-for="item in dataFrom"
+      :key="item.title"
+    >
+      <div class="title">
+        <DetalsTitle
+          :title="item.title"
+          :type="item.englishTitle"
+        ></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in item.content"
+          :key="itemSonTitle.title"
+          @click="tabSwitch(itemSonTitle.title, item.title)"
+          class="tab-son"
+          :class="tabIndexClass(indexSonTitle, item.title, item.content)"
+        >
+          <div
+            class="tab-top"
+            :class="
+              tabInitialize(item.title) == itemSonTitle.title
+                ? 'tab-top-down'
+                : ''
+            "
+          >
+            {{ itemSonTitle.title }}
+          </div>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize(item.title) == itemSonTitle.title"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in item.content" :key="itemSonTitle">
+        <div
+          class="content"
+          v-if="tabInitialize(item.title) == itemSonTitle.title"
+        >
+          <div :class="contentLocation(0, item.title)">
+            <div
+              :class="
+                item.title == '应用场景'
+                  ? 'content-left-scene'
+                  : 'content-left-case'
+              "
+            ></div>
+          </div>
+          <div :class="contentLocation(1, item.title)">
+            <div
+              :class="
+                item.title == '应用场景'
+                  ? 'content-right-scene'
+                  : 'content-right-case'
+              "
+            >
+              <div class="content-top">{{ itemSonTitle.title }}</div>
+              <div class="content-bottom">{{ itemSonTitle.content }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  let dataFrom = ref([
+    {
+      title: '应用案例',
+      englishTitle: 'CASE',
+      content: [
+        {
+          title: '应用案例一',
+          content:
+            '应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例二',
+          content:
+            '应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例三',
+          content:
+            '应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例四',
+          content:
+            '应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例五',
+          content:
+            '应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例六',
+          content:
+            '应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+      ],
+    },
+  ])
+  const flag = ref(true)
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用案例'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '应用案例')[0]
+        if (!obj) {
+          flag.value = false
+        }
+      }
+    }
+  )
+  const { log } = console
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '应用场景' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+    if (title == '应用案例' && index == 0 && content.length > 6) {
+      return 'tab-son-class-two'
+    }
+  }
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  let tabindexCase = ref('应用案例一')
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize(title) {
+    if (title == '应用场景') {
+      return tabindex.value
+    } else {
+      return tabindexCase.value
+    }
+  }
+  //tab切换点击事件
+  function tabSwitch(name, title) {
+    if (title == '应用场景') {
+      tabindex.value = name
+      return tabindex.value
+    } else {
+      tabindexCase.value = name
+      return tabindexCase.value
+    }
+  }
+  //内容位置初始化
+  function contentLocation(index, title) {
+    log(index, title)
+    if (index == 0) {
+      if (title == '应用场景') {
+        return 'content-right'
+      } else {
+        return 'content-left'
+      }
+    } else {
+      if (title == '应用场景') {
+        return 'content-left'
+      } else {
+        return 'content-right'
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .application-scenarios-and-case {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 1rem;
+          text-align: center;
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+          }
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+        .content-left {
+          position: absolute;
+          left: 0;
+        }
+        .content-right {
+          position: absolute;
+          right: 0;
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 5;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
@ -0,0 +1,254 @@
+<!-- 应用场景-->
+<template>
+  <div class="function-intorduction" v-if="flag">
+    <div class="application-scenarios-and-case-son">
+      <!-- {{ dataFrom.attrType }} -->
+      <div class="title">
+        <DetalsTitle :title="dataFrom.attrType" type="SCENE"></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)"
+          class="tab-son"
+          :class="
+            tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
+          "
+        >
+          <a-tooltip>
+            <template #title>{{ itemSonTitle.name }}</template>
+            <div
+              class="tab-top"
+              :class="
+                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+              "
+            >
+              {{ itemSonTitle.name }}
+            </div>
+          </a-tooltip>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize() == itemSonTitle.name"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
+        <div class="content" v-if="tabindex == itemSonTitle.name">
+          <div class="content-left">
+            <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
+            <a-image
+              :width="635"
+              :height="340"
+              :src="itemSonTitle.img"
+              v-if="itemSonTitle.img"
+            ></a-image>
+          </div>
+          <div class="content-right">
+            <div class="content-right-scene">
+              <!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
+              <a-tooltip>
+                <template #title>{{ itemSonTitle.desc }}</template>
+                <div class="content-bottom">{{ itemSonTitle.desc }}</div>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用场景'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      dataFrom.value = obj
+      tabindex.value = dataFrom.value.attrValue[0].name
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '应用场景')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          dataFrom.value = obj
+          tabindex.value = dataFrom.value.attrValue[0].name
+        }
+      }
+    }
+  )
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '应用场景' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+  }
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize() {
+    return tabindex.value
+  }
+  //tab切换点击事件
+  function tabSwitch(name) {
+    tabindex.value = name
+    return tabindex.value
+  }
+</script>
+
+<style lang="less" scoped>
+  .function-intorduction {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          margin-right: 1rem;
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+            max-width: 2rem;
+            height: 0.24rem;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+          }
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+        .content-left {
+          position: absolute;
+          left: 0;
+          min-width: 6.2rem;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+          // text-align: center;
+          .content-top {
+            text-align: left;
+          }
+        }
+        .content-right {
+          width: 6.2rem;
+          height: 3.4rem;
+          position: absolute;
+          right: 0;
+          display: flex;
+          justify-content: center;
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 6;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Business/BusinessCommonProblem.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessCommonProblem.vue
@ -0,0 +1,123 @@
+<template>
+  <!-- 常见问题 -->
+  <div class="cpmmon-problem" v-if="flag">
+    <div class="title">
+      <DetalsTitle title="常见问题" type="Q&A"></DetalsTitle>
+    </div>
+    <div class="content">
+      <div v-for="(item, index) in dataFrom" :key="index" class="content-son">
+        <div class="content-top">
+          <div class="top-img"></div>
+          <div>{{ item.title }}</div>
+        </div>
+        <div class="content-bottom">
+          <div class="bottom-img"></div>
+          <div>{{ item.answer }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '常见问题'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      obj.attrValue.map((item) => {
+        let params = {
+          title: item.question,
+          answer: item.answer,
+        }
+        dataFrom.value.push(params)
+      })
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          obj.attrValue.map((item) => {
+            let params = {
+              title: item.question,
+              answer: item.answer,
+            }
+            dataFrom.value.push(params)
+          })
+        }
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .cpmmon-problem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 0.8rem;
+    background: #f7f8fa;
+    .content {
+      width: 13rem;
+      margin: 0.2rem 0rem;
+      background: #ffffff;
+      padding: 0.4rem;
+      .content-son {
+        font-size: 0.2rem;
+        margin-bottom: 0.6rem;
+        .content-top {
+          display: flex;
+          align-items: center;
+          margin-bottom: 0.2rem;
+          line-height: 0.2rem;
+        }
+        .content-bottom {
+          display: flex;
+          line-height: 0.34rem;
+          color: #666666;
+        }
+        .content-top,
+        .content-bottom {
+          div:last-child {
+            width: calc(100% - 0.54rem);
+          }
+        }
+        .top-img {
+          width: 0.34rem;
+          height: 0.3rem;
+          background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
+          background-position: center;
+          background-size: cover;
+          margin-right: 0.2rem;
+        }
+        .bottom-img {
+          width: 0.34rem;
+          height: 0.3rem;
+          background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
+          ackground-size: cover;
+          background-position: center;
+          margin-right: 0.2rem;
+        }
+      }
+      .content-son:last-child {
+        margin-bottom: 0rem;
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue
@ -0,0 +1,254 @@
+<!--功能介绍-->
+<template>
+  <div class="function-intorduction" v-if="flag">
+    <div class="application-scenarios-and-case-son">
+      <!-- {{ dataFrom.attrType }} -->
+      <div class="title">
+        <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)"
+          class="tab-son"
+          :class="
+            tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
+          "
+        >
+          <a-tooltip>
+            <template #title>{{ itemSonTitle.name }}</template>
+            <div
+              class="tab-top"
+              :class="
+                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+              "
+            >
+              {{ itemSonTitle.name }}
+            </div>
+          </a-tooltip>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize() == itemSonTitle.name"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
+        <div class="content" v-if="tabindex == itemSonTitle.name">
+          <div class="content-left">
+            <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
+            <a-image
+              :width="635"
+              :height="340"
+              :src="itemSonTitle.img"
+              v-if="itemSonTitle.img"
+            ></a-image>
+          </div>
+          <div class="content-right">
+            <div class="content-right-scene">
+              <!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
+              <a-tooltip>
+                <template #title>{{ itemSonTitle.desc }}</template>
+                <div class="content-bottom">{{ itemSonTitle.desc }}</div>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '功能介绍'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      dataFrom.value = obj
+      tabindex.value = dataFrom.value.attrValue[0].name
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          dataFrom.value = obj
+          tabindex.value = dataFrom.value.attrValue[0].name
+        }
+      }
+    }
+  )
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '功能介绍' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+  }
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize() {
+    return tabindex.value
+  }
+  //tab切换点击事件
+  function tabSwitch(name) {
+    tabindex.value = name
+    return tabindex.value
+  }
+</script>
+
+<style lang="less" scoped>
+  .function-intorduction {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 1rem;
+          text-align: center;
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+            max-width: 2rem;
+            height: 0.24rem;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+          }
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+        .content-left {
+          position: absolute;
+          left: 0;
+          min-width: 6.2rem;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+          // text-align: center;
+          .content-top {
+            text-align: left;
+          }
+        }
+        .content-right {
+          width: 6.2rem;
+          height: 3.4rem;
+          position: absolute;
+          right: 0;
+          display: flex;
+          justify-content: center;
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 6;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@ -0,0 +1,187 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 14:54:01
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-15 18:24:39
+ * @Description: 应用详情页导航
+-->
+<template>
+  <div class="business-navigation" v-if="navList.length > 0">
+    <template v-for="nav in navList" :key="nav.key">
+      <div
+        class="nav"
+        :class="{ select: nav.key == select }"
+        v-if="nav.show"
+        @click="selectNav(nav.key)"
+      >
+        {{ nav.name }}
+        <span class="line"></span>
+      </div>
+    </template>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  const navList = ref([
+    {
+      name: '组件展示',
+      key: 'business-presentation',
+    },
+    {
+      name: '功能介绍',
+      key: 'function-introduction',
+    },
+    {
+      name: '应用场景',
+      key: 'application-scenarios',
+    },
+    {
+      name: '应用案例',
+      key: 'application-case',
+    },
+    {
+      name: '使用方式',
+      key: 'business-usage-mode',
+    },
+    {
+      name: '常见问题',
+      key: 'common-problem',
+    },
+  ])
+  const props = defineProps({
+    selectNow: { type: String, default: '' },
+    dataList: { type: Object, default: null },
+  })
+  const select = ref('algorithm-display')
+  const list = ref([])
+  const selectNav = (key) => {
+    select.value = key
+    console.log(key, select.value)
+    mybus.emit('flyToView', select.value)
+  }
+  if (props.dataList.infoList) {
+    list.value = []
+    let arr = [
+      '组件视频介绍',
+      '功能介绍',
+      '应用场景',
+      '应用案例',
+      '使用方式',
+      '常见问题',
+    ]
+    // 排序
+    // eslint-disable-next-line vue/no-mutating-props
+    props.dataList.infoList.sort((a, b) => {
+      return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
+    })
+    props.dataList.infoList.map((item) => {
+      if (
+        item.attrType === '常见问题' ||
+        item.attrType === '功能介绍' ||
+        item.attrType === '应用场景' ||
+        item.attrType === '应用案例'
+      ) {
+        list.value.push(item.attrType)
+      } else if (item.attrType === '组件视频介绍') {
+        list.value.push('组件展示')
+      }
+    })
+    list.value.push('使用方式')
+    navList.value.forEach((item) => {
+      console.log(item)
+      if (list.value.indexOf(item.name) > -1) {
+        item.show = true
+      }
+    })
+    select.value = navList.value.filter(
+      (item) => item.name === list.value[0]
+    )[0].key
+    console.log('11111111111111111111111111', list.value, navList.value)
+  }
+  watch(
+    () => props.selectNow,
+    (newValue) => {
+      select.value = newValue
+    }
+  )
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        list.value = []
+        let arr = [
+          '组件视频介绍',
+          '功能介绍',
+          '应用场景',
+          '应用案例',
+          '使用方式',
+          '常见问题',
+        ]
+        // 排序
+        // eslint-disable-next-line vue/no-mutating-props
+        props.dataList.infoList.sort((a, b) => {
+          // console.log('排序==============>', a, b)
+          return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
+        })
+        val.infoList.map((item) => {
+          if (
+            item.attrType === '常见问题' ||
+            item.attrType === '功能介绍' ||
+            item.attrType === '应用场景' ||
+            item.attrType === '应用案例'
+          ) {
+            list.value.push(item.attrType)
+          } else if (item.attrType === '组件视频介绍') {
+            list.value.push('组件展示')
+          }
+        })
+        list.value.push('使用方式')
+        navList.value.forEach((item) => {
+          console.log(item)
+          if (list.value.indexOf(item.name) > -1) {
+            item.show = true
+          }
+        })
+        if (list.value.length > 0) {
+          select.value = navList.value.filter(
+            (item) => item.name === list.value[0]
+          )[0].key
+        }
+        console.log('11111111111111111111111111', list.value, navList.value)
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .business-navigation {
+    width: 19.12rem;
+    height: 0.84rem;
+    line-height: 0.8rem;
+    display: flex;
+    justify-content: space-around;
+    font-size: 0.24rem;
+    color: #666;
+    background: #fff;
+    padding: 0 3rem;
+    box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
+    position: relative;
+    .nav {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      .line {
+        width: 0.4rem;
+        height: 0.04rem;
+      }
+    }
+    .select {
+      color: #526aff;
+      .line {
+        background: #526aff;
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Business/BusinessPresentation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessPresentation.vue
@ -0,0 +1,134 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 15:25:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-14 11:30:52
+ * @Description: 应用展示  视频播放
+-->
+<template>
+  <div class="application-presentation" v-if="flag">
+    <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
+    <div
+      class="main"
+      :style="`${img}background-position:center;background-size:cover;`"
+    >
+      <!-- <a-image :src="img"></a-image> -->
+      <div class="play" @click="showModal"></div>
+    </div>
+    <a-modal
+      v-model:visible="visible"
+      title="视频预览"
+      :width="750"
+      destroyOnClose
+    >
+      <template #footer></template>
+      <div style="width: 100%; display: flex; justify-content: center">
+        <div style="width: 100%; height: 100%">
+          <vue3VideoPlay v-bind="options" />
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script setup>
+  import { ref, reactive, defineProps, watch } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const visible = ref(false)
+  const options = reactive({
+    width: '7.00rem', //播放器宽度
+    height: '4.00rem', //播放器高度
+    color: '#409eff', //主题色
+    title: '', //视频名称
+    src: '', //视频源
+    muted: false, //静音
+    webFullScreen: false,
+    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+    autoPlay: true, //自动播放
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制
+    controlBtns: [
+      'audioTrack',
+      'quality',
+      'speedRate',
+      'volume',
+      'setting',
+      'pip',
+      'pageFullScreen',
+      'fullScreen',
+    ], //显示所有按钮,
+  })
+  const showModal = () => {
+    visible.value = true
+  }
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  const img = ref({})
+  console.log('111111111111111111111,', props.dataList)
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '组件视频介绍'
+    )[0]
+    console.log('视频==============>', obj)
+    if (!obj) {
+      flag.value = false
+    } else {
+      let imgindex = props.dataList.infoList.filter(
+        (item) => item.attrType === '组件图片'
+      )[0]
+      options.src = obj.attrValue
+      if (imgindex) {
+        img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+      }
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter(
+          (item) => item.attrType === '组件视频介绍'
+        )[0]
+        console.log('视频==============>', obj)
+        if (!obj) {
+          flag.value = false
+        } else {
+          let imgindex = props.dataList.infoList.filter(
+            (item) => item.attrType === '组件图片'
+          )[0]
+          options.src = obj.attrValue
+          if (imgindex) {
+            img.value =
+              'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+          }
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .application-presentation {
+    padding: 0.8rem 3rem 0;
+    .main {
+      height: 3.4rem;
+      border-radius: 0.1rem;
+      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
+      background-size: 100%;
+      margin-top: 0.4rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .play {
+        width: 0.96rem;
+        height: 0.96rem;
+        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
+        background-size: 100%;
+        cursor: pointer;
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@ -0,0 +1,219 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:56:28
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-14 11:31:12
+ * @Description: 算法详情页头部
+-->
+<template>
+  <div class="algorithm-top-details">
+    <div class="left">
+      <div class="top">
+        <span class="name">{{ props.dataList.name }}</span>
+        <div class="label-content">
+          <p class="lable-father">
+            <span class="label">
+              {{ componentType || props.dataList.type }}
+            </span>
+            <span class="label">{{ props.dataList.shareType }}</span>
+            <span class="label">{{ props.dataList.shareCondition }}</span>
+          </p>
+        </div>
+        <!-- <span class="label">免费</span> -->
+      </div>
+      <div class="main">
+        <div>应用领域：{{ businessArea }}</div>
+        <!-- 应用描述 -->
+        <div>
+          {{ props.dataList.description }}
+        </div>
+      </div>
+      <div class="bottom" v-if="props.dataList.id">
+        <!-- <a-button type="primary" @click="toView()">
+          <template #icon><form-outlined /></template>
+          申请使用
+        </a-button>
+        <a-button type="primary" @click="addShoppingCart()">
+          <template #icon><shopping-cart-outlined /></template>
+          加入购物车
+        </a-button> -->
+        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
+      </div>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+<script setup>
+  // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+  import { defineProps, ref, watch } from 'vue'
+  import { scInsert } from '@/api/personalCenter'
+  // import { sgcInsert } from '@/api/home'
+  // import { useRouter } from 'vue-router'
+  // import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  // const router = useRouter()
+  const businessArea = ref('')
+  // // 加入申购车
+  // const addShoppingCart = () => {
+  //   console.log('加入申购车==================>', props.dataList)
+  //   sgcInsert({
+  //     delFlag: '0',
+  //     resourceId: props.dataList.id,
+  //     // userId: userId.value,
+  //   }).then((res) => {
+  //     console.log(res)
+  //     message.success('添加申购车成功！')
+  //     mybus.emit('getSgcNum')
+  //   })
+  // }
+  // // 立即申请
+  // function toView() {
+  //   // window.open(newpage.href, '_blank')
+  //   router.push({
+  //     path: '/apply',
+  //     query: {
+  //       name: props.dataList.name,
+  //       resourceId: [props.dataList.id],
+  //     },
+  //   })
+  // }
+  // 收藏
+  const goTOCollection = () => {
+    console.log('收藏===================》', props.dataList)
+    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+      console.log(res)
+      message.success('收藏成功')
+    })
+  }
+  const componentType = ref('')
+  if (props.dataList.infoList) {
+    businessArea.value = props.dataList.infoList.filter(
+      (val) => val.attrType === '应用领域'
+    )[0].attrValue
+    let obj = props.dataList.infoList.filter(
+      (val) => val.attrType === '组件类型'
+    )[0]
+    if (obj) {
+      componentType.value = obj.attrValue
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        businessArea.value = props.dataList.infoList.filter(
+          (val) => val.attrType === '应用领域'
+        )[0].attrValue
+        let obj = props.dataList.infoList.filter(
+          (val) => val.attrType === '组件类型'
+        )[0]
+        if (obj) {
+          componentType.value = obj.attrValue
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .algorithm-top-details {
+    height: 6rem;
+    padding: 1.8rem 0 0;
+    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    .left {
+      max-width: 7.2rem;
+      color: #fff;
+      margin-right: 0.8rem;
+
+      .top {
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 0.14rem;
+        }
+        .name {
+          // max-width: 3.3rem;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+        }
+        .label-content {
+          position: relative;
+        }
+        .lable-father {
+          position: absolute;
+          min-width: 2.5rem;
+          right: -2.5rem;
+          top: 0;
+        }
+        .label {
+          padding: 0.01rem 0.1rem;
+          margin-right: 0.1rem;
+          border-radius: 0.13rem;
+          background: rgba(255, 255, 255, 0.4);
+        }
+      }
+      .main {
+        margin-top: 0.2rem;
+        font-size: 0.18rem;
+        line-height: 0.34rem;
+        & > div:nth-of-type(1) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > div:nth-of-type(2) {
+          max-height: 1rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .bottom {
+        margin-top: 0.4rem;
+        display: flex;
+        .ant-btn {
+          height: 0.5rem;
+          margin-right: 0.2rem;
+          background: #ffffff;
+          border-radius: 0.06rem;
+          font-size: 0.2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .ant-btn-primary {
+          color: #1890ff;
+        }
+        .ant-btn:nth-of-type(1) {
+          width: 1.8rem;
+        }
+        .ant-btn:nth-of-type(2) {
+          width: 2.2rem;
+        }
+        .ant-btn:nth-of-type(3) {
+          width: 1.45rem;
+          background: #fff;
+          color: #526aff;
+        }
+      }
+    }
+    .right {
+      width: 5.8rem;
+      height: 4rem;
+      background: url('~@/assets/detailsAll/business/business_right_bg.png')
+        no-repeat;
+      background-size: 100%;
+      margin-top: -0.4rem;
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
@ -0,0 +1,305 @@
+<template>
+  <!-- 使用方式 -->
+  <div class="usage-mode" v-if="flag">
+    <div class="tltle">
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
+    </div>
+    <div class="content" v-for="item in dataFrom.content" :key="item.title">
+      <div class="content-left">
+        <div class="left">
+          <div class="content-left-title">
+            <span>{{ item.title }}</span>
+          </div>
+          <div class="content-left-content">
+            <p>
+              <span>{{ item.link.name }}</span>
+              <span>{{ item.linkValue }}</span>
+            </p>
+          </div>
+        </div>
+        <div class="right">
+          <div @click="technical()">技术文档</div>
+          <div @click="technicalNew()">新手指引</div>
+        </div>
+      </div>
+      <div class="content-right">
+        <div class="content-right-left">
+          <div class="content-right-title">{{ item.contact }}</div>
+          <div class="content-right-content">
+            <p>
+              <span>{{ item.people.name }}</span>
+              <a-tooltip>
+                <template #title>{{ item.people.value }}</template>
+                <span>{{ item.people.value }}</span>
+              </a-tooltip>
+            </p>
+            <p>
+              <span>{{ item.phone.name }}</span>
+              <a-tooltip>
+                <template #title>{{ item.phone.value }}</template>
+                <span>{{ item.phone.value }}</span>
+              </a-tooltip>
+            </p>
+          </div>
+        </div>
+        <div class="content-right-right">
+          <div class="content-right-title">{{ item.contact2 }}</div>
+          <div class="content-right-content">
+            <p>
+              <span>{{ item.people2.name }}</span>
+              <a-tooltip>
+                <template #title>{{ item.people2.value }}</template>
+                <span>{{ item.people2.value }}</span>
+              </a-tooltip>
+            </p>
+            <p>
+              <span>{{ item.phone2.name }}</span>
+              <a-tooltip>
+                <template #title>{{ item.phone2.value }}</template>
+                <span>{{ item.phone2.value }}</span>
+              </a-tooltip>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { pinyin } from 'pinyin-pro'
+  import { ref, defineProps, watch } from 'vue'
+  let dataFrom = ref({
+    title: '使用方式',
+    englishTitle: 'USAGE',
+    content: [
+      {
+        title: '组件地址',
+        link: {
+          name: '接口地址：',
+        },
+        linkValue: '',
+        contact: '归属部门',
+        facilitator: { name: '归属部门：', value: '讯飞科大' },
+        people: { name: '部门联系人：', value: '李四' },
+        phone: {
+          name: '联系人电话：',
+          value: '12345678901',
+        },
+        contact2: '服务商',
+        facilitator2: { name: '服务商：', value: '科大讯飞' },
+        people2: { name: '服务商联系人：', value: '李四' },
+        phone2: {
+          name: '联系人电话：',
+          value: '1234567890',
+        },
+      },
+    ],
+  })
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '技术文档'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      dataFrom.value.content[0].link.value = props.dataList.apiUrl
+      dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
+      console.log('dataList', props.dataList)
+      props.dataList.infoList.map((item) => {
+        if (item.attrType === '组件地址') {
+          dataFrom.value.content[0].linkValue = item.attrValue || '--'
+        } else if (item.attrType === '服务商') {
+          dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
+        } else if (item.attrType === '服务商联系人') {
+          dataFrom.value.content[0].people.value = item.attrValue || '--'
+        } else if (item.attrType === '服务商联系电话') {
+          dataFrom.value.content[0].phone.value = item.attrValue || '--'
+        }
+      })
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '技术文档')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          dataFrom.value.content[0].link.value = val.apiUrl
+          dataFrom.value.content[0].facilitator.value = val.deptContacts
+          console.log('dataList', val)
+          val.infoList.map((item) => {
+            if (item.attrType === '组件地址') {
+              dataFrom.value.content[0].linkValue = item.attrValue || '--'
+            } else if (item.attrType === '服务商') {
+              dataFrom.value.content[0].facilitator.value =
+                item.attrValue || '--'
+            } else if (item.attrType === '服务商联系人') {
+              dataFrom.value.content[0].people.value = item.attrValue || '--'
+            } else if (item.attrType === '服务商联系电话') {
+              dataFrom.value.content[0].phone.value = item.attrValue || '--'
+            }
+          })
+        }
+      }
+    }
+  )
+  function technical() {
+    // 拼接路径
+    const type = pinyin(props.dataList.type, {
+      pattern: 'initial',
+    }).replace(/\s*/g, '')
+    // 打开文档
+    const id = props.dataList.id
+    window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    // console.log('dataFrom.value.link', dataFrom.value.link)
+    // window.open(
+    //   window.SITE_CONFIG.previewUrl +
+    //     'hisense_office/onlinePreview?url=' +
+    //     btoa(encodeURI(dataFrom.value.link))
+    // )
+  }
+  function technicalNew() {
+    // 拼接路径
+    // const type = pinyin(props.dataList.type, {
+    //   pattern: 'initial',
+    // }).replace(/\s*/g, '')
+    // // 打开文档
+    // const id = props.dataList.id
+    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    console.log('dataFrom.value.link', dataFrom.value.link)
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(dataFrom.value.link))
+    )
+  }
+</script>
+
+<style lang="less" scoped>
+  .usage-mode {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.8rem 0;
+    .content {
+      margin-top: 0.3rem;
+      display: flex;
+      .content-left {
+        height: 1.5rem;
+        width: 6.2rem;
+        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
+          no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        border-radius: 0.1rem;
+        margin-right: 0.6rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 0.35rem;
+        .left {
+          .content-left-title {
+            font-size: 0.26rem;
+            line-height: 0.26rem;
+            color: #212956;
+            margin-bottom: 0.2rem;
+            span:first-child {
+              margin-right: 0.1rem;
+            }
+          }
+          .content-left-content {
+            width: 4.2rem;
+            font-size: 0.2rem;
+            color: rgba(33, 41, 86, 0.8);
+            line-height: 0.2rem;
+            p {
+              display: -webkit-box;
+              overflow: hidden;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              margin-bottom: 0.1rem;
+            }
+          }
+        }
+        .right {
+          div {
+            height: 0.4rem;
+            width: 1.3rem;
+            background: #ffffff;
+            border-radius: 0.2rem;
+            color: #526aff;
+            font-size: 0.2rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+          }
+          div:first-child {
+            margin-bottom: 0.2rem;
+          }
+        }
+      }
+      .content-right {
+        height: 1.5rem;
+        width: 6.2rem;
+        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
+          no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        border-radius: 0.1rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        padding: 0 0.3rem;
+        .content-right-left {
+          border-right: 0.01rem solid #707fe0;
+          padding-right: 0.1rem;
+          margin-right: 0.1rem;
+        }
+        .content-right-title {
+          font-size: 0.26rem;
+          line-height: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.15rem;
+        }
+        .content-right-content {
+          display: flex;
+          font-size: 0.18rem;
+          color: rgba(33, 41, 86, 0.8);
+          line-height: 0.2rem;
+          overflow: hidden;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          flex-direction: column;
+          p {
+            // width: 1.60rem;
+            height: 0.2rem;
+            display: -webkit-box;
+            // overflow: hidden;
+            white-space: nowrap;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            margin-right: 0.15rem;
+            span {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperApplicationCase.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperApplicationCase.vue
@ -0,0 +1,307 @@
+<!-- 应用案例 -->
+<template>
+  <div class="application-scenarios-and-case" v-if="flag">
+    <div
+      class="application-scenarios-and-case-son"
+      v-for="item in dataFrom"
+      :key="item.title"
+    >
+      <div class="title">
+        <DetalsTitle
+          :title="item.title"
+          :type="item.englishTitle"
+        ></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in item.content"
+          :key="itemSonTitle.title"
+          @click="tabSwitch(itemSonTitle.title, item.title)"
+          class="tab-son"
+          :class="tabIndexClass(indexSonTitle, item.title, item.content)"
+        >
+          <div
+            class="tab-top"
+            :class="
+              tabInitialize(item.title) == itemSonTitle.title
+                ? 'tab-top-down'
+                : ''
+            "
+          >
+            {{ itemSonTitle.title }}
+          </div>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize(item.title) == itemSonTitle.title"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in item.content" :key="itemSonTitle">
+        <div
+          class="content"
+          v-if="tabInitialize(item.title) == itemSonTitle.title"
+        >
+          <div :class="contentLocation(0, item.title)">
+            <div
+              :class="
+                item.title == '应用场景'
+                  ? 'content-left-scene'
+                  : 'content-left-case'
+              "
+            ></div>
+          </div>
+          <div :class="contentLocation(1, item.title)">
+            <div
+              :class="
+                item.title == '应用场景'
+                  ? 'content-right-scene'
+                  : 'content-right-case'
+              "
+            >
+              <div class="content-top">{{ itemSonTitle.title }}</div>
+              <div class="content-bottom">{{ itemSonTitle.content }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  let dataFrom = ref([
+    {
+      title: '应用案例',
+      englishTitle: 'CASE',
+      content: [
+        {
+          title: '应用案例一',
+          content:
+            '应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例二',
+          content:
+            '应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例三',
+          content:
+            '应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例四',
+          content:
+            '应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例五',
+          content:
+            '应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例六',
+          content:
+            '应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+        {
+          title: '应用案例七',
+          content:
+            '应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
+        },
+      ],
+    },
+  ])
+  const flag = ref(true)
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用案例'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '应用案例')[0]
+        if (!obj) {
+          flag.value = false
+        }
+      }
+    }
+  )
+  const { log } = console
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '应用场景' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+    if (title == '应用案例' && index == 0 && content.length > 6) {
+      return 'tab-son-class-two'
+    }
+  }
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  let tabindexCase = ref('应用案例一')
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize(title) {
+    if (title == '应用场景') {
+      return tabindex.value
+    } else {
+      return tabindexCase.value
+    }
+  }
+  //tab切换点击事件
+  function tabSwitch(name, title) {
+    if (title == '应用场景') {
+      tabindex.value = name
+      return tabindex.value
+    } else {
+      tabindexCase.value = name
+      return tabindexCase.value
+    }
+  }
+  //内容位置初始化
+  function contentLocation(index, title) {
+    log(index, title)
+    if (index == 0) {
+      if (title == '应用场景') {
+        return 'content-right'
+      } else {
+        return 'content-left'
+      }
+    } else {
+      if (title == '应用场景') {
+        return 'content-left'
+      } else {
+        return 'content-right'
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .application-scenarios-and-case {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 80px;
+      padding-bottom: 80px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 1300px;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 1px #e4e6f5 solid;
+        margin-top: 45px;
+        margin-bottom: 40px;
+        cursor: pointer;
+        padding-left: 40px;
+        padding-right: 40px;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 100px;
+          .tab-top {
+            min-width: 120px;
+            font-size: 24px;
+            line-height: 24px;
+            margin-bottom: 20px;
+          }
+          .tab-top-down {
+            min-width: 120px;
+            color: #526aff;
+            margin-bottom: 16px;
+          }
+          .tab-bottom {
+            height: 4px;
+            width: 60px;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 430px;
+          margin-bottom: 2px;
+        }
+        .tab-son-class-two {
+          margin-left: 230px;
+          margin-bottom: 2px;
+        }
+        .tab-son:last-child {
+          margin-right: 0px;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 1300px;
+        height: 340px;
+        .content-left {
+          position: absolute;
+          left: 0;
+        }
+        .content-right {
+          position: absolute;
+          right: 0;
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 620px;
+          height: 340px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 340px;
+          width: 635px;
+          border-radius: 10px;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 635px 340px;
+        }
+        .content-top {
+          font-size: 22px;
+          line-height: 22px;
+          color: #000000;
+          margin-bottom: 35px;
+        }
+        .content-bottom {
+          font-size: 18px;
+          color: #999999;
+          line-height: 26px;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 5;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 100px;
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
@ -0,0 +1,276 @@
+<!-- 应用场景-->
+<template>
+  <div class="application-scenarios-and-case" v-if="flag">
+    <div class="application-scenarios-and-case-son">
+      <!-- {{ dataFrom.attrType }} -->
+      <div class="title">
+        <DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)"
+          class="tab-son"
+          :class="
+            tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
+          "
+        >
+          <a-tooltip>
+            <template #title>{{ itemSonTitle.name }}</template>
+            <div
+              class="tab-top"
+              :class="
+                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+              "
+            >
+              {{ itemSonTitle.name }}
+            </div>
+          </a-tooltip>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize() == itemSonTitle.name"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
+        <div class="content" v-if="tabindex == itemSonTitle.name">
+          <div class="content-right">
+            <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
+            <a-image
+              :width="635"
+              :height="340"
+              :src="itemSonTitle.img"
+              v-if="itemSonTitle.img"
+            ></a-image>
+          </div>
+          <div :class="contentLocation(1, dataFrom.attrType)">
+            <div class="content-right-scene" :class="'content-right-case'">
+              <div class="content-top">{{ itemSonTitle.name }}</div>
+              <a-tooltip>
+                <template #title>{{ itemSonTitle.desc }}</template>
+                <div class="content-bottom">{{ itemSonTitle.desc }}</div>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    debugger
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用场景'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      debugger
+      dataFrom.value = obj
+      tabindex.value = dataFrom.value.attrValue[0].name
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '应用场景')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          dataFrom.value = obj
+          tabindex.value = dataFrom.value.attrValue[0].name
+        }
+      }
+    }
+  )
+  const { log } = console
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '应用场景' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+    if (title == '应用案例' && index == 0 && content.length > 6) {
+      return 'tab-son-class-two'
+    }
+  }
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize() {
+    return tabindex.value
+  }
+  //tab切换点击事件
+  function tabSwitch(name) {
+    tabindex.value = name
+    return tabindex.value
+  }
+  //内容位置初始化
+  function contentLocation(index, title) {
+    log(index, title)
+    if (index == 0) {
+      if (title == '应用场景') {
+        return 'content-right'
+      } else {
+        return 'content-left'
+      }
+    } else {
+      if (title == '应用场景') {
+        return 'content-left'
+      } else {
+        return 'content-right'
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .application-scenarios-and-case {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 80px;
+      padding-bottom: 80px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 1300px;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 1px #e4e6f5 solid;
+        margin-top: 45px;
+        margin-bottom: 40px;
+        cursor: pointer;
+        padding-left: 40px;
+        padding-right: 40px;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 100px;
+          .tab-top {
+            min-width: 120px;
+            font-size: 24px;
+            line-height: 24px;
+            margin-bottom: 20px;
+            max-width: 200px;
+            height: 24px;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+          }
+          .tab-top-down {
+            min-width: 120px;
+            color: #526aff;
+            margin-bottom: 16px;
+          }
+          .tab-bottom {
+            height: 4px;
+            width: 60px;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 430px;
+          margin-bottom: 2px;
+        }
+        .tab-son-class-two {
+          margin-left: 230px;
+          margin-bottom: 2px;
+        }
+        .tab-son:last-child {
+          margin-right: 0px;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 1300px;
+        height: 340px;
+        .content-left {
+          position: absolute;
+          left: 0;
+          min-width: 620px;
+          // text-align: center;
+          .content-top {
+            text-align: left;
+          }
+        }
+        .content-right {
+          width: 620px;
+          height: 340px;
+          position: absolute;
+          right: 0;
+          display: flex;
+          justify-content: center;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 620px;
+          height: 340px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 340px;
+          width: 635px;
+          border-radius: 10px;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 635px 340px;
+        }
+        .content-top {
+          font-size: 22px;
+          line-height: 22px;
+          color: #000000;
+          margin-bottom: 35px;
+        }
+        .content-bottom {
+          font-size: 18px;
+          color: #999999;
+          line-height: 26px;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 6;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 100px;
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperCommonProblem.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperCommonProblem.vue
@ -0,0 +1,123 @@
+<template>
+  <!-- 常见问题 -->
+  <div class="cpmmon-problem" v-if="flag">
+    <div class="title">
+      <DetalsTitle title="常见问题" type="Q&A"></DetalsTitle>
+    </div>
+    <div class="content">
+      <div v-for="(item, index) in dataFrom" :key="index" class="content-son">
+        <div class="content-top">
+          <div class="top-img"></div>
+          <div>{{ item.title }}</div>
+        </div>
+        <div class="content-bottom">
+          <div class="bottom-img"></div>
+          <div>{{ item.answer }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '常见问题'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      obj.attrValue.map((item) => {
+        let params = {
+          title: item.question,
+          answer: item.answer,
+        }
+        dataFrom.value.push(params)
+      })
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          obj.attrValue.map((item) => {
+            let params = {
+              title: item.question,
+              answer: item.answer,
+            }
+            dataFrom.value.push(params)
+          })
+        }
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .cpmmon-problem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 80px;
+    background: #f7f8fa;
+    .content {
+      width: 1300px;
+      margin: 20px 0px;
+      background: #ffffff;
+      padding: 40px;
+      .content-son {
+        font-size: 20px;
+        margin-bottom: 60px;
+        .content-top {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+          line-height: 20px;
+        }
+        .content-bottom {
+          display: flex;
+          line-height: 34px;
+          color: #666666;
+        }
+        .content-top,
+        .content-bottom {
+          div:last-child {
+            width: calc(100% - 54px);
+          }
+        }
+        .top-img {
+          width: 34px;
+          height: 30px;
+          background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
+          background-position: center;
+          background-size: cover;
+          margin-right: 20px;
+        }
+        .bottom-img {
+          width: 34px;
+          height: 30px;
+          background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
+          ackground-size: cover;
+          background-position: center;
+          margin-right: 20px;
+        }
+      }
+      .content-son:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue
@ -0,0 +1,254 @@
+<!--功能介绍-->
+<template>
+  <div class="function-intorduction" v-if="flag">
+    <div class="application-scenarios-and-case-son">
+      <!-- {{ dataFrom.attrType }} -->
+      <div class="title">
+        <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)"
+          class="tab-son"
+          :class="
+            tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
+          "
+        >
+          <a-tooltip>
+            <template #title>{{ itemSonTitle.name }}</template>
+            <div
+              class="tab-top"
+              :class="
+                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+              "
+            >
+              {{ itemSonTitle.name }}
+            </div>
+          </a-tooltip>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize() == itemSonTitle.name"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
+        <div class="content" v-if="tabindex == itemSonTitle.name">
+          <div class="content-left">
+            <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
+            <a-image
+              :width="635"
+              :height="340"
+              :src="itemSonTitle.img"
+              v-if="itemSonTitle.img"
+            ></a-image>
+          </div>
+          <div class="content-right">
+            <div class="content-right-scene">
+              <div class="content-top">{{ itemSonTitle.name }}</div>
+              <a-tooltip>
+                <template #title>{{ itemSonTitle.desc }}</template>
+                <div class="content-bottom">{{ itemSonTitle.desc }}</div>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '功能介绍'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      dataFrom.value = obj
+      tabindex.value = dataFrom.value.attrValue[0].name
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          dataFrom.value = obj
+          tabindex.value = dataFrom.value.attrValue[0].name
+        }
+      }
+    }
+  )
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '功能介绍' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+  }
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize() {
+    return tabindex.value
+  }
+  //tab切换点击事件
+  function tabSwitch(name) {
+    tabindex.value = name
+    return tabindex.value
+  }
+</script>
+
+<style lang="less" scoped>
+  .function-intorduction {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 1rem;
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+            text-align: center;
+            max-width: 2rem;
+            height: 0.24rem;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+          }
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+        .content-left {
+          position: absolute;
+          left: 0;
+          min-width: 6.2rem;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+          // text-align: center;
+          .content-top {
+            text-align: left;
+          }
+        }
+        .content-right {
+          width: 6.2rem;
+          height: 3.4rem;
+          position: absolute;
+          right: 0;
+          display: flex;
+          justify-content: center;
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 6;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
@ -0,0 +1,163 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 14:54:01
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-15 18:24:39
+ * @Description: 应用详情页导航
+-->
+<template>
+  <div class="application-navigation" v-if="navList.length > 0">
+    <template v-for="nav in navList" :key="nav.key">
+      <div
+        class="nav"
+        :class="{ select: nav.key == select }"
+        v-if="nav.show"
+        @click="selectNav(nav.key)"
+      >
+        {{ nav.name }}
+        <span class="line"></span>
+      </div>
+    </template>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  const navList = ref([
+    {
+      name: '组件展示',
+      key: 'eveloper-presentation',
+    },
+    {
+      name: '功能介绍',
+      key: 'function-introduction',
+    },
+    {
+      name: '应用场景',
+      key: 'application-scenarios',
+    },
+    {
+      name: '应用案例',
+      key: 'application-case',
+    },
+    {
+      name: '组件试用',
+      key: 'developer-trial',
+    },
+    {
+      name: '使用方式',
+      key: 'department-and-service-provider',
+    },
+    {
+      name: '常见问题',
+      key: 'common-problem',
+    },
+  ])
+  const props = defineProps({
+    selectNow: { type: String, default: '' },
+    dataList: { type: Object, default: null },
+  })
+  const select = ref('algorithm-display')
+  const list = ref([])
+  const selectNav = (key) => {
+    select.value = key
+    mybus.emit('flyToView', select.value)
+  }
+  if (props.dataList.infoList) {
+    list.value = []
+    props.dataList.infoList.map((item) => {
+      debugger
+      if (
+        item.attrType === '常见问题' ||
+        item.attrType === '应用案例' ||
+        item.attrType === '应用场景'
+      ) {
+        list.value.push(item.attrType)
+      } else if (item.attrType === '组件视频介绍') {
+        list.value.push('组件展示')
+      }
+    })
+    navList.value.forEach((item) => {
+      console.log(item)
+      if (list.value.indexOf(item.name) > -1) {
+        item.show = true
+      }
+    })
+    select.value = navList.value.filter(
+      (item) => item.name === list.value[0]
+    )[0].key
+    console.log('11111111111111111111111111', list.value, navList.value)
+  }
+  watch(
+    () => props.selectNow,
+    (newValue) => {
+      select.value = newValue
+    }
+  )
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        list.value = []
+        val.infoList.map((item) => {
+          if (
+            item.attrType === '功能介绍' ||
+            item.attrType === '常见问题' ||
+            item.attrType === '应用案例' ||
+            item.attrType === '应用场景'
+          ) {
+            list.value.push(item.attrType)
+          } else if (item.attrType === '组件视频介绍') {
+            list.value.push('组件展示')
+          }
+        })
+        list.value.push('组件试用')
+        list.value.push('使用方式')
+        navList.value.forEach((item) => {
+          console.log(item)
+          if (list.value.indexOf(item.name) > -1) {
+            item.show = true
+          }
+        })
+        if (list.value.length > 0) {
+          select.value = navList.value.filter(
+            (item) => item.name === list.value[0]
+          )[0].key
+        }
+        console.log('11111111111111111111111111', list.value, navList.value)
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .application-navigation {
+    width: 19.12rem;
+    height: 0.84rem;
+    line-height: 0.8rem;
+    display: flex;
+    justify-content: space-around;
+    font-size: 0.24rem;
+    color: #666;
+    background: #fff;
+    padding: 0 3rem;
+    box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
+    position: relative;
+    .nav {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      .line {
+        width: 0.4rem;
+        height: 0.04rem;
+      }
+    }
+    .select {
+      color: #526aff;
+      .line {
+        background: #526aff;
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
@ -0,0 +1,276 @@
+<!--使用方式-->
+<template>
+  <div class="application-deployment-and-security" v-if="flag">
+    <div class="title">
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
+    </div>
+    <div class="content">
+      <div class="content-card">
+        <div class="left">
+          <p>{{ dataFrom.linkName }}</p>
+          <a-tooltip>
+            <template #title>{{ dataFrom.link }}</template>
+            <p>{{ dataFrom.link }}</p>
+          </a-tooltip>
+        </div>
+        <div class="right">
+          <div @click="technical()">技术文档</div>
+          <div @click="technicaltow()">新手指引</div>
+        </div>
+      </div>
+      <div class="content-card">
+        <div v-for="(item, index) in dataFrom.content" :key="index">
+          <div class="card-title">{{ item.childrenTitle }}</div>
+          <div class="card-content">
+            <div v-for="carditem in item.childrenContent" :key="carditem">
+              <div>
+                <span>{{ carditem.attrType }}：</span>
+                <a-tooltip>
+                  <template #title>{{ carditem.attrValue }}</template>
+                  <span>{{ carditem.attrValue }}</span>
+                </a-tooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  import { pinyin } from 'pinyin-pro'
+  let flag = ref(true)
+  let dataFrom = ref({
+    title: '使用方式',
+    englishTitle: 'USAGE',
+    linkName: '组件地址',
+    link: '',
+    content: [
+      {
+        childrenTitle: '归属部门',
+        childrenContent: [
+          {
+            attrType: '部门联系人',
+            attrValue: '------',
+          },
+          {
+            attrType: '联系人电话',
+            attrValue: '------',
+          },
+        ],
+      },
+      {
+        childrenTitle: '服务商信息',
+        childrenContent: [
+          {
+            attrType: '服务商联系人',
+            attrValue: '------',
+          },
+          {
+            attrType: '联系人电话',
+            attrValue: '------',
+          },
+        ],
+      },
+    ],
+  })
+  console.log(dataFrom.value)
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '组件地址'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      dataFrom.value.content[0].childrenContent[0].attrValue =
+        props.dataList.deptContacts
+      dataFrom.value.content[0].childrenContent[1].attrValue =
+        props.dataList.deptPhone
+      props.dataList.infoList.map((item) => {
+        if (item.attrType == '组件地址') {
+          dataFrom.value.link = item.attrValue
+        } else if (item.attrType == '服务商联系人') {
+          dataFrom.value.content[1].childrenContent[0].attrValue =
+            item.attrValue
+        } else if (item.attrType == '服务商联系电话') {
+          dataFrom.value.content[1].childrenContent[1].attrValue =
+            item.attrValue
+        }
+      })
+    }
+  }
+  console.log('obj', dataFrom.value)
+  //技术文档
+  function technical() {
+    // 拼接路径
+    const type = pinyin(props.dataList.type, {
+      pattern: 'initial',
+    }).replace(/\s*/g, '')
+    // 打开文档
+    const id = props.dataList.id
+    window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    // console.log('dataFrom.value.link', dataFrom.value.link)
+    // window.open(
+    //   window.SITE_CONFIG.previewUrl +
+    //     'hisense_office/onlinePreview?url=' +
+    //     btoa(encodeURI(dataFrom.value.link))
+    // )
+  }
+  function technicaltow() {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '使用手册'
+    )[0]
+    console.log('dataFrom.value.link', obj.attrValue)
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(obj.attrValue))
+    )
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '组件地址')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          dataFrom.value.content[0].childrenContent[0].attrValue =
+            props.dataList.deptContacts
+          dataFrom.value.content[0].childrenContent[1].attrValue =
+            props.dataList.deptPhone
+          props.dataList.infoList.map((item) => {
+            if (item.attrType == '组件地址') {
+              dataFrom.value.link = item.attrValue
+            } else if (item.attrType == '服务商联系人') {
+              dataFrom.value.content[1].childrenContent[0].attrValue =
+                item.attrValue
+            } else if (item.attrType == '服务商联系电话') {
+              dataFrom.value.content[1].childrenContent[1].attrValue =
+                item.attrValue
+            }
+          })
+        }
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-deployment-and-security {
+    padding: 0.8rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .title {
+      margin-bottom: 0.3rem;
+    }
+    .content {
+      display: flex;
+      width: 13rem;
+      justify-content: space-between;
+      .content-card {
+        height: 1.5rem;
+        width: 6.2rem;
+        border-radius: 0.2rem;
+        background: linear-gradient(
+          to right,
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        padding: 0 0.3rem;
+        display: flex;
+        align-items: center;
+        & > div {
+          height: 0.9rem;
+          width: 3.1rem;
+          padding-left: 0.3rem;
+        }
+        & > div:first-child {
+          padding-left: 0;
+          border-right: 0.01rem solid #b0b9f1;
+        }
+        .card-title {
+          font-size: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+          line-height: 0.26rem;
+        }
+        .card-content {
+          white-space: nowrap;
+          div {
+            display: inline-block;
+            margin-right: 0.2rem;
+            color: rgba(33, 41, 86, 0.8);
+            font-size: 0.2rem;
+            max-width: 2.8rem;
+            div {
+              max-width: 2.8rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+            }
+          }
+          div:first-child {
+            display: block;
+          }
+        }
+      }
+      .content-card:first-child {
+        position: relative;
+        .left {
+          border: 0;
+          p:first-child {
+            font-size: 0.26rem;
+            color: #212956;
+            margin-bottom: 0.2rem;
+            line-height: 0.26rem;
+          }
+          p:last-child {
+            font-size: 0.2rem;
+            color: #212956;
+            line-height: 0.26rem;
+            max-width: 4.5rem;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+        }
+        .right {
+          position: absolute;
+          right: 0.6rem;
+          top: 50%;
+          width: 1.28rem;
+          margin-top: -0.45rem;
+          cursor: pointer;
+          & > div {
+            width: 1.28rem;
+            height: 0.4rem;
+            background: #ffffff;
+            border-radius: 0.2rem;
+            font-size: 0.2rem;
+            color: #526aff;
+            text-align: center;
+            line-height: 0.4rem;
+          }
+          & > div:first-child {
+            margin-bottom: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue
@ -0,0 +1,133 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 15:25:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-14 11:30:52
+ * @Description: 应用展示  视频播放
+-->
+<template>
+  <div class="application-presentation" v-if="flag">
+    <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
+    <div
+      class="main"
+      :style="`${img}background-position:center;background-size:cover;`"
+    >
+      <div class="play" @click="showModal"></div>
+    </div>
+    <a-modal
+      v-model:visible="visible"
+      title="视频预览"
+      :width="750"
+      destroyOnClose
+    >
+      <template #footer></template>
+      <div style="width: 100%; display: flex; justify-content: center">
+        <div style="width: 100%; height: 100%">
+          <vue3VideoPlay v-bind="options" />
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script setup>
+  import { ref, reactive, defineProps, watch } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const visible = ref(false)
+  const options = reactive({
+    width: '7.00rem', //播放器宽度
+    height: '4.00rem', //播放器高度
+    color: '#409eff', //主题色
+    title: '', //视频名称
+    src: '', //视频源
+    muted: false, //静音
+    webFullScreen: false,
+    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+    autoPlay: true, //自动播放
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制
+    controlBtns: [
+      'audioTrack',
+      'quality',
+      'speedRate',
+      'volume',
+      'setting',
+      'pip',
+      'pageFullScreen',
+      'fullScreen',
+    ], //显示所有按钮,
+  })
+  const showModal = () => {
+    visible.value = true
+  }
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  const img = ref({})
+  console.log('111111111111111111111,', props.dataList)
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '组件视频介绍'
+    )[0]
+    console.log('视频==============>', obj)
+    if (!obj) {
+      flag.value = false
+    } else {
+      let imgindex = props.dataList.infoList.filter(
+        (item) => item.attrType === '组件图片'
+      )[0]
+      options.src = obj.attrValue
+      if (imgindex) {
+        img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+      }
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter(
+          (item) => item.attrType === '组件视频介绍'
+        )[0]
+        console.log('视频==============>', obj)
+        if (!obj) {
+          flag.value = false
+        } else {
+          let imgindex = props.dataList.infoList.filter(
+            (item) => item.attrType === '组件图片'
+          )[0]
+          options.src = obj.attrValue
+          if (imgindex) {
+            img.value =
+              'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+          }
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .application-presentation {
+    padding: 0.8rem 3rem 0;
+    .main {
+      height: 3.4rem;
+      border-radius: 0.1rem;
+      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
+      background-size: 100%;
+      margin-top: 0.4rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .play {
+        width: 0.96rem;
+        height: 0.96rem;
+        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
+        background-size: 100%;
+        cursor: pointer;
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
@ -0,0 +1,214 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:56:28
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-14 11:31:12
+ * @Description: 开发组件详情页头部
+-->
+<template>
+  <div class="algorithm-top-details">
+    <div class="left">
+      <div class="top">
+        <span class="name">{{ props.dataList.name }}</span>
+        <div class="label-content">
+          <p class="lable-father">
+            <span class="label">
+              {{ componentType || props.dataList.type }}
+            </span>
+            <span class="label">{{ props.dataList.shareType }}</span>
+            <span class="label">{{ props.dataList.shareCondition }}</span>
+          </p>
+        </div>
+        <!-- <span class="label">免费</span> -->
+      </div>
+      <div class="main">
+        <div>应用领域：{{ applicationArea }}</div>
+        <div>
+          {{ props.dataList.description }}
+        </div>
+      </div>
+      <div class="bottom" v-if="props.dataList.id">
+        <!-- <a-button type="primary" @click="toView()">
+          <template #icon><form-outlined /></template>
+          申请使用
+        </a-button>
+        <a-button type="primary" @click="addShoppingCart()">
+          <template #icon><shopping-cart-outlined /></template>
+          加入购物车
+        </a-button> -->
+        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
+      </div>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+<script setup>
+  // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+  import { defineProps, ref, watch } from 'vue'
+  import { scInsert } from '@/api/personalCenter'
+  // import { sgcInsert } from '@/api/home'
+  // import { useRouter } from 'vue-router'
+  // import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  // const router = useRouter()
+  const applicationArea = ref('')
+  // // 加入申购车
+  // const addShoppingCart = () => {
+  //   console.log('加入申购车==================>', props.dataList)
+  //   sgcInsert({
+  //     delFlag: '0',
+  //     resourceId: props.dataList.id,
+  //     // userId: userId.value,
+  //   }).then((res) => {
+  //     console.log(res)
+  //     message.success('添加申购车成功！')
+  //     mybus.emit('getSgcNum')
+  //   })
+  // }
+  // // 立即申请
+  // function toView() {
+  //   // window.open(newpage.href, '_blank')
+  //   router.push({
+  //     path: '/apply',
+  //     query: {
+  //       name: props.dataList.name,
+  //       resourceId: [props.dataList.id],
+  //     },
+  //   })
+  // }
+  // 收藏
+  const goTOCollection = () => {
+    console.log('收藏===================》', props.dataList)
+    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+      console.log(res)
+      message.success('收藏成功')
+    })
+  }
+  const componentType = ref('')
+  if (props.dataList.infoList) {
+    applicationArea.value = props.dataList.infoList.filter(
+      (val) => val.attrType === '应用领域'
+    )[0].attrValue
+    let obj = props.dataList.infoList.filter(
+      (val) => val.attrType === '组件类型'
+    )[0]
+    if (obj) {
+      componentType.value = obj.attrValue
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        applicationArea.value = props.dataList.infoList.filter(
+          (val) => val.attrType === '应用领域'
+        )[0].attrValue
+        let obj = props.dataList.infoList.filter(
+          (val) => val.attrType === '组件类型'
+        )[0]
+        if (obj) {
+          componentType.value = obj.attrValue
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .algorithm-top-details {
+    height: 6rem;
+    padding: 1.8rem 0 0;
+    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    .left {
+      max-width: 7.2rem;
+      color: #fff;
+      margin-right: 0.8rem;
+
+      .top {
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 0.14rem;
+        }
+        .name {
+          // max-width: 3.3rem;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+        }
+        .label-content {
+          position: relative;
+        }
+        .lable-father {
+          position: absolute;
+          min-width: 2.5rem;
+          right: -2.5rem;
+          top: 0;
+        }
+        .label {
+          padding: 0.01rem 0.1rem;
+          margin-right: 0.1rem;
+          border-radius: 0.13rem;
+          background: rgba(255, 255, 255, 0.4);
+        }
+      }
+      .main {
+        margin-top: 0.2rem;
+        font-size: 0.18rem;
+        line-height: 0.34rem;
+        & > div:nth-of-type(1) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > div:nth-of-type(2) {
+          max-height: 1rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .bottom {
+        margin-top: 0.4rem;
+        display: flex;
+        .ant-btn {
+          height: 0.5rem;
+          margin-right: 0.2rem;
+          background: #ff8b55;
+          border-radius: 0.06rem;
+          font-size: 0.2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .ant-btn:nth-of-type(1) {
+          width: 1.8rem;
+        }
+        .ant-btn:nth-of-type(2) {
+          width: 2.2rem;
+        }
+        .ant-btn:nth-of-type(3) {
+          width: 1.45rem;
+          background: #fff;
+          color: #526aff;
+        }
+      }
+    }
+    .right {
+      width: 5.8rem;
+      height: 4rem;
+      background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
+      background-size: 100%;
+      margin-top: -0.4rem;
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
@ -0,0 +1,155 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-09 09:29:29
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-13 15:21:26
+ * @Description: 组件试用
+-->
+<template>
+  <div class="algorithm-on-trial" v-if="flag">
+    <detals-title title="组件试用" type="PROBATION"></detals-title>
+    <div class="main">
+      <div class="main-left">
+        <p>{{ dataFrom.linkName }}</p>
+        <p>{{ dataFrom.link }}</p>
+      </div>
+      <div class="main-center">
+        <p>{{ dataFrom.numberName }}</p>
+        <p>{{ dataFrom.number }}</p>
+        <div @click="copyFunction(dataFrom.number, '复制账号')">复制账号</div>
+      </div>
+      <div class="main-right">
+        <p>{{ dataFrom.passwordName }}</p>
+        <p>{{ dataFrom.password }}</p>
+        <div @click="copyFunction(dataFrom.password2, '复制密码')">
+          复制密码
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  import { ref, defineProps, watch } from 'vue'
+  import { message } from 'ant-design-vue'
+  let flag = ref(true)
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const dataFrom = ref({
+    linkName: '试用地址',
+    link: 'http://localhost:8080/#/detailsfdddffffffffffffffdfgdfgdfdgdfgdfg',
+    numberName: '试用账号',
+    number: 'zhangfeihu',
+    passwordName: '试用密码',
+    password: '**************************',
+    password2: '',
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '试用地址'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      props.dataList.infoList.map((item) => {
+        if (item.attrType == '试用地址') {
+          dataFrom.value.link = item.attrValue
+        } else if (item.attrType == '试用用户名') {
+          dataFrom.value.number = item.attrValue
+        } else if (item.attrType == '试用密码') {
+          dataFrom.value.password2 = item.attrValue
+        }
+      })
+    }
+  }
+  const onTrial = ref('http://localhost:8080/#/details?id=1522550194535735298')
+  //复制方法
+  const copyFunction = (data, name) => {
+    let url = data
+    let oInput = document.createElement('input')
+    oInput.value = url
+    document.body.appendChild(oInput)
+    oInput.select() // 选择对象;
+    console.log(oInput.value)
+    document.execCommand('Copy') // 执行浏览器复制命令
+    oInput.remove() // 执行浏览器复制命令
+    message.success(name + '成功')
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '试用地址')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          props.dataList.infoList.map((item) => {
+            if (item.attrType == '试用地址') {
+              dataFrom.value.link = item.attrValue
+            } else if (item.attrType == '试用用户名') {
+              dataFrom.value.number = item.attrValue
+            } else if (item.attrType == '试用密码') {
+              dataFrom.value.password2 = item.attrValue
+            }
+          })
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .algorithm-on-trial {
+    padding: 0.8rem 0px 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .main {
+      margin-top: 0.3rem;
+      width: 13rem;
+      height: 2.5rem;
+      background: url('~@/assets/detailsAll/kfzj_sybg.png') no-repeat;
+      display: grid;
+      grid-template-columns: 33.33% 33.33% 33.33%;
+      align-items: center;
+      .main-left {
+        border-right: 0.01rem #ffffff solid;
+        padding-left: 0.7rem;
+        padding-right: 1rem;
+      }
+      .main-center {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .main-right {
+        padding-right: 0.7rem;
+      }
+      & > div > p:first-child {
+        font-size: 0.26rem;
+        color: #ffffff;
+        font-weight: bold;
+      }
+      & > div > p:nth-child(2) {
+        font-size: 0.22rem;
+        color: #ffffff;
+        line-height: 0.34rem;
+      }
+      & > div:first-child > p:last-child {
+        text-decoration: underline;
+        word-wrap: break-word;
+        word-break: normal;
+      }
+      & > div > div:last-child {
+        height: 0.34rem;
+        width: 1.1rem;
+        border: 0.01rem solid #ffffff;
+        border-radius: 0.06rem;
+        font-size: 0.18rem;
+        color: #ffffff;
+        cursor: pointer;
+        text-align: center;
+        line-height: 0.34rem;
+      }
+    }
+  }
+</style>
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@ -123,6 +123,7 @@
  const navList = ref([
    { name: '共享门户', key: 'home' },
    { name: '能力集市', key: 'DetailsPageconetent' },
+    { name: '能力云图', key: 'capabilityCloud' },
    { name: '能力统计', key: 'abilityStatistics' },
    { name: '开发指南', key: 'developmentGuide' },
    { name: '需求中心', key: 'demandCenter' },
@ -178,6 +179,11 @@
          },
        })
        break
+      case '能力云图':
+        router.push({
+          path: '/capabilityCloud',
+        })
+        break
      case '开发指南':
        router.push({
          path: '/developmentGuide',
--- a/front/src/views/home/details.vue
+++ b/front/src/views/home/details.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-14 09:43:49
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-15 18:19:22
+ * @LastEditTime: 2022-06-20 18:44:52
 * @Description: 告诉大家这是什么
 -->
 <template>
@ -16,7 +16,13 @@
      <application-details
        v-else-if="showView === 'application-details'"
      ></application-details>
-      <ability-to-recommend-bottom></ability-to-recommend-bottom>
+      <developer-components
+        v-else-if="showView === 'development-of-component'"
+      ></developer-components>
+      <business-details
+        v-else-if="showView === 'business-details'"
+      ></business-details>
+      <home-footer></home-footer>
    </div>
  </div>
 </template>
@ -25,9 +31,11 @@
  import HomeHeader from '@/views/home/components/header'
  import { defineComponent, reactive, ref } from 'vue'
  import DetailsView from './components/DetailsView.vue'
-  import AbilityToRecommendBottom from '@/views/home/components/AbilityToRecommendBottom'
+  import HomeFooter from '@/views/newHome/components/Footer'
  import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
  import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
+  import DeveloperComponents from '@/views/detailsAll/DeveloperComponents'
+  import BusinessDetails from '@/views/detailsAll/BusinessDetails'
  import { selectOne } from '@/api/home'
  import { useRouter } from 'vue-router'
  export default defineComponent({
@ -36,9 +44,11 @@
    components: {
      HomeHeader,
      DetailsView,
-      AbilityToRecommendBottom,
+      HomeFooter,
      AlgorithmDetails,
      ApplicationDetails,
+      DeveloperComponents,
+      BusinessDetails,
    },
    setup() {
      const formState = reactive({
@ -78,12 +88,35 @@
      const router = useRouter()
      const id = router.currentRoute.value.query.id
      const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-      let showView = ref('algorithm-details')
+      let showView = ref('developer-components')
      const init = () => {
        if (id) {
          selectOne(id).then((res) => {
            if (res.data.data.type == '组件服务') {
-              showView.value = 'algorithm-details'
+              let detection = res.data.data.infoList.filter(
+                (item) => item.attrType === '组件类型'
+              )[0]
+              if (detection) {
+                res.data.data.infoList.map((item) => {
+                  if (item.attrType == '组件类型') {
+                    switch (item.attrValue) {
+                      case '智能算法':
+                        showView.value = 'algorithm-details'
+                        break
+                      case '开发组件':
+                        showView.value = 'development-of-component'
+                        break
+                      case '业务组件':
+                        showView.value = 'business-details'
+                        break
+                      default:
+                        break
+                    }
+                  }
+                })
+              } else {
+                showView.value = 'algorithm-details'
+              }
            } else {
              showView.value = 'application-details'
            }
@ -91,7 +124,30 @@
        } else if (obj) {
          console.log('obj============>', obj)
          if (obj.type == '组件服务') {
-            showView.value = 'algorithm-details'
+            let detection = obj.infoList.filter(
+              (item) => item.attrType === '组件类型'
+            )[0]
+            if (detection) {
+              obj.infoList.map((item) => {
+                if (item.attrType == '组件类型') {
+                  switch (item.attrValue) {
+                    case '智能算法':
+                      showView.value = 'algorithm-details'
+                      break
+                    case '开发组件':
+                      showView.value = 'development-of-component'
+                      break
+                    case '业务组件':
+                      showView.value = 'business-details'
+                      break
+                    default:
+                      break
+                  }
+                }
+              })
+            } else {
+              showView.value = 'algorithm-details'
+            }
          } else {
            showView.value = 'application-details'
          }
--- a/front/src/views/newHome/components/Footer.vue
+++ b/front/src/views/newHome/components/Footer.vue
@ -1,13 +1,21 @@
+<!--
+ * @Author: 851673013@qq.com 851673013@qq.com
+ * @Date: 2022-06-16 15:20:52
+ * @LastEditors: 851673013@qq.com 851673013@qq.com
+ * @LastEditTime: 2022-06-16 17:14:56
+ * @FilePath: \qiantai\front\src\views\newHome\components\Footer.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
  <div class="footer">
    <div class="fotter-son">
      <div class="top">
-        <div>青岛市大数据发展管理局建设</div>
+        <div>{{ dataList.company.left }}</div>
        <div class="shuxian"></div>
-        <div>海信网络科技股份有限公司</div>
+        <div>{{ dataList.company.right }}</div>
      </div>
      <div class="bottom">
-        <p v-for="item in dataList" :key="item">
+        <p v-for="(item, index) in dataList.address" :key="index">
          <span>{{ item.name }}</span>
          <span>{{ item.value }}</span>
        </p>
@ -16,21 +24,12 @@
  </div>
 </template>
 <script setup>
-  import { reactive } from 'vue'
-  let dataList = reactive([
-    {
-      name: '鲁IC备00000000号',
-      value: '政府标识码3702000106',
-    },
-    {
-      name: '版权所有：青岛市大数据发展管理局',
-      value: '地址：山东省青岛市香港中路17号市级机关办公楼',
-    },
-    {
-      name: '电话：0532-8561234',
-      value: '传真0532-2145122',
-    },
-  ])
+  import { ref } from 'vue'
+  // eslint-disable-next-line no-undef
+  console.log('footerDataList', footerDataList)
+  let dataList = ref({})
+  // eslint-disable-next-line no-undef
+  dataList.value = footerDataList
 </script>
 <style lang="less" scoped>
  .footer {
--- a/front/src/views/newHome/components/WorkDynDetails.vue
+++ b/front/src/views/newHome/components/WorkDynDetails.vue
@ -1,65 +1,104 @@
 <template>
-  <div>
+  <div class="work-dyn-detail-content">
    <home-header></home-header>
-    <div id="work-dyn-list">
+    <a-breadcrumb>
+      <a-breadcrumb-item>
+        <router-link to="/home">门户首页</router-link>
+      </a-breadcrumb-item>
+      <a-breadcrumb-item>工作动态</a-breadcrumb-item>
+    </a-breadcrumb>
+    <div id="work-dyn-list" v-loading="loading">
      <div class="name">{{ item.title }}</div>
      <div class="time">发布日期：{{ item.createDate }}</div>
-      <a-image
-        width="100"
-        height="100"
-        alt="暂无图片"
-        :src="item.imageUrl"
-        :fallback="imgSrc"
-      />
-      <div class="text">{{ item.content }}</div>
+      <div class="detail-main-content">
+        <div v-if="item.note1" class="summary-content">
+          摘要：{{ item.note1 }}
+        </div>
+        <a-image alt="暂无图片" :src="item.imageUrl" :fallback="imgSrc" />
+        <div class="text">{{ item.content }}</div>
+      </div>
    </div>
+    <home-footer></home-footer>
  </div>
 </template>

 <script setup>
  import HomeHeader from '@/views/home/components/header'
+  import HomeFooter from '@/views/newHome/components/Footer'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { workdynamicsDetails } from '@/api/home'
  const router = useRouter()
  const item = ref({})
+  const loading = ref(true)
  const imgSrc = ref(require('@/assets/newHome/zw.png'))
  const id = router.currentRoute.value.query.id
  workdynamicsDetails(id).then((res) => {
    console.log('详情=================>', res.data.data)
    item.value = res.data.data
+    loading.value = false
  })
 </script>

 <style scoped lang="less">
-  #work-dyn-list {
-    background-color: #f5f8fc;
-    height: 100%;
-    width: 100%;
-    margin: 90px auto 0;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: 0 400px;
-    position: relative;
-    .name {
-      font-size: 32px;
-      font-weight: 600;
-      text-align: center;
+  .work-dyn-detail-content {
+    .ant-breadcrumb {
+      margin: 90px auto 0;
+      padding: 5px 400px;
+      background-color: #f5f8fc;
    }
-    :deep(.ant-image-img) {
-      width: 200px;
-      margin-top: 10px;
-    }
-    .text {
-      width: 1000px;
-      margin-top: 20px;
-      word-wrap: break-word;
-      text-indent: 32px;
-    }
-    .time {
-      margin-left: 70%;
+    #work-dyn-list {
+      background-color: #ffffff;
+      height: 100%;
+      width: 100%;
+      // margin: 90px auto 0;
+      display: flex;
+      flex-direction: column;
+      // flex-wrap: wrap;
+      // align-items: center;
+      padding: 0 400px;
+      position: relative;
+      margin-bottom: 40px;
+      .name {
+        font-size: 24px;
+        text-align: center;
+        color: #0558e1;
+        margin-top: 54px;
+      }
+      .time {
+        text-align: center;
+        margin: 10px 0 24px;
+      }
+      .detail-main-content {
+        border-top: 1px solid #c6c6c6;
+        padding-top: 24px;
+        font-size: 16px;
+        line-height: 30px;
+        color: #212121;
+        .summary-content {
+          word-wrap: break-word;
+          text-indent: 32px;
+        }
+        :deep(.ant-image) {
+          text-align: center;
+          margin: 16px 0;
+          position: relative;
+          left: 50%;
+          transform: translateX(-50%);
+          .ant-image-img {
+            max-width: 900px;
+            max-height: 590px;
+          }
+        }
+        // :deep(.ant-image-img) {
+        //   width: 200px;
+        //   margin-top: 10px;
+        // }
+        .text {
+          word-wrap: break-word;
+          text-indent: 32px;
+        }
+      }
    }
  }
 </style>
--- a/Show More
+++ b/Show More