From 31bc2419336df0a17eafd2fd354d40b1f0f2ebff Mon Sep 17 00:00:00 2001
From: JayChou <xxx@gmail.com>
Date: Thu, 7 Nov 2024 09:32:56 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=88=9B=E6=96=B0=E5=88=B8ap?=
 =?UTF-8?q?i?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jeecgboot-vue3/.env.development               |   3 +-
 jeecgboot-vue3/src/api/mainHome/index.ts      |  42 +++++
 .../components/instrumentSharing/index.vue    | 176 +++++++++++++++---
 3 files changed, 193 insertions(+), 28 deletions(-)
 create mode 100644 jeecgboot-vue3/src/api/mainHome/index.ts

diff --git a/jeecgboot-vue3/.env.development b/jeecgboot-vue3/.env.development
index 96218f1..e090825 100644
--- a/jeecgboot-vue3/.env.development
+++ b/jeecgboot-vue3/.env.development
@@ -13,7 +13,8 @@ VITE_GLOB_DOMAIN_URL=http://localhost:18086/jeecg-boot
 
 #后台接口父地址(必填)
 VITE_GLOB_API_URL=/jeecgboot
-
+# 创新券地址
+VITE_GLOB_API_URL_CXQ=http://localhost:18088/jeecg-boot
 # 接口前缀
 VITE_GLOB_API_URL_PREFIX=
 
diff --git a/jeecgboot-vue3/src/api/mainHome/index.ts b/jeecgboot-vue3/src/api/mainHome/index.ts
new file mode 100644
index 0000000..143fc1c
--- /dev/null
+++ b/jeecgboot-vue3/src/api/mainHome/index.ts
@@ -0,0 +1,42 @@
+import { defHttp } from '/@/utils/http/axios';
+
+// 获取仪器列表
+export function getindexcomp(params) {
+  return defHttp.request({
+    url: '/instrument/instrument/listcms',
+    method: 'GET',
+    params,
+  });
+}
+// 获取仪器详情
+export function getindexnew(params) {
+  return defHttp.request({
+    url: '/instrument/instrument/queryByIdCms',
+    method: 'GET',
+    params,
+  });
+}
+// 获取学科领域
+export function getindexsubject() {
+  return defHttp.request({
+    url: '/disciplinefieid/disciplineFieid/listcms',
+    method: 'GET',
+    
+  });
+}
+// 获取仪器分类
+export function getindexclass() {
+  return defHttp.request({
+    url: '/instrumenttype/instrumentType/listcms',
+    method: 'GET',
+    
+  });
+}
+// 获取创新券列表
+export function getindexaward(params) {
+  return defHttp.request({
+    url: '/innovationvoucher/innovationVoucher/listcms',
+    method: 'GET',
+    params,
+  });
+}
\ No newline at end of file
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/instrumentSharing/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/instrumentSharing/index.vue
index b3f05ad..2054432 100644
--- a/jeecgboot-vue3/src/views/demo/main-home/components/instrumentSharing/index.vue
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/instrumentSharing/index.vue
@@ -2,63 +2,174 @@
   <div class="contianer">
     <div class="classify">
       <div class="item">
-        <div class="left">机构组织</div>
-        <div class="right">驻马店实验室(共407台)</div>
+        <div class="left">仪器类别</div>
+        <div class="right">
+          <div>通用</div>
+          <div>专用</div>
+        </div>
       </div>
       <div class="item">
-        <div class="left">机构组织</div>
-        <div class="right"><div v-for="i in 15" :key="i">黄淮创新中心</div></div>
+        <div class="left">学科领域</div>
+        <div class="right"
+          ><div
+            :class="indexsubjectIndex === index ? 'avtive' : ''"
+            @click="onIndexsubject(i, index)"
+            v-for="(i, index) in indexsubject"
+            :key="i.id"
+            >{{ i.name }}</div
+          ></div
+        >
       </div>
       <div class="item">
-        <div class="left">机构组织</div>
-        <div class="right">驻马店实验室(共407台)</div>
+        <div class="left">仪器分类:</div>
+        <div class="right">
+          <div :class="indexclassIndex === index ? 'avtive' : ''" @click="onIndexclass(i,index)" v-for="(i,index) in indexclass" :key="i.id">{{ i.instruName }}</div>
+        </div>
       </div>
     </div>
     <div class="list">
       <div class="top">
         <div class="left">已筛选条件</div>
-        <div class="right">2</div>
+        <div class="right"></div>
       </div>
       <div class="content">
-        <div class="item" v-for="i in 10" :key="i">
+        <div class="item" v-for="item in indexcomplist" :key="item.id">
           <div class="left"></div>
           <div class="right">
             <div class="info">
-              <div class="title">组合型四极杆轨道离子阱质谱仪 Q Exactive Plus Hybrid Quadrupole-Orbitrap Mass Spectrometer</div>
+              <div class="title">{{ item.name }}</div>
               <div class="info-list">
                 <ul>
                   <li>
                     <div class="label">状态</div>
-                    <div class="count">使用种</div>
+                    <div class="count">{{ item.state_dictText }}</div>
+                  </li>
+                  <li>
+                    <div class="label">类别</div>
+                    <div class="count">{{ item.category_dictText }}</div>
+                  </li>
+                  <li>
+                    <div class="label">服务次数</div>
+                    <div class="count">{{ item.serviceFrequency }}</div>
                   </li>
                   <li>
                     <div class="label">型号</div>
