订单列表和数据列表（七）

实现的功能

功能	详述
订单列表	渲染组件和子路由；布局；获取和渲染订单列表；省市区联动；时间线物流进度
数据报表	渲染组件和子路由；布局；ECharts图表

使用到的Element-ui组件

组件名称_EN	注册	备注
Timeline	Vue.use(Timeline)	时间线
TimelineItem	Vue.use(TimelineItem)

使用到的依赖

运行依赖，echarts

一、订单列表

1.渲染组件和子路由

2.布局

①面包屑导航

②卡片视图

③栅格系统 搜索框

④表格

⑤分页

3.获取渲染订单列表

①获取订单列表

②渲染订单列表

4、修改地址

①对话框显示和隐藏

②渲染表单省市区联动

<!-- [Order.vue] -->
<el-form
         :model="addressForm"
         :rules="addressFormRules"
         ref="addressFormRef"
         label-width="100px"
         >
    <el-form-item label="省市区县" prop="address1">
        <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
    </el-form-item>
    <el-form-item label="详细地址" prop="address2">
        <el-input v-model="addressForm.address2"></el-input>
    </el-form-item>
</el-form>

省市区文件

// [Order.vue]
import cityData from './citydata.js'

// [Order.vue -> data]
addressForm: {
    address1: [],
    address2: '',
},
cityData,

③清空表单

5、物流进度

①对话框显示和隐藏

②获取物流信息

③渲染时间线

<!-- [Order.vue] -->
<!-- 时间线 -->
<el-timeline>
    <el-timeline-item
                      v-for="(activity, index) in progressInfo"
                      :key="index"
                      :timestamp="activity.time"
                      >{{activity.context}}</el-timeline-item>
</el-timeline>

二、数据报表

1.渲染组件和子路由

2.布局

①面包屑导航

②卡片视图

③图表

// [Report.vue]
// 1 导入echarts
import echarts from 'echarts'

import _ from 'lodash'

<!-- [Report.vue] -->
<!-- 2 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" 750px;height:400px;"></div>

// [Report.vue -> data]
// 需要合并的数据
options: {
    title: {
        text: '用户来源',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {backgroundColor: '#E9EEF3',},
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
   },
   xAxis: [{boundaryGap: false,},],
   yAxis: [{type: 'value',},],
},

// [Report.vue -> methods]
// 此时页面上的元素渲染完毕
async mounted() {
    // 3 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))

    const { data: res } = await this.$http.get('reports/type/1')
    if (res.meta.status !== 200) {
        return this.$message.error('获取折线图数据失败')
    }
    // 4 指定图表的配置项和数据
    const result = _.merge(res.data,this.options)

    // 5 使用刚指定的配置项和数据显示图表。
    myChart.setOption(result)
},