feat：添加 timeLine组件

nezha-fronted/README.md

@@ -12,10 +12,14 @@ npm install
 npm run dev
 
 # build for production with minification
-npm run build
+npm run build -- dev
 
 # build for production and view the bundle analyzer report
 npm run build --report
 ```
 
 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+
+使用
+
+需要配置 config.json 为 {"baseUrl":"http://192.168.40.42:8080/", "version": "21.04"}

nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss

@@ -4,6 +4,7 @@
     padding-bottom: 20px;
   }
   .alert-message-info-box{
+    box-sizing: border-box;
     padding: 20px;
     display: flex;
     width: 100%;
@@ -23,6 +24,7 @@
         flex: none;
       }
       .alert-message-info-tab{
+        height: 63%;
         flex: 1;
         .el-tabs.el-tabs--card {
           height: 100%;
@@ -65,6 +67,11 @@
     }
     .info-box-right{
       flex: 1;
+      height: 100%;
+      border: 1px solid #E7EAED;
+      border-radius: 2px;
+      box-sizing: border-box;
+      padding: 20px;
     }
     .table-no-data {
       width: 100%;

nezha-fronted/src/components/common/alert/alertMessageInfo.vue

@@ -45,7 +45,7 @@
           :infoData="infoData" />
       </div>
       <div class="info-box-right">
-        时间
+        <alertMessageInfoTimeLine />
       </div>
     </div>
   </div>
@@ -62,13 +62,15 @@ import chartTempData from '@/components/charts/chartTempData'
 import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
 import alertMessageInfoTab from '@/components/common/alert/alertMessageInfoTab'
+import alertMessageInfoTimeLine from '@/components/common/alert/alertMessageInfoTimeLine'
 
 export default {
   name: 'panelChart',
   components: {
     alertMessageInfoTab,
     chart,
-    ChartScreenHeader
+    ChartScreenHeader,
+    alertMessageInfoTimeLine
   },
   props: {
     chartInfo: Object, // 其中的param json串已转化为对象

nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue

@@ -2,7 +2,7 @@
   <div class="info-box-header">
     <div v-for="item in cardNames" :key="item.key" v-if="infoData[item.key]">
       <div class="info-box-title">{{item.label}}</div>
-      <div v-if="item.key === 'summary' || item.key === 'remark'" class="info-box-content">
+      <div v-if="item.key === 'summary' || item.key === 'description'" class="info-box-content">
         {{infoData[item.key]}}
       </div>
       <div v-if="item.key==='labels'" class="info-box-content">
@@ -49,7 +49,7 @@ export default {
     return {
       cardNames: [
         { key: 'summary', label: this.$t('alert.summary') },
-        { key: 'remark', label: this.$t('overall.remark') },
+        { key: 'description', label: this.$t('overall.remark') },
         { key: 'labels', label: this.$t('alert.list.labels') },
         { key: 'startAt', label: this.$t('alert.startAt') }
       ]

nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'alertMessageInfoTimeLine',
+  props: {
+    infoData: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>