我们这个项目疫情数据分析平台旨在提供直观的数据展示以及数据支持的决策，其中根据各地区的疫情防控政策，展示并且提示能够给予用户出行建议。

对于前端来说，该功能的实现主要在于页面设计、获取后端传过来的数据、显示在页面上这三个方面。我们先来看页面设计：

我的思路是，由于后端传过来的数据是双向的，即包含某市到某市的出入政策，在本地查看接口格式：

可以看到后端传来的json数据包含四个参数：出入的省市，同时数据中包含出入的政策及健康码，我们对健康码的展示也是必要的。

针对这样的数据形式，我考虑的是让用户进行一个选择，即用户选择出入的省市，并显示对应的政策。因此，我们可以设计一个表单，包含四个选择框， 两两一组，每一组包含省和市。这涉及到局部页面刷新技术。基于vue的ajax封装能力以及数据的双向绑定，我们可以实现：选择省后，改变后续复选框的市的选择项，即：

 选择安徽时，后续选择框提供的是安徽省的市选项；选择广东时，后续选择框提供的是广东省的市选项。首先是建立一个表单：

<el-form :inline="true" label-position="left" label-width="50px">
        <el-divider content-position="left">出发</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item  :inline="true">
              <el-select v-model="from_province" placeholder="省份">
                <el-option
                  v-for="pro in prodata"
                  :key="pro"
                  :value="pro"
                  :label="pro"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-select placeholder="市" v-model="from_city">
                <el-option
                  v-for="city in citys"
                  :key="city"
                  :value="city"
                  :label="city"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">到</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item  :inline="true">
              <el-select v-model="to_province" placeholder="省份">
                <el-option
                  v-for="pro in prodata"
                  :key="pro"
                  :value="pro"
                  :label="pro"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-select placeholder="市" v-model="to_city">
                <el-option
                  v-for="city in citys2"
                  :key="city"
                  :value="city"
                  :label="city"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form>

借助el-row和el-col对表单的排布进行限制，具体的css实现不赘述。注意到通过v-model=‘’可以直接对某一表单组件与vue数据绑定，但我们不完全需要双向绑定，我们更希望在选择省市后，点击按钮后再提交，即我们需要的是延迟点击绑定。

我这里选择的实现方法十分好理解：声明四个新变量，点击事件函数的逻辑是将与表单组件绑定的变量传入这四个新变量。

另一方面，这里又涉及选择省份后市的变化，针对这一变化，我借助vue提供的watch实现。监视省份变化，根据省份，调整对应的市数组，提供给前端表单：

watch:{
    from_province:function (newval,oldval){
      this.citys=[]
      for(var i=0;i<citydata.length;i++){
        if(citydata[i].label==newval){
          this.citygroup=citydata[i].children
        }
      }
      for(var i=0;i<this.citygroup.length;i++){
        this.citys.push(this.citygroup[i].label)
      }
    },
    to_province:function (newval,oldval){
      this.citys2=[]
      for(var i=0;i<citydata.length;i++){
        if(citydata[i].label==newval){
          this.citygroup2=citydata[i].children
        }
      }
      for(var i=0;i<this.citygroup2.length;i++){
        this.citys2.push(this.citygroup2[i].label)
      }
    },

from_province和to_province分别代表出省和入省，每次省份值变化时，清空原先城市数组，遍历城市json文件，找到对应新省份的areaTree，传入城市数组。

事实上，watch的使用十分灵活，除了能处理局部页面刷新逻辑，还能处理页面间传参的变化问题等，在后续的开发中，可能会经常用到watch。

点击查询后，呈现给用户的是如下页面：

 非常简洁的呈现在用户面前，同时可以依靠标签页换成各地对应健康码：