专家库

src/api/expert/index.ts

@@ -0,0 +1,26 @@
+import request from '@/utils/request';
+
+// 获取专家列表
+export function getExpertList(params) {
+  return request({
+    url: '/api/expert/list',
+    method: 'get',
+    params: params
+  });
+}
+
+// 获取专家详情
+export function getExpertInfo(id) {
+  return request({
+    url: '/api/expert/info/' + id,
+    method: 'get'
+  });
+}
+
+// 获取专家分组统计
+export function getExpertProfessionalGroupCount() {
+  return request({
+    url: '/api/gateway/v1/get_emergency_expert_professional_group_count',
+    method: 'get'
+  });
+}

src/views/disasterRiskMonitor/expertDatabase.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="container">
     <van-search
-      v-model="keywords"
+      v-model="queryParams.keyword"
       placeholder="请输入搜索关键词"
       :left-icon="searchImg"
       :right-icon="closeImg"
       class="common-search"
+      @click-right-icon.stop="searchCancel"
       @search="onSearch"
     />
     <van-dropdown-menu>
-      <van-dropdown-item v-model="areaType" :options="columns" />
-      <van-dropdown-item v-model="value2" :options="option2" />
+      <van-dropdown-item v-model="queryParams.county" :options="columns" @change="onSearch" />
+      <van-dropdown-item v-model="queryParams.professional_group" :options="option2" @change="onSearch" />
     </van-dropdown-menu>
 
     <van-list
@@ -29,7 +30,7 @@
               <div style="display: flex; margin-top: 10px">
                 <div style="font-weight: bold">{{ item.name }}</div>
                 <div class="notOnline" style="color: #638dce">
-                  {{ item.title }}
+                  {{ item.professional_title }}
                 </div>
               </div>
               <div style="font-size: 13px; margin-top: 5px; color: #979797">
@@ -52,91 +53,80 @@
       </div>
     </van-list>
   </div>
-  <!--  <expertinformation-->
-  <!--    v-if="isShowInform"-->
-  <!--    class="modal-overlay"-->
-  <!--  />-->
 </template>
 
 <script setup lang="ts">
 import searchImg from "@/assets/images/search.png";
 import closeImg from "@/assets/images/close.png";
 import onlineUser from "@/assets/images/threePreventionResponsiblePerson/onlineUsers.png";
-import offlineUser from "@/assets/images/threePreventionResponsiblePerson/offlineUsers.png";
-import expertinformation from "@/views/disasterRiskMonitor/expertinformation.vue";
+import {getExpertList} from "@/api/expert";
 
 const router = useRouter();
-const keywords = ref();
-const areaType = ref("440900000");
-const value2 = ref("a");
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { district_type } = toRefs<any>(proxy?.useDict("district_type"));
+const { district_type, expert_type } = toRefs<any>(proxy?.useDict("district_type", "expert_type"));
 const columns = computed(() => {
-  let data = [{ text: "茂名市", value: "440900000" }];
+  let data = [{ text: "茂名市", value: "" }];
   if (district_type.value && district_type.value.length > 0) {
     district_type.value.forEach(item => {
-      data.push({ text: item.label, value: item.value });
+      data.push({ text: item.label, value: item.label });
     });
   }
   return data;
 });
