feat:alertmessage 新增endpoint悬浮框，table类型图表新增value mapping

nezha-fronted/src/components/charts/chart-table.vue

@@ -1,11 +1,12 @@
 <style lang="scss">
-@import './chart.scss';
+  @import './chart.scss';
 </style>
 <template>
   <div class="nz-chart-resize">
     <div class="resize-shadow" ref="resizeShadow"></div>
     <div class="resize-box resize-box-table" ref="resizeBox">
-      <div class="chart-table" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+      <div class="chart-table" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true"
+           @mouseleave="caretShow=false">
         <loading :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-popover
@@ -14,71 +15,94 @@
             placement="top-start"
             trigger="hover"
             popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
+            <div>{{errorContent}}</div>
             <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
                 <i class="nz-icon nz-icon-warning fa"></i>
                 <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartData.title}}</span>
-              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "
+                                                :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
             </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
+            <ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex"
-              <li  @click="refreshChart"  class="el-dropdown-menu__item">
+                class="el-dropdown-menu nz-chart-dropdown"
-                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
+                style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;">
-              <li  @click="editChart"  class="el-dropdown-menu__item">
+              <li @click="refreshChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span>
-              <li  @click="removeChart"  class="el-dropdown-menu__item">
+              </li>
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
+              <li @click="editChart" class="el-dropdown-menu__item">
-              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}
-                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
+              </li>
-              <li  @click="duplicate"  class="el-dropdown-menu__item">
+              <li @click="removeChart" class="el-dropdown-menu__item">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
+                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}
+              </li>
+              <li @click="showAllScreen" class="el-dropdown-menu__item">
+                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}
+              </li>
+              <li @click="duplicate" class="el-dropdown-menu__item">
+                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}
+              </li>
             </ul>
           </el-dropdown>
         </div>
