application.vue

<template>
  <v-layout row>
    <v-flex xs12 sm6 offset-sm3>
      <v-card>
        <v-toolbar color="cyan" dark>
          <v-toolbar-title>Inbox</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
        <v-list two-line>
          <template v-for="(item, index) in items">
            <v-divider v-if="item.divider" :key="index"></v-divider>
            <v-list-tile v-else-if="item.status" :key="index">
              <v-list-tile-content>
                <v-list-tile-title v-text="addTitle(item.exceptionId)"></v-list-tile-title>
                <v-list-tile-title v-text="addTime(item.exceptionTime)"></v-list-tile-title>
              </v-list-tile-content>
              <v-list-tile-action>
                <v-btn color="info"> {{ description(item.status) }}
                </v-btn>
              </v-list-tile-action>
            </v-list-tile>
          </template>
        </v-list>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
import fetchAllMachine from '../api/application.js';
import { getToday } from '../helpers/date.js';
import { pipe, init, chain, compose, of, append, concat, propOr, __, identity } from 'ramda';

// number -> string
let description = pipe(
  identity,
  propOr('N/A', __, {
    14: '机故恢復',
    15: '超时未处理',
    16: '未处理',
    17: '处理中',
    19: '处理成功',
    20: '放弃处理',
    22: '放弃未处理'
  })
);

// string -> string
let addTitle = concat('异常编号 ');

// string -> string
let addTime = concat('发生时间 ');

// [a] -> [b]
let addDivider = pipe(
  chain(compose(append({ divider: true }), of)),
  init
);

// unit -> unit
let mounted = function() {
  fetchAllMachine({
    app_id: process.env.VUE_APP_APP_ID,
    s_date: getToday(),
    e_date: getToday()
  }).then(x => this.items = addDivider(x.data.payload));
};

export default {
  name: "Application",
  components: {
  },
  data: () => ({
    raw: [],
    items: [],
  }),
  methods: {
    description,
    addTitle,
    addTime,
  },
  mounted,
};
</script>

<style lang="stylus" scoped>
</style>