175-尚硅谷-尚医通-后台系统-预约统计功能-前端整合和测试

下面呢，咱们来整合预约统计的前端部分，咱们来写一下，首先我们现在因为是咱们的后台管理系统中，所以咱来到后台管理这个系统里边，第一步咱们先给它添加上一个路由，就是我们找到这个root里边的Internet JS，按照之前这些把路由加上，那这路由呢，我就来到我课件中，把这给头复制过来，咱们叫统计管理，然后里边的名字叫预约统计，我把路由加到咱这个JS文件中来，我给他添加一下。就是这个内容，这是路由，然后加上路由之后，大家看路由里边咱这个位置是不是让它去跳转到一个页面中去了，所以咱们把这个页面按照结构给它创建出来，我们来到这个views里边，然后在里边呢，先建个文件夹，调这个S，然后此X里边再建文件夹，叫这个O。

那我们来创建叫order，然后在order里边呢，咱们来建一个文件，这个文件叫做index，点不。这个页面我们就创建完成了，然后咱们把这个路由保存下，这个创建完成之后，下面咱在里边写我们的内容，首先因为咱要调接口了，所以我在API里边的，咱们可以先创建一个JS文件，这个文件比如我叫这个Sta.JS就是咱们的统计分析文件，那这个文件就是定义咱们接口的路径，我把这个啊给各位就直接拿过来了。就是里边的。这么一个路径。然后咱们来检查一下啊，在里边咱们是admit static，然后它叫get count map，也就是咱们的这个名字，它是一个get提交，然后里边传入这么一个对象，所以这个咱就定义了，然后定义之后呢，咱们来到我们的页面中，在页面中最终来调那个方法做一个实现，也就是咱们最原始写法，那我现在把这个代码在页面中给大家复制过来，然后咱们来看一下啊，首先你看啊，上面部分的有咱们就是数的条件部分，包含我们的医院名称。

开始日期还有截止日期，然后这是一个查询按钮，下面有div div中的用于显示在那个图表，然后这个有一个按钮，里边有一个叫收叉的方法，那我们往下看啊，在下面部分呢，首先。咱们先引入ESE叉S呢，之前咱已经装过了，另外引入这个cid这个JS文件，我们叫sta啊，就这个API，然后下面定义初始值，包括你看这里边啊，有咱这个对象，然后里边有这个title，包括有这个X和Y，主要是这两个数据，他们都是一个。

数字形式下面有这个收叉在这里边呢，咱就调用。API中这个方法传入对象，然后最终返回count list，还有这个date list count list和date list，就是咱们接口中那个数据，刚才咱们都写过了，一个对应X，一个对应Y，然后最后在set char date里边是它的值，然后大家看一下啊，首先我们用这个chart。就是上面的这个名字，在这里边显示内容，然后下面就是设置它的参数，参数里边开头我们叫挂号量统计，然后这个是X轴，这是它的Y轴啊，就是里面这个数据啊，这个是X，这是Y，就是X date date是咱们刚才反应数据，最终进行设置。然后这样的话，前端咱们就最终完成整合，里边就是这么一个结构，所以各位按照过程能把它快速整出来，咱们现在就完成了，然后完成之后呢，最后咱们把这效果我们做一个最终测试，看一下预约统计的效果到底是怎么样的。

那我现在先把这个前端我们先启动起来，然后咱们再把接口也做个启动啊，前端它在启动，那咱启动接口，接口里边呢，我们应该不需要都启动，咱启动几个主要的第一个我们先启动这个网关，这肯定需要。先把它启动，然后咱再请这个C，再请这O，因为它要进行远程调用啊，咱们启动三个伏应该就够了，第二个这个。把这个我们启动一下，等等它先启动起来。我们等一会儿，然后这个启用之后呢，我们再启用里面那个O，就这个，因为远程调用要调用里边的接口，把这个做到咱们等它都启动之后，最后咱通过页面做一个完成测试。

咱们看啊，现在前端已经启动起来了，它就进入到我们的这个页面。啊，包括这个页面各位同学应该很熟悉啊，咱之前一直在做，在里边我们登录进去，然后登录进去之后，大家看里边的这个位置有一个叫统计管理，然后统计管理中有一个叫预约统计，当我们点预约统计之后，各位看到它就进入到这个页面，在这个页面中呢，咱能选择它相关的条件。那我们看一下啊，接口部分应该已经提起来了，那我们来测试啊。比如说现在啊，我这里边什么条件都不选择，那我点查询是不是要查全部，那我们点一下大家看里边的效果啊，比如现在我一点你看数据是不是查出来，这就是一个简单的支线图效果，我们这里边有3月4号，五号，六号，七号里边有对应的数据，那比如现在我给他加个条件，我就查里边这个3月1号，比如说到这个3月4号这个数据。

我们查询就只有一个啊，这不明显，比如再加一个3月5号。是不是只有两个数据？然后比如说现在呢，我查的范围大一点，是这个数据在前面，我再输入一个医院名称，比如咱做的是模偶查询吧，我输入一个协和，就是协和医院数据出来了，比如现在要随便输入一个。四查询是没有数据，因为咱们没有这个意愿。所以现在呢，这里边我们就完成了预约统计功能，咱把里边的数据，就是某个时间段每天的数据用一个折线图的方式最终显出来了，这是咱们完成的这么一个功能。