-        <div class="mt-10 table-container" v-cloak  v-show="firstShow">
+        <div class="mt-10 table-container" v-cloak v-show="firstShow">
-          <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight" :data="seriesItem" border  tooltip-effect="light" v-cloak v-scrollBar:el-table @sort-change="tableDataSort">
+          <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
-            <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" :sort-orders="['ascending', 'descending']"  :sortable="'custom'"></el-table-column>
+                    :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table
-              <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260" :sort-orders="['ascending', 'descending']"  :sortable="'custom'">
+                    @sort-change="tableDataSort">
-                <template slot-scope="scope">
+            <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
-                  {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
+                             :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
-                </template>
+            <el-table-column sortable prop="element" :show-overflow-tooltip="true"
-              </el-table-column>
+                             :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260"
-              <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" :resizable="false" :sort-orders="['ascending', 'descending']"  :sortable="'custom'">
+                             :sort-orders="['ascending', 'descending']" :sortable="'custom'">
-                <template slot-scope="scope">
-                  {{ unit.compute(scope.row.value,null,2)}}
-                </template>
-              </el-table-column>
-          </el-table>
-          <Pagination :pageObj="pageObj" @pageNo='pageNo' :post-page-sizes="pageSizes" @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false" >
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.title}}</span>
-            <div class="float-right panel-calendar dialog-tool">
-              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
-            </div>
-          </div>
-          <el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border  tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
-            <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" :sort-orders="['ascending', 'descending']"  :sortable="'custom'"></el-table-column>
-            <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="420" :sort-orders="['ascending', 'descending']"  :sortable="'custom'">
               <template slot-scope="scope">
                 {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
               </template>
             </el-table-column>
-            <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" :resizable="false" :sort-orders="['ascending', 'descending']"  :sortable="'custom'">
+            <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
+                             :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
-                {{ unit.compute(scope.row.value,null,2)}}
+                {{ scope.row.value}}
               </template>
             </el-table-column>
           </el-table>
-          <Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
+          <Pagination :pageObj="pageObj" @pageNo='pageNo' :post-page-sizes="pageSizes" @pageSize='pageSize'
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+                      ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
+        </div>
+        <!--全屏-->
+        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal"
+                   width="96%" @close="screenModal = false">
+          <div slot="title">
+            <span class="nz-dialog-title">{{data.title}}</span>
+            <div class="float-right panel-calendar dialog-tool">
+              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"
+                           @change="dateChange"></time-picker>
+            </div>
+          </div>
+          <el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
+                    tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
+            <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
+                             :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
+            <el-table-column sortable prop="element" :show-overflow-tooltip="true"
+                             :label="$t('dashboard.panel.chartTableColumn.element')" min-width="420"
+                             :sort-orders="['ascending', 'descending']" :sortable="'custom'">
+              <template slot-scope="scope">
+                {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
+              </template>
+            </el-table-column>
+            <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
+                             :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
+              <template slot-scope="scope">
+                {{ scope.row.value}}
+              </template>
+            </el-table-column>
+          </el-table>
+          <Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo'
+                      @pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
+          <loading :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
         <span class="vue-resizable-handle" @mousedown="startResize"></span>
       </div>
@@ -87,370 +111,385 @@
 </template>
 
 <script>
-import bus from '../../libs/bus';
+  import bus from '../../libs/bus';
-import {Loading} from 'element-ui';
+  import {Loading} from 'element-ui';
-import chartDataFormat from './chartDataFormat'
+  import chartDataFormat from './chartDataFormat'
-import loading from "../common/loading";
+  import loading from "../common/loading";
-import timePicker from '../common/timePicker'
+  import timePicker from '../common/timePicker'
 
-export default {
+  export default {
-  name: 'chartTable',
+    name: 'chartTable',
-  components: {
+    components: {
-    'loading': loading,
+      'loading': loading,
-    'time-picker':timePicker
+      'time-picker': timePicker
-  },
-  props: {
-    chartData: {
-      type: Object
     },
-    // 看板id
+    props: {
-    panelId: {
+      chartData: {
-      type: Number,
+        type: Object
-      default: 0,
+      },
+      // 看板id
+      panelId: {
+        type: Number,
+        default: 0,
+      },
+      editChartId: {
+        type: String,
+        default: 'editChartId',
+      },
+      chartIndex: {
+        type: Number,
+        default: 0,
+      }
     },
-    editChartId: {
+    data() {
-      type: String,
+      return {
-      default: 'editChartId',
+        tableHeight: 0,
+        data: {}, // 该图表信息,chartItem
+        unit: {},
+        isError: false,
+        errorContent: '',
+        pageSizes: [50, 100, 200],
+        pageObj: {
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        screenPageObj: {
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        storedTableDataOld: [],//原始信息
+        storedTableDataScreenOld: [],//全屏原始信息
+        storedTableData: [],
+        storedScreanTableData: [],
+        seriesItem: [], // 保存信息
+        seriesItemScreen: [],//全屏数据,
+        orderBy: null,//排序非全屏
+        orderByScreen: null,//排序全屏
+        images: '',
+        loading: Object,
+        items: {
+          metric_name: [], // 每条数据列名称
+          xAxis: [],
+          theData: [], // series数据组
+        },
+        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+        firstLoad: false, // 是否第一次加载
+        chartType: 'table', // 图表类型
+        screenModal: false,
+        // 查询数据使用
+        filter: {
+          start_time: '',
+          end_time: '',
+        },
+        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+        firstShow: false, // 默认不显示操作按钮,
+        caretShow: false,
+        dragTitleShow: false,
+        dropdownMenuShow: false,
+        divFirstShow: false,
+        columns: [
+          {
+            title: 'Element',
+            key: 'element',
+            sortable: true
+          }
+          , {
+            title: '采集时间',
+            key: 'time',
+            width: 160,
+            render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
+          }, {
+            title: '数值',
+            key: 'value',
+            width: 160,
+            sortable: true,
+            render: (h, params) => h('span', this.getNumStr(params.row.value)),
+          }],
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+        oldSearchTime: [],
+      };
     },
-    chartIndex:{
+    created() {
-      type: Number,
+      this.pageObj.pageSize = this.pageSizes[0];
-      default: 0,
+      this.screenPageObj.pageSize = this.pageSizes[0];
-    }
+    },
-  },
+    computed: {},
-  data() {
+    watch: {},
-    return {
+    methods: {
-      tableHeight: 0,
+      pageNo(val) {
-      data: {}, // 该图表信息,chartItem
+        this.pageObj.pageNo = val;
-      unit:{},
+        this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
-      isError:false,
-      errorContent:'',
-      pageSizes:[50,100,200],
-      pageObj: {
-        pageNo: 1,
-        pageSize: 50,
-        total: 0
       },
-      screenPageObj:{
+      pageSize(val) {
-        pageNo: 1,
+        this.pageObj.pageSize = val;
-        pageSize: 50,
+        this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
-        total: 0
       },
-      storedTableDataOld:[],//原始信息
+      filterShowData(source, pageObj, from) {
-      storedTableDataScreenOld:[],//全屏原始信息
+        let orderBy = null;
-      storedTableData:[],
+        let sourceData = null;
-      storedScreanTableData:[],
+        if (from === 'series') {
-      seriesItem: [], // 保存信息
+          sourceData = this.storedTableDataOld;
-      seriesItemScreen:[],//全屏数据,
+          orderBy = this.orderBy;
-      orderBy:null,//排序非全屏
-      orderByScreen:null,//排序全屏
-      images: '',
-      loading:Object,
-      items: {
-        metric_name: [], // 每条数据列名称
-        xAxis: [],
-        theData: [], // series数据组
-      },
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      chartType: 'table', // 图表类型
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: '',
-      },
-      stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow:false,
-      dragTitleShow:false,
-      dropdownMenuShow:false,
-      divFirstShow:false,
-      columns: [
-        {
-          title:'Element',
-          key:'element',
-          sortable: true
         }
-      , {
+        if (from === 'seriesScreen') {
-          title: '采集时间',
+          sourceData = this.storedTableDataScreenOld;
-          key: 'time',
+          orderBy = this.orderByScreen;
-          width: 160,
-          render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
-      }, {
-          title: '数值',
-          key: 'value',
-          width: 160,
-          sortable: true,
-          render: (h, params) => h('span', this.getNumStr(params.row.value)),
-      }],
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-      oldSearchTime: [],
-    };
-  },
-  created() {
-    this.pageObj.pageSize=this.pageSizes[0];
-    this.screenPageObj.pageSize=this.pageSizes[0];
-  },
-  computed: {},
-  watch: {},
-  methods: {
-    pageNo(val) {
-      this.pageObj.pageNo = val;
-      this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series')
-    },
-    pageSize(val) {
-      this.pageObj.pageSize = val;
-      this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series')
-    },
-    filterShowData(source,pageObj,from){
-      let orderBy=null;
-      let sourceData=null;
-      if(from==='series'){
-        sourceData=this.storedTableDataOld;
-        orderBy=this.orderBy;
-      }
-      if(from==='seriesScreen'){
-        sourceData=this.storedTableDataScreenOld;
-        orderBy=this.orderByScreen;
-      }
-      if(!orderBy || !orderBy.order){//没有排序 恢复默认值
-        source=Object.assign([],sourceData);
-      }else{//排序之后的顺序
-        if(orderBy.order==='ascending'){
-          source=source.sort(this.$tableSet.asce(orderBy.prop));
         }
-        if(orderBy.order==='descending'){
+        if (!orderBy || !orderBy.order) {//没有排序 恢复默认值
-          source=source.sort(this.$tableSet.desc(orderBy.prop));
+          source = Object.assign([], sourceData);
-        }
+        } else {//排序之后的顺序
-      }
+          if (orderBy.order === 'ascending') {
-      return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
+            source = source.sort(this.$tableSet.asce(orderBy.prop));
-
+          }
-    },
+          if (orderBy.order === 'descending') {
-    startResize(e) {
+            source = source.sort(this.$tableSet.desc(orderBy.prop));
-      let vm = this;
-      this.$chartResizeTool.start(vm, this.data, e);
-    },
-    screenPageNo(val) {
-      this.screenPageObj.pageNo = val;
-      this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj,'seriesScreen')
-    },
-    screenPageSize(val) {
-      this.screenPageObj.pageSize = val;
-      this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj,'seriesScreen')
-    },
-    startLoading(area){
-      if(area==='screen'){
-        this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
-      }else {
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-      }
-    },
-    endLoading(area){
-      if(area==='screen'){
-        this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
-      }else {
-        this.$refs['localLoading'+this.chartIndex].endLoading();
-      }
-    },
-    resize(chartItem) {
-      let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
-      let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
-      container.style.height = `calc(100% - ${deHeight*2}px)`;
-      this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
-      this.$nextTick(() => {
-        container.querySelector(".el-table__body-wrapper")._ps_.update();
-      });
-    },
-    showLoad(chartItem) {
-      //设置高度 chart-table
-      this.$nextTick(() => {
-        this.resize(chartItem);
-      });
-      this.startLoading();
-      this.divFirstShow = true;
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart() {
-      this.dropdownMenuShow=false;
-      this.startLoading();
-      this.firstShow = false;
-      this.$emit('on-refresh-data', this.data.id);
-    },
-    // 编辑图表
-    editChart() {
-      this.dropdownMenuShow=false;
-      this.$emit('on-edit-chart-block', this.data.id);
-    },
-    // 删除该图表
-    removeChart() {
-      this.dropdownMenuShow=false;
-      this.$emit('on-remove-chart-block', this.data.id);
-    },
-    //全屏时间条件查询
-    dateChange(time) {
-      this.searchTime = [...time];
-      this.seriesItemScreen = [];
-      for(let i=0;i<8;i++){
-        this.seriesItemScreen.push({//表格数据
-          element:'',
-          time: '',//采集时间
-          value: '',//数值
-        });
-      }
-      this.startLoading('screen');
-      this.$emit('on-search-data', this.data.id, this.searchTime);
-    },
-    clickos() {
-      this.dropdownMenuShow=false;
-    },
-    clearChart(){
-      this.data = {};
-    },
-    duplicate(){
-      this.dropdownMenuShow=false;
-      const param = {id:this.data.id};
-      this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
-        if (response.code === 200) {
-          this.$message({
-            duration: 2000,
-            type: 'success',
-            message: this.$t("tip.duplicateSuccess")
-          });
-          this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-        }else {
-          if(response.msg){
-            this.$message.error(response.msg);
-          }else if(response.error){
-            this.$message.error(response.error);
-          }else {
-            this.$message.error(response);
           }
         }
-      });
+        return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
-    },
-    // 全屏查看
-    showAllScreen() {
-      this.dropdownMenuShow=false;
-      // 初始化同步时间
-      this.searchTime = [];
-      this.$set(this.searchTime, 0, this.oldSearchTime[0]);
-      this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-      this.$refs.calendarPanel.setCustomTime(this.searchTime);
 
-      this.seriesItemScreen = this.seriesItem;
+      },
-      this.screenModal = true;
+      startResize(e) {
-    },
+        let vm = this;
-    // 设置数据, filter区分
+        this.$chartResizeTool.start(vm, this.data, e);
-    setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
+      },
-      if(errorMsg && errorMsg!==''){
+      screenPageNo(val) {
-        this.isError = true;
+        this.screenPageObj.pageNo = val;
-        this.errorContent = errorMsg;
+        this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
-      }else {
+      },
-        this.isError = false;
+      screenPageSize(val) {
-        this.errorContent = '';
+        this.screenPageObj.pageSize = val;
-      }
+        this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
-      if(area==='showFullScreen'){//全屏按时间查询
+      },
-        this.data = chartItem;
+      startLoading(area) {
-        this.unit = chartDataFormat.getUnit(this.data.unit);
+        if (area === 'screen') {
-        this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+          this.$refs['localLoadingScreen' + this.chartIndex].startLoading();
-        this.searchTime[1] = filter.end_time;
+        } else {
-        // this.seriesItemScreen = seriesItem;
+          this.$refs['localLoading' + this.chartIndex].startLoading();
-        this.storedScreanTableData=seriesItem;
+        }
-        this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
+      },
-        this.storedTableDataScreenOld=Object.assign([],this.storedScreanTableData);
+      endLoading(area) {
-        this.screenPageObj.total=this.storedScreanTableData.length;
+        if (area === 'screen') {
-        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj,'seriesScreen');
+          this.$refs['localLoadingScreen' + this.chartIndex].endLoading();
-        this.endLoading('screen');
+        } else {
-      } else{
+          this.$refs['localLoading' + this.chartIndex].endLoading();
+        }
+      },
+      resize(chartItem) {
+        let deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight;
+        let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
+        container.style.height = `calc(100% - ${deHeight * 2}px)`;
+        this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
+        this.$nextTick(() => {
+          container.querySelector(".el-table__body-wrapper")._ps_.update();
+        });
+      },
+      showLoad(chartItem) {
         //设置高度 chart-table
-        this.divFirstShow = true;
         this.$nextTick(() => {
           this.resize(chartItem);
         });
-        this.firstShow = true; // 展示操作按键
+        this.startLoading();
+        this.divFirstShow = true;
+      },
+      // 重新请求数据 刷新操作-local
+      refreshChart() {
+        this.dropdownMenuShow = false;
+        this.startLoading();
+        this.firstShow = false;
+        this.$emit('on-refresh-data', this.data.id);
+      },
+      // 编辑图表
+      editChart() {
+        this.dropdownMenuShow = false;
+        this.$emit('on-edit-chart-block', this.data.id);
+      },
+      // 删除该图表
+      removeChart() {
+        this.dropdownMenuShow = false;
+        this.$emit('on-remove-chart-block', this.data.id);
+      },
+      //全屏时间条件查询
+      dateChange(time) {
+        this.searchTime = [...time];
+        this.seriesItemScreen = [];
+        for (let i = 0; i < 8; i++) {
+          this.seriesItemScreen.push({//表格数据
+            element: '',
+            time: '',//采集时间
+            value: '',//数值
+          });
+        }
+        this.startLoading('screen');
+        this.$emit('on-search-data', this.data.id, this.searchTime);
+      },
+      clickos() {
+        this.dropdownMenuShow = false;
+      },
+      clearChart() {
+        this.data = {};
+      },
+      duplicate() {
+        this.dropdownMenuShow = false;
+        const param = {id: this.data.id};
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t("tip.duplicateSuccess")
+            });
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data);
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg);
+            } else if (response.error) {
+              this.$message.error(response.error);
+            } else {
+              this.$message.error(response);
+            }
+          }
+        });
+      },
+      // 全屏查看
+      showAllScreen() {
+        this.dropdownMenuShow = false;
+        // 初始化同步时间
+        this.searchTime = [];
+        this.$set(this.searchTime, 0, this.oldSearchTime[0]);
+        this.$set(this.searchTime, 1, this.oldSearchTime[1]);
+        this.$refs.calendarPanel.setCustomTime(this.searchTime);
 
-        this.panelIdInner = panelId;
+        this.seriesItemScreen = this.seriesItem;
+        this.screenModal = true;
+      },
+      // 设置数据, filter区分
+      setData(chartItem, seriesItem, panelId, filter, area, errorMsg) {
+        if (errorMsg && errorMsg !== '') {
+          this.isError = true;
+          this.errorContent = errorMsg;
+        } else {
+          this.isError = false;
+          this.errorContent = '';
+        }
         this.data = chartItem;
         this.unit = chartDataFormat.getUnit(this.data.unit);
-        this.storedTableData =seriesItem;
+        seriesItem=seriesItem.map(item=>{
-        this.storedScreanTableData=seriesItem;
+          if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
-        this.storedTableData=Object.assign([],this.storedTableData.reverse());
+            let type=chartItem.param.valueMapping.type;
-        this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
+            let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
-        this.storedTableDataOld =Object.assign([],this.storedTableData);
+            let value = item.value;
-        this.storedTableDataScreenOld =Object.assign([],this.storedScreanTableData);
+
-        this.pageObj.total=this.storedTableData.length;
+            let mapping;
-        this.screenPageObj.total=this.storedScreanTableData.length;
+            if(type == 'value'){
-        this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series');
+              mapping=mappings.find(t=>{return t.value == value})
-        this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj,'seriesScreen')
+            }else{
-        if (filter) { // 保存数据,用于同步时间
+              mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
+            }
+            item.value = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
+          }
+          return item;
+        })
+        if (area === 'showFullScreen') {//全屏按时间查询
+
           this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
           this.searchTime[1] = filter.end_time;
-          this.oldSearchTime[0] = this.searchTime[0];
+          // this.seriesItemScreen = seriesItem;
-          this.oldSearchTime[1] = this.searchTime[1];
+          this.storedScreanTableData = seriesItem;
-        }
+          this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse());
-        this.endLoading();
+          this.storedTableDataScreenOld = Object.assign([], this.storedScreanTableData);
-      }
+          this.screenPageObj.total = this.storedScreanTableData.length;
-    },
+          this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen');
-    // 数据排序
+          this.endLoading('screen');
-    tableDataSort(item){
+        } else {
-      this.orderBy={order:item.order,prop:item.prop};
+          //设置高度 chart-table
-      this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series');
+          this.divFirstShow = true;
-    },
+          this.$nextTick(() => {
-    // 全屏数据排序
+            this.resize(chartItem);
-    tableDataSortScreen(item){
+          });
-      this.orderByScreen={order:item.order,prop:item.prop};
+          this.firstShow = true; // 展示操作按键
-      this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj,'seriesScreen')
+
-    },
+          this.panelIdInner = panelId;
-    dealLegendAlias:function(legend,expression){
+          this.storedTableData = seriesItem;
-      if(/\{\{.+\}\}/.test(expression)){
+          this.storedScreanTableData = seriesItem;
-        let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
+          this.storedTableData = Object.assign([], this.storedTableData.reverse());
-          let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
+          this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse());
-          let reg=new RegExp(label+'=".+?"')
+          this.storedTableDataOld = Object.assign([], this.storedTableData);
-          let value=null;
+          this.storedTableDataScreenOld = Object.assign([], this.storedScreanTableData);
-          if(reg.test(legend)){
+          this.pageObj.total = this.storedTableData.length;
-            let find=legend.match(reg)[0];
+          this.screenPageObj.total = this.storedScreanTableData.length;
-            value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+          this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series');
+          this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
+          if (filter) { // 保存数据,用于同步时间
+            this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+            this.searchTime[1] = filter.end_time;
+            this.oldSearchTime[0] = this.searchTime[0];
+            this.oldSearchTime[1] = this.searchTime[1];
           }
-          return value?value:label;
+          this.endLoading();
-        })
+        }
-        return labelValue
+      },
-      }else{
+      // 数据排序
-        return expression;
+      tableDataSort(item) {
-      }
+        this.orderBy = {order: item.order, prop: item.prop};
-    },
+        this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series');
-    // 获取格式
+      },
-    getNumStr(num) {
+      // 全屏数据排序
-      if (num) {
+      tableDataSortScreen(item) {
-        if (num >= 1000) {
+        this.orderByScreen = {order: item.order, prop: item.prop};
-          const kbNum = num / 1000;
+        this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
-          if (kbNum >= 1000) {
+      },
-            const mbNum = kbNum / 1000;
+      dealLegendAlias: function (legend, expression) {
-            if (mbNum >= 1000) {
+        if (/\{\{.+\}\}/.test(expression)) {
-              const gbNum = mbNum / 1000;
+          let labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
-              if (gbNum >= 1000) {
+            let label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
-                const tbNum = gbNum / 1000;
+            let reg = new RegExp(label + '=".+?"')
-                if (tbNum >= 1000) {
+            let value = null;
-                  const pbNum = tbNum / 1000;
+            if (reg.test(legend)) {
-                  return `${pbNum.toFixed(2)}PB`;
+              let find = legend.match(reg)[0];
-                }
+              value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1);
-                return `${tbNum.toFixed(2)}TB`;
-              }
-              return `${gbNum.toFixed(2)}GB`;
             }
-            return `${mbNum.toFixed(2)}MB`;
+            return value ? value : label;
-          }
+          })
-          return `${kbNum.toFixed(2)}KB`;
+          return labelValue
+        } else {
+          return expression;
         }
-        return num.toFixed(2);
+      },
-      }
+      // 获取格式
-      return num;
+      getNumStr(num) {
+        if (num) {
+          if (num >= 1000) {
+            const kbNum = num / 1000;
+            if (kbNum >= 1000) {
+              const mbNum = kbNum / 1000;
+              if (mbNum >= 1000) {
+                const gbNum = mbNum / 1000;
+                if (gbNum >= 1000) {
+                  const tbNum = gbNum / 1000;
+                  if (tbNum >= 1000) {
+                    const pbNum = tbNum / 1000;
+                    return `${pbNum.toFixed(2)}PB`;
+                  }
+                  return `${tbNum.toFixed(2)}TB`;
+                }
+                return `${gbNum.toFixed(2)}GB`;
+              }
+              return `${mbNum.toFixed(2)}MB`;
+            }
+            return `${kbNum.toFixed(2)}KB`;
+          }
+          return num.toFixed(2);
+        }
+        return num;
+      },
     },
