Day110. Shangyitong: gateway integration, hospital scheduling management: Department list, statistics based on date, scheduling details

Catalog

One 、Gateway gateway

build

Gateway solves cross domain problems

Two 、 Hospital scheduling management

One 、 Demand analysis

Two 、 List of departments （ Interface ）

1、 Back end interface implementation

2、 Front end docking

3、 ... and 、 View the statistics of department shift scheduling date

1、 Back end interface implementation

2、 Front end docking

Four 、 Schedule details list

1、 Back end interface implementation

2、 Front end docking

---

One 、Gateway gateway

What is it? ？

Why not Nginx？

Nginx The reverse proxy cluster needs to be configured , It's easy to make mistakes

Gateway As an application , We also need to ask nacos To register , You can get the service address dynamically . Forward the request through the service name . Relatively more flexible

Relevant concepts

（1） route . Routing is the most basic part of the gateway , There is a ID、 A purpose URL、 A set of assertions and a set of Filter form . If the route is asserted to be true , Then state the requested URL Match configuration

（2） Assertion .Java8 The assertion function in .Spring Cloud Gateway The assertion function input type in is Spring5.0 In the framework ServerWebExchange.Spring Cloud Gateway The assertion function in allows developers to define matches that come from http request Any information in , Such as request headers and parameters .

（3） filter .( Filter group ) A standard Spring webFilter.Spring cloud gateway Medium filter There are two types of Filter, Namely Gateway Filter and Global Filter. filter Filter The request and response will be modified

build

1. Create a new module  service-gateway, Introduce dependencies

    <dependencies>
        <dependency>
            <groupId>com.atguigu</groupId>
            <artifactId>common_utils</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
        </dependency>

        <!--  Service registration  -->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>
    </dependencies>

2.  To write application.properties The configuration file

#  Service port 
server.port=8222
#  service name 
spring.application.name=service-gateway

# nacos Service address 
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

# Use service discovery routing 
spring.cloud.gateway.discovery.locator.enabled=true

