尚医通10:科室排班日期+科室排班详细数据+搭建平台用户系统前端环境

红太狼 2023-10-14 09:23 23阅读 0赞

###### 内容介绍 ######

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:426.1pt;"> 1、查看科室排班日期统计数据 2、查看科室排班详细数据 3、搭建平台用户系统前端环境 4、首页静态数据整合 5、首页数据显示接口 6、首页数据显示前端 </td> 
 </tr> 
 </tbody> 
</table>

###### 查看科室排班日期统计数据 ######

<table style="margin-left:-7.35pt;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:422.15pt;"> 1确认需求 2、实现接口 1）分析接口 *参数：page、limit、hoscode、depcode *返回值：R（Map（total、List&lt;BookingScheduleRuleVo&gt;。。。）） （2）创建controller <pre style="margin-left:.0001pt;text-align:left;">@Api(tags = "排班管理")

@RestController

@RequestMapping("/admin/hosp/schedule")

public class ScheduleController {

&nbsp;&nbsp;&nbsp; @Autowired

&nbsp;&nbsp;&nbsp; private ScheduleService scheduleService;

&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp; //根据医院编号 和 科室编号 ，查询排班规则数据

&nbsp;&nbsp;&nbsp; @ApiOperation(value ="查询排班规则统计数据")

&nbsp;&nbsp;&nbsp; @GetMapping("getScheduleRule/{page}/{limit}/{hoscode}/{depcode}")

&nbsp;&nbsp;&nbsp; public R getScheduleRule(@PathVariable long page,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @PathVariable long limit,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @PathVariable String hoscode,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @PathVariable String depcode) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Map&lt;String,Object&gt; map = scheduleService.getScheduleRule(page,limit,hoscode,depcode);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return R.ok().data(map);

&nbsp;&nbsp;&nbsp; }

}</pre> （3）如果是mysql如何实现 #根据医院编号 和 科室编号 ，查询排班规则统计数据,带分页带排序 SELECT s.workDate,COUNT(id) AS docCount, SUM(s.reservedNumber) AS reservedNumber, SUM(s.availableNumber) AS availableNumber &nbsp;FROM SCHEDULE s WHERE&nbsp; s.hoscode = '医院编号' AND s.depcode = '科室编号' GROUP BY s.workDate ORDER BY s.workDate LIMIT XXXX; <img alt="" height="283" src="https://img-blog.csdnimg.cn/c404fd11c2d34bebbd3c598ec6a448e4.png" width="986"> （4）梳理service实现步骤 <pre><code>//查询排班规则统计数据

@Override

public Map&lt;String, Object&gt; getScheduleRule(long page, long limit,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String hoscode, String depcode) {

&nbsp;&nbsp;&nbsp; //1创建返回对象

&nbsp;&nbsp;&nbsp; //2根据医院编码、科室编码筛选，根据排班日期、带排序带分页聚合查询(List)

&nbsp;&nbsp;&nbsp; //3根据医院编码、科室编码筛选，根据排班日期、聚合查询(total)

&nbsp;&nbsp;&nbsp; //4遍历集合根据排班日期推算出周几

&nbsp;&nbsp;&nbsp; //5把查询数据存入返回对象

&nbsp;&nbsp;&nbsp; //6补全数据

&nbsp;&nbsp;&nbsp; return null;

}
（5）导入日期工具依赖

&lt;dependency&gt;

&nbsp;&nbsp;&nbsp; &lt;groupId&gt;joda-time&lt;/groupId&gt;

&nbsp;&nbsp;&nbsp; &lt;artifactId&gt;joda-time&lt;/artifactId&gt;

&lt;/dependency&gt;
（6）实现接口方法

@Autowired

private MongoTemplate mongoTemplate;

@Autowired

private HospitalService hospitalService;

//查询排班规则统计数据

@Override

