From dd6f6fd6a99bf37f5348743457e7b731d30de9ad Mon Sep 17 00:00:00 2001
From: JayChou <xxx@gmail.com>
Date: Fri, 8 Nov 2024 10:38:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=96=B0=E9=97=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jeecgboot-vue3/src/api/mainHome/index.ts      |  15 +
 .../main-home/components/NewsList/index.vue   |  84 +++-
 .../components/innovationVouchers/index.vue   |  44 +-
 .../components/instrumentInfo/index.vue       | 422 +++++++++---------
 4 files changed, 330 insertions(+), 235 deletions(-)

diff --git a/jeecgboot-vue3/src/api/mainHome/index.ts b/jeecgboot-vue3/src/api/mainHome/index.ts
index 143fc1c..90de3bc 100644
--- a/jeecgboot-vue3/src/api/mainHome/index.ts
+++ b/jeecgboot-vue3/src/api/mainHome/index.ts
@@ -39,4 +39,19 @@ export function getindexaward(params) {
     method: 'GET',
     params,
   });
+}
+// 获取文章栏目
+export function getindexcolumn() {
+  return defHttp.request({
+    url: '/cms/front/getColumnList',
+    method: 'GET',
+  });
+}
+// 通过栏目获取文章
+export function getindexarticle(params) {
+  return defHttp.request({
+    url: '/cms/front/getArticleListByColumn',
+    method: 'GET',
+    params,
+  });
 }
\ No newline at end of file
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/NewsList/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/NewsList/index.vue
index 4ccf750..82e3ed9 100644
--- a/jeecgboot-vue3/src/views/demo/main-home/components/NewsList/index.vue
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/NewsList/index.vue
@@ -1,31 +1,71 @@
 <template>
   <div class="container">
     <div class="news-list">
-      <div class="item" v-for="i in 10" :key="i">
-        <div class="left"><div class="year">2024-10</div><div class="day">10</div></div>
+      <div class="item" v-for="i in newList" :key="i">
+        <div class="left"><div class="year">{{ i.publishTime.split('-')[0] }}-{{  i.publishTime.split('-')[1] }}</div><div class="day">{{  i.publishTime.split(' ')[0].split('-')[2] }}</div></div>
         <div class="right">
-          <div class="title">新闻标题</div>
-          <div class="editor">编辑 | 无糖</div>
+          <div class="title">{{ i.title }}</div>
+          <div class="editor">{{ i.source }}</div>
           <div class="description"
-            >小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本</div
+            ><div v-html="i.info"></div></div
           >
           <div class="get-info">查看详情</div>
         </div>
       </div>
+        <!-- 分页 -->
+        <div class="pagination"> <Pagination :current="current" :pageSize="page.pageSize" :total="total" show-less-items @change="onChange" /></div>
     </div>
     <!-- 栏目 -->
     <div class="column-list">
       <div class="title">栏目列表</div>
       <div class="list">
         <div class="item">全部</div>
-        <div class="item">项目申报</div>
-        <div class="item">新闻列表</div>
+        <div class="item" v-for="i in newColumnList" :key="i.id" @click="getMyNewsList(i)">{{ i.name }}</div>
+        <!-- <div class="item">项目申报</div>
+        <div class="item">新闻列表</div> -->
       </div>
     </div>
+
   </div>
+        
 </template>
 