# Set the routing id
spring.cloud.gateway.routes[0].id=service-hosp
# To set up a route uri  lb: Load balancing 
spring.cloud.gateway.routes[0].uri=lb://service-hosp
# Set route assertion , agent servicerId by auth-service Of /auth/ route 
spring.cloud.gateway.routes[0].predicates= Path=/*/hosp/**

# Set the routing id
spring.cloud.gateway.routes[1].id=service-cmn
# To set up a route uri
spring.cloud.gateway.routes[1].uri=lb://service-cmn
# Set route assertion , agent servicerId by auth-service Of /auth/ route 
spring.cloud.gateway.routes[1].predicates= Path=/*/cmn/**

3. Create home directory Start class

4. test  

5. Transform front-end engineering

Gateway solves cross domain problems

1. Add configuration class

@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedMethod("*");
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);

        return new CorsWebFilter(source);
    }
}

2. test Report errors

reason ：@CrossOrigin The annotation is not removed

solve ： notes @CrossOrigin annotation

More functions , See courseware for details

Two 、 Hospital scheduling management

One 、 Demand analysis

The roster is divided into three parts to show ：

（1） Department Information （ Large department and small department tree display ）

（2） According to the hospital 、 The Department counts the number source information according to the shift scheduling date 、 Page by date 、 Judge the day of the week according to the date

（3） According to the hospital 、 department 、 Scheduling date query scheduling list data

2、 Implementation scheme

（1） Use el-tree Component display , Package large departments as required 、 Small department data , The Department data uploaded by the hospital needs to be encapsulated into two layers of parent-child data ;

（2） Aggregate all shift scheduling data , Display by date , And display the statistical source data ;

（3） According to the hospital 、 department 、 Scheduling date query scheduling list data

Although it's a page that shows all the content , But the page is relatively complex , Let's do it step by step

First of all , First realize the tree display of the left Department ;

second , Secondly, the shift scheduling date is displayed in pages

Third , Get the shift schedule details according to the last shift schedule date

Two 、 List of departments （ Interface ）

1、 Back end interface implementation

1. Demand analysis  

* Parameters ：hoscode   (mongodb The primary key is not associated )

* Return value ：List<DepartmentVo>

hypothesis Mysql, How to achieve ？

2. establish  DepartmentController

@Api(description = " Department interface ")
@RestController
@RequestMapping("/admin/hosp/department")
public class DepartmentController {
    @Autowired
    private DepartmentService departmentService;

    // According to the hospital number , Query the list of all departments in the hospital 
    @ApiOperation(value = " Query the list of all departments in the hospital ")
    @GetMapping("getDeptList/{hoscode}")
    public R getDeptList(@PathVariable String hoscode) {
        List<DepartmentVo> list = departmentService.findDeptTree(hoscode);
        return R.ok().data("list",list);
    }

}

3. Realization service Method

    // According to the hospital number , Query the list of all departments in the hospital 
    @Override
    public List<DepartmentVo> findDeptTree(String hoscode) {
        //1. Create a return collection object 
        List<DepartmentVo> departmentVoList = new ArrayList<>();
        //2. according to hoscode  Query all department information 
        List<Department> departmentList = departmentRepository.getByHoscode(hoscode);

        //3. Realization   according to bigcode( Big department code ) Grouping ,
        //  List<Department> => map k:bigcode v:List<Department>( Small department information )
        Map<String,List<Department>> depListMap =
                departmentList.stream().collect(
                        Collectors.groupingBy(Department::getBigcode));

        //4. Encapsulate the information of large departments 
        for (Map.Entry<String, List<Department>> entry : depListMap.entrySet()) {
            //4.1 Create large department objects 
            DepartmentVo bigDepVo = new DepartmentVo();
            bigDepVo.setDepcode(entry.getKey());
            bigDepVo.setDepname(entry.getValue().get(0).getBigname());

            //5. Encapsulate small department information 
            //5.1 Create and encapsulate small department information collection 
            List<DepartmentVo> depVoList = new ArrayList<>();
            List<Department> depList = entry.getValue();
            //5.2 Traverse the collection to encapsulate 
            for (Department department : depList) {
                // Small department objects 
                DepartmentVo depVo = new DepartmentVo();
                depVo.setDepcode(department.getDepcode());
                depVo.setDepname(department.getDepname());
                depVoList.add(depVo);
            }
            //6. Store the collection of small departments into the objects of large departments 
            bigDepVo.setChildren(depVoList);

            //7. Large department objects are stored in the return set 
            departmentVoList.add(bigDepVo);
        }

        return departmentVoList;
    }

4. test  

2、 Front end docking

1. Confirm entry

2. Create hidden route , create a file

      {
        path: 'hospital/schedule/:hoscode',
        name: ' Scheduling ',
        component: () => import('@/views/yygh/hosp/schedule'),
        meta: { title: ' Scheduling ', noCache: true },
        hidden: true
      }

3. establish API Interface method

    // Check the hospital department  ( Pay attention to the path  department)
    getDeptByHoscode(hoscode) {
        return request({
            url: `/admin/hosp/department/getDeptList/${hoscode}`,
            method: 'get'
        })
    },

4. Add page elements

<template>
    <div class="app-container">
        <div style="margin-bottom: 10px;font-size: 10px;"> choice ：</div>
            <el-container style="height: 100%">
            <el-aside width="200px" style="border: 1px silver solid">
                <!--  department  -->
                <el-tree
                :data="data"
                :props="defaultProps"
                :default-expand-all="true"
                @node-click="handleNodeClick">
                </el-tree>
            </el-aside>
            <el-main style="padding: 0 0 0 20px;">
                <el-row style="width: 100%">
                <!--  Scheduling date   Pagination  -->
                </el-row>
                <el-row style="margin-top: 20px;">
                <!--  The shift doctor corresponding to the shift date  -->
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

5. Realization JS

<script>
    import hospApi from '@/api/yygh/hosp'
    export default {
        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'depname'
                },
                hoscode: null
            }
        },
        created() {
            this.hoscode = this.$route.params.hoscode
            this.fetchData()
        },
        methods: {
            fetchData(){
                hospApi.getDeptByHoscode(this.hoscode)
                .then(resopnse=>{
                    this.data = resopnse.data.list
                })
            }  
        },
    }
</script>

<style>
  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #409EFF !important;
    color: white;
   }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: black;
   }
</style>

3、 ... and 、 View the statistics of department shift scheduling date

1、 Back end interface implementation

1. Demand analysis

1. According to the hospital code 、 Department code 、 The current page 、 Aggregate query of records per page

2. According to the tool, the shift scheduling date is the day of the week

2. Implementation interface

1. service_hosp Add date tool dependency

        <!-- Date dependent tool -->
        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
        </dependency>

2. Analysis interface

* Parameters ：page、limit、hoscode、depcode

* Return value ：map  (total、BookingScheduleRuleVo)

3. Realization controller

@Api(description = " Scheduling interface ")
@RestController
@RequestMapping("/admin/hosp/schedule")
public class ScheduleController {

    @Autowired
    private ScheduleService scheduleService;

    // According to the hospital number   and   Department number  , Query shift scheduling rule data 
    @ApiOperation(value =" Query shift scheduling rule data ")
    @GetMapping("getScheduleRule/{page}/{limit}/{hoscode}/{depcode}")
    public R getScheduleRule(@PathVariable long page,
                             @PathVariable long limit,
                             @PathVariable String hoscode,
                             @PathVariable String depcode) {
        Map<String,Object> map
                = scheduleService.getRuleSchedule(page,limit,hoscode,depcode);
        return R.ok().data(map);
    }

}

4. Realization service

    // According to the hospital number   and   Department number  , Query shift scheduling rule data 
    @Override
    public Map<String, Object> getRuleSchedule(long page, long limit, String hoscode, String depcode) {
        //1. Create return object 
        Map<String, Object> map = new HashMap<>();
        //2. Aggregate query with conditions and pages  (list)
        //2.1 Create a screen query criteria object 
        Criteria criteria = Criteria.where("hoscode")
                .is(hoscode).and("depcode").is(depcode);

        //2.2 Create an aggregate query object 
        Aggregation agg = Aggregation.newAggregation(
                //2.2.1 Set query conditions 
                Aggregation.match(criteria),
                //2.2.2 Set aggregation parameters  +  Aggregate query fields  ( grouping )
                Aggregation.group("workDate")
                        .first("workDate").as("workDate")
                        .count().as("docCount")
                        .sum("reservedNumber").as("reservedNumber")
                        .sum("availableNumber").as("availableNumber"),
                //2.2.3  according to date Sort 
                Aggregation.sort(Sort.Direction.ASC,"workDate"),
                //2.2.4  Paging query 
                Aggregation.skip((page-1)*limit),
                Aggregation.limit(limit)
        );
        //2.3 Aggregate query   Input object ( Query object   Object specifies which mongo surface )  Output object ( To which class )
        AggregationResults<BookingScheduleRuleVo> aggregate =
                mongoTemplate.aggregate(agg, Schedule.class, BookingScheduleRuleVo.class);

        List<BookingScheduleRuleVo> bookingScheduleRuleVoList = aggregate.getMappedResults();

        //3. Conditional aggregate query  (total)
        //3.1 Create an aggregate query object 
        Aggregation aggTotal = Aggregation.newAggregation(
                //3.2.1 Set query conditions 
                Aggregation.match(criteria),
                //3.2.2 Set aggregation parameters  +  Aggregate query fields  ( grouping )
                Aggregation.group("workDate")
        );
        //3.2 Aggregate query 
        AggregationResults<BookingScheduleRuleVo> aggregateTotal =
                mongoTemplate.aggregate(aggTotal, Schedule.class, BookingScheduleRuleVo.class);
        List<BookingScheduleRuleVo> totalList = aggregateTotal.getMappedResults();
        //3.3 Get total 
        int total = totalList.size();
        
        //4. Traversal data , Convert the day of the week 
        for (BookingScheduleRuleVo bookingScheduleRuleVo : bookingScheduleRuleVoList) {
            Date workDate = bookingScheduleRuleVo.getWorkDate();
            String dayOfWeek = this.getDayOfWeek(new DateTime(workDate));
            bookingScheduleRuleVo.setDayOfWeek(dayOfWeek);
        }
        
        //5. Package data return 
        Map<String, Object> result = new HashMap<>();
        result.put("bookingScheduleRuleList",bookingScheduleRuleVoList);
        result.put("total",total);
        // Get the name of the hospital 
        String hosName = hospitalService.getHospName(hoscode);
        // Other basic data 
        Map<String, String> baseMap = new HashMap<>();
        baseMap.put("hosname",hosName);
        result.put("baseMap",baseMap);
        return result;
    }

Tool method

    /**
     *  Get the day of the week data according to the date 
     * @param dateTime
     * @return
     */
    private String getDayOfWeek(DateTime dateTime) {
        String dayOfWeek = "";
        switch (dateTime.getDayOfWeek()) {
            case DateTimeConstants.SUNDAY:
                dayOfWeek = " Sunday ";
                break;
            case DateTimeConstants.MONDAY:
                dayOfWeek = " Monday ";
                break;
            case DateTimeConstants.TUESDAY:
                dayOfWeek = " Tuesday ";
                break;
            case DateTimeConstants.WEDNESDAY:
                dayOfWeek = " Wednesday ";
                break;
            case DateTimeConstants.THURSDAY:
                dayOfWeek = " Thursday ";
                break;
            case DateTimeConstants.FRIDAY:
                dayOfWeek = " Friday ";
                break;
            case DateTimeConstants.SATURDAY:
                dayOfWeek = " Saturday ";
            default:
                break;
        }
        return dayOfWeek;
    }

 