public Map&lt;String, Object&gt; getScheduleRule(long page, long limit,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String hoscode, String depcode) {

&nbsp;&nbsp;&nbsp; //1创建返回对象

&nbsp;&nbsp;&nbsp; Map&lt;String, Object&gt; result = new HashMap&lt;&gt;();

&nbsp;&nbsp;&nbsp; //2根据医院编码、科室编码筛选，根据排班日期、带排序带分页聚合查询(List)

&nbsp;&nbsp;&nbsp; //2.1封装筛选条件

&nbsp;&nbsp;&nbsp; Criteria criteria = Criteria.where("hoscode").is(hoscode)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .and("depcode").is(depcode);

&nbsp;&nbsp;&nbsp; //2.2创建聚合查询对象

&nbsp;&nbsp;&nbsp; Aggregation agg =Aggregation.newAggregation(

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //2.2.1设置筛选条件

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Aggregation.match(criteria),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //2.2.2设置聚合字段，查询收集字段

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Aggregation.group("workDate")

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .first("workDate").as("workDate")

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .count().as("docCount")

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .sum("reservedNumber").as("reservedNumber")

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .sum("availableNumber").as("availableNumber"),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //2.2.3设置排序

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Aggregation.sort(Sort.Direction.ASC,"workDate"),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //2.2.4设置分页

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Aggregation.skip((page-1)*limit),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Aggregation.limit(limit)

&nbsp;&nbsp;&nbsp; );

&nbsp;&nbsp;&nbsp; //2.3进行聚合查询（list）

&nbsp;&nbsp;&nbsp; AggregationResults&lt;BookingScheduleRuleVo&gt; aggregate = mongoTemplate.aggregate(agg, Schedule.class, BookingScheduleRuleVo.class);

&nbsp;&nbsp;&nbsp; List&lt;BookingScheduleRuleVo&gt; bookingScheduleRuleVoList = aggregate.getMappedResults();

&nbsp;&nbsp;&nbsp; //3根据医院编码、科室编码筛选，根据排班日期、聚合查询(total)

&nbsp;&nbsp;&nbsp; //3.1创建聚合查询对象

&nbsp;&nbsp;&nbsp; Aggregation aggTotal =Aggregation.newAggregation(

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //2.2.1设置筛选条件

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Aggregation.match(criteria),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //2.2.2设置聚合字段，查询收集字段

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Aggregation.group("workDate")

&nbsp;&nbsp;&nbsp; );

&nbsp;&nbsp;&nbsp; //3.2进行聚合查询（total）

&nbsp;&nbsp;&nbsp; AggregationResults&lt;BookingScheduleRuleVo&gt; aggregateTotal = mongoTemplate.aggregate(aggTotal, Schedule.class, BookingScheduleRuleVo.class);

&nbsp;&nbsp;&nbsp; List&lt;BookingScheduleRuleVo&gt; totalResults = aggregateTotal.getMappedResults();

&nbsp;&nbsp;&nbsp; int total = totalResults.size();

&nbsp;&nbsp;&nbsp; //4遍历集合根据排班日期推算出周几

&nbsp;&nbsp;&nbsp; for (BookingScheduleRuleVo bookingScheduleRuleVo : bookingScheduleRuleVoList) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Date workDate = bookingScheduleRuleVo.getWorkDate();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String dayOfWeek =this.getDayOfWeek(new DateTime(workDate));

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bookingScheduleRuleVo.setDayOfWeek(dayOfWeek);

&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; //5把查询数据存入返回对象

&nbsp;&nbsp;&nbsp; result.put("bookingScheduleRuleList",bookingScheduleRuleVoList);

&nbsp;&nbsp;&nbsp; result.put("total",total);

&nbsp;&nbsp;&nbsp; //6补全数据

&nbsp;&nbsp;&nbsp; //获取医院名称

&nbsp;&nbsp;&nbsp; String hosName = hospitalService.getHospName(hoscode);

&nbsp;&nbsp;&nbsp; //其他基础数据

&nbsp;&nbsp;&nbsp; Map&lt;String, String&gt; baseMap = new HashMap&lt;&gt;();

&nbsp;&nbsp;&nbsp; baseMap.put("hosname",hosName);

&nbsp;&nbsp;&nbsp; result.put("baseMap",baseMap);

&nbsp;&nbsp;&nbsp; return result;

}

*相关工具

//换算周几