-<script setup></script>
+<script setup>
+  import { Pagination } from 'ant-design-vue';
+
+  import { getindexcolumn, getindexarticle } from '@/api/mainHome';
+  import { ref } from 'vue';
+  const current = ref(1);
+  const total = ref(0);
+  const page = ref({
+    pageSize: 10,
+    pageNo: 1,
+  });
+  const newColumnList = ref([]);
+  const getindexcolumnEvent = async () => {
+    const res = await getindexcolumn();
+    console.log(res);
+    newColumnList.value = res;
+  };
+  getindexcolumnEvent();
+
+  const getMyNewsList = (item) => {
+    console.log(item);
+    getindexarticleEvent(item.id);
+  };
+  const newList = ref([]);
+  const getindexarticleEvent = async (id) => {
+    const res = await getindexarticle({ columnId: id, ...page.value });
+    console.log(res);
+    newList.value = res.records;
+    total.value = res.total;
+  };
+  const onChange = (page) => {
+    console.log(page);
+    page.pageNo = page;
+    getindexarticleEvent();
+  }
+</script>
 
 <style scoped lang="less">
   .container {
@@ -35,13 +75,14 @@
     display: flex;
     margin-top: 50px;
     .news-list {
-     width: calc(1200px - 415px);
-     margin-right: 30px;
-
+      position: relative;
+      width: calc(1200px - 415px);
+      margin-right: 30px;
+      min-height: 755px;
       .item {
         display: flex;
         width: 100%;
-        border-bottom: 2px solid #CCC;
+        border-bottom: 2px solid #ccc;
         padding-bottom: 45px;
         margin-top: 40px;
         .left {
@@ -109,21 +150,32 @@
       background-color: #fff;
       height: 755px;
       padding: 30px;
-      .title{
+      .title {
         font-size: 20px;
         font-weight: 600;
         color: #555;
       }
-      .list{
-        .item{
+      .list {
+        .item {
           font-size: 16px;
           color: #555;
           height: 50px;
           line-height: 50px;
-          border-bottom: 1px solid #D9D9D9;
+          border-bottom: 1px solid #d9d9d9;
           cursor: pointer;
         }
       }
     }
   }
+  .pagination {
+      // background-color: #fff;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 20px;
+      height: 70px;
+      display: flex;
+      justify-content: center;
+    }
 </style>
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/innovationVouchers/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/innovationVouchers/index.vue
index bb04430..46978b2 100644
--- a/jeecgboot-vue3/src/views/demo/main-home/components/innovationVouchers/index.vue
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/innovationVouchers/index.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="container">
-    <a-table :dataSource="indexaward" :columns="columns">
-      <template  #bodyCell="{ column }">
+    <a-table :dataSource="indexaward" :columns="columns" :pagination="pagination">
+      <!-- <template  #bodyCell="{ column }">
         <div v-if="column.key === 'setting'">
             <a-button type="text" primary>查看详情</a-button>
         </div>
-      </template>
+      </template> -->
     </a-table>
   </div>
 </template>
 
 <script setup>
+  import axios from 'axios';
   import { ref } from 'vue';
 
   const columns = [
@@ -35,18 +36,43 @@
       key: 'cxqCode',
     },
     {
-      title: '操作',
-
-      key: 'setting',
+      title: '申请单位',
+      dataIndex: 'proDept_dictText',
+      key: 'proDept_dictText',
     },
   ];
+  const handlePageChange = (page, pageSize) => {
+    // 页码改变时的处理函数
+    console.log(page, pageSize);
+    pagination.value.current = page;
+    getindexawardEvent()
+
+  };
+  const pagination = ref({
+    // 分页配置
+    pageSize: 10, // 每页显示的条数
+
+    showTotal: (total) => `共 ${total} 条`, // 显示总条数和当前数据范围
+    current: 1, // 当前页数
+    total: 0, // 总条数
+    onChange: handlePageChange, // 页码改变时的回调函数
+  });
   const indexaward = ref([]);
   const getindexawardEvent = async () => {
     console.log(111);
+    const data = {
+      pageNo: pagination.value.current,
+      pageSize: pagination.value.pageSize,
+    };
+    //   fetch(import.meta.env.VITE_GLOB_API_URL_CXQ + '/innovationvoucher/innovationVoucher/listcms',data)
+    //     .then((res) => res.json())
+    //     .then((res) => (indexaward.value = res.result.records));
+    // };
+    const res = await axios.get(import.meta.env.VITE_GLOB_API_URL_CXQ + '/innovationvoucher/innovationVoucher/listcms', { params: data });
+    console.log(res);
 
-    fetch(import.meta.env.VITE_GLOB_API_URL_CXQ + '/innovationvoucher/innovationVoucher/listcms')
-      .then((res) => res.json())
-      .then((res) => (indexaward.value = res.result.records));
+    indexaward.value = res.data.result.records;
+    pagination.value.total = res.data.result.total;
   };
   getindexawardEvent();
 </script>
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/instrumentInfo/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/instrumentInfo/index.vue
index 5222e43..f4b9e1c 100644
--- a/jeecgboot-vue3/src/views/demo/main-home/components/instrumentInfo/index.vue
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/instrumentInfo/index.vue
@@ -1,259 +1,261 @@
 <template>
-    <div class="container">
-        <div class="small">
-            <ul>
-                <li>首页</li>
-                <li>|</li>
-                <li>仪器共享</li>
-                <li>|</li>
-                <li>科研校园</li>
-            </ul>
+  <div class="container">
+    <div class="small">
+      <ul>
+        <li>首页</li>
+        <li>|</li>
+        <li>仪器共享</li>
+        <li>|</li>
+        <li>科研校园</li>
+      </ul>
+    </div>
+    <div class="header">
+      <div class="headerLeft">
+        <img src="@/assets/images/mainHome/aa.png" alt="" />
+      </div>
+      <div class="headerRight">
+        <h3>{{ info.name }}</h3>
+        <div class="b">
+          <div class="bb">
+            <p>状态<br />型号<br />仪器类型<br />生产厂商<br />仪器类别<br />服务次数</p>
+          </div>
+          <div class="bbb"
+            >{{ info.state_dictText }}<br />{{ info.specification }}<br />{{ info.type_dictText }}<br />{{ info.manufacturer }}<br />{{
+              info.category_dictText
+            }}<br />{{ info.serviceFrequency }}</div
+          >
         </div>
-        <div class="header">
-            <div class="headerLeft">
-                <img src="@/assets/images/mainHome/aa.png" alt="">
-            </div>
-            <div class="headerRight">
-                <h3>{{ info.name }}</h3>
-                <div class="b">
-                    <div class="bb">
-                        <p>状态<br>型号<br>仪器分类<br>生产厂商<br>仪器类别</p>
-                    </div>
-                    <div class="bbb">-<br>{{ info.state_dictText }}<br>分析仪器-质谱仪器-有机质谱仪器<br>杭州成功仪器质量高高科技有限公司<br>专用</div>
-                </div>
-                <div class="bbbb">
-                    <div class="bbbbb">所在地点&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp*&nbsp黄淮国际教育学院实验室</div>
-                    <button>立即预约</button>
-                </div>
-            </div>
+        <div class="bbbb">
+          <div class="bbbbb">所在地点&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{ cityName }}</div>
+          <button>立即预约</button>
         </div>
-        <div class="center">
-            <div class="box1">技术指标</div>
-            <div class="box2">
-                1&nbsp离子源<br>1.1&nbsp配有独立的电喷雾式离子源(ESI)、大气压化学离子源(APCI)<br>1.2&nbsp插拔式可互换ESI及APCI喷针，无需任何工具可实现ESI源及APCI源快速更换<br>1.3&nbspESI&nbsp流速范围：确保敏捷度不损失的前提下，无需分流，流速可达到2.5mL/min以上。<br>1.4&nbsp离子源温度：离子源内两路加热雾化气，辅助加热器温度不低于700℃，该最大温度可以在软件<br>界面下设置并运行
-            </div>
-            <div class="box1">2&nbsp离子源接口及传输系统</div>
-            <div class="box2">
-                2.1&nbsp离子传输通道(Q0)采用锥孔结构和饭吹气技术，无毛细管类设计装置，不会堵塞，且能有效防止<br>生物样本中中性分子与不发挥缓冲盐由于真空压力梯度进入四级杆，终身不必更换锥孔，节约清洗离<br>子传输通道的毛细管类组件的费用<br>2.2&nbsp离子传输系统拥有高压离子聚焦技术，压力至少达7.5mtorr,确保最佳的离子聚焦效果和离子传输<br>效率有效去除“记忆效应”和“交叉感染”
-            </div>
-            <div class="box1">主要功能：</div>
-            <div class="box2">
-                基于液相色谱-质谱联用技术，以液相色谱作为分离系统，质谱作为监测系统，与配套的检测试剂共同使用，在临床上用于对来源于人体样本<br>(如全血、血浆、血清、尿液样本)中的内源性物质和外源性物质(如维生素、激素)进行定性或定量检测<br>
-                服务内容：<br>有机化合物成分定量分析(如内源性代谢产物；药代动力学；毒物分析等)；血样、组织、细胞等的靶向代谢组学和靶向脂质分析；成分分离分<br>析；方法开发等
-            </div>
-            <div class="box1">用户须知</div>
-            <div class="box2">预约时间为周一至周五上午8:00-12:00,下午2:30(3:00)-5:30(6:00)</div>
-            <div class="box1">参考收费标准</div>
-            <div class="box2">协议收费</div>
+      </div>
+    </div>
+    <div class="center">
+      <div class="box1">技术指标</div>
+      <div class="box2">
+        {{ info.technicalIndex || '暂无信息' }}
+      </div>
+      <div class="box1">主要功能：</div>
+      <div class="box2">
+        {{ info.function || '暂无信息' }}
+      </div>
+      <div class="box1">用户须知</div>
+      <div class="box2">{{ info.notice || '暂无信息' }}</div>
+    </div>
+    <div class="btn">
+      <div class="btnTop">
+        <h3>留言交流</h3>
+        <button>我要留言</button>
+      </div>
+      <div class="btnBtn">
+        <div class="left">
+          <div class="box">
+            <img width="90px" src="@/assets/images/mainHome/h.png" alt="" />
+          </div>
+          游客123456
         </div>
-        <div class="btn">
-            <div class="btnTop">
-                <h3>留言交流</h3>
-                <button>我要留言</button>
-            </div>
-            <div class="btnBtn">
-                <div class="left">
-                    <div class="box">
-                        <img width="90px" src="@/assets/images/mainHome/h.png" alt="">
-                    </div>
-                    游客123456
-                </div>
-                <div class="right">
-                    <p>什么时候仪器空闲，</p>
-                    <p>麻烦联系123456789，谢谢</p>
-                    <div class="time">发布时间：2024.10.16&nbsp&nbsp17:26</div>
-                </div>
-            </div>
-
+        <div class="right">
+          <p>什么时候仪器空闲，</p>
+          <p>麻烦联系123456789，谢谢</p>
+          <div class="time">发布时间：2024.10.16&nbsp&nbsp17:26</div>
+        </div>
+      </div>
 
-            <div class="btnBtn">
-                <div class="left">
-                    <div class="box">
-                        <img width="90px" src="@/assets/images/mainHome/h.png" alt="">
-                    </div>
-                    游客123456
-                </div>
-                <div class="right">
-                    <p>什么时候仪器空闲，</p>
-                    <p>麻烦联系123456789，谢谢</p>
-                    <div class="time">发布时间：2024.10.16&nbsp&nbsp17:26</div>
-                </div>
-            </div>
-            <div class="btnBtn">
-                <div class="left">
-                    <div class="box">
-                        <img width="90px" src="@/assets/images/mainHome/h.png" alt="">
-                    </div>
-                    游客123456
-                </div>
-                <div class="right">
-                    <p>什么时候仪器空闲，</p>
-                    <p>麻烦联系123456789，谢谢</p>
-                    <div class="time">发布时间：2024.10.16&nbsp&nbsp17:26</div>
-                </div>
-            </div>
+      <div class="btnBtn">
+        <div class="left">
+          <div class="box">
+            <img width="90px" src="@/assets/images/mainHome/h.png" alt="" />
+          </div>
+          游客123456
         </div>
+        <div class="right">
+          <p>什么时候仪器空闲，</p>
+          <p>麻烦联系123456789，谢谢</p>
+          <div class="time">发布时间：2024.10.16&nbsp&nbsp17:26</div>
+        </div>
+      </div>
+      <div class="btnBtn">
+        <div class="left">
+          <div class="box">
+            <img width="90px" src="@/assets/images/mainHome/h.png" alt="" />
+          </div>
+          游客123456
+        </div>
+        <div class="right">
+          <p>什么时候仪器空闲，</p>
+          <p>麻烦联系123456789，谢谢</p>
+          <div class="time">发布时间：2024.10.16&nbsp&nbsp17:26</div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 <script setup>
-import {getindexnew} from'@/api/mainHome/index';
-import { ref } from 'vue';
-import { useRoute } from 'vue-router';
-const route = useRoute()
-const info = ref({})
-const getInfo = async () => {
-    const res = await getindexnew({id:route.query.id})
-    info.value = res
-}
-getInfo()
+  import { getindexnew } from '@/api/mainHome/index';
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import aredData from 'china-area-data';
+
+  const route = useRoute();
+  const info = ref({});
+  const cityName = ref('');
+  const getInfo = async () => {
+    const res = await getindexnew({ id: route.query.id });
+    info.value = res.records[0];
+    // console.log(aredData );
+    console.log(aredData[86][info.value.address.substring(0, 2) + '0000'] );
+    
+    cityName.value = aredData[86][info.value.address.substring(0, 2) + '0000'] + aredData[info.value.address.substring(0, 4) + '00'][info.value.address];
+  };
+  getInfo();
 </script>
 <style lang="less" scoped>
-.container {
+  .container {
     width: 1200px;
     margin: 0 auto;
     margin-top: 5px;
 
     .small {
-        height: 35px;
-        line-height: 35px;
-        font-size: 11px;
+      height: 35px;
+      line-height: 35px;
+      font-size: 11px;
     }
 
     .small li {
-        display: inline-block;
-        padding: 0 10px;
+      display: inline-block;
+      padding: 0 10px;
     }
 
     .header {
-        width: 100%;
-        height: 450px;
-        background-color: #ffffff;
-        display: flex;
-        justify-content: space-between;
-        padding: 60px 45px;
+      width: 100%;
+      height: 450px;
+      background-color: #ffffff;
+      display: flex;
+      justify-content: space-between;
+      padding: 60px 45px;
 
-        .headerLeft {
-            width: 310px;
-            background-color: #f3f6fb;
-        }
+      .headerLeft {
+        width: 310px;
+        background-color: #f3f6fb;
+      }
 
-        .headerRight {
-            width: 750px;
-        }
+      .headerRight {
+        width: 750px;
+      }
 
-        .headerRight h3 {
-            font-weight: 900;
-            font-size: 23px;
-            color: #333333;
-        }
-
-        .b {
-            margin-top: 20px;
-            width: 380px;
-            height: 160px;
-            display: flex;
-            justify-content: space-between;
-            color: #3f3f3f;
-            border: none;
-        }
+      .headerRight h3 {
+        font-weight: 900;
+        font-size: 23px;
+        color: #333333;
+      }
 
-        .bb {
-            width: 80px;
-        }
+      .b {
+        margin-top: 20px;
+        width: 380px;
+        height: 160px;
+        display: flex;
+        justify-content: space-between;
+        color: #3f3f3f;
+        border: none;
+      }
 
-        .bbb {
-            width: 290px;
+      .bb {
+        width: 80px;
+      }
 
-        }
+      .bbb {
+        width: 290px;
+      }
 
-        .bbbb {
-            width: 600px;
-            display: flex;
-            justify-content: space-between;
-        }
+      .bbbb {
+        width: 600px;
+        display: flex;
+        justify-content: space-between;
+      }
 
-        .bbbbb {
-            color: #7e7e7e;
-        }
+      .bbbbb {
+        color: #7e7e7e;
+      }
 
-        button {
-            width: 170px;
-            height: 40px;
-            background-color: #002e97;
-            right: 30px;
-            color: #ffffff;
-            border-radius: 0.3cap;
-            font-size: 14px;
-        }
+      button {
+        width: 170px;
+        height: 40px;
+        background-color: #002e97;
+        right: 30px;
+        color: #ffffff;
+        border-radius: 0.3cap;
+        font-size: 14px;
+      }
     }
 
     .center {
-        width: 100%;
-        height: 1050px;
-        background-color: #ffffff;
-        padding: 50px;
-        border-top: #ebebeb 1px solid;
-        border-bottom: #ebebeb 1px solid;
+      width: 100%;
+      height: 1050px;
+      background-color: #ffffff;
+      padding: 50px;
+      border-top: #ebebeb 1px solid;
+      border-bottom: #ebebeb 1px solid;
     }
 
     .box1 {
-        font-weight: 900;
-        color: #000000;
-        margin-bottom: 40px;
+      font-weight: 900;
+      color: #000000;
+      margin-bottom: 40px;
     }
 
     .box2 {
-        color: #1e1e1e;
-        margin-bottom: 40px;
+      color: #1e1e1e;
+      margin-bottom: 40px;
     }
 
     .btn {
-        height: 500px;
+      height: 500px;
 
-        padding: 20px 0px 10px 30px;
-        .btnTop{
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 25px;
-            h3{
-                font-weight: 900;
-                font-size: 19px;
-                color: #000000;
-            }
-                        button {
-                            width: 170px;
-                            height: 40px;
-                            background-color: #002e97;
-                            right: 30px;
-                            color: #ffffff;
-                            border-radius: 0.4cap;
-                            font-size: 14px;
-                            font-weight: 300;
-                        }
-        }
-    }
-    .btnBtn{
-        height: 110px;
-        width: 1170px;
+      padding: 20px 0px 10px 30px;
+      .btnTop {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 20px;
-        .left{
-            width: 100px;
+        margin-bottom: 25px;
+        h3 {
+          font-weight: 900;
+          font-size: 19px;
+          color: #000000;
         }
-        .right{
-            position: relative;
-            width: 1000px;
-            height: 110px;
-            background-color: #ffffff;
-            padding: 10px 10px 10px 30px;
-            .time{
-                position: absolute;
-                right: 20px;
-                bottom: 10px;
-                color: #b2b2b2;
-            }
+        button {
+          width: 170px;
+          height: 40px;
+          background-color: #002e97;
+          right: 30px;
+          color: #ffffff;
+          border-radius: 0.4cap;
+          font-size: 14px;
+          font-weight: 300;
+        }
+      }
+    }
+    .btnBtn {
+      height: 110px;
+      width: 1170px;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      .left {
+        width: 100px;
+      }
+      .right {
+        position: relative;
+        width: 1000px;
+        height: 110px;
+        background-color: #ffffff;
+        padding: 10px 10px 10px 30px;
+        .time {
+          position: absolute;
+          right: 20px;
+          bottom: 10px;
+          color: #b2b2b2;
         }
+      }
     }
-}
-</style>
\ No newline at end of file
+  }
+</style>