找专家

src/components/webContact/index.vue

@@ -92,6 +92,10 @@ function submitForm() {
 }
 </script>
 <style lang="scss" scoped>
+.el-form {
+  padding: 15px;
+  background-color: #fff;
+}
 .el-form-item {
   margin-bottom: 15px;
 }

src/components/webHead/index.vue

@@ -112,9 +112,8 @@ watch(
     pagePath.value = newVal;
   }
 );
-onMounted(() => {
+pagePath.value = route.path;
-  pagePath.value = route.path;
+
-});
 function handlePath(path) {
   pagePath.value = path;
   router.push(path);

src/router/index.js

@@ -47,6 +47,18 @@ export const constantRoutes = [
         path: 'searchList/0/detail/:id',
         component: () => import('../views/website/searchList/index0Detail.vue'),
       },
+      {
+        path: 'searchList/1',
+        component: () => import('../views/website/searchList/index1.vue'),
+      },
+      {
+        path: 'searchList/4',
+        component: () => import('../views/website/searchList/index4.vue'),
+      },
+      {
+        path: 'searchList/4/detail/:id',
+        component: () => import('../views/website/searchList/index4Detail.vue'),
+      },
       {
         path: 'solution/:name',
         name: 'solution',

src/views/website/index/comp/index3.vue

@@ -25,7 +25,10 @@
         <div class="a">领域</div>
         <div class="b">专家数量</div>
       </div>
-      <div v-if="Object.keys(getIndustry(snapTree)).length > 0" v-for="(v,k) in getIndustry(snapTree)">
+      <div
+        v-if="Object.keys(getIndustry(snapTree)).length > 0"
+        v-for="(v,k) in getIndustry(snapTree)"
+      >
         <div class="a" :title="k">{{ k }}</div>
         <div class="b">{{ v }}</div>
       </div>
@@ -128,9 +131,9 @@ const state = reactive({
   isShowTips: false,//是否显示下载提示
 });
 
-onMounted(async () => {
+onMounted(() => {
   // 数据接口
-  await getExpert().then(res => {
+  getExpert().then(res => {
     if (200 == res.code) {
       treeData = res.data;
       snapTree.value = res.data;
@@ -156,21 +159,24 @@ onMounted(async () => {
   state.echartsMap = echarts.init(dom);
   state.echartsMap.on('click', echartsMapClick);
 
-  state.map = new AMap.Map('container', {
+  setTimeout(() => {
-    resizeEnable: true,
+    state.map = new AMap.Map('container', {
-    center: [116.30946, 39.937629],
+      resizeEnable: true,
-    zoom: 3
+      center: [116.30946, 39.937629],
-  });
+      zoom: 3
-  state.opts = {
+    });
-    subdistrict: 1,   //返回下一级行政区
+    state.opts = {
-    showbiz: false  //最后一级返回街道信息
+      subdistrict: 1,   //返回下一级行政区
-  };
+      showbiz: false  //最后一级返回街道信息
-  state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
+    };
-  state.district.search('中国', (status, result) => {
+    state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
-    if (status == 'complete') {
+    state.district.search('中国', (status, result) => {
-      getData(result.districtList[0], '', 100000);
+      if (status == 'complete') {
-    }
+        getData(result.districtList[0], '', 100000);
-  });
+      }
+    });
+  }, 1000)
+
 });
 
 
@@ -447,15 +453,14 @@ function loadMap (mapName, data) {
     border-right: 1px solid #0054ff;
     text-align: center;
     line-height: 42px;
-    overflow:hidden;
+    overflow: hidden;
-    white-space:nowrap;
+    white-space: nowrap;
-    text-overflow:ellipsis;
+    text-overflow: ellipsis;
   }
   .b {
     text-align: center;
     line-height: 42px;
     width: 90px;
-
   }
 }
 </style>

src/views/website/index/comp/index4.vue

@@ -128,9 +128,9 @@ const state = reactive({
   isShowTips: false,//是否显示下载提示
 });
 
-onMounted(async () => {
+onMounted(() => {
   // 数据接口
-  await laboratory().then(res => {
+  laboratory().then(res => {
     if (200 == res.code) {
       treeData = res.data;
       snapTree.value = res.data;
@@ -156,21 +156,23 @@ onMounted(async () => {
   state.echartsMap = echarts.init(dom);
   state.echartsMap.on('click', echartsMapClick);
 
-  state.map = new AMap.Map('container', {
+  setTimeout(() => {
-    resizeEnable: true,
+    state.map = new AMap.Map('container', {
-    center: [116.30946, 39.937629],
+      resizeEnable: true,
-    zoom: 3
+      center: [116.30946, 39.937629],
-  });
+      zoom: 3
-  state.opts = {
+    });
-    subdistrict: 1,   //返回下一级行政区
+    state.opts = {
-    showbiz: false  //最后一级返回街道信息
+      subdistrict: 1,   //返回下一级行政区
-  };
+      showbiz: false  //最后一级返回街道信息
-  state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
+    };
-  state.district.search('中国', (status, result) => {
+    state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
-    if (status == 'complete') {
+    state.district.search('中国', (status, result) => {
-      getData(result.districtList[0], '', 100000);
+      if (status == 'complete') {
-    }
+        getData(result.districtList[0], '', 100000);
-  });
+      }
+    });
+  }, 2000)
 });
 
 

src/views/website/index/comp/index5.vue

@@ -128,9 +128,9 @@ const state = reactive({
   isShowTips: false,//是否显示下载提示
 });
 
-onMounted(async () => {
+onMounted(() => {
   // 数据接口
-  await achievement().then(res => {
+  achievement().then(res => {
     if (200 == res.code) {
       treeData = res.data;
       snapTree.value = res.data;
@@ -156,21 +156,23 @@ onMounted(async () => {
   state.echartsMap = echarts.init(dom);
   state.echartsMap.on('click', echartsMapClick);
 
-  state.map = new AMap.Map('container', {
+  setTimeout(() => {
-    resizeEnable: true,
+    state.map = new AMap.Map('container', {
-    center: [116.30946, 39.937629],
+      resizeEnable: true,
-    zoom: 3
+      center: [116.30946, 39.937629],
-  });
+      zoom: 3
-  state.opts = {
+    });
-    subdistrict: 1,   //返回下一级行政区
+    state.opts = {
-    showbiz: false  //最后一级返回街道信息
+      subdistrict: 1,   //返回下一级行政区
-  };
+      showbiz: false  //最后一级返回街道信息
-  state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
+    };
-  state.district.search('中国', (status, result) => {
+    state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
-    if (status == 'complete') {
+    state.district.search('中国', (status, result) => {
-      getData(result.districtList[0], '', 100000);
+      if (status == 'complete') {
-    }
+        getData(result.districtList[0], '', 100000);
-  });
+      }
+    });
+  }, 3000)
 });
 
 

src/views/website/index/comp/index6.vue

@@ -128,9 +128,9 @@ const state = reactive({
   isShowTips: false,//是否显示下载提示
 });
 
-onMounted(async () => {
+onMounted(() => {
   // 数据接口
-  await demand().then(res => {
+  demand().then(res => {
     if (200 == res.code) {
       treeData = res.data;
       snapTree.value = res.data;
@@ -156,21 +156,23 @@ onMounted(async () => {
   state.echartsMap = echarts.init(dom);
   state.echartsMap.on('click', echartsMapClick);
 
-  state.map = new AMap.Map('container', {
+  setTimeout(() => {
-    resizeEnable: true,
+    state.map = new AMap.Map('container', {
-    center: [116.30946, 39.937629],
+      resizeEnable: true,
-    zoom: 3
+      center: [116.30946, 39.937629],
-  });
+      zoom: 3
-  state.opts = {
+    });
-    subdistrict: 1,   //返回下一级行政区
+    state.opts = {
-    showbiz: false  //最后一级返回街道信息
+      subdistrict: 1,   //返回下一级行政区
-  };
+      showbiz: false  //最后一级返回街道信息
-  state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
+    };
-  state.district.search('中国', (status, result) => {
+    state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
-    if (status == 'complete') {
+    state.district.search('中国', (status, result) => {
-      getData(result.districtList[0], '', 100000);
+      if (status == 'complete') {
-    }
+        getData(result.districtList[0], '', 100000);
-  });
+      }
+    });
+  }, 4000)
 });
 
 

src/views/website/index/comp/index7.vue

@@ -128,9 +128,9 @@ const state = reactive({
   isShowTips: false,//是否显示下载提示
 });
 
-onMounted(async () => {
+onMounted(() => {
   // 数据接口
-  await company().then(res => {
+  company().then(res => {
     if (200 == res.code) {
       treeData = res.data;
       snapTree.value = res.data;
@@ -156,21 +156,23 @@ onMounted(async () => {
   state.echartsMap = echarts.init(dom);
   state.echartsMap.on('click', echartsMapClick);
 
-  state.map = new AMap.Map('container', {
+  setTimeout(() => {
-    resizeEnable: true,
+    state.map = new AMap.Map('container', {
-    center: [116.30946, 39.937629],
+      resizeEnable: true,
-    zoom: 3
+      center: [116.30946, 39.937629],
-  });
+      zoom: 3
-  state.opts = {
+    });
-    subdistrict: 1,   //返回下一级行政区
+    state.opts = {
-    showbiz: false  //最后一级返回街道信息
+      subdistrict: 1,   //返回下一级行政区
-  };
+      showbiz: false  //最后一级返回街道信息
-  state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
+    };
-  state.district.search('中国', (status, result) => {
+    state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
-    if (status == 'complete') {
+    state.district.search('中国', (status, result) => {
-      getData(result.districtList[0], '', 100000);
+      if (status == 'complete') {
-    }
+        getData(result.districtList[0], '', 100000);
-  });
+      }
+    });
+  }, 5000)
 });
 
 

src/views/website/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fullPage" ref="fullPage">
+  <div v-loading="loading" class="fullPage" ref="fullPage">
     <div
       class="fullPageContainer"
       ref="fullPageContainer"
@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, onMounted, getCurrentInstance } from "vue";
+import { reactive, onMounted, getCurrentInstance, ref } from "vue";
 const { proxy } = getCurrentInstance();
 import index1 from './comp/index1.vue';
 import index2 from './comp/index2.vue';
@@ -56,7 +56,14 @@ import index6 from './comp/index6.vue';
 import index7 from './comp/index7.vue';
 import index8 from './comp/index8.vue';
 
+const loading = ref(true);
+setTimeout(() => {
+  loading.value = false;
+}, 1000)
 
+onMounted(() => {
+
+})
 function next() { // 往下切换
   let len = 8; // 页面的个数
   if (state.fullpage.current + 1 <= len) { // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
@@ -129,26 +136,26 @@ let state = reactive({
       zIndex: 1,
       title: "index3",
     },
-    {
+    // {
-      comp: index4,
+    //   comp: index4,
-      zIndex: 1,
+    //   zIndex: 1,
-      title: "index4",
+    //   title: "index4",
-    },
+    // },
-    {
+    // {
-      comp: index5,
+    //   comp: index5,
-      zIndex: 1,
+    //   zIndex: 1,
-      title: "index5",
+    //   title: "index5",
-    },
+    // },
-    {
+    // {
-      comp: index6,
+    //   comp: index6,
-      zIndex: 1,
+    //   zIndex: 1,
-      title: "index6",
+    //   title: "index6",
-    },
+    // },
-    {
+    // {
-      comp: index7,
+    //   comp: index7,
-      zIndex: 1,
+    //   zIndex: 1,
-      title: "index7",
+    //   title: "index7",
-    },
+    // },
     {
       comp: index8,
       zIndex: 1,
@@ -182,5 +189,4 @@ let state = reactive({
   background-position: center center;
   background-repeat: no-repeat;
 }
-
 </style>

src/views/website/innovate/detail.vue

@@ -146,7 +146,6 @@ function getData () {
       ._r {
         flex: 1;
         background-color: #fff;
-        padding: 15px;
       }
     }
   }

src/views/website/searchList/components/expertItem.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="box">
+        <div class="wrap">
+            <div class="img">
+                <!-- <img :src="data.image" alt /> -->
+                <img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" />
+            </div>
+            <div class="content">
+                <div class="tit">
+                    <span style="cursor: pointer;" @click="handleDetail(data.id)">姓名：{{ data.name }}</span>
+                    <div>
+                        <span style="vertical-align: middle;">匹配度</span>
+                        <el-rate style="display: inline-block" v-model="state.val" disabled></el-rate>
+                    </div>
+                </div>
+                <!-- <div class="labelList">
+                    <div v-for="item in data.industrys">{{ item }}</div>
+                </div>-->
+                <div v-if="data.industrys" class="line">
+                    所属领域：
+                    <span>{{ data.industrys[data.industrys.length - 1] }}</span>
+                </div>
+                <div class="line">
+                    所在机构：
+                    <span>{{ data.research_name }}</span>
+                </div>
+                <div
+                    v-if="data.patent_title"
+                    class="line"
+                    v-for="(patent_title,index) in data.patent_title"
+                    :key="index"
+                >{{ patent_title }}</div>
+            </div>
+            <div class="keywordsWrap">
+                <div class="keywords">
+                    <wordcloud v-if="data.keywords" :data="createdData(data.keywords)"></wordcloud>
+                </div>
+            </div>
+        </div>
+        <slot></slot>
+    </div>
+</template>
+
+<script setup>
+import wordcloud from './wordcloud.vue'
+const router = useRouter();
+import collectAndVisit from './collectAndVisit.vue'
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+});
+
+function handleDetail (id) {
+    let routeData = router.resolve({ path: `/searchList/4/detail/${id}` });
+    window.open(routeData.href, '_blank');
+}
+
+const state = reactive({
+    val: 3,
+});
+
+function createdData (arr) {
+    let l = [];
+    let snap = JSON.parse(JSON.stringify(arr))
+    snap.map(e => {
+        l.push({ name: e, value: 30 })
+        return { name: e, value: 30 }
+    })
+    return l;
+}
+
+</script>
+
+<style lang="scss" scoped>
+.box {
+    width: 100%;
+    background: #ffffff;
+    padding: 20px;
+    box-sizing: border-box;
+    .wrap {
+        display: flex;
+        flex-direction: row;
+        .img {
+            width: 90px;
+            margin-right: 12px;
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                width: 90px;
+                height: 90px;
+                border-radius: 50%;
+            }
+        }
+        .keywordsWrap {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .keywords {
+            width: 129px;
+            height: 129px;
+        }
+        .content {
+            flex: 1;
+            overflow: hidden;
+
+            .labelList {
+                overflow: hidden;
+                div {
+                    padding: 2px 4px;
+                    float: left;
+                    background: #0054ff;
+                    border-radius: 4px;
+                    margin-right: 5px;
+                    margin-bottom: 5px;
+                    font-size: 14px;
+                    font-family: Source Han Sans CN;
+                    font-weight: 400;
+                    color: #ffffff;
+                }
+            }
+
+            .line {
+                font-size: 16px;
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                color: #666666;
+                margin: 10px 0;
+                span {
+                    font-size: 16px;
+                    font-family: Source Han Sans CN;
+                    font-weight: 500;
+                    color: #333;
+                }
+            }
+            .tit {
+                overflow: hidden;
+
+                display: flex;
+                & > span {
+                    flex: 1;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-size: 20px;
+                    font-family: Source Han Sans CN;
+                    font-weight: bold;
+                    color: #333333;
+                    overflow: hidden;
+                }
+                & > div {
+                    width: 175px;
+                    vertical-align: middle;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/website/searchList/components/loadMore.vue

@@ -0,0 +1,76 @@
+<template>
+    <div v-loading="loading">
+        <section v-for="item in state.list">
+            <slot :item="item"></slot>
+        </section>
+        <div class="loadMore" v-if="isShowLoadMore" @click="getDataList()">加载更多</div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+const loading = ref(true);
+const isShowLoadMore = computed({
+  get() {
+    return state.total > state.list.length;
+  },
+});
+const props = defineProps({
+    getData: {
+        type: Function,
+        required: true,
+    },
+    params: {
+        type: Object,
+        required: true,
+        default: {}
+    },
+    pageNum: {
+        type: Number,
+        default: 1,
+    },
+    pageSize: {
+        type: Number,
+        default: 5,
+    },
+});
+const state = reactive({
+    list: [],
+    pageNum: props.pageNum,
+    pageSize: props.pageSize,
+    total: 0,
+});
+
+async function getDataList () {
+    loading.value = true;
+    let snap = {
+        page_num: state.pageNum,
+        page_size: state.pageSize,
+    };
+    let _data = Object.assign({}, snap, props.params);
+    console.log('_data',_data)
+    let { code, data, msg } = await props.getData(_data);
+    if (200 == code) {
+        state.list.push.apply(state.list,data.data);
+        state.total = data.count;
+        state.pageNum++;
+    }
+    loading.value = false;
+}
+
+onMounted(() => {
+    getDataList()
+});
+</script>
+
+<style scoped>
+.loadMore {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    background-color: #fff;
+    cursor: pointer;
+    user-select: none;
+}
+</style>

src/views/website/searchList/index0.vue

@@ -54,7 +54,7 @@
               />
             </div>
           </div>
-          <div class="r">1</div>
+          <div class="r"><webContact /></div>
         </el-row>
       </template>
     </searchContainer>
@@ -62,6 +62,7 @@
 </template>
 
 <script setup>
+import webContact from "@/components/webContact/index.vue";
 import request from '@/utils/request'
 const router = useRouter();
 import { onMounted } from 'vue';

src/views/website/searchList/index0Detail.vue

@@ -138,7 +138,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="r">1</div>
+                    <div class="r"><webContact /></div>
                 </el-row>
             </template>
         </searchContainer>
@@ -146,6 +146,7 @@
 </template>
 
 <script setup>
+import webContact from "@/components/webContact/index.vue";
 import request from '@/utils/request'
 const router = useRouter();
 const route = useRoute();
@@ -274,7 +275,6 @@ function getDataList () {
     width: 325px;
     margin-left: 14px;
     min-height: 200px;
-    background-color: #fff;
 }
 
 .product {

src/views/website/searchList/index1.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="index">
+    <searchContainer bannerKey="首页>找成果" title="成果库" @handleQuery="handleQuery">
+      <template v-slot>
+        <el-row type="flex" style="padding: 20px 0;">
+          <div style="flex: 1">
+            <div style="position: relative;">
+              <industrySelect @industryChange="industryChange"></industrySelect>
+              <div class="total">
+                共找到
+                <span>{{ state.total }}</span> 个成果
+              </div>
+              <div v-loading="loading">
+                <div class="item" v-for="item in state.list" :key="item.id">
+                  <el-row type="flex" style="padding: 40px 20px;">
+                    <div class="img">
+                      <!-- <img :src="item.image" alt /> -->
+                      <img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" alt />
+                    </div>
+                    <div class="content">
+                      <div class="tit"  @click="handleDetail(item.id)">
+                        <div style="float: right;">
+                          <span>匹配度</span>
+                          <el-rate style="display: inline-block" v-model="state.val" disabled></el-rate>
+                        </div>
+                        <div class="text" style="flex: 1">{{ item.name }}</div>
+                        
+                      </div>
+                      <div class="line">
+                        企业规模： <span>{{item.kind_title}}</span>
+                      </div>
+                      <div class="line">
+                        核心产品及应用场景： <span>{{item.product}}</span>
+                      </div>
+                      <div class="line">
+                        企业网站： <a :href="item.url"><span>{{item.url}}</span></a>
+                      </div>
+                    </div>
+                    <div class="keywords" style="flex: 1">
+                      <wordcloud :data="createdData(item.keywords)"></wordcloud>
+                    </div>
+                  </el-row>
+                </div>
+              </div>
+
+              <pagination
+                class="pagination"
+                :total="state.total"
+                :pageSizes="state.pageSizes"
+                v-model:page="state.pageNum"
+                v-model:limit="state.pageSize"
+                :autoScroll="false"
+                @pagination="getDataList"
+              />
+            </div>
+          </div>
+          <div class="r"><webContact /></div>
+        </el-row>
+      </template>
+    </searchContainer>
+  </div>
+</template>
+
+<script setup>
+import webContact from "@/components/webContact/index.vue";
+import request from '@/utils/request'
+const router = useRouter();
+import { onMounted } from 'vue';
+import searchContainer from './components/searchContainer.vue'
+import industrySelect from './components/industrySelect.vue'
+import wordcloud from './components/wordcloud.vue'
+
+function handleDetail (id) {
+  let routeData = router.resolve({ path: `/searchList/0/detail/${id}`, query: {keyword: state.keyword}});
+  window.open(routeData.href, '_blank');
+}
+
+const loading = ref(true);
+const state = reactive({
+  pageNum: 1,
+  total: 1,
+  pageSize: 10,
+  pageSizes: [10, 10 << 1, 10 << 2, 10 << 3],
+  keyword: '',
+  industryList: [],
+  id1: '',
+  id2: '',
+  id3: '',
+  val: 3,
+  arr: [{
+          "name": "Cat",
+          "value": 26
+        },
+        {
+          "name": "fish",
+          "value": 19
+        }]
+});
+
+function createdData(arr) {
+  let l = [];
+  let snap = JSON.parse(JSON.stringify(arr))
+  snap.map(e=>{
+    l.push({name: e,value: 30})
+    return {name: e,value: 30}
+  })
+  return l;
+}
+function search () {
+  let industry = '';
+  if (state.id1) {
+    industry += state.id1;
+  }
+  if (state.id2) {
+    industry += `-${state.id2}`;
+  }
+  if (state.id3) {
+    industry += `-${state.id3}`;
+  }
+  return request({
+    url: '/v1/search',
+    method: 'post',
+    data: { industry, mode: 2, page_num: state.pageNum, page_size: state.pageSize, keyword: state.keyword }
+  })
+}
+
+
+
+function handleQuery (keyword) {
+  state.keyword = keyword;
+  getDataList()
+}
+function industryChange (industry) {
+  if (industry.id1) {
+    state.id1 = industry.id1;
+  }
+  if (industry.id2) {
+    state.id2 = industry.id2;
+  }
+  if (industry.id3) {
+    state.id3 = industry.id3;
+  }
+  getDataList()
+}
+
+function getDataList () {
+  loading.value = true;
+  search().then(res => {
+    if (200 == res.code) {
+      // 总条数
+      state.total = res.data.count;
+      state.list = res.data.data;
+      loading.value = false;
+    }
+  }).catch(() => {
+    loading.value = false;
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.total {
+  font-size: 16px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #333333;
+  margin-bottom: 20px;
+  span {
+    font-size: 30px;
+    color: #0054ff;
+  }
+}
+
+.r {
+  display: inline-block;
+  width: 325px;
+  margin-left: 14px;
+  min-height: 200px;
+  background-color: #fff;
+}
+
+.item {
+  height: 200px;
+  overflow: hidden;
+  background-color: #fff;
+  margin-bottom: 16px;
+
+  .img {
+    width: 90px;
+    margin-right: 12px;
+       display: flex;
+   align-items:center;
+   justify-content:center;
+    img {
+      width: 90px;
+      height: 90px;
+      border-radius: 50%;
+    }
+  }
+  .content {
+    display: inline-block;
+    width: 390px;
+    .line {
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #666666;
+      margin: 10px 0;
+      span {
+              font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          color: #333;
+      }
+    }
+
+  }
+  .keywords {
+    flex: 1;
+    width: 129px;
+    height: 129px;
+  }
+  .tit {
+    width: 100%;
+    overflow: hidden;
+    cursor: pointer;
+    .text {
+      margin-right: 200px;
+      overflow: hidden;
+
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 20px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #333333;
+    }
+  }
+}
+</style>

src/views/website/searchList/index4.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="index">
+    <searchContainer bannerKey="首页>找专家" title="专家库" @handleQuery="handleQuery">
+      <template v-slot>
+        <el-row type="flex" style="padding: 20px 0;">
+          <div style="flex: 1">
+            <div style="position: relative;">
+              <industrySelect @industryChange="industryChange"></industrySelect>
+              <div class="total">
+                共找到
+                <span>{{ state.total }}</span> 位专家
+              </div>
+              <div v-loading="loading">
+                <section v-for="item in state.list" :key="item.id">
+                  <expertItem style="width: 661px;" :data="item"></expertItem>
+                </section>
+              </div>
+
+              <pagination
+                class="pagination"
+                :total="state.total"
+                :pageSizes="state.pageSizes"
+                v-model:page="state.pageNum"
+                v-model:limit="state.pageSize"
+                :autoScroll="false"
+                @pagination="getDataList"
+              />
+            </div>
+          </div>
+          <div class="r"><webContact /></div>
+        </el-row>
+      </template>
+    </searchContainer>
+  </div>
+</template>
+
+<script setup>
+import webContact from "@/components/webContact/index.vue";
+import request from '@/utils/request'
+const router = useRouter();
+import { onMounted } from 'vue';
+import searchContainer from './components/searchContainer.vue'
+import industrySelect from './components/industrySelect.vue'
+import expertItem from './components/expertItem.vue'
+import wordcloud from './components/wordcloud.vue'
+
+function handleDetail (id) {
+  let routeData = router.resolve({ path: `/searchList/0/detail/${id}`, query: {keyword: state.keyword}});
+  window.open(routeData.href, '_blank');
+}
+
+const loading = ref(true);
+const state = reactive({
+  pageNum: 1,
+  total: 1,
+  pageSize: 10,
+  pageSizes: [10, 10 << 1, 10 << 2, 10 << 3],
+  keyword: '',
+  industryList: [],
+  id1: '',
+  id2: '',
+  id3: '',
+  val: 3,
+  arr: [{
+          "name": "Cat",
+          "value": 26
+        },
+        {
+          "name": "fish",
+          "value": 19
+        }]
+});
+
+function createdData(arr) {
+  let l = [];
+  let snap = JSON.parse(JSON.stringify(arr))
+  snap.map(e=>{
+    l.push({name: e,value: 30})
+    return {name: e,value: 30}
+  })
+  return l;
+}
+function search () {
+  let industry = '';
+  if (state.id1) {
+    industry += state.id1;
+  }
+  if (state.id2) {
+    industry += `-${state.id2}`;
+  }
+  if (state.id3) {
+    industry += `-${state.id3}`;
+  }
+  return request({
+    url: '/v1/search',
+    method: 'post',
+    data: { industry, mode: 5, page_num: state.pageNum, page_size: state.pageSize, keyword: state.keyword }
+  })
+}
+
+
+
+function handleQuery (keyword) {
+  state.keyword = keyword;
+  getDataList()
+}
+function industryChange (industry) {
+  if (industry.id1) {
+    state.id1 = industry.id1;
+  }
+  if (industry.id2) {
+    state.id2 = industry.id2;
+  }
+  if (industry.id3) {
+    state.id3 = industry.id3;
+  }
+  getDataList()
+}
+
+function getDataList () {
+  loading.value = true;
+  search().then(res => {
+    if (200 == res.code) {
+      // 总条数
+      state.total = res.data.count;
+      state.list = res.data.data;
+      loading.value = false;
+    }
+  }).catch(() => {
+    loading.value = false;
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.total {
+  font-size: 16px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #333333;
+  margin-bottom: 20px;
+  span {
+    font-size: 30px;
+    color: #0054ff;
+  }
+}
+
+.r {
+  display: inline-block;
+  width: 325px;
+  margin-left: 14px;
+  min-height: 200px;
+  background-color: #fff;
+}
+
+</style>

src/views/website/searchList/index4Detail.vue

@@ -0,0 +1,594 @@
+<template>
+    <div v-loading="loading">
+        <searchContainer bannerKey="首页>找专家" title="专家库" @handleQuery="handleQuery">
+            <template v-slot>
+                <div class="head">
+                    <el-breadcrumb separator="/">
+                        <el-breadcrumb-item>
+                            <span class="one">找专家</span>
+                        </el-breadcrumb-item>
+                        <el-breadcrumb-item>
+                            <span>专家详情</span>
+                        </el-breadcrumb-item>
+                    </el-breadcrumb>
+                </div>
+                <el-row type="flex" style="padding-bottom: 20px;">
+                    <div style="flex: 1">
+                        <expertItem :data="state.expertDetail"></expertItem>
+                        <div class="btns">
+                            <div class="order">预约对接</div>
+                            <div class="share">一键分享</div>
+                        </div>
+
+                        <div class="detail">
+                            <div style="padding: 20px 0;">
+                                <div class="pointTit">个人简介</div>
+                            </div>
+                            <div class="html" v-html="state.expertDetail.introduce"></div>
+                            <div style="padding: 20px 0;">
+                                <div class="pointTit">研究方向</div>
+                            </div>
+                            <section v-if="state.expertDetail.researchs">
+                                <div
+                                    v-for="item in state.expertDetail.researchs"
+                                    class="describe"
+                                >{{ item }}</div>
+                            </section>
+                            <div style="padding: 20px 0;">
+                                <div class="pointTit">专家视频</div>
+                            </div>
+                        </div>
+                        <div v-if="state.expertDetail.id" style="padding: 20px 0;">
+                            <el-tabs v-model="state.activeName">
+                                <el-tab-pane label="代表成果及合作模式" name="first">
+                                    <loadMore
+                                        :getData="achievement"
+                                        :params="{ expert_id: state.expertDetail.id }"
+                                    >
+                                        <template #default="scope">
+                                            <div class="achievementItem">
+                                                <div class="tit">【代表成果】{{ scope.item.title }}</div>
+                                                <div class="line">
+                                                    技术领域：
+                                                    <span>{{ scope.item.industrys[scope.item.industrys.length - 1] }}</span>
+                                                </div>
+                                                <div class="line">
+                                                    完成单位：
+                                                    <span>{{ scope.item.cooperation_mode_title }}</span>
+                                                </div>
+                                                <div class="line">
+                                                    合作模式：
+                                                    <span>{{ scope.item.cooperation_mode_title }}</span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </loadMore>
+                                </el-tab-pane>
+                                <el-tab-pane label="科研项目" name="second">
+                                    <loadMore
+                                        :getData="project"
+                                        :params="{ expert_id: state.expertDetail.id }"
+                                    >
+                                        <template #default="scope">
+                                            <div class="loadMoreItem">
+                                                <div class="tit">【科研项目】{{ scope.item.title }}</div>
+                                                <div class="line">
+                                                    <el-row>
+                                                        <el-col
+                                                            :span="12"
+                                                        >发布日期：{{ parseTime(scope.item.created_at) }}</el-col>
+                                                    </el-row>
+                                                </div>
+                                                <div class="line">
+                                                    <el-row>
+                                                        <el-col
+                                                            :span="12"
+                                                        >开始日期：{{ parseTime(scope.item.begin_at) }}</el-col>
+                                                        <el-col
+                                                            :span="12"
+                                                        >结束日期：{{ parseTime(scope.item.finish_at) }}</el-col>
+                                                    </el-row>
+                                                </div>
+                                                <div class="line">
+                                                    <el-row>
+                                                        <el-col
+                                                            :span="12"
+                                                        >科研负责人：{{ scope.item.director }}</el-col>
+                                                        <el-col
+                                                            :span="12"
+                                                        >项目类型：{{ scope.item.kind }}</el-col>
+                                                    </el-row>
+                                                </div>
+                                                <div class="line">
+                                                    <el-row>
+                                                        <el-col
+                                                            :span="12"
+                                                        >资助经费：{{ scope.item.amount }}元</el-col>
+                                                        <el-col
+                                                            :span="12"
+                                                        >资助来源：{{ scope.item.source }}</el-col>
+                                                    </el-row>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </loadMore>
+                                </el-tab-pane>
+                                <el-tab-pane label="代表专利" name="third">
+                                    <loadMore
+                                        :getData="patent"
+                                        :params="{ expert_id: state.expertDetail.id }"
+                                    >
+                                        <template #default="scope">
+                                            <div class="patentItem">
+                                                <div class="tit">【发明专利】{{ scope.item.title }}</div>
+                                                <div class="line">
+                                                    申请日期：
+                                                    <span>{{ scope.item.apply_at }}</span>
+                                                </div>
+                                                <div class="line">
+                                                    <p>摘要：</p>
+                                                    <span>{{ scope.item.description }}</span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </loadMore>
+                                </el-tab-pane>
+                                <el-tab-pane label="代表论文" name="fourth">
+                                    <loadMore
+                                        :getData="paper"
+                                        :params="{ expert_id: state.expertDetail.id }"
+                                    >
+                                        <template #default="scope">
+                                            <div class="loadMoreItem">
+                                                <div class="tit">【期刊论文】{{ scope.item.title }}</div>
+                                                <div class="line">
+                                                    <el-row>
+                                                        <el-col
+                                                            :span="12"
+                                                        >出版日期： {{ parseTime(scope.item.publish_at) }}</el-col>
+                                                        <el-col :span="12">刊物： {{ scope.item.ext }}</el-col>
+                                                    </el-row>
+                                                </div>
+                                                <div class="line">
+                                                    关键词：
+                                                    <span
+                                                        v-for="keyword in scope.item.keywords"
+                                                        style="margin-right: 10px;"
+                                                    >{{ keyword }}</span>
+                                                </div>
+                                                <div class="line">
+                                                    <p>摘要：</p>
+                                                    <span>{{ scope.item.remark }}</span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </loadMore>
+                                </el-tab-pane>
+                                <el-tab-pane label="已合作企业" name="five">
+                                    <loadMore
+                                        :getData="cooperate"
+                                        :params="{ expert_id: state.expertDetail.id }"
+                                    >
+                                        <template #default="scope">
+                                            <div class="loadMoreItem">
+                                                <el-row v-loading="scope.item['loading']">
+                                                    <el-col :span="12">
+                                                        <div
+                                                            class="tit"
+                                                            style="line-height: 35px;margin: 0"
+                                                        >{{ scope.item.name }}</div>
+                                                    </el-col>
+                                                    <el-col
+                                                        v-if="scope.item['patent']"
+                                                        @click="() => { delete scope.item['patent']; }"
+                                                        style="cursor: pointer;"
+                                                        :offset="6"
+                                                        :span="6"
+                                                    >所发表专利 {{ scope.item['patent'].length }} 篇</el-col>
+                                                    <el-col
+                                                        v-else-if="scope.item['paper']"
+                                                        @click="() => { delete scope.item['paper']; }"
+                                                        style="cursor: pointer;"
+                                                        :offset="6"
+                                                        :span="6"
+                                                    >所发表论文 {{ scope.item['paper'].length }} 篇</el-col>
+                                                    <el-col v-else :span="12">
+                                                        <el-row>
+                                                            <el-col :span="12">
+                                                                <div
+                                                                    class="line"
+                                                                    @click="cooperateDetail(scope.item, 'patent')"
+                                                                    style="cursor: pointer;"
+                                                                >专利：{{ scope.item.patent_count }}</div>
+                                                            </el-col>
+                                                            <el-col :span="12">
+                                                                <div
+                                                                    class="line"
+                                                                    @click="cooperateDetail(scope.item, 'paper')"
+                                                                    style="cursor: pointer;"
+                                                                >论文：{{ scope.item.paper_count }}</div>
+                                                            </el-col>
+                                                        </el-row>
+                                                    </el-col>
+                                                </el-row>
+                                            </div>
+
+                                            <div
+                                                class="patentItem"
+                                                v-for="item in scope.item['patent']"
+                                            >
+                                                <div class="tit">【发明专利】{{ item.title }}</div>
+                                                <div class="line">
+                                                    申请日期：
+                                                    <span>{{ item.apply_at }}</span>
+                                                </div>
+                                                <div class="line">
+                                                    <p>摘要：</p>
+                                                    <span>{{ item.description }}</span>
+                                                </div>
+                                            </div>
+                                            <div
+                                                class="loadMoreItem"
+                                                v-for="item in scope.item['paper']"
+                                            >
+                                                <div class="tit">【期刊论文】{{ item.title }}</div>
+                                                <div class="line">
+                                                    <el-row>
+                                                        <el-col
+                                                            :span="12"
+                                                        >出版日期： {{ parseTime(item.publish_at) }}</el-col>
+                                                        <el-col :span="12">刊物： {{ item.ext }}</el-col>
+                                                    </el-row>
+                                                </div>
+                                                <div class="line">
+                                                    关键词：
+                                                    <span
+                                                        v-for="keyword in item.keywords"
+                                                        style="margin-right: 10px;"
+                                                    >{{ keyword }}</span>
+                                                </div>
+                                                <div class="line">
+                                                    <p>摘要：</p>
+                                                    <span>{{ item.remark }}</span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </loadMore>
+                                </el-tab-pane>
+                            </el-tabs>
+                        </div>
+
+                        <div style="padding: 20px 0;">
+                            <div class="pointTit">专家推荐</div>
+                        </div>
+                        <div>
+                            <section v-for="item in state.list" :key="item.id">
+                                <expertItem :data="item"></expertItem>
+                            </section>
+                        </div>
+                    </div>
+                    <div class="r">
+                        <webContact />
+                    </div>
+                </el-row>
+            </template>
+        </searchContainer>
+    </div>
+</template>
+
+<script setup>
+import webContact from "@/components/webContact/index.vue";
+import expertItem from './components/expertItem.vue'
+import loadMore from './components/loadMore.vue'
+import request from '@/utils/request'
+const router = useRouter();
+const route = useRoute();
+import { onMounted } from 'vue';
+import searchContainer from './components/searchContainer.vue'
+import wordcloud from './components/wordcloud.vue'
+import productItem from './components/productItem.vue'
+const loading = ref(true);
+const state = reactive({
+    pageNum: 1,
+    pageSize: 4,
+    keyword: '',
+    val: 3,
+    expertDetail: {},
+    arr: [{
+        "name": "Cat",
+        "value": 26
+    },
+    {
+        "name": "fish",
+        "value": 19
+    }],
+    activeName: 'first'
+});
+
+// 建议 列表前4条
+function recommend () {
+    return request({
+        url: '/v1/search',
+        method: 'post',
+        data: { mode: 5, page_num: state.pageNum, page_size: state.pageSize, keyword: state.keyword }
+    })
+}
+
+// 专家详情
+function expert (id) {
+    return request({
+        url: '/v1/manage/expert',
+        method: 'post',
+        data: { expert_id: id }
+    })
+}
+
+// 合作成果
+function achievement (data) {
+    return request({
+        url: '/v1/manage/expert/achievement',
+        method: 'post',
+        data,
+    })
+}
+
+// 科研项目
+function project (data) {
+    return request({
+        url: '/v1/manage/expert/project',
+        method: 'post',
+        data,
+    })
+}
+
+// 代表专利
+function patent (data) {
+    return request({
+        url: '/v1/manage/expert/patent',
+        method: 'post',
+        data,
+    })
+}
+// 代表论文
+function paper (data) {
+    return request({
+        url: '/v1/manage/expert/paper',
+        method: 'post',
+        data,
+    })
+}
+
+// 合作企业
+function cooperate (data) {
+    return request({
+        url: '/v1/manage/expert/cooperate',
+        method: 'post',
+        data,
+    })
+}
+async function cooperateDetail (item, type) {
+    item['loading'] = true;
+    let { code, msg, data } = await request({
+        url: '/v1/manage/expert/cooperate/detail',
+        method: 'post',
+        data: { id: item.id },
+    });
+    if (200 == code) {
+        item[type] = data[type];
+    }
+    item['loading'] = false;
+}
+
+function createdData (arr) {
+    let l = [];
+    let snap = JSON.parse(JSON.stringify(arr))
+    snap.map(e => {
+        l.push({ name: e, value: 30 })
+        return { name: e, value: 30 }
+    })
+    return l;
+}
+
+function handleDetail (id) {
+    let routeData = router.resolve({ path: `/searchList/0/detail/${id}`, query: { keyword: state.keyword } });
+    window.open(routeData.href, '_blank');
+}
+
+function handleList (mode, keyword) {
+    router.push({ path: `/searchList/${mode}`, query: { keyword } });
+}
+
+// 首次加载数据，其后跳转页面
+let flag = true;
+
+function handleQuery (keyword) {
+    state.keyword = keyword;
+    if (flag) {
+        getDataList();
+        flag = false;
+    } else {
+        handleList(0, keyword);
+    }
+}
+
+
+function getDataList () {
+    loading.value = true;
+    recommend().then(res => {
+        if (200 == res.code) {
+            // 总条数
+            state.total = res.data.count;
+            state.list = res.data.data;
+        }
+    })
+    let id = route.params.id;
+    if (!id) return
+    expert(id).then(res => {
+        if (200 == res.code) {
+            state.expertDetail = res.data;
+            loading.value = false;
+        }
+    }).catch(() => {
+        loading.value = false;
+    });
+    // companyProduct(id).then(res => {
+    //     if (200 == res.code) {
+    //         state.companyProduct = res.data.data;
+    //     }
+    // })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs) {
+    .el-tabs__item {
+        color: #666666;
+        font-size: 14px;
+    }
+    .el-tabs__item:hover {
+        opacity: 0.8;
+    }
+
+    .el-tabs__item.is-active {
+        font-size: 16px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #333333;
+    }
+    .el-tabs__active-bar {
+        background-color: #333333;
+        height: 4px;
+    }
+
+    .el-tabs__nav-wrap::after {
+        background-color: transparent;
+    }
+}
+.head {
+    padding: 15px 0px;
+    span {
+        font-size: 16px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+    }
+    .one {
+        color: #333333;
+    }
+}
+.r {
+    display: inline-block;
+    width: 325px;
+    margin-left: 14px;
+    min-height: 200px;
+}
+
+.detail {
+    width: 661px;
+    box-sizing: border-box;
+    padding: 20px;
+    background: #fff;
+    .describe {
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+        margin-bottom: 5px;
+    }
+}
+
+.pointTit {
+    position: relative;
+    padding-left: 10px;
+    font-size: 16px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+    &:before {
+        content: "";
+        top: 8px;
+        left: 0px;
+        position: absolute;
+        display: block;
+        width: 5px;
+        height: 5px;
+        background: #0054ff;
+    }
+}
+
+.btns {
+    overflow: hidden;
+    padding: 0 20px 20px 20px;
+    width: 100%;
+    background-color: #fff;
+    margin-top: -20px;
+    div {
+        text-align: center;
+        float: right;
+        cursor: pointer;
+        user-select: none;
+        width: 101px;
+        height: 36px;
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        line-height: 36px;
+        box-sizing: border-box;
+        &:hover {
+            opacity: 0.7;
+        }
+    }
+    .share {
+        color: #333333;
+        background: #f2f6ff;
+        border: 1px solid #dcdcdc;
+        margin-right: 10px;
+    }
+    .order {
+        background: #0054ff;
+        color: #ffffff;
+        border: none;
+    }
+}
+
+.achievementItem,
+.loadMoreItem {
+    padding: 20px;
+    background-color: #fff;
+    margin-bottom: 10px;
+    .tit {
+        margin-left: -8px;
+        font-size: 16px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #333333;
+    }
+    .line {
+        margin: 10px 0;
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+    }
+}
+
+.patentItem {
+    padding: 20px;
+    background-color: #fff;
+    margin-bottom: 10px;
+    .tit {
+        font-size: 16px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #333333;
+    }
+    .line {
+        padding-left: 8px;
+        margin: 10px 0;
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+    }
+}
+</style>