-                    <div class="count">Orbitrap Exploris 480</div>
+                    <div class="count">{{ item.specification }}</div>
                   </li>
                   <li>
-                    <div class="label">管理员</div>
-                    <div class="count">赵公正、郑婷、张美莹、孙正、李娥</div>
+                    <div class="label">类型</div>
+                    <div class="count">{{ item.type_dictText }}</div>
                   </li>
                   <li>
+                    <div class="label">申报单位</div>
+                    <div class="count">{{ item.declarationUnit_dictText }}</div>
+                  </li>
+                  <!-- <li>
+                    <div class="label">管理员</div>
+                    <div class="count">赵公正、郑婷、张美莹、孙正、李娥</div>
+                  </li> -->
+                  <!-- <li>
                     <div class="label">所在地点</div>
                     <div class="count">Emphasis → 高科创新中心B栋116</div>
-                  </li>
-                  <li>查看预约资源</li>
+                  </li> -->
+                  <!-- <li>查看预约资源</li> -->
                 </ul>
               </div>
             </div>
             <div class="btn">
-              <div class="booking">机时预约</div>
+              <div class="booking" @click="onBooking">机时预约</div>
               <div class="show-info">查看详情</div>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <!-- 分页 -->
+    <div class="pagination"> <Pagination :current="current" :pageSize="page.pageSize" :total="total" show-less-items @change="onChange" /></div>
   </div>
 </template>
 
-<script setup></script>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { getindexcomp, getindexsubject, getindexclass,getindexaward } from '@/api/mainHome/index';
+  import { Pagination } from 'ant-design-vue';
+  import { useRouter } from 'vue-router';
+  import axios from 'axios'
+  const router = useRouter();
+  const current = ref(1);
+  const total = ref(0);
+  const page = ref({
+    pageSize: 10,
+    pageNo: 1,
+    type: '', // 分类
+    category: '', //  仪器类别
+    disciplineFieId: '', // 学科领域
+  });
+  const indexcomplist = ref<any>([]);
+  const getindexcompEvent = async () => {
+    const data =page.value
+    for (const key in data) {
+      if (!page.value[key]) {
+        delete data[key]
+      }
+    }
+    const res: any = await getindexcomp(data);
+    console.log(res);
+    total.value = res.total;
+    indexcomplist.value = res.records;
+  };
+  getindexcompEvent();
+
+  const onChange = (page: number) => {
+    console.log(page);
+    current.value = page;
+  };
+  const indexsubject = ref<any>([]);
+  // 获取科学分类
+  const getindexsubjectEvent = async () => {
+    const res: any = await getindexsubject();
+    console.log(res);
+    indexsubject.value = res;
+  };
+  getindexsubjectEvent();
+  // 获取仪器分类
+  const indexclass = ref<any>([]);
+  const getindexclassEvent = async () => {
+    const res: any = await getindexclass();
+
+    indexclass.value = res;
+  };
+  getindexclassEvent();
+
+  const indexsubjectIndex = ref(null);
+  // 点击科学领域
+  const onIndexsubject = (data, index) => {
+    page.value.disciplineFieId = data.id;
+    indexsubjectIndex.value = index;
+
+    getindexcompEvent();
+  };
+  const indexclassIndex = ref(null);
+  // 点击仪器分类
+  const onIndexclass = (data, index) => {
+    page.value.type = data.id;
+    indexclassIndex.value = index;
+    getindexcompEvent();
+  }
+  // 预约
+  const onBooking = () => {
+    router.push('/instrument/InstrumentList')
+  }
+
+  // 获取创新券
+  const getindexawardEvent = async () => {
+    axios.get(import.meta.env.VITE_GLOB_API_URL_CXQ +  '/innovationvoucher/innovationVoucher/listcms').then(res => {
+      console.log(res);
+      
+    })
+  }
+  getindexawardEvent()
+</script>
 
 <style scoped lang="less">
   .contianer {
@@ -70,7 +181,6 @@
       .item {
         display: flex;
         min-height: 48px;
-
         .left {
           width: 120px;
           background-color: #f1f1f1;
@@ -85,6 +195,10 @@
           flex-wrap: wrap;
           div {
             margin-right: 20px;
+            cursor: pointer;
+          }
+          .avtive {
+            color: #002e97;
           }
         }
       }
@@ -132,10 +246,10 @@
                       width: 60px;
                     }
                   }
-                  li:last-child {
-                    color: #002e97;
-                    font-size: 14px;
-                  }
+                  // li:last-child {
+                  //   color: #002e97;
+                  //   font-size: 14px;
+                  // }
                 }
               }
             }
@@ -153,12 +267,14 @@
                 font-size: 14px;
               }
               .booking {
-                background-color: #002E97;
-                color: #fff
+                background-color: #002e97;
+                color: #fff;
+                cursor: pointer;
               }
-              .show-info{
-                border: 1px solid #002E97;
-                color: #002E97;
+              .show-info {
+                border: 1px solid #002e97;
+                color: #002e97;
+                cursor: pointer;
 
               }
             }
@@ -166,5 +282,11 @@
         }
       }
     }
+    .pagination {
+      background-color: #fff;
+      height: 70px;
+      display: flex;
+      justify-content: center;
+    }
   }
 </style>