上个小节我们用Swagger测试了后端的Web方法，可以有条件查询到甘特图的数据，这节课咱们继续往下做，这就轮到前端页面了，我们首先来了解一下前端的甘特图大致是怎么设计的。

一、熟悉前端页面

在offline_meeting.vue页面中包含了日程表和周日历两种界面，默认显示日程表界面。只有用户按照会议室检索的时候，才会切换到周日历界面，显示这个会议室在一周之内的各个会议安排。这节课我们只讨论日程表界面，周日历界面先不考虑。

1. 了解模型层代码

我们先来阅读页面模型层的代码，搞明白这些变量的作用，再去看视图层的代码就简单多了。

data: function() {
    return {
        time: [
            '08:30',
            '09:00',
            '09:30',
            '10:00',
            '10:30',
            '11:00',
            '11:30',
            '12:00',
            '12:30',
            '13:00',
            '13:30',
            '14:00',
            '14:30',
            '15:00',
            '15:30',
            '16:00',
            '16:30',
            '17:00',
            '17:30',
            '18:00',
            '18:30'
        ],
        //甘特图的各种业务数据
        gantt: {
            meetingRoom: [],
            cellWidth: 0
        },
        //周日历的各种业务数据
        calendar: {
            map: {},
            days: []
        },
        //条件查询的会议室下拉列表数据
        roomList: [],
        dataForm: {
            name: null,
            date: null,
            mold: '全部会议'
        },
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        dataListLoading: false,
        addVisible: false,
        infoVisble: false,
        dataRule: {},
        //显示哪种界面（日程表或者周日历）
        mode: 'gantt'
    };
},

2. 了解查询条件

在offline_meeting.vue页面用什么查询条件，直接导致页面切换到哪种界面，所以我们必须要先熟悉各种查询控件。

<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" class="form">
    <el-form-item prop="name">
        <el-select
            v-model="dataForm.name"
            class="input"
            placeholder="选择会议室"
            size="medium"
            clearable="clearable"
        >
            <el-option v-for="one in roomList" :label="one.name" :value="one.name" />
        </el-select>
    </el-form-item>
    <el-form-item prop="date">
        <el-date-picker
            v-model="dataForm.date"
            type="date"
            placeholder="选择日期"
            class="input"
            size="medium"
        ></el-date-picker>
    </el-form-item>
    <el-form-item>
        <el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
        <el-button size="medium" type="danger" @click="addHandle()">会议申请</el-button>
    </el-form-item>
    <el-form-item class="mold">
        <el-radio-group v-model="dataForm.mold" size="medium" @change="changeHandle">
            <el-radio-button label="全部会议"></el-radio-button>
            <el-radio-button label="我的会议"></el-radio-button>
        </el-radio-group>
    </el-form-item>
</el-form>

页面的created()函数发起Ajax请求，查询所有的会议室信息，然后更新到条件查询的下拉列表上面。

created: function() {
    //加载会议室列表
    let that = this;
    that.$http('meeting_room/searchAllMeetingRoom', 'GET', null, true, function(resp) {
        that.roomList = resp.list;
    });
    //加载日程表分页数据
    that.loadDataList();
}

3. 了解甘特图设计

甘特图其实也是用DIV模拟表格做出来的，具体是怎么设计的，咱们先来看看经过前端代码的加工之后，模型层里面meetingRoom变量保存了什么数据。

[
  {
    "name": "大会议室A01",
    "meeting": {
      "13:00": "4#blue",
      "09:00": "4#blue"
    }
  },
  {
    "name": "大会议室A02",
    "meeting": {}
  },
  {
    "name": "小会议室C01",
    "meeting": {}
  }
]

<div class="gantt" ref="gantt" v-show="mode == 'gantt'">
    <div class="row">
        <div class="cell-time"></div>
        <div class="cell-time" v-for="one in time">
            <span class="time">{{ one }}</span>
        </div>
    </div>
    <div class="row" v-for="room in gantt.meetingRoom">
        <div class="cell room">{{ room.name }}</div>
        <div class="cell" v-for="one in time">
            <div
                v-if="room.meeting.hasOwnProperty(one)"
                class="meeting"
                :class="room.meeting[one].split('#')[1]"
                :style="'width:' + room.meeting[one].split('#')[0] * gantt.cellWidth + 'px'"
            ></div>
        </div>
    </div>
</div>