-const option2 = [
-  { text: "所有", value: "a" },
-  { text: "自然灾害", value: "b" },
-  { text: "事故灾难", value: "c" },
-  { text: "公共卫生", value: "d" },
-  { text: "社会安全", value: "e" },
-  { text: "其他", value: "f" }
-];
-const list = ref([
-  {
-    id: "1",
-    name: "谢和平",
-    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
-    position: "委员、院长",
-    title: "教授",
-    expertType: "其它突发事件"
-  },
-  {
-    id: "2",
-    name: "谢和平",
-    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
-    position: "委员、院长",
-    title: "教授",
-    expertType: "其它突发事件"
-  },
-  {
-    id: "3",
-    name: "谢和平",
-    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
-    position: "委员、院长",
-    title: "教授",
-    expertType: "其它突发事件"
-  },
-  {
-    id: "4",
-    name: "谢和平",
-    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
-    position: "委员、院长",
-    title: "教授",
-    expertType: "其它突发事件"
-  },
-  {
-    id: "5",
-    name: "谢和平",
-    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
-    position: "委员、院长",
-    title: "教授",
-    expertType: "其它突发事件"
+const option2 = computed(() => {
+  let data = [{ text: "所有", value: "" }];
+  if (expert_type.value && expert_type.value.length > 0) {
+    expert_type.value.forEach(item => {
+      data.push({ text: item.label, value: item.label });
+    });
   }
-]);
+  return data;
+});
+const queryParams = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: '',
+  county: '',
+  professional_group: ''
+})
+const list = ref([]);
 const loading = ref(false);
 const finished = ref(true);
-// const onLoad = () => {};
 
 const personInform = item => {
   router.push({ name: "Expertinformation", query: { id: item.id } });
 };
+
+const onLoad = () => {
+  getExpertList(queryParams).then((res: any) => {
+    const item = res.data || [];
+    // 重置 persons 数组（如果是第一页）
+    if (queryParams.page == 1) {
+      list.value = [];
+    }
+    // 将新数据添加到 persons 数组中
+    item.forEach(temp => {
+      list.value.push(temp);
+    });
+    // 检查是否加载了所有数据
+    if (list.value.length >= res.total) {
+      finished.value = true;
+    } else {
+      finished.value = false;
+    }
+    queryParams.page++;
+    loading.value = false;
+  });
+}
+const searchCancel = () => {
+  queryParams.keyword = "";
+  onSearch();
+}
+const onSearch = () => {
+  queryParams.page = 1;
+  onLoad();
+};
+onLoad()
 </script>
 
 <style scoped lang="scss">
