This is the 12th day of my participation in the August More Text Challenge. For details, see:August is more challenging

In these two days, there happened to be a demand for task monitoring, to monitor the execution of some important tasks of the company (not running, running, success, failure), so I wrote it as a component in this project for practice.

The overall effect is that there are a lot of massive components on a page, each component represents the execution status of a task, do an operational time, user configuration is completed, can be very intuitive see on this page all the running status of the task of configuration, because we have some very important tasks regularly, once the failure consequences, So there’s this need.

Create @/views/blocks/index.vue and then configure it in the route configuration

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

Then create component @ / components/Blocks/index. The vue know backend configuration data from the first

[{id: 1.contestState: 'normal'.simulate: true.contestStateName: 'normal'.planStartTime: '2021-1-2'.planEndTime: '2021-1-5'.contestName: Services' 1 '}, {}]Copy the code

First of all, the overall layout can be created using the raster layout of the elements. In an el-row, N el-Cols are generated in a loop. The el-cols are the contents of small blocks. Not displayed when data.length is 0

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

Then it was time to write the HTML and style of each block, so I decided to use ul and Li. The item. ContestName gets the name of the task

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

The font color and icon of title 2 need to be separately processed. According to the contestState service state, dynamically add class to display different font color. In the calculation method, return the corresponding 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
          }
        }
      }
    },
Copy the code

The icon display is similar to the font, using the stateIconClass to switch the I class

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

Then the following three operation buttons are written, which can operate the current block, and then can realize the operation of mark success, ignore, and so on. The current function is only for demonstration.

<div
    class="btn-cell"
    title="Delete"
    @click="deleteContestHandle(item)"
  >
    <i class="el-icon-delete" />
  </div>
Copy the code

Then you can introduce it in the View, and if you want to group it later, you can also introduce it multiple times to show the contents of different groups. Like a background color or something.

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

Something like this. (Hot color)I will add a screenshot to this article. I hope I can finish the project by the end of this month.