private String getDayOfWeek(DateTime dateTime) {

&nbsp;&nbsp;&nbsp; String dayOfWeek = "";

&nbsp;&nbsp;&nbsp; switch (dateTime.getDayOfWeek()) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case DateTimeConstants.SUNDAY:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dayOfWeek = "周日";

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case DateTimeConstants.MONDAY:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dayOfWeek = "周一";

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case DateTimeConstants.TUESDAY:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dayOfWeek = "周二";

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case DateTimeConstants.WEDNESDAY:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dayOfWeek = "周三";

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case DateTimeConstants.THURSDAY:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dayOfWeek = "周四";

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case DateTimeConstants.FRIDAY:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dayOfWeek = "周五";

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case DateTimeConstants.SATURDAY:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dayOfWeek = "周六";

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; default:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;

&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; return dayOfWeek;

}

*相关接口

//根据hoscode获取医院名称

@Override

public String getHospName(String hoscode) {

&nbsp;&nbsp;&nbsp; Hospital hospital = hospitalRepository.getByHoscode(hoscode);

&nbsp;&nbsp;&nbsp; return hospital.getHosname();

}</code></pre> （7）测试 <img alt="" height="482" src="https://img-blog.csdnimg.cn/e311d02ad7344fa1b38ec30e406c7178.png" width="430"> 3、对接前端 （1）创建api接口文件 在api/yygh创建schedule.js <pre><code>import request from '@/utils/request'

const api_name = '/admin/hosp/schedule'

export default {

&nbsp;&nbsp;&nbsp; //查询排班规则统计数据

&nbsp;&nbsp;&nbsp; getScheduleRule(page,limit,hoscode,depcode) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return request({

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: `${api_name}/getScheduleRule/${page}/${limit}/${hoscode}/${depcode}`,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; method: 'get'

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })

&nbsp;&nbsp;&nbsp; }

}

（2）改造页面

&lt;!-- 排班日期 分页 --&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-tag

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; v-for="(item,index) in bookingScheduleList"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :key="item.id"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @click="selectDate(item.workDate, index)"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :type="index == activeIndex ? '' : 'info'"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style="height: 60px;margin-right: 5px;margin-right:15px;cursor:pointer;"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {
       { item.workDate }} {
       { item.dayOfWeek }}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {
       { item.availableNumber }} / {
       { item.reservedNumber }}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-tag&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- 分页 --&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-pagination

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :current-page="page"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :total="total"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :page-size="limit"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; class="pagination"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layout="prev, pager, next"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @current-change="getPage"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &gt;&lt;/el-pagination&gt;

（3）改造js

&lt;script&gt;

import hospApi from "@/api/yygh/hosp";

import scheduleApi from "@/api/yygh/schedule";