-  },
+    mounted() {
-  mounted() {
       this.firstLoad = false;
-  },
+    },
-  beforeDestroy() {
+    beforeDestroy() {
-    this.clearChart();
+      this.clearChart();
-  },
+    },
-};
+  };
 </script>

nezha-fronted/src/components/charts/chartPreview.vue

@@ -143,7 +143,7 @@
           </el-table-column>
           <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
             <template slot-scope="scope">
-              {{ unit.compute(scope.row.value,null,2)}}
+              {{scope.row.value}}
             </template>
           </el-table-column>
         </el-table>
@@ -1028,8 +1028,25 @@
       },
       // 设置数据
       setTableData(seriesItem) {
+        console.log('set table data',this.chart)
         this.unit = chartDataFormat.getUnit(this.chart.unit);
+        seriesItem=seriesItem.map(item=>{
+          if(this.chart.param.valueMapping && this.chart.param.valueMapping.type){
+            let type=this.chart.param.valueMapping.type;
+            let mappings=this.chart.param.valueMapping.mapping?this.chart.param.valueMapping.mapping:[];
+            let value = item.value;
 
+            let mapping;
+            if(type == 'value'){
+              mapping=mappings.find(t=>{return t.value == value})
+            }else{
+              mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
+            }
+            item.value = mapping?mapping.text:this.unit.compute(value,null,2);
+            console.log('value',value,'mapping',mapping)
+          }
+          return item;
+        })
         this.storedScreanTableData=seriesItem;
         this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
         this.screenPageObj.total=this.storedScreanTableData.length;

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -37,7 +37,7 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
-              <span class="chart-title-text">{{chartData.title}}</span>
+              <span class="chart-title-text">{{chartData.title}}-[{{chartData.id}}]</span>
               <span class="chart-title-icon" v-if="filter.from != 'alertRule'"><i class="nz-icon nz-icon-xialaxuanze  " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
             </span>
             <ul v-if="filter.from != 'alertRule'" slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}"    style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >

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

