No.12 vue-element-admin 学习使用（七）自己写一个任务运行监控小组件

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

这两天刚好来了一个任务监控的需求，监控公司一些重要任务的执行情况，（未运行，运行中，成功，失败），恰巧把它作为一个组件，写到这个项目里，练习一下。

整体效果是这样的，页面上有很多块状组件，每一个组件代表了一个任务的执行状态，做一个运维大屏，用户配置完成后，就可以很直观的在这一个页面上看到所有配置中的任务的运行状况了，由于我司有一些很重要的定时任务，一旦失败后果不堪设想，所有才有了这个需求。

首先创建@/views/blocks/index.vue,然后在路由配置中配置一下

{
    path: '/blocks',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/blocks/index'),
        name: 'Blocks',
        meta: { title: 'blocks', icon: 'international' }
      }
    ]
  },

然后创建组件@/components/Blocks/index.vue 首先知道后端传来的配置数据是这样的

[
    { id: 1, contestState: 'normal', simulate: true,
      contestStateName: '正常', planStartTime: '2021-1-2',
      planEndTime: '2021-1-5', contestName: '服务1' },
      {}
]

首先整体的布局可以用element的栅格布局，一个el-row中，循环生成N个el-col，el-col中就是小block块的内容，代码如下。在data.length为0时不显示

<el-row v-show="data.length" :gutter="14">
        <el-col v-for="item in data" :key="item.id" :span="4">

然后就是写每个block块的html和样式了，决定用ul，li来写。item。contestName取到task的名字

<ul class="info-list">
      <li class="name text-overflow-1" :title="item.contestName">
        {{ item.contestName }}
      </li>

标题二这样的字体颜色和icon，需要另行处理，根据contestState服务状态动态添加class类 显示不同的字体颜色，在计算方法中，返回对应的class，class样式写好，就实现了字体的变色，

<span class="value" :class="stateClass(item.contestState)">

stateClass() {
      return function(val) {
        const map = {
          'state-normal': 'normal',
          'state-exception': 'exception'
        }
        for (var key in map) {
          if (map[key] === val) {
            return key
          }
        }
      }
    },

icon的显示也和字体类似，用了stateIconClass来切换i的class

<i
:class="stateIconClass(item.contestState)"
class="left-icon"
/>

然后下面写了3个操作按钮，可以对当前block进行操作，之后可以实现标记成功，忽略，等操作，目前功能仅作为演示。

<div
    class="btn-cell"
    title="删除"
    @click="deleteContestHandle(item)"
  >
    <i class="el-icon-delete" />
  </div>

然后在view中就可以引入使用了，如果之后有分组group的操作，也可以多次引入这个组件，展示不同分组的内容。例如加背景色什么的。

<div class="home" style="margin:15px 20px;">
    <Blocks :data="data" />
  </div>
  
import Blocks from '@/components/Blocks/index.vue'
export default {
  name: 'Home',
  components: {
    Blocks
  },

类似于这样的效果。（颜色辣眼） 至此小组件写完了，之后公司项目写完，我会给本文加个截图，目测月底前写完这个项目吧。