@@ -199,13 +189,9 @@ const personInform = item => {
 .notOnline {
   font-size: 12px;
   background-color: #f1f3fb;
-  padding-left: 5px;
-  height: 15px;
-  width: 35px;
-  padding-bottom: 18px;
+  padding: 2px 5px;
   border-radius: 2px;
   color: #ffffff;
-  margin-top: 5px;
   margin-left: 10px;
 }
 .text-ellipsis {

src/views/disasterRiskMonitor/expertinformation.vue

@@ -1,64 +1,62 @@
 <template>
   <div class="all">
     <div>
-      <div v-for="item in inform">
-        <div class="card" style="margin-top: 10px">
-          <div style="padding-top: 1px">
-            <div class="circle2">
-              <img :src="onlineUser" />
-            </div>
+      <div class="card" style="margin-top: 10px">
+        <div style="padding-top: 1px">
+          <div class="circle2">
+            <img :src="onlineUser" />
           </div>
-          <div
+        </div>
+        <div
             style="
               display: flex;
               justify-content: center;
               font-weight: bold;
               margin-top: -10px;
             "
-          >
-            {{ item.name }}
-          </div>
-          <div style="
+        >
+          {{ inform.name }}
+        </div>
+        <div style="
               display: flex;
               justify-content: center;
               text-align: center;
               padding: 0 20px 0;
             ">
-            {{ item.unit }}
-          </div>
+          {{ inform.unit }}
         </div>
-        <div>
-          <div class="card" style="height: 45px; margin-top: 9px">
-            <div style="font-weight: bold; margin-left: 15px; padding-top: 12px; font-size: 17px">基本信息</div>
-          </div>
-          <div class="card-one">
-            <div style="margin-left: 15px; padding-top: 10px">行政区域</div>
-            <div class="card-two">{{ item.administrativeArea }}</div>
-          </div>
-          <div class="card-one">
-            <div style="margin-left: 15px; padding-top: 10px">荣誉称号</div>
-            <div class="card-two">{{ item.honoraryTitle }}</div>
-          </div>
-          <div class="card-one">
-            <div style="margin-left: 15px; padding-top: 10px">职务</div>
-            <div class="card-two">{{ item.position }}</div>
-          </div>
-          <div class="card-one">
-            <div style="margin-left: 15px; padding-top: 10px">职称</div>
-            <div class="card-two">{{ item.title }}</div>
-          </div>
-          <div class="card-one">
-            <div style="margin-left: 15px; padding-top: 10px">发证日期</div>
-            <div class="card-two">{{ item.dateOfIssue }}</div>
-          </div>
-          <div class="card-one">
-            <div style="margin-left: 15px; padding-top: 10px">专家类型</div>
-            <div class="card-two">{{ item.expertType }}</div>
-          </div>
-          <div class="card-one">
-            <div style="margin-left: 15px; padding-top: 10px">专业领域</div>
-            <div class="card-two">{{ item.professionalField }}</div>
-          </div>
+      </div>
+      <div>
+        <div class="card" style="height: 45px; margin-top: 9px">
+          <div style="font-weight: bold; margin-left: 15px; padding-top: 12px; font-size: 17px">基本信息</div>
+        </div>
+        <div class="card-one">
+          <div style="margin-left: 15px; padding-top: 10px">行政区域</div>
+          <div class="card-two">{{ inform.county }}</div>
+        </div>
+        <div class="card-one">
+          <div style="margin-left: 15px; padding-top: 10px">荣誉称号</div>
+          <div class="card-two">{{ inform.honorary_title }}</div>
+        </div>
+        <div class="card-one">
+          <div style="margin-left: 15px; padding-top: 10px">职务</div>
+          <div class="card-two">{{ inform.position }}</div>
+        </div>
+        <div class="card-one">
+          <div style="margin-left: 15px; padding-top: 10px">职称</div>
+          <div class="card-two">{{ inform.professional_title }}</div>
+        </div>
+        <div class="card-one">
+          <div style="margin-left: 15px; padding-top: 10px">发证日期</div>
+          <div class="card-two">{{ inform.certificate_issue_date }}</div>
+        </div>
+<!--        <div class="card-one">-->
+<!--          <div style="margin-left: 15px; padding-top: 10px">专家类型</div>-->
+<!--          <div class="card-two">{{ inform.expert_type }}</div>-->
+<!--        </div>-->
+        <div class="card-one">
+          <div style="margin-left: 15px; padding-top: 10px">专业领域</div>
+          <div class="card-two">{{ inform.professional_field }}</div>
         </div>
       </div>
       <div class="button-style">
@@ -70,12 +68,6 @@
           <img src="@/assets/images/index/videoImage.png" style="height: 30px" />
           <div style="color: #ffffff; margin-left: 5px">视频通话</div>
         </div>
-<!--        <div>-->
-<!--          <div class="button-two">-->
-<!--            <img src="@/assets/images/index/videoImage.png" style="height: 30px" />-->
-<!--            <div style="color: #ffffff">视频通话</div>-->
-<!--          </div>-->
-<!--        </div>-->
       </div>
     </div>
   </div>
@@ -84,22 +76,15 @@
 <script setup lang="ts">
 import onlineUser from "@/assets/images/threePreventionResponsiblePerson/onlineUsers.png";
 import offlineUser from "@/assets/images/threePreventionResponsiblePerson/offlineUsers.png";
+import {getExpertInfo} from "@/api/expert";
+const route = useRoute();
+const inform = ref({});
 
-const inform = ref([
-  {
-    id: "1",
-    name: "谢和平",
-    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
-    position: "委员、院长",
-    title: "教授",
-    administrativeArea: "广东省深圳市",
-    honoraryTitle: "工程院院士",
-    dateOfIssue: "2001年当选",
-    expertType: "其它突发事件",
-    profilePicture: "",
-    professionalField: "深地科学、绿色能源"
-  }
-]);
+onMounted(() => {
+  getExpertInfo(route.query.id).then((res) => {
+    inform.value = res.data;
+  });
+});
 </script>
 
 <style scoped lang="scss">