zhc077
/
zmd_kejiju
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接新闻

Browse Source
master
JayChou 2 weeks ago
parent dbdd892484
commit dd6f6fd6a9
4 changed files with 330 additions and 235 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      jeecgboot-vue3/src/api/mainHome/index.ts
  2. 84
      jeecgboot-vue3/src/views/demo/main-home/components/NewsList/index.vue
  3. 44
      jeecgboot-vue3/src/views/demo/main-home/components/innovationVouchers/index.vue
  4. 420
      jeecgboot-vue3/src/views/demo/main-home/components/instrumentInfo/index.vue

15
jeecgboot-vue3/src/api/mainHome/index.ts
Unescape View File

@ -40,3 +40,18 @@ export function getindexaward(params) {
params, 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,
});
}

84
jeecgboot-vue3/src/views/demo/main-home/components/NewsList/index.vue
Unescape View File

@ -1,31 +1,71 @@
<template> <template>
<div class="container"> <div class="container">
<div class="news-list"> <div class="news-list">
<div class="item" v-for="i in 10" :key="i"> <div class="item" v-for="i in newList" :key="i">
<div class="left"><div class="year">2024-10</div><div class="day">10</div></div> <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="right">
<div class="title">新闻标题</div> <div class="title">{{ i.title }}</div>
<div class="editor">编辑 | 无糖</div> <div class="editor">{{ i.source }}</div>
<div class="description" <div class="description"
>小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本</div ><div v-html="i.info"></div></div
> >
<div class="get-info">查看详情</div> <div class="get-info">查看详情</div>
</div> </div>
</div> </div>
<!-- 分页 -->
<div class="pagination"> <Pagination :current="current" :pageSize="page.pageSize" :total="total" show-less-items @change="onChange" /></div>
</div> </div>
<!-- 栏目 --> <!-- 栏目 -->
<div class="column-list"> <div class="column-list">
<div class="title">栏目列表</div> <div class="title">栏目列表</div>
<div class="list"> <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 class="item">新闻列表</div> -->
</div> </div>
</div> </div>
</div> </div>
</template> </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"> <style scoped lang="less">
.container { .container {
@ -35,13 +75,14 @@
display: flex; display: flex;
margin-top: 50px; margin-top: 50px;
.news-list { .news-list {
width: calc(1200px - 415px); position: relative;
margin-right: 30px; width: calc(1200px - 415px);
margin-right: 30px;
min-height: 755px;
.item { .item {
display: flex; display: flex;
width: 100%; width: 100%;
border-bottom: 2px solid #CCC; border-bottom: 2px solid #ccc;
padding-bottom: 45px; padding-bottom: 45px;
margin-top: 40px; margin-top: 40px;
.left { .left {
@ -109,21 +150,32 @@
background-color: #fff; background-color: #fff;
height: 755px; height: 755px;
padding: 30px; padding: 30px;
.title{ .title {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #555; color: #555;
} }
.list{ .list {
.item{ .item {
font-size: 16px; font-size: 16px;
color: #555; color: #555;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
border-bottom: 1px solid #D9D9D9; border-bottom: 1px solid #d9d9d9;
cursor: pointer; 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> </style>

44
jeecgboot-vue3/src/views/demo/main-home/components/innovationVouchers/index.vue
Unescape View File

@ -1,16 +1,17 @@
<template> <template>
<div class="container"> <div class="container">
<a-table :dataSource="indexaward" :columns="columns"> <a-table :dataSource="indexaward" :columns="columns" :pagination="pagination">
<template #bodyCell="{ column }"> <!-- <template #bodyCell="{ column }">
<div v-if="column.key === 'setting'"> <div v-if="column.key === 'setting'">
<a-button type="text" primary>查看详情</a-button> <a-button type="text" primary>查看详情</a-button>
</div> </div>
</template> </template> -->
</a-table> </a-table>
</div> </div>
</template> </template>
<script setup> <script setup>
import axios from 'axios';
import { ref } from 'vue'; import { ref } from 'vue';
const columns = [ const columns = [
@ -35,18 +36,43 @@
key: 'cxqCode', key: 'cxqCode',
}, },
{ {
title: '操作', title: '申请单位',
dataIndex: 'proDept_dictText',
key: 'setting', 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 indexaward = ref([]);
const getindexawardEvent = async () => { const getindexawardEvent = async () => {
console.log(111); 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') indexaward.value = res.data.result.records;
.then((res) => res.json()) pagination.value.total = res.data.result.total;
.then((res) => (indexaward.value = res.result.records));
}; };
getindexawardEvent(); getindexawardEvent();
</script> </script>

420
jeecgboot-vue3/src/views/demo/main-home/components/instrumentInfo/index.vue
Unescape View File

@ -1,259 +1,261 @@
<template> <template>
<div class="container"> <div class="container">
<div class="small"> <div class="small">
<ul> <ul>
<li>首页</li> <li>首页</li>
<li>|</li> <li>|</li>
<li>仪器共享</li> <li>仪器共享</li>
<li>|</li> <li>|</li>
<li>科研校园</li> <li>科研校园</li>
</ul> </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>
<div class="header"> <div class="bbbb">
<div class="headerLeft"> <div class="bbbbb">所在地点&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{ cityName }}</div>
<img src="@/assets/images/mainHome/aa.png" alt=""> <button>立即预约</button>
</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> </div>
<div class="center"> </div>
<div class="box1">技术指标</div> </div>
<div class="box2"> <div class="center">
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 class="box1">技术指标</div>
</div> <div class="box2">
<div class="box1">2&nbsp离子源接口及传输系统</div> {{ info.technicalIndex || '暂无信息' }}
<div class="box2"> </div>
2.1&nbsp离子传输通道(Q0)采用锥孔结构和饭吹气技术，无毛细管类设计装置，不会堵塞，且能有效防止<br>生物样本中中性分子与不发挥缓冲盐由于真空压力梯度进入四级杆，终身不必更换锥孔，节约清洗离<br>子传输通道的毛细管类组件的费用<br>2.2&nbsp离子传输系统拥有高压离子聚焦技术，压力至少达7.5mtorr,确保最佳的离子聚焦效果和离子传输<br>效率有效去除“记忆效应”和“交叉感染” <div class="box1">主要功能：</div>
</div> <div class="box2">
<div class="box1">主要功能：</div> {{ info.function || '暂无信息' }}
<div class="box2"> </div>
基于液相色谱-质谱联用技术，以液相色谱作为分离系统，质谱作为监测系统，与配套的检测试剂共同使用，在临床上用于对来源于人体样本<br>(如全血、血浆、血清、尿液样本)中的内源性物质和外源性物质(如维生素、激素)进行定性或定量检测<br> <div class="box1">用户须知</div>
服务内容：<br>有机化合物成分定量分析(如内源性代谢产物；药代动力学；毒物分析等)；血样、组织、细胞等的靶向代谢组学和靶向脂质分析；成分分离分<br>析；方法开发等 <div class="box2">{{ info.notice || '暂无信息' }}</div>
</div> </div>
<div class="box1">用户须知</div> <div class="btn">
<div class="box2">预约时间为周一至周五上午8:00-12:00,下午2:30(3:00)-5:30(6:00)</div> <div class="btnTop">
<div class="box1">参考收费标准</div> <h3>留言交流</h3>
<div class="box2">协议收费</div> <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>
<div class="btn"> <div class="right">
<div class="btnTop"> <p>什么时候仪器空闲，</p>
<h3>留言交流</h3> <p>麻烦联系123456789，谢谢</p>
<button>我要留言</button> <div class="time">发布时间：2024.10.16&nbsp&nbsp17:26</div>
</div> </div>
<div class="btnBtn"> </div>
<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="btnBtn">
<div class="left"> <div class="left">
<div class="box"> <div class="box">
<img width="90px" src="@/assets/images/mainHome/h.png" alt=""> <img width="90px" src="@/assets/images/mainHome/h.png" alt="" />
</div> </div>
游客123456 游客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>
<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>
</div>
</template> </template>
<script setup> <script setup>
import {getindexnew} from'@/api/mainHome/index'; import { getindexnew } from '@/api/mainHome/index';
import { ref } from 'vue'; import { ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
const route = useRoute() import aredData from 'china-area-data';
const info = ref({})
const getInfo = async () => { const route = useRoute();
const res = await getindexnew({id:route.query.id}) const info = ref({});
info.value = res const cityName = ref('');
} const getInfo = async () => {
getInfo() 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .container {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
margin-top: 5px; margin-top: 5px;
.small { .small {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
font-size: 11px; font-size: 11px;
} }
.small li { .small li {
display: inline-block; display: inline-block;
padding: 0 10px; padding: 0 10px;
} }
.header { .header {
width: 100%; width: 100%;
height: 450px; height: 450px;
background-color: #ffffff; background-color: #ffffff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 60px 45px; padding: 60px 45px;
.headerLeft {
width: 310px;
background-color: #f3f6fb;
}
.headerRight { .headerLeft {
width: 750px; width: 310px;
} background-color: #f3f6fb;
}
.headerRight h3 { .headerRight {
font-weight: 900; width: 750px;
font-size: 23px; }
color: #333333;
}
.b { .headerRight h3 {
margin-top: 20px; font-weight: 900;
width: 380px; font-size: 23px;
height: 160px; color: #333333;
display: flex; }
justify-content: space-between;
color: #3f3f3f;
border: none;
}
.bb { .b {
width: 80px; margin-top: 20px;
} width: 380px;
height: 160px;
display: flex;
justify-content: space-between;
color: #3f3f3f;
border: none;
}
.bbb { .bb {
width: 290px; width: 80px;
}
} .bbb {
width: 290px;
}
.bbbb { .bbbb {
width: 600px; width: 600px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.bbbbb { .bbbbb {
color: #7e7e7e; color: #7e7e7e;
} }
button { button {
width: 170px; width: 170px;
height: 40px; height: 40px;
background-color: #002e97; background-color: #002e97;
right: 30px; right: 30px;
color: #ffffff; color: #ffffff;
border-radius: 0.3cap; border-radius: 0.3cap;
font-size: 14px; font-size: 14px;
} }
} }
.center { .center {
width: 100%; width: 100%;
height: 1050px; height: 1050px;
background-color: #ffffff; background-color: #ffffff;
padding: 50px; padding: 50px;
border-top: #ebebeb 1px solid; border-top: #ebebeb 1px solid;
border-bottom: #ebebeb 1px solid; border-bottom: #ebebeb 1px solid;
} }
.box1 { .box1 {
font-weight: 900; font-weight: 900;
color: #000000; color: #000000;
margin-bottom: 40px; margin-bottom: 40px;
} }
.box2 { .box2 {
color: #1e1e1e; color: #1e1e1e;
margin-bottom: 40px; margin-bottom: 40px;
} }
.btn { .btn {
height: 500px; height: 500px;
padding: 20px 0px 10px 30px; padding: 20px 0px 10px 30px;
.btnTop{ .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;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 25px;
.left{ h3 {
width: 100px; font-weight: 900;
font-size: 19px;
color: #000000;
} }
.right{ button {
position: relative; width: 170px;
width: 1000px; height: 40px;
height: 110px; background-color: #002e97;
background-color: #ffffff; right: 30px;
padding: 10px 10px 10px 30px; color: #ffffff;
.time{ border-radius: 0.4cap;
position: absolute; font-size: 14px;
right: 20px; font-weight: 300;
bottom: 10px; }
color: #b2b2b2; }
} }
.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> </style>
Write Preview
Loading…
Cancel
Save