2、 Front end docking

1. newly build API schedule.js

import request from '@/utils/request'
// Extract request path 
const api_name = '/admin/hosp/schedule'

export default {
    // According to the hospital number   and   Department number  , Query shift scheduling rule data 
    getScheduleDetail(hoscode, depcode, workDate) {
        return request({
            url: `${api_name}/getScheduleDetail/${hoscode}/${depcode}/${workDate}`,
            method: 'get'
        })
    }
}

2. Add page elements

        <!--  Scheduling date   Pagination  -->
        <el-tag v-for="(item,index) in bookingScheduleList" 
            :key="item.id"
            @click="selectDate(item.workDate, index)" 
            :type="index == activeIndex ? '' : 'info'"
            style="height: 60px;margin-right: 5px;margin-right:15px;cursor:pointer;">
            {
   { item.workDate }} {
   { item.dayOfWeek }}<br />
            {
   { item.availableNumber }} / {
   { item.reservedNumber }}
        </el-tag>

        <!--  Pagination  -->
        <el-pagination :current-page="page" :total="total" :page-size="limit" class="pagination"
            layout="prev, pager, next" @current-change="getPage">
        </el-pagination>

3. JS The new method

<script>
    import hospApi from '@/api/yygh/hosp'
    import scheduleApi from '@/api/yygh/schedule'

    export default {
        data() {
            return {
                data: [],  // Department collection 
                defaultProps: {  // The default node of the tree 
                    children: 'children',
                    label: 'depname'
                },
                hoscode: null, // Hospital encoding 

                activeIndex: 0,  // Check the index 
                depcode: null,  // Department code 
                depname: null,  // Department name 
                workDate: null,  // Scheduling date 

                bookingScheduleList: [],  // Source statistics 
                baseMap: {},  // Display basic data 

                page: 1, //  The current page 
                limit: 7, //  Number of pages 
                total: 0 //  Total page number 
            }
        },
        created() {
            this.hoscode = this.$route.params.hoscode
            this.fetchData()
        },
        methods: {
            // Display department information 
            fetchData() {
                hospApi.getDeptByHoscode(this.hoscode).then(resopnse => {
                    this.data = resopnse.data.list

                    // The first department is selected by default 
                    if (this.data.length > 1) {
                        this.depcode = this.data[0].children[0].depcode
                        this.depname = this.data[0].children[0].depname
                        // Paging query 
                        this.getPage()
                    }
                });
            },
            // Paging query 
            getPage(page = 1) {
                this.page = page
                this.workDate = null
                this.activeIndex = 0
                this.getScheduleRuleList()
            },
            // According to the hospital number   and   Department number  , Query shift scheduling rule statistics 
            getScheduleRuleList() {
                scheduleApi.getScheduleRule(this.page, this.limit, this.hoscode, this.depcode)
                    .then(response => {
                        this.bookingScheduleList = response.data.bookingScheduleRuleList
                        this.total = response.data.total
                        this.baseMap = response.data.baseMap
                        //  After paging workDate=null, The first... Is selected by default 
                        if (this.workDate == null) {
                            this.workDate = this.bookingScheduleList[0].workDate
                            // Query roster set data 
                        }
                    })
            },
            // Click Department   Query statistics 
            handleNodeClick(data) {
                // Determine whether it is a large department   Small departments skip 
                if (data.children) return

                this.depcode = data.depcode;
                this.depname = data.depname;
                this.getPage()

            },
            // Click the date trigger method 
            selectDate(workDate, index){
                // Query the roster set 
                this.workDate = workDate;
                this.activeIndex =index;
                // Query the scheduling details 
            }
        },

    }
