多页面数据显示与对接

多页面数据显示与对接

1. 车辆检测页面我们分了很多标签页来分别做车辆的数据展示，数据量比较大，用整车数据标签页做一个最基础的简介。
2. 后端返回数据为vehicleData，首先在data中初始化vehicleData数组，每个Col都要显示一个vehicleData对象中的属性值。
3. v-for="(label, key) in vehiclelabel"表示：
   • v-for循环遍历是基于 vehiclelabel对象进行的，意味着无论vehicleData 是否有值，所有标签都会显示。
   • vehiclelabel映射每一个属性为label，获取对应的数据中文名称在第一个span中{{ label }}显示出来，key是对象的键值，给每个label都设置相应的键值。
   • vehicleData 作为一个空对象开始，只有在 submit 方法调用成功后才填充数据。
   • 然后我们使用vehicleData[key]用于显示对应的数据，如果 vehiclelabel中没有对应的键值，将显示为空。

    <Row>
      <Col span="24">
        <Card>
          <Tabs type="card">
            <TabPane label="整车数据">
              <Row :gutter="20">
                <Col v-for="(label, key) in vehiclelabel" :key="key" span="6">
                  <div class="info-box">
                    <div class="info-box-icon bg-info">
                      <Icon type="md-mail" color="#fff">Icon>
                    div>
                    <div class="info-box-content">
                      <span class="info-box-text">{{ label }}span>
                      <span class="info-box-number">{{ vehicleData[key] }}span>
                    div>
                  div>
                Col>
              Row>
            TabPane>
            ...
          Tabs>
        Card>
      Col>
    Row>

export default {
  data () {
    return {
      // 初始为空对象
      vehicleData: [],
	 ...
      // label标签映射
      vehiclelabel: {
        state: '车辆状态',
        charg_state: '充电状态',
        run_mode: '运行模式',
        speed: '车速',
        odometer: '累计里程',
        total_vol: '总电压',
        total_curr: '总电流',
        SOC: 'SOC',
        DC: 'DC状态',
        gear: '档位',
        resistance: '绝缘电阻',
        accelerator_pedal_travel: '加速踏板行程值',
        brake_pedal_state: '制动踏板状态',
        update_time: '数据更新时间'
      },
      ...
    }
  },
  ...
  methods: {
    ...
    // 获取车辆数据
    submit (showLoading = false) {
      ...
      getData(vm.searchConf.vselect).then(response => {
        // 设置加载状态为false
        vm.loading.submit = false
        // console.log(response.data.data.data)

        // 整车数据，发动机，车辆位置，极值数据，报警数据
        let vehicleDataBack = response.data.data.data.vehicleData
        ...
        // 将解析后的数据赋值给组件的数据属性
        vm.vehicleData = vehicleDataBack
        ...
        if (showLoading) {
          vm.$Message.success(response.data.msg)
        }
        console.log('获取车辆数据成功')
        // 更新定时器
        vm.updateRefreshTimer()
      }).catch(() => {
        ...
      })
    },
    ...
}