From 2962cb6e9d3c143fa1b19a27dbca88e61a19aba8 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Fri, 4 Nov 2022 14:09:53 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9C=80=E6=B1=82=E4=B8=AD=E5=BF=83=EF=BC=9Ato?=
 =?UTF-8?q?oltip=20=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/demandCenter/index.vue | 530 ++++++++++++-------------
 1 file changed, 265 insertions(+), 265 deletions(-)

diff --git a/front/src/views/demandCenter/index.vue b/front/src/views/demandCenter/index.vue
index 556b1a3d..ed14a9a1 100644
--- a/front/src/views/demandCenter/index.vue
+++ b/front/src/views/demandCenter/index.vue
@@ -4,11 +4,7 @@
     <div class="main">
       <div class="left">
         <a-layout-sider>
-          <a-menu
-            v-model:selectedKeys="selectedKeys"
-            mode="inline"
-            @click="handleClick"
-          >
+          <a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="handleClick">
             <a-menu-item v-for="item in menuList" :key="item.key">
               <img :src="item.img" alt="" style="margin-right: 10px" />
               <span>{{ item.title }}</span>
@@ -18,36 +14,19 @@
       </div>
       <div class="right">
         <!-- <div class="title">数据需求</div> -->
-        <a-list
-          class="demo-loadmore-list"
-          :loading="initLoading"
-          item-layout="horizontal"
-          :data-source="list"
-          :key="showKey"
-        >
+        <a-list class="demo-loadmore-list" :loading="initLoading" item-layout="horizontal" :data-source="list"
+          :key="showKey">
           <template #renderItem="{ item }">
             <a-list-item>
-              <a-skeleton
-                avatar
-                :title="false"
-                :loading="!!item.loading"
-                active
-              >
-                <a-tooltip
-                  placement="topLeft"
-                  :title="item.demandDetails || '--'"
-                  arrow-point-at-center
-                  mouseEnterDelay="1"
-                >
-                  <a-list-item-meta
-                    :description="'描述：' + (item.demandDetails || '--')"
-                  >
+              <a-skeleton avatar :title="false" :loading="!!item.loading" active>
+                <a-tooltip placement="topLeft" arrow-point-at-center mouseEnterDelay="1"
+                  overlayClassName="tooltip-card">
+                  <template #title>
+                    <div class="tooltip-desc">{{ item.demandDetails || '--' }}</div>
+                  </template>
+                  <a-list-item-meta :description="'描述：' + (item.demandDetails || '--')">
                     <template #title>
-                      <span
-                        @click="showDetail(item)"
-                        style="cursor: pointer"
-                        class="name"
-                      >
+                      <span @click="showDetail(item)" style="cursor: pointer" class="name">
                         {{ item.demandSubject }}
                       </span>
                       <span class="time">{{ item.createDate }}</span>
@@ -58,13 +37,8 @@
             </a-list-item>
           </template>
         </a-list>
-        <a-pagination
-          v-model:current="pageNum"
-          v-model:page-size="pageSize"
-          :total="total"
-          @change="pageChange"
-          :key="showKey"
-        >
+        <a-pagination v-model:current="pageNum" v-model:page-size="pageSize" :total="total" @change="pageChange"
+          :key="showKey">
           <template #buildOptionText="props">
             <span>{{ props.value }}条/页</span>
           </template>
@@ -81,205 +55,205 @@
   </div>
 </template>
 <script setup>
-  import HomeHeader from '@/views/home/components/header'
-  import { demandApplyListPage } from '@/api/personalCenter'
-  import { ref, onMounted } from 'vue'
-  import { useRouter } from 'vue-router'
-  // import { useStore } from 'vuex'
+import HomeHeader from '@/views/home/components/header'
+import { demandApplyListPage } from '@/api/personalCenter'
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+// import { useStore } from 'vuex'
 