export default {

&nbsp; data() {

&nbsp;&nbsp;&nbsp; return {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data: [], //科室集合

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; defaultProps: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //默认支柱属性

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; children: "children",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; label: "depname"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hoscode: "", //医院编码

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeIndex: 0, //选中索引号

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; depcode: null, //选中科室编码

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; depname: null, //选中科室名称

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; workDate: null, //选中排班日期

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bookingScheduleList: [], //排班日期统计集合

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; baseMap: {}, //基础展示对象

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; page: 1, // 当前页

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; limit: 7, // 每页个数

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; total: 0 // 总页码

&nbsp;&nbsp;&nbsp; };

&nbsp; },

&nbsp; created() {

&nbsp;&nbsp;&nbsp; this.hoscode = this.$route.params.hoscode;

&nbsp;&nbsp;&nbsp; this.fetchData();

&nbsp; },

&nbsp; methods: {

&nbsp;&nbsp;&nbsp; //查询科室数据

&nbsp;&nbsp;&nbsp; fetchData() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hospApi.getDeptByHoscode(this.hoscode).then(response =&gt; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.data = response.data.list;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //默认选中第一个小科室信息

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.depcode = this.data[0].children[0].depcode;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.depname = this.data[0].children[0].depname;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //排班日期统计分页方法

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.getPage();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; //点击一个科室触发

&nbsp;&nbsp;&nbsp; handleNodeClick(node) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //如果大科室返回

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (node.children) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //设置选中科室信息

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.depcode = node.depcode;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.depname = node.depname;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //排班日期统计分页方法

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.getPage();

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; //排班日期统计分页方法

&nbsp;&nbsp;&nbsp; getPage(page = 1) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //设置参数

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.page = page;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.workDate = null;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.activeIndex = 0;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //调用排班日期统计方法

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.getBookingScheduleList();

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; //调用排班日期统计方法

&nbsp;&nbsp;&nbsp; getBookingScheduleList() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scheduleApi

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .getScheduleRule(this.page, this.limit, this.hoscode, this.depcode)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .then(response =&gt; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.bookingScheduleList = response.data.bookingScheduleRuleList

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.total = response.data.total

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.baseMap = response.data.baseMap

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(this.workDate == null){

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.workDate&nbsp; = this.bookingScheduleList[0].workDate

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //......

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; //点选某一天

&nbsp;&nbsp;&nbsp; selectDate(workDate, index){

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.workDate&nbsp; = workDate

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.activeIndex = index

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //......

&nbsp;&nbsp;&nbsp; }

&nbsp; }

};

&lt;/script&gt;</code></pre> （4）测试 <img alt="" height="305" src="https://img-blog.csdnimg.cn/dfa5f2f64c88467ea18d13aff6371a9f.png" width="1130"> </td> 
 </tr> 
 </tbody> 
</table>

###### 查看科室排班详细数据 ######

@GetMapping("getScheduleDetail/{hoscode}/{depcode}/{workDate}")

public R getScheduleDetail( @PathVariable String hoscode,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @PathVariable String depcode,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @PathVariable String workDate) {

&nbsp;&nbsp;&nbsp; List&lt;Schedule&gt; list = scheduleService

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .getScheduleDetail(hoscode,depcode,workDate);

&nbsp;&nbsp;&nbsp; return R.ok().data("list",list);

}</pre> （3）实现service <pre style="margin-left:.0001pt;text-align:left;">//查询排班详细信息集合

 @Override

public List&lt;Schedule&gt; getScheduleDetail(String hoscode, String depcode, String workDate) {

&nbsp;&nbsp;&nbsp; //1调用方法查询数据

&nbsp;&nbsp;&nbsp; List&lt;Schedule&gt;&nbsp; scheduleList =

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scheduleRepository.getByHoscodeAndDepcodeAndWorkDate(

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hoscode,depcode,new DateTime(workDate).toDate()

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; );

&nbsp;&nbsp;&nbsp; //2遍历集合翻译字段

&nbsp;&nbsp;&nbsp; scheduleList.forEach(item-&gt;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.packSchedule(item);

&nbsp;&nbsp;&nbsp; });

&nbsp;&nbsp;&nbsp; return scheduleList;

}</pre> （4）查询接口 <pre style="margin-left:.0001pt;text-align:left;">

@Repository

public interface ScheduleRepository extends MongoRepository&lt;Schedule,String&gt; {

&nbsp;&nbsp;&nbsp; //根据hoscode、hosScheduleId查询排班信息

&nbsp;&nbsp;&nbsp; Schedule getByHoscodeAndHosScheduleId(String hoscode, String hosScheduleId);

&nbsp;&nbsp;&nbsp; //根据医院编号 、科室编号和工作日期，查询排班详细信息

&nbsp;&nbsp;&nbsp; List&lt;Schedule&gt; getByHoscodeAndDepcodeAndWorkDate(String hoscode, String depcode, Date workDate);

}</pre> （5）测试 <img alt="" height="443" src="https://img-blog.csdnimg.cn/1981c786287f4ac6a455995d7b24ad93.png" width="432"> 3、对接前端 <pre><code>（1）创建api

//查询排班详情

&nbsp;&nbsp;&nbsp; getScheduleDetail(hoscode, depcode, workDate) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return request({

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: `${api_name}/getScheduleDetail/${hoscode}/${depcode}/${workDate}`,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; method: 'get'

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })

&nbsp;&nbsp;&nbsp; }

（2）添加页面元素

&lt;el-table v-loading="listLoading" :data="scheduleList" border fit highlight-current-row&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-table-column label="序号" width="60" align="center"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;template slot-scope="scope"&gt;{
       { scope.$index + 1 }}&lt;/template&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-table-column&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-table-column label="职称" width="150"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;template slot-scope="scope"&gt;{
       { scope.row.title }} | {
       { scope.row.docname }}&lt;/template&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-table-column&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-table-column label="号源时间" width="80"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;template slot-scope="scope"&gt;{
       { scope.row.workTime == 0 ? "上午" : "下午" }}&lt;/template&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-table-column&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-table-column prop="reservedNumber" label="可预约数" width="80"/&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-table-column prop="availableNumber" label="剩余预约数" width="100"/&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-table-column prop="amount" label="挂号费(元)" width="90"/&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-table-column prop="skill" label="擅长技能"/&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-table&gt;

（3）改造js

data() {

&nbsp;&nbsp;&nbsp; return {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data: [], //科室集合

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; defaultProps: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //默认支柱属性

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; children: "children",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; label: "depname"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hoscode: "", //医院编码

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeIndex: 0, //选中索引号

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; depcode: null, //选中科室编码

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; depname: null, //选中科室名称

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; workDate: null, //选中排班日期

&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;bookingScheduleList: [], //排班日期统计集合

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; baseMap: {}, //基础展示对象

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; page: 1, // 当前页

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; limit: 7, // 每页个数

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; total: 0, // 总页码

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; listLoading: true,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scheduleList: []

&nbsp;&nbsp;&nbsp; };

&nbsp; },

&nbsp; created() {

&nbsp;&nbsp;&nbsp; this.hoscode = this.$route.params.hoscode;

&nbsp;&nbsp;&nbsp; this.fetchData();

&nbsp; },

&nbsp; methods: {

&nbsp;&nbsp;&nbsp; //查询科室数据

&nbsp;&nbsp;&nbsp; fetchData() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hospApi.getDeptByHoscode(this.hoscode).then(response =&gt; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.data = response.data.list;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //默认选中第一个小科室信息

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.depcode = this.data[0].children[0].depcode;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.depname = this.data[0].children[0].depname;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //排班日期统计分页方法

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.getPage();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; //点击一个科室触发

&nbsp;&nbsp;&nbsp; handleNodeClick(node) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //如果大科室返回

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (node.children) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //设置选中科室信息

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.depcode = node.depcode;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.depname = node.depname;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //排班日期统计分页方法

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.getPage();

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; //排班日期统计分页方法

&nbsp;&nbsp;&nbsp; getPage(page = 1) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //设置参数

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.page = page;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.workDate = null;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.activeIndex = 0;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.scheduleList = [];

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //调用排班日期统计方法

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.getBookingScheduleList();

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; //调用排班日期统计方法

&nbsp;&nbsp;&nbsp; getBookingScheduleList() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scheduleApi

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .getScheduleRule(this.page, this.limit, this.hoscode, this.depcode)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .then(response =&gt; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.bookingScheduleList = response.data.bookingScheduleRuleList;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.total = response.data.total;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.baseMap = response.data.baseMap;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (this.workDate == null) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.workDate = this.bookingScheduleList[0].workDate;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //获取排班明细集合

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.getScheduleList();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; //点选某一天

&nbsp;&nbsp;&nbsp; selectDate(workDate, index) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.workDate = workDate;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.activeIndex = index;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //获取排班明细集合

&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;this.getScheduleList();

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; //获取排班明细集合

&nbsp;&nbsp;&nbsp; getScheduleList() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scheduleApi

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .getScheduleDetail(this.hoscode, this.depcode, this.workDate)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .then(response =&gt; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(response)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.scheduleList = response.data.list;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.listLoading = false;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

&nbsp;&nbsp;&nbsp; }

&nbsp; }</code></pre> （4）测试 <img alt="" height="405" src="https://img-blog.csdnimg.cn/8632caa3d56c42e5b6e5446efe386d4e.png" width="1183"> </td> 
 </tr> 
 </tbody> 
</table>

###### 搭建平台用户系统前端环境 ######

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#000000;vertical-align:top;width:426.1pt;"> 1、相关概念 （1）服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。 （2）SEO 服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 2、什么是NUXT Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。 <img alt="" height="346" src="https://img-blog.csdnimg.cn/48eddee1bfdb4e0aa803b43caa0052d2.png" width="874"> 2、创建前端工程（标准步骤） （1）获取工程包 <img alt="" height="151" src="https://img-blog.csdnimg.cn/760df8a2a412496590a711197038b619.png" width="661"> （2）解压后，找到目录，修改工程名，复制到开发目录 yygh_site <img alt="" height="415" src="https://img-blog.csdnimg.cn/9ef92b9f718b44d0b2a065d35bb72f39.png" width="637"> （3）修改配置文件，插值表达式改成字符串 <img alt="" height="344" src="https://img-blog.csdnimg.cn/e7b006a59ec043dcad05cb4bd85e2e30.png" width="814"> <img alt="" height="441" src="https://img-blog.csdnimg.cn/58d598d422c6415889703964bb97fc50.png" width="752"> （4）下载依赖 （5）启动工程 npm run dev 3、创建前端工程（快捷步骤） （1）获取工程包 <img alt="" height="157" src="https://img-blog.csdnimg.cn/9c9824af25ca4bbf8b7fcd7e0670f18f.png" width="644"> （2）解压后，复制到开发目录 （3）启动工程 npm run dev <img alt="" height="577" src="https://img-blog.csdnimg.cn/fbf098cfae90432e81c72e5db54c27b8.png" width="629"> <img alt="" height="607" src="https://img-blog.csdnimg.cn/ec4ec62155fc4a1dbf74bd9b228275a2.png" width="1055"> 4、工程目录介绍 （1）资源目录 assets &nbsp;用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。 （2）布局目录 layouts 用于组织应用的布局组件。 （3）页面目录 pages 存放前台系统所有页面内容，和layouts下组件整合完整页面 5、封装axios （1）安装 npm install axios （2）创建utils文件夹，创建request.js <pre><code>import axios from 'axios'

import { MessageBox, Message } from 'element-ui'

// 创建axios实例

const service = axios.create({

&nbsp;&nbsp;&nbsp; baseURL: 'http://localhost:8200/',

&nbsp;&nbsp;&nbsp; timeout: 15000 // 请求超时时间

})

// http request 拦截器

service.interceptors.request.use(

&nbsp;&nbsp;&nbsp; config =&gt; {

&nbsp;&nbsp;&nbsp; // token 先不处理，后续使用时在完善

&nbsp;&nbsp;&nbsp; return config

&nbsp; err =&gt; {

&nbsp;&nbsp;&nbsp; return Promise.reject(err)

})

// http response 拦截器

service.interceptors.response.use(

&nbsp;&nbsp;&nbsp; response =&gt; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (response.data.code !== 20000) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Message({

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; message: response.data.message,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type: 'error',

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; duration: 5 * 1000

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return Promise.reject(response.data)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return response.data

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp; error =&gt; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return Promise.reject(error.response)

})

export default service</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

###### **首页静态数据整合** ######

创建layouts/myheader.vue文件

&lt;template&gt;

&nbsp; &lt;div class="header-container"&gt;

&nbsp;&nbsp;&nbsp; &lt;div class="wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- logo --&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="left-wrapper v-link selected"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img style="width: 50px" width="50" height="50" src="~assets/images/logo.png"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="text"&gt;尚医通 预约挂号统一平台&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- 右侧 --&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="right-wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="v-link clickable"&gt;帮助中心&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="v-link clickable" @click="dialogUserFormVisible = true"&gt;登录/注册&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp; &lt;/div&gt;

&lt;/template&gt;

&lt;script&gt;

export default {};

&lt;/script&gt;

（2）提取尾文件

创建layouts/myfooter.vue文件

&lt;template&gt;

&nbsp; &lt;div class="footer-container"&gt;

&nbsp;&nbsp;&nbsp; &lt;div class="wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div&gt;&lt;span class="record"&gt;京ICP备atguigu号&lt;/span&gt;&lt;span

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; class="phone"&gt;www.atguigu.com&lt;/span&gt;&lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="right"&gt;&lt;span

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; class="v-link clickable"&gt; 联系我们 &lt;/span&gt;&lt;span

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; class="v-link clickable"&gt; 合作伙伴 &lt;/span&gt;&lt;span

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; class="v-link clickable"&gt; 用户协议 &lt;/span&gt;&lt;span

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; class="v-link clickable"&gt; 隐私协议 &lt;/span&gt;&lt;/div&gt;

&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp; &lt;/div&gt;

&lt;/template&gt;

&lt;script&gt;

export default {

}

&lt;/script&gt;

（3）整合到默认布局

修改layouts/default.vue文件

&lt;template&gt;

&nbsp; &lt;div class="app-container"&gt;

&nbsp;&nbsp;&nbsp; &lt;div id="main"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- 公共头 --&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;myheader/&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="main-container"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-scrollbar class='page-component__scroll'&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- 内容区域 --&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;nuxt/&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-scrollbar&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- 公共底 --&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;myfooter/&gt;

&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp; &lt;/div&gt;

&lt;/template&gt;

&lt;script&gt;

import '~/assets/css/app.css'

import '~/assets/css/chunk.css'

import '~/assets/css/iconfont.css'

import '~/assets/css/main.css'

import myheader from './myheader'

import myfooter from './myfooter'

export default {

&nbsp; components: {

&nbsp;&nbsp;&nbsp; myheader,myfooter

&nbsp; },

&nbsp; mounted() {

&nbsp;&nbsp;&nbsp; window.document.getElementById("__nuxt").classList.add("app-container")

&nbsp;&nbsp;&nbsp; window.document.getElementById("__layout").classList.add("app-container")

&nbsp; }

}

&lt;/script&gt;

4、修改首页面

修改pages/index.vue文件

&lt;template&gt;

&nbsp; &lt;div class="home page-component"&gt;

&nbsp;&nbsp;&nbsp; &lt;el-carousel indicator-position="outside"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-carousel-item v-for="item in 2" :key="item"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src="~assets/images/web-banner1.png" alt&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-carousel-item&gt;

&nbsp;&nbsp;&nbsp; &lt;/el-carousel&gt;

&nbsp;&nbsp;&nbsp; &lt;!-- 搜索 --&gt;

&nbsp;&nbsp;&nbsp; &lt;div class="search-container"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="search-wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="hospital-search"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;el-autocomplete

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; class="search-input"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; prefix-icon="el-icon-search"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; v-model="state"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :fetch-suggestions="querySearchAsync"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; placeholder="点击输入医院名称"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @select="handleSelect"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span slot="suffix" class="search-btn v-link highlight clickable selected"&gt;搜索&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/el-autocomplete&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp; &lt;!-- bottom --&gt;

&nbsp;&nbsp;&nbsp; &lt;div class="bottom"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="left"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="home-filter-wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="title"&gt;医院&lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="filter-wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="label"&gt;等级：&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="condition-wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link highlight clickable selected"&gt;全部&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;三级医院&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;二级医院&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;一级医院&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="filter-wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="label"&gt;地区：&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="condition-wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link highlight clickable selected"&gt;全部&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;东城区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;西城区&lt;/span&gt;

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="item v-link clickable"&gt;朝阳区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;丰台区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;石景山区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;海淀区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;门头沟区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;房山区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;通州区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;顺义区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;昌平区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;大兴区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;怀柔区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;平谷区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;密云区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="item v-link clickable"&gt;延庆区&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="v-scroll-list hospital-list"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="v-card clickable list-item"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="hospital-list-item hos-item" index="0"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="hospital-title"&gt;北京协和医院&lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="bottom-container"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="icon-wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="iconfont"&gt;&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 三级甲等

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="icon-wrapper"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="iconfont"&gt;&lt;/span&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 每天8:30放号

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src="images/23176337663806575.png" alt="北京协和医院" class="hospital-img"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="v-card clickable list-item space"&gt;