NEZ-598 alert message 页面修改

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -96,16 +96,6 @@
               {{scope.row['state'] == 1 ? "Pending" : ""}}
               {{scope.row['state'] == 2 ? "Expired" : ""}}
           </span>
-          <div v-else-if="item.prop === 'current'" class="too-long-split pointer" @click="detail(scope.row)">
-            <span v-if="!scope.row.current || scope.row.alertRule.buildIn == 1">-</span>
-            <el-popover v-else placement="right" trigger="hover">
-              <div slot="reference">
-                <span :id="'alert-list-detail-'+scope.row.id" class="content-right-option"><i class="nz-icon nz-icon-chart"></i></span>
-                <span>{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>
-              </div>
-              <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
-            </el-popover>
-          </div>
           <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
           <template v-else>-</template>
         </template>
@@ -116,11 +106,37 @@
         fixed="right">
         <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
         <div slot-scope="scope" class="table-operation-items">
-          <button class="table-operation-item" @click="$refs.dataList.showBottomBox('operationLog',scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+          <!-- <button class="table-operation-item" @click="$refs.dataList.showBottomBox('operationLog',scope.row)"><i class="nz-icon nz-icon-view1"></i></button> -->
+           <div class="pointer" @click="detail(scope.row)">
+            <span v-if="!scope.row.current || scope.row.alertRule.buildIn == 1">-</span>
+            <el-popover v-else placement="right" trigger="hover">
+              <div slot="reference">
+                <span :id="'alert-list-detail-'+scope.row.id" class="content-right-option" style="margin:0"><i class="nz-icon nz-icon-view1"></i></span>
+                <span>{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>
+              </div>
+              <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
+            </el-popover>
+          </div>
+
           <button class="table-operation-item" @click="toDeleteMessage(scope.row)"><i class="nz-icon nz-icon-delete"></i></button>
         </div>
       </el-table-column>
     </el-table>
+    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
+               :title="$t('overall.detail')"
+               :visible.sync="graphShow"
+               width="90%"
+               id="viewGraphDialog"
+               @close="dialogClose"
+               :modal-append-to-body='false'>
+      <div slot="title">
+        {{$t("project.endpoint.dialogTitle")}}
+        <div class="float-right panel-calendar dialog-tool" style="display: flex">
+          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
+        </div>
+      </div>
+      <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
+    </el-dialog>
   </div>
 </template>
 
@@ -133,12 +149,14 @@ import chartDataFormat from '../../../charts/chartDataFormat'
 import alertRuleInfo from '../../alert/alertRuleInfo'
 import alertLabel from '../../alert/alertLabel'
 import { calcDurationByStringTimeB } from '../../js/tools'
+import chart from "../../../page/dashboard/overview/chart"
 export default {
   name: 'alertMessageTable',
   components: {
     nzAlertTag,
     alertRuleInfo: alertRuleInfo,
-    alertLabel: alertLabel
+    alertLabel: alertLabel,
+    chart:chart,
   },
   props: {
     nowTime: {
@@ -269,6 +287,12 @@ export default {
       })
       return result
     },
+    chartUnitChange:function(unit){
+      this.chartUnit=unit;
+      this.$nextTick(()=>{
+        this.queryChartDate()
+      })
+    },
     formatThreshold (value, unit) {
       const unitMethod = chartDataFormat.getUnit(unit)
       if (unitMethod && value) {
@@ -414,7 +438,9 @@ export default {
         this.queryChartDate()
       })
     },
-
+    dialogClose() {
+        this.graphShow = false;
+      },
     getAlertList () {
       if (!this.scrollbarWrap) {
         this.$nextTick(() => {
@@ -589,6 +615,18 @@ export default {
 </script>
 
 <style scoped lang=scss>
+  .pointer{
+    background: #FA901c;
+    border-radius: 2px;
+    border: none;
+    width: 40px;
+    height: 22px;
+    box-sizing: border-box;
+    text-align:center;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 20px;
+  }
   .alertLabelInfo{
     border: 1px solid #ebeef5;
     border-bottom: none;