-  const router = useRouter()
-  // const store = useStore()
-  const list = ref([])
-  const pageNum = ref(1)
-  const pageSize = ref(8)
-  const total = ref()
-  const showKey = ref(0)
-  const whoShow1 = ref(whoShow)
-  const menuList = [
-    {
-      key: '1',
-      title: '基础设施',
-      num: '0',
-      img: require('@/assets/home/menujcss.png'),
-    },
-    {
-      key: '2',
-      title: '数据资源',
-      num: '0',
-      img: require('@/assets/home/menusjzy.png'),
-    },
-    {
-      key: '3',
-      title: '组件服务',
-      num: '0',
-      img: require('@/assets/home/menuzjfw.png'),
-    },
-    {
-      key: '4',
-      title: '应用资源',
-      num: '0',
-      img: require('@/assets/home/menuyyzy.png'),
-    },
-    {
-      key: '5',
-      title: '知识库',
-      num: '0',
-      img: require('@/assets/home/menuyyzy.png'),
-    },
-  ]
-  const detailsType = ref('')
-  const handleClick = (item) => {
-    if (item.key === '1') {
-      detailsType.value = '基础设施'
-    } else if (item.key === '2') {
-      detailsType.value = '数据资源'
-    } else if (item.key === '3') {
-      detailsType.value = '组件服务'
-    } else if (item.key === '4') {
-      detailsType.value = '应用资源'
-    } else if (item.key === '5') {
-      detailsType.value = '知识库'
-    }
-    pageNum.value = 1
-    getApplyList()
+const router = useRouter()
+// const store = useStore()
+const list = ref([])
+const pageNum = ref(1)
+const pageSize = ref(8)
+const total = ref()
+const showKey = ref(0)
+const whoShow1 = ref(whoShow)
+const menuList = [
+  {
+    key: '1',
+    title: '基础设施',
+    num: '0',
+    img: require('@/assets/home/menujcss.png'),
+  },
+  {
+    key: '2',
+    title: '数据资源',
+    num: '0',
+    img: require('@/assets/home/menusjzy.png'),
+  },
+  {
+    key: '3',
+    title: '组件服务',
+    num: '0',
+    img: require('@/assets/home/menuzjfw.png'),
+  },
+  {
+    key: '4',
+    title: '应用资源',
+    num: '0',
+    img: require('@/assets/home/menuyyzy.png'),
+  },
+  {
+    key: '5',
+    title: '知识库',
+    num: '0',
+    img: require('@/assets/home/menuyyzy.png'),
+  },
+]
+const detailsType = ref('')
+const handleClick = (item) => {
+  if (item.key === '1') {
+    detailsType.value = '基础设施'
+  } else if (item.key === '2') {
+    detailsType.value = '数据资源'
+  } else if (item.key === '3') {
+    detailsType.value = '组件服务'
+  } else if (item.key === '4') {
+    detailsType.value = '应用资源'
+  } else if (item.key === '5') {
+    detailsType.value = '知识库'
   }
-  const pageChange = (val) => {
-    console.log(val)
-    pageNum.value = val
-    getApplyList()
+  pageNum.value = 1
+  getApplyList()
+}
+const pageChange = (val) => {
+  console.log(val)
+  pageNum.value = val
+  getApplyList()
+}
+const getApplyList = () => {
+  const params = {
+    page: pageNum.value,
+    limit: pageSize.value,
+    flag: 3,
   }
-  const getApplyList = () => {
-    const params = {
-      page: pageNum.value,
-      limit: pageSize.value,
-      flag: 3,
-    }
-    if (detailsType.value) {
-      params.detailsType = detailsType.value
-    }
-    demandApplyListPage(params).then((res) => {
-      list.value = res.data.data.list
-      total.value = res.data.data.total
-    })
+  if (detailsType.value) {
+    params.detailsType = detailsType.value
   }
-
-  const showDetail = (item) => {
-    // console.log('demandDetails', item)
-    // store.commit('home/demandDetailsData', item)
-    router.push({
-      path: '/demandDetails',
-      query: {
-        id: item.id,
-      },
-    })
-  }
-  const newpage = router.resolve({
-    path: '/addApplication', // 跳转的页面路由
+  demandApplyListPage(params).then((res) => {
+    list.value = res.data.data.list
+    total.value = res.data.data.total
   })
-  const toView = () => {
-    window.open(newpage.href, '_blank')
-  }
+}
 
-  onMounted(() => {
-    const params = {
-      page: pageNum.value,
-      limit: pageSize.value,
-      flag: 3,
-    }
-    demandApplyListPage(params).then((res) => {
-      list.value = res.data.data.list
-      total.value = res.data.data.total
-    })
+const showDetail = (item) => {
+  // console.log('demandDetails', item)
+  // store.commit('home/demandDetailsData', item)
+  router.push({
+    path: '/demandDetails',
+    query: {
+      id: item.id,
+    },
   })
+}
+const newpage = router.resolve({
+  path: '/addApplication', // 跳转的页面路由
+})
+const toView = () => {
+  window.open(newpage.href, '_blank')
+}
+
+onMounted(() => {
+  const params = {
+    page: pageNum.value,
+    limit: pageSize.value,
+    flag: 3,
+  }
+  demandApplyListPage(params).then((res) => {
+    list.value = res.data.data.list
+    total.value = res.data.data.total
+  })
+})
 </script>
 <style lang="less" scoped>
-  .main-cont {
-    margin-top: 64px;
-    width: 100%;
-    height: calc(100%-90px);
-    background: url('~@/assets/demandCenter/bj.png') no-repeat;
-    background-position-x: center;
+.main-cont {
+  margin-top: 64px;
+  width: 100%;
+  height: calc(100%-90px);
+  background: url('~@/assets/demandCenter/bj.png') no-repeat;
+  background-position-x: center;
+  display: flex;
+  justify-content: center;
+
+  .main {
+    width: 1200px;
+    height: 100%;
+    padding-top: 30px;
     display: flex;
-    justify-content: center;
-    .main {
-      width: 1200px;
-      height: 100%;
-      padding-top: 30px;
-      display: flex;
-      .left {
-        width: 15%;
-        .ant-card {
-          background: transparent;
-          border: none;
-          .ant-card-grid {
-            height: 50px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 10px;
-            border: 1px solid #fff;
-            background-color: #fff;
-            cursor: pointer;
-          }
-        }
-        .ant-layout-sider {
-          background-color: transparent;
-          :deep(.ant-menu-item) {
-            height: 100px;
-            font-size: 18px;
-            color: #333333;
-            border: 1px solid #dee8f5;
-            margin: 0;
-            &::after {
-              margin-top: 30px;
-              height: 40px;
-              width: 4px;
-              background-color: #0087ff;
-            }
-          }
-          :deep(.ant-menu-item-selected) {
-            background-color: #e9f4ff;
-          }
+
+    .left {
+      width: 15%;
+
+      .ant-card {
+        background: transparent;
+        border: none;
+
+        .ant-card-grid {
+          height: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 10px;
+          border: 1px solid #fff;
+          background-color: #fff;
+          cursor: pointer;
         }
       }
-      .right {
-        flex: 1;
-        margin-left: 30px;
-        height: 850px;
-        background-color: #ffffff;
-        box-shadow: 10px 8px 10px 3px #9dc6ea;
-        padding: 20px;
-        .title {
-          font-size: 22px;
-          font-weight: 500;
-          color: #1492ff;
-        }
-        .ant-list {
-          height: 730px;
-          overflow-y: scroll;
-          :deep(.ant-list-item-meta-title) {
-            display: flex;
-            justify-content: space-between;
-            .name {
-              width: 800px;
-              font-size: 18px;
-              color: #1492ff;
-              display: -webkit-box;
-              /*设置为弹性盒子*/
-              -webkit-line-clamp: 1;
-              /*最多显示2行*/
-              overflow: hidden;
-              /*超出隐藏*/
-              text-overflow: ellipsis;
-              /*超出显示为省略号*/
-              -webkit-box-orient: vertical;
-              word-break: break-all;
-            }
+
+      .ant-layout-sider {
+        background-color: transparent;
+
+        :deep(.ant-menu-item) {
+          height: 100px;
+          font-size: 18px;
+          color: #333333;
+          border: 1px solid #dee8f5;
+          margin: 0;
+
+          &::after {
+            margin-top: 30px;
+            height: 40px;
+            width: 4px;
+            background-color: #0087ff;
           }
-          :deep(.ant-list-item-meta-description) {
+        }
+
+        :deep(.ant-menu-item-selected) {
+          background-color: #e9f4ff;
+        }
+      }
+    }
+
+    .right {
+      flex: 1;
+      margin-left: 30px;
+      height: 850px;
+      background-color: #ffffff;
+      box-shadow: 10px 8px 10px 3px #9dc6ea;
+      padding: 20px;
+
+      .title {
+        font-size: 22px;
+        font-weight: 500;
+        color: #1492ff;
+      }
+
+      .ant-list {
+        height: 730px;
+        overflow-y: scroll;
+
+        :deep(.ant-list-item-meta-title) {
+          display: flex;
+          justify-content: space-between;
+
+          .name {
+            width: 800px;
+            font-size: 18px;
+            color: #1492ff;
             display: -webkit-box;
             /*设置为弹性盒子*/
-            -webkit-line-clamp: 2;
+            -webkit-line-clamp: 1;
             /*最多显示2行*/
             overflow: hidden;
             /*超出隐藏*/
@@ -289,55 +263,81 @@
             word-break: break-all;
           }
         }
-        // 隐藏滚动条
-        .ant-list::-webkit-scrollbar {
-          display: none;
+
+        :deep(.ant-list-item-meta-description) {
+          display: -webkit-box;
+          /*设置为弹性盒子*/
+          -webkit-line-clamp: 2;
+          /*最多显示2行*/
+          overflow: hidden;
+          /*超出隐藏*/
+          text-overflow: ellipsis;
+          /*超出显示为省略号*/
+          -webkit-box-orient: vertical;
+          word-break: break-all;
         }
-        .ant-pagination {
-          margin-top: 10px;
-        }
-      }
-      .fixedmount {
-        height: 1.5rem;
-        display: flex;
-        position: fixed;
-        right: 2.6rem;
-        z-index: 10;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
       }
 
-      .fixedmount div {
-        width: 0.7rem;
-        height: 0.7rem;
-        border-radius: 0.04rem;
-        border: 0.01rem #94aac9 solid;
-        display: flex;
-        flex-direction: column;
-        // justify-content: center;
-        align-items: center;
-        padding-top: 0.13rem;
-        position: relative;
-        cursor: pointer;
-        background: #e3edfc;
-        p {
-          margin: 0;
-        }
+      // 隐藏滚动条
+      .ant-list::-webkit-scrollbar {
+        display: none;
       }
-      .fixedmount div p:nth-child(1) {
-        height: 0.24rem;
-        width: 0.24rem;
-        background: url('~@/assets/home/shenqing.png') no-repeat;
-        background-size: contain;
-        background-position: center;
+
+      .ant-pagination {
+        margin-top: 10px;
       }
     }
+
+    .fixedmount {
+      height: 1.5rem;
+      display: flex;
+      position: fixed;
+      right: 2.6rem;
+      z-index: 10;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .fixedmount div {
+      width: 0.7rem;
+      height: 0.7rem;
+      border-radius: 0.04rem;
+      border: 0.01rem #94aac9 solid;
+      display: flex;
+      flex-direction: column;
+      // justify-content: center;
+      align-items: center;
+      padding-top: 0.13rem;
+      position: relative;
+      cursor: pointer;
+      background: #e3edfc;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .fixedmount div p:nth-child(1) {
+      height: 0.24rem;
+      width: 0.24rem;
+      background: url('~@/assets/home/shenqing.png') no-repeat;
+      background-size: contain;
+      background-position: center;
+    }
   }
+}
 </style>
 <style>
-  body,
-  html {
-    height: unset;
-  }
+body,
+html {
+  height: unset;
+}
+
+.tooltip-card {
+  max-width: 900px !important;
+  min-width: 600px !important;
+  max-height: 600px !important;
+  overflow-y: auto;
+}
 </style>