</script>

Four 、 Schedule details list

Query the roster record set according to parameters

1、 Back end interface implementation

1. Interface Analysis

* Parameters ：hoscode、depcode、workDate

* Return value ：List<Schedule>

2. Realization controller

    // According to the hospital number  、 Department number and working date , Query scheduling details 
    @ApiOperation(value = " Query scheduling details ")
    @GetMapping("getScheduleDetail/{hoscode}/{depcode}/{workDate}")
    public R getScheduleDetail( @PathVariable String hoscode,
                                @PathVariable String depcode,
                                @PathVariable String workDate) {
        List<Schedule> list = scheduleService.getScheduleDetail(hoscode,depcode,workDate);
        return R.ok().data("list",list);
    }

2. Realization service

    // According to the hospital number  、 Department number and working date , Query scheduling details 
    @Override
    public List<Schedule> getScheduleDetail(String hoscode, String depcode, String workDate) {
        //1. Query shift scheduling data 
        List<Schedule> list = scheduleRepository.
                getByHoscodeAndDepcodeAndWorkDate(hoscode,depcode,workDate);

        //2. Translation field 
        list.stream().forEach(item->{
            this.packageSchedule(item);
        });
        return list;
    }

    // Package roster details other values   Hospital name 、 Department name 、 The date corresponds to the week ( Translation field )
    private void packageSchedule(Schedule schedule) {
        // Set the hospital name 
        schedule.getParam().put("hosname",hospitalService.getHospName(schedule.getHoscode()));
        // Set department name 
        schedule.getParam().put("depname",
                departmentService.getDepName(schedule.getHoscode(),schedule.getDepcode()));
        // Set the date to correspond to the week 
        schedule.getParam().put("dayOfWeek",this.getDayOfWeek(new DateTime(schedule.getWorkDate())));
    }