@@ -93,6 +93,37 @@
           <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
         </div>
       </div>
+
+      <div class="alert-label-info" v-if="type==='endpoint'" v-loading="loading">
+        <div class="alert-label-box">
+          <div class="alert-label-title">ID</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Project</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Module</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.module.name:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Labels</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.labels:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Host</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Port</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.port:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Path</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.path:''}}</div>
+        </div>
+      </div>
   </div>
 </template>
 
@@ -227,6 +258,17 @@
           }
         })
       }
+      if(this.type==='endpoint'){
+        this.$get('/endpoint?id='+this.id).then((res)=>{
+          if(res.msg==='success'){
+            this.loading=false;
+            this.alertLabelData=res.data.list[0];
+            console.log(this.alertLabelData)
+          } else{
+            this.$message.error(res.msg);
+          }
+        })
+      }
     },
   }
 

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

@@ -98,7 +98,7 @@
                 </nz-alert-tag>
               </span>
               <alertLabel
-                v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
+                v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project'||item.label === 'endpoint') && scope.row[item.label] && scope.row[item.label].loading"
                 :id="scope.row[item.label].id"
                 :that="scope.row[item.label]"
                 :type="item.label"
@@ -794,6 +794,7 @@
         switch(labelType){
           case 'asset':
           case 'module':
+          case 'endpoint':
           case 'project':
             return false;
           default: return true;

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

@@ -520,8 +520,10 @@
                 this.pingData.map(item=>{
                   if(response.data.ping){
                     let data=response.data.ping.find(t=>t.name == item.label);
-                    item.total = data.total;
+                    if(data){
-                    item.value = data.status
+                      item.total = data.total;
+                      item.value = data.status
+                    }
                   }
                   return item;
                 })

nezha-fronted/src/components/page/asset/asset.vue

@@ -569,7 +569,7 @@
         }
       },
       afterTableListChange:function(){
-        this.getTableData();
+        // this.getTableData();
         bus.$emit('asset-list-change')
       },
       pageNo(val) {

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -230,18 +230,18 @@
           </span>
         </el-row>
         <!--value mapping start-->
-        <div  class="right-box-sub-title" v-if="editChart.type == 'singleStat'">
+        <div  class="right-box-sub-title" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
           <span>{{$t('dashboard.panel.chartForm.valMapping.name')}}</span>
           <span  class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
         </div>
-        <div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'"></div>
+        <div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'||editChart.type == 'table'"></div>
-        <el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'">
+        <el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
           <el-radio-group v-model="editChart.param.valueMapping.type" fill="#FA901C" text-color="#FA901C" size="small" class="val-mapping-type"  @change="valueMappingChange">
             <el-radio-button label="value" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
             <el-radio-button label="range" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.range')}}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'value'">
+        <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'">
           <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
             <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item-other" >
               <el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
@@ -252,7 +252,7 @@
             </el-form-item>
           </template>
         </template>
-        <template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'range'">
+        <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'">
           <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
             <div class="half-form-item-other" style="display: inline-block;margin-left: 70px">
               <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
@@ -1179,6 +1179,13 @@
             this.editChart.param={nullType:this.editChart.param.nullType,threshold:'',legendValue:{min:'off',max:'off',avg:'off',last:'off',total:'off'}}
           }else if(chartType == 'table'){
             this.$set(this.editChart.param,'last',0)
+            this.editChart.param={
+              statistics:'',
+              valueMapping:{
+                type:'value',
+                mapping:[{text:'',value:''}]
+              }
+            }
           }
           /*if(this.$refs.chartTag){
             this.$refs.chartTag.forEach((item, index) => {
@@ -1253,6 +1260,7 @@
                 params.param.threshold=this.editChart.param.threshold;
                 if(this.editChart.type==='table'){
                   delete params.param.threshold;
+                  params.param.valueMapping=this.editChart.param.valueMapping;
                 }
                 params.param.nullType=this.editChart.param.nullType;
                 params.param.legendValue=this.editChart.param.legendValue;
@@ -1386,6 +1394,7 @@
             this.setIsSingleStat();
           } else if(n.type  === 'table'){
             n.param.last?this.$set(this.editChart.param,'last',n.param.last):this.$set(this.editChart.param,'last',0)
+            n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:''}]})
           }else {
             this.setIsOtherChart();
             n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})