NEZ-2177 feat : asset process 二级页面开发

nezha-fronted/src/assets/css/common.scss

@@ -283,10 +283,18 @@ td .nz-icon-gear:before {
       border-color: $--border-color-light-hover;
     }
   }
+  #elementQuery{
+    border: 1px solid $--border-color-light;
+  }
   .el-input__inner:hover {
     border-color: $--border-color-light-hover;
   }
 }
+.query-input-active.el-input{
+  #elementQuery{
+    border: 1px solid $--border-color-light !important;
+  }
+}
 .sub-box.detail-view-sub-box {
   .top-tools.top-tools--sub {
     padding: 0 15px 0 0;

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -37,11 +37,12 @@
         <operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" :tabs="tabs.user.operationLog" @changeTab="changeTab" :targetTab.sync="targetTab"></operation-log-tab>
         <terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-tab>
         <!-- asset列表的3个 -->
-        <panel-tab-new @exit="closeSubList" @getTableData="getTableData" :paramsType="'asset'" v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.panel" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
-        <alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :sign="sign+'alert'" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab.sync="targetTab" @changeTab="changeTab" ></alertMessageTabNew>
-        <endpointTabNew v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.endpoint" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointTabNew>
-        <log-bottom-tab v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :sign="sign+'log'" :from="from" :obj="obj" :tabs="tabs.asset.log" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
-        <assetSubTab v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessageSub" @changeTab="changeTab" :targetTab.sync="targetTab"></assetSubTab>
+        <panel-tab-new @exit="closeSubList" @getTableData="getTableData" :paramsType="'asset'" v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
+        <alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :sign="sign+'alert'" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab" ></alertMessageTabNew>
+        <endpointTabNew v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointTabNew>
+        <log-bottom-tab v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :sign="sign+'log'" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
+        <process-bottom-tab v-if="from === fromRoute.asset && targetTab === 'process' && obj.clientState == '1'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></process-bottom-tab>
+        <assetSubTab v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></assetSubTab>
         <!--module列表的tab-->
         <endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
         <alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
@@ -92,6 +93,7 @@ import terminalLogTab from './tabs/terminalLogTab'
 import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
+import processBottomTab from '@/components/common/bottomBox/tabs/processBottomTab'
 import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
 import IpDetails from '@/components/common/bottomBox/tabs/IpDetails'
 import recordRuleEvalLog from '@/components/common/bottomBox/tabs/recordRuleEvalLog'
@@ -103,6 +105,7 @@ export default {
   components: {
     scrapeEndpoint,
     LogBottomTab,
+    processBottomTab,
     cabinetTab,
     alertMessageTab,
     endpointTab,
@@ -135,22 +138,21 @@ export default {
     obj: {
       immediate: true,
       handler (n) {
-        if ((this.from === fromRoute.asset) && n) {
-          const assetSub = { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: false }
-          if (n.childrenNum) {
-            if (!this.tabs.asset.panel.find(item => item.prop === assetSub.prop)) {
-              this.tabs.asset.panel.push(assetSub)
-              this.tabs.asset.alertMessage.push(assetSub)
-              this.tabs.asset.endpoint.push(assetSub)
-              this.tabs.asset.log.push(assetSub)
-            }
-          } else if (this.tabs.asset.panel.find(item => item.prop === assetSub.prop)) {
-            this.tabs.asset.panel = this.tabs.asset.panel.filter(item => item.prop !== assetSub.prop)
-            this.tabs.asset.alertMessage = this.tabs.asset.alertMessage.filter(item => item.prop !== assetSub.prop)
-            this.tabs.asset.endpoint = this.tabs.asset.endpoint.filter(item => item.prop !== assetSub.prop)
-            this.tabs.asset.log = this.tabs.asset.log.filter(item => item.prop !== assetSub.prop)
-          }
-        }
+        // if ((this.from === fromRoute.asset) && n) {
+        //   const assetSub = { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: false }
+        //   if (n.childrenNum) {
+        //     if (!this.tabs.asset.panel.find(item => item.prop === assetSub.prop)) {
+        //       this.tabs.asset.panel.push(assetSub)
+        //       this.tabs.asset.alertMessage.push(assetSub)
+        //       this.tabs.asset.endpoint.push(assetSub)
+        //       this.tabs.asset.log.push(assetSub)
+        //     }
+        //   } else if (this.tabs.asset.panel.find(item => item.prop === assetSub.prop)) {
+        //     this.tabs.asset.panel = this.tabs.asset.panel.filter(item => item.prop !== assetSub.prop)
+        //     this.tabs.asset.alertMessage = this.tabs.asset.alertMessage.filter(item => item.prop !== assetSub.prop)
+        //     this.tabs.asset.endpoint = this.tabs.asset.endpoint.filter(item => item.prop !== assetSub.prop)
+        //     this.tabs.asset.log = this.tabs.asset.log.filter(item => item.prop !== assetSub.prop)
+        //   }
       }
     }
   },
@@ -183,37 +185,43 @@ export default {
           // module tab
         },
         asset: {
-          panel: [
-            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: true },
-            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
-            { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
-            { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false }
-          ],
-          alertMessage: [
-            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
-            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
-            { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
-            { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false }
-          ],
-          endpoint: [
-            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
-            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
-            { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true },
-            { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false }
-          ],
-          log: [
-            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
-            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
-            { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
-            { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: true }
-          ],
-          alertMessageSub: [
-            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
-            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
-            { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
-            { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false },
-            { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: true }
+          assetTabTitle: [
+            { prop: 'panelTab', name: this.$t('overall.dashboard') },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert') },
+            { prop: 'endpointTab', name: this.$t('asset.endpoint') },
+            { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label') }
           ]
+          // panel: [
+          //   { prop: 'panelTab', name: this.$t('overall.dashboard'), active: true },
+          //   { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
+          //   { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
+          //   { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false }
+          // ],
+          // alertMessage: [
+          //   { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
+          //   { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
+          //   { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
+          //   { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false }
+          // ],
+          // endpoint: [
+          //   { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
+          //   { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
+          //   { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true },
+          //   { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false }
+          // ],
+          // log: [
+          //   { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
+          //   { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
+          //   { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
+          //   { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: true }
+          // ],
+          // alertMessageSub: [
+          //   { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
+          //   { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
+          //   { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
+          //   { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false },
+          //   { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: true },
+          // ]
         },
         module: {
           moduleTabTitle: [
@@ -284,6 +292,23 @@ export default {
       const config = this.obj.configs.find(c => c.type === 'logs')
       return config && config.enable === 1
     },
+    assetTabs () {
+      const hasSub = this.obj && this.obj.childrenNum
+      const hasProcess = this.obj && this.obj.clientState == '1'
+      const tabs = [
+        { prop: 'panelTab', name: this.$t('overall.dashboard') },
+        { prop: 'alertMessageTab', name: this.$t('overall.alert') },
+        { prop: 'endpointTab', name: this.$t('asset.endpoint') },
+        { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label') }
+      ]
+      if (hasSub) {
+        tabs.push({ prop: 'assetSubTab', name: this.$t('overall.assetSubTab') })
+      }
+      if (hasProcess) {
+        tabs.push({ prop: 'process', name: this.$t('overall.process') })
+      }
+      return tabs
+    },
     endpointTabs () {
       const config = this.obj.configs.find(c => c.type === 'logs')
       const hasLog = config && config.enable === 1

nezha-fronted/src/components/common/bottomBox/tabs/processBottomTab.vue

@@ -0,0 +1,181 @@
+<template>
+  <nz-bottom-data-list
+      :showTitle='showTitle'
+      :obj='obj'
+    :api="url"
+    :custom-table-title.sync="tools.customTableTitle"
+    :layout="['elementSet']"
+    :search-msg="searchMsg"
+    :tabs="tabs"
+    :targetTab="targetTab"
+    :showPagination="false"
+    @search="search"
+    @changeTab="changeTab"
+  >
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+    <template v-slot:top-tool-right>
+        <div class="top-tool-right">
+         <div class="top-tool-search margin-r-20">
+           <el-input ref="elementQuery"  @clear="clearInput" id="elementQuery" @focus="focusInput" @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable :placeholder="$t('project.endpoint.promExpr')" >
+              <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
+            </el-input>
+         </div>
+         <pick-time
+              ref="pickTime"
+              v-model="searchTime"
+              :refresh-data-func="dateChange"
+              :showTimePicker="false"
+              :use-chart-unit="false"
+              class="pickTime margin-r-10">
+            </pick-time>
+        </div>
+    </template>
+    <template v-slot>
+      <assetProcessTable
+        ref="dataTable"
+        :orderByFa="'id'"
+        v-my-loading="tools.loading"
+        :loading="tools.loading"
+        :api="url"
+        :custom-table-title="tools.customTableTitle"
+        :height="subTableHeight"
+        :filterTime="filterTime"
+        :table-data="tableData"
+        :terminaLogTab="true"
+        :queryExpression="queryExpression"
+        @del="del"
+        @edit="edit"
+        @orderBy="tableDataSort"
+        @reload="getTableData"
+        @selectionChange="selectionChange"></assetProcessTable>
+    </template>
+    <template v-slot:pagination>
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+    </template>
+  </nz-bottom-data-list>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import assetProcessTable from '@/components/common/table/asset/assetProcessTable'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+
+export default {
+  name: 'processBottomTab',
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
+  components: {
+    nzBottomDataList,
+    assetProcessTable
+  },
+  props: {
+    obj: Object,
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    obj (n) {
+      this.searchLabel = { id: n.id }
+      this.getTableData()
+    },
+    queryExpression (n) {
+      const temp = this
+      setTimeout(function () {
+        temp.tableFilter()
+      }, 500)
+    }
+  },
+  data () {
+    return {
+      url: 'asset/oshi/process/1/',
+      tableId: 'assetProcessTable', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: []
+      },
+      searchLabel: { id: this.obj.id },
+      queryExpression: '',
+      tableData: [],
+      tableDataCopy: '',
+      searchTime: bus.getTimezontDateRange(),
+      filterTime: [
+        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
+      ]
+    }
+  },
+  methods: {
+    getTableData (params) {
+      if (params && Object.keys(params).length > 0) {
+        for (const key in params) {
+          this.$set(this.searchLabel, key, params[key])
+        }
+      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      } else {
+        delete this.searchLabel.orderBy
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', -1)
+      this.tools.loading = true
+      if (this.obj) {
+        this.$set(this.searchLabel, 'id', this.obj.id)
+      }
+      this.tableDataCopy = ''
+      this.$get('asset/oshi/process?id=' + this.obj.id).then(response => {
+      // this.$get('/mock/asset/oshi/process').then(response => {
+        this.tools.loading = false
+        this.nowTime = this.utcTimeToTimezoneStr(response.time)
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.tableDataCopy = JSON.stringify(this.tableData)
+          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    clearInput () {
+      this.$refs.elementQuery.focus()
+    },
+    focusInput () {
+      let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+      this.$refs.elementQuery.focus()
+    },
+    blurInput () {
+      if (!this.queryExpression || this.queryExpression == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    tableFilter () {
+      const tableDatas = JSON.parse(this.tableDataCopy)
+      this.tableData = tableDatas.filter((item) => {
+        const element = item.name
+        return element.indexOf(this.queryExpression) !== -1
+      })
+    },
+    dateChange () {
+      // const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      // this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.searchTime = bus.getTimezontDateRange()
+      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
+      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
+      this.tableFilter()
+    }
+  }
+}
+</script>

nezha-fronted/src/components/common/mixin/routerPathParams.js

@@ -86,7 +86,8 @@ export default {
             id: this.bottomBox.object.id,
             name: this.bottomBox.object.name,
             configs: this.bottomBox.object.configs ? this.bottomBox.object.configs.map(item => { return { type: item.type, enable: item.enable } }) : '',
-            childrenNum: this.bottomBox.object.childrenNum || ''
+            childrenNum: this.bottomBox.object.childrenNum || '',
+            clientState: this.bottomBox.object.clientState || ''
           })
           this.$router.replace({ path: path, query: params }).catch(err => {})
         } else if (from === 'nzDetailList' && this.detailViewRightObj) {
@@ -95,7 +96,8 @@ export default {
             id: this.detailViewRightObj.id,
             name: this.detailViewRightObj.name,
             configs: this.detailViewRightObj.configs ? this.detailViewRightObj.configs.map(item => { return { type: item.type, enable: item.enable } }) : '',
-            childrenNum: this.detailViewRightObj.childrenNum || ''
+            childrenNum: this.detailViewRightObj.childrenNum || '',
+            clientState: this.bottomBox.object.clientState || ''
           })
           this.$router.replace({ path: path, query: params }).catch(err => {})
         } else if (from === 'bottomBox' && this.targetTab) {

nezha-fronted/src/components/common/table/asset/assetProcessTable.vue

@@ -0,0 +1,191 @@
+<template>
+  <el-table
+    id="assetProcessTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    tooltip-effect="light"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+    @row-dblclick="(row)=>{queryMessage(row)}"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      :show-overflow-tooltip="item.prop === 'description'"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'name'">
+          <div style="height:100%;display: flex;align-items: center;">
+             <el-popover trigger="hover" placement="right-start" v-if="typeof scope.row.name != 'undefined' && scope.row.name != null">
+                <div>
+                  <ul>
+                   <li><span class="metirc-tip-list">{{$t('overall.state')}}&nbsp;:&nbsp;&nbsp;</span><span>{{'{ '+ scope.row.state +' }'}}</span></li>
+                  </ul>
+                </div>
+                <div slot="reference"><div :class="{'bar active-icon green-bg':scope.row.state.toLowerCase() == 'running','bar active-icon red-bg':scope.row.state.toLowerCase() != 'running'}"></div></div>
+             </el-popover>
+             <span>{{scope.row[item.prop]}}</span>
+          </div>
+        </template>
+        <template v-else-if="item.prop === 'startTime'">
+          {{utcTimeToTimezoneStr(scope.row[item.prop])}}
+        </template>
+        <template v-else-if="item.prop === 'cpuUsage'">
+            <div style="height:100%;">
+                <progress id="container" max="100" :value= scope.row[item.prop]></progress>
+                <div style="float:left">{{scope.row[item.prop] + '%'}}</div>
+            </div>
+        </template>
+        <template v-else-if="item.prop === 'memUsage'">
+            <div style="height:100%;">
+                <progress id="container" max="100" :value= scope.row[item.prop]></progress>
+                <div style="float:left">{{scope.row[item.prop] + '%'}}</div>
+            </div>
+        </template>
+        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        <template v-else>-</template>
+      </template>
+    </el-table-column>
+    <template slot="empty">
+      <div  v-if="!loading"  class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'assetProcessTable',
+  mixins: [table],
+  props: {
+    loading: Boolean,
+    filterTime: {}
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: this.$t('overall.process'),
+          prop: 'name',
+          show: true,
+          minWidth: 250,
+          sortable: 'custom'
+        }, {
+          label: this.$t('asset.process.PID'),
+          prop: 'processID',
+          show: true,
+          minWidth: 100,
+          sortable: 'custom'
+        }, {
+          label: 'PPID',
+          prop: 'parentProcessID',
+          show: false,
+          minWidth: 100,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.startTime'),
+          prop: 'startTime',
+          show: true,
+          minWidth: 150,
+          sortable: 'custom'
+        }, {
+          label: '%' + this.$t('asset.process.cpu'),
+          prop: 'cpuUsage',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: '%' + this.$t('asset.process.mem'),
+          prop: 'memUsage',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.operationlog.username'),
+          prop: 'user',
+          show: false,
+          minWidth: 120,
+          sortable: 'custom'
+        }, {
+          label: this.$t('dashboard.panel.chartForm.group'),
+          prop: 'group',
+          show: false,
+          minWidth: 120,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.state'),
+          prop: 'state',
+          show: false,
+          minWidth: 120
+        }, {
+          label: this.$t('asset.process.threadCount'),
+          prop: 'threadCount',
+          show: false,
+          minWidth: 150,
+          sortable: 'custom'
+        }
+      ]
+    }
+  },
+  computed: {
+  },
+  methods: {
+  }
+}
+</script>
+<style scoped>
+.el-popover__reference{
+  display: flex;
+  align-items: center;
+}
+.bar {
+  width: 3px;
+  height: 14px;
+  border-radius: 0;
+}
+#container {
+  float:left;
+  width: 120px;
+  height: 18px;
+  margin-right: 15px;
+  background-color: #e6eaed;
+}
+ /* 进度条被填充部分的背景颜色 */
+::-webkit-progress-value {
+     background-color: #00c398;
+ }
+  /deep/ .active-icon {
+    margin-left: 5px;
+  }
+</style>
+<style>
+</style>