3. test No data

problem ：

2、 Front end docking

1. establish API Method

    // Query the scheduling details 
    getScheduleDetail(hoscode, depcode, workDate) {
        return request({
            url: `${api_name}/getScheduleDetail/${hoscode}/${depcode}/${workDate}`,
            method: 'get'
        })
    }

2. Add page elements

<!--  The shift doctor corresponding to the shift date  -->
    <el-table v-loading="listLoading" :data="scheduleList" border fit highlight-current-row>
        <el-table-column label=" Serial number " width="60" align="center">
            <template slot-scope="scope">
                {
   { scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column label=" The title " width="150">
            <template slot-scope="scope">
                {
   { scope.row.title }} | {
   { scope.row.docname }}
            </template>
        </el-table-column>
        <el-table-column label=" Source time " width="80">
            <template slot-scope="scope">
                {
   { scope.row.workTime == 0 ? " In the morning " : " Afternoon " }}
            </template>
        </el-table-column>
        <el-table-column prop="reservedNumber" label=" Number of reservations available " width="80" />
        <el-table-column prop="availableNumber" label=" Number of remaining appointments " width="100" />
        <el-table-column prop="amount" label=" Registration fee ( element )" width="90" />
        <el-table-column prop="skill" label=" Good at skills " />
    </el-table>

3. modify JS Method

<script>
    import hospApi from '@/api/yygh/hosp'
    import scheduleApi from '@/api/yygh/schedule'

    export default {
        data() {
            return {
                data: [],  // Department collection 
                defaultProps: {  // The default node of the tree 
                    children: 'children',
                    label: 'depname'
                },
                hoscode: null, // Hospital encoding 
                activeIndex: 0,  // Check the index 
                depcode: null,  // Department code 
                depname: null,  // Department name 
                workDate: null,  // Scheduling date 

                bookingScheduleList: [],  // Source statistics 
                baseMap: {},  // Display basic data 

                page: 1, //  The current page 
                limit: 7, //  Number of pages 
                total: 0, //  Total page number 

                listLoading: true,  // Loading state 
                scheduleList: []  // Scheduling data 

            }
        },
        created() {
            this.hoscode = this.$route.params.hoscode
            this.fetchData()
        },
        methods: {
            // Get shift scheduling list data 
            getScheduleList() {
                scheduleApi.getScheduleDetail(this.hoscode, this.depcode, this.workDate)
                    .then(response => {
                        this.scheduleList = response.data.list
                        this.listLoading = false
                        console.log(response.data.list);
                        
                    })
            },

            // Display department information 
            fetchData() {
                hospApi.getDeptByHoscode(this.hoscode).then(resopnse => {
                    this.data = resopnse.data.list

                    // The first department is selected by default 
                    if (this.data.length > 1) {
                        this.depcode = this.data[0].children[0].depcode
                        this.depname = this.data[0].children[0].depname
                        // Paging query 
                        this.getPage()
                    }
                });
            },
            // Paging query 
            getPage(page = 1) {
                this.page = page
                this.workDate = null
                this.activeIndex = 0
                this.scheduleList = []
                this.getScheduleRuleList()
            },
            // According to the hospital number   and   Department number  , Query shift scheduling rule statistics 
            getScheduleRuleList() {
                scheduleApi.getScheduleRule(this.page, this.limit, this.hoscode, this.depcode)
                    .then(response => {
                        this.bookingScheduleList = response.data.bookingScheduleRuleList
                        this.total = response.data.total
                        this.baseMap = response.data.baseMap
                        //  After paging workDate=null, The first... Is selected by default 
                        if (this.workDate == null) {
                            this.workDate = this.bookingScheduleList[0].workDate
                        }
                        // Query roster set data 
                        this.getScheduleList()
                    })
            },
            // Click Department   Query statistics 
            handleNodeClick(data) {
                // Determine whether it is a large department   Small departments skip 
                if (data.children) return

                this.depcode = data.depcode;
                this.depname = data.depname;
                this.getPage()

            },
            // Click the date trigger method 
            selectDate(workDate, index) {
                // Query the roster set 
                this.workDate = workDate;
                this.activeIndex = index;
                // Query the scheduling details 
                this.getScheduleList()
            }

        },

    }
</script>