ops-fronted-java/src/views/homePage/components/rowMsgDialog.vue

<template>
  <el-dialog
    class="cmdMsgDialog"
    title="历史信息"
    :visible.sync="isShow"
    :close-on-click-modal="false"
  >
    <div class="cmdBoxMain">
      <el-table
        :data="gridData"
        style="width: 100%"
        border
        stripe
        height="calc(100% - 40px)"
        v-loading="girdloading"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="createTime" label="时间">
          <template slot-scope="scope">
            {{ $moment(scope.row.createTime*1000).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
          
        </el-table-column>
        <el-table-column label="id">
          <template slot-scope="scope">
            {{ scope.row.reportMap.id }}
          </template>
        </el-table-column>

        <el-table-column label="i1服务器">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.cma }}</span>
          </template>
        </el-table-column>
        <el-table-column label="心跳间隔" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.heartbeatDuration }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.battery }}</span>
           
          </template>
        </el-table-column>
        <el-table-column label="电池温度" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.batteryTmp }}</span>
           
          </template>
        </el-table-column>
        <el-table-column label="主板温度" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.mainBoardTmp }}</span>
           
          </template>
        </el-table-column>

        <el-table-column label="系统重启" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.rebootTimes }}</span>
           
          </template>
        </el-table-column>
        <el-table-column label="i1重启" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.i1RebootTimes }}</span>
           
          </template>
        </el-table-column>

        <el-table-column label="收" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.recv }}</span>
            
          </template>
        </el-table-column>
        <el-table-column label="传图" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.pic }}</span>
           
          </template>
        </el-table-column>
        <el-table-column label="拍" width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.photoTimes }}</span>
           
          </template>
        </el-table-column>
        <el-table-column label="成/败/传" width="70">
          <template slot-scope="scope">
            <span> {{ scope.row.reportMap.success }}/{{
                scope.row.reportMap.failure
              }}/{{ scope.row.reportMap.uploads }}</span>
           
          </template>
        </el-table-column>
        <el-table-column label="心跳累计" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.numberOfHb }}</span>
            
          </template>
        </el-table-column>
        <el-table-column label="网络异常" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.networkError }}</span>
            
          </template>
        </el-table-column>
        <el-table-column label="信号1" width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.signature1 }}</span>
           
          </template>
        </el-table-column>
        <el-table-column label="信号2" width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.reportMap.signature2 }}</span>
           
          </template>
        </el-table-column>
        <!-- <el-table-column label="其他">
          <template slot-scope="scope">
            {{  scope.row.raw_report.msgs.id }}
          </template>
        </el-table-column> -->

        <el-table-column prop="content" label="其他" class-name="msgClass">
          <template slot-scope="scope">
            <el-tooltip
              :open-delay="600"
              popper-class="msgTootip"
              placement="top"
              effect="light"
            >
              <div slot="content">
                <p v-html="cutout(scope.row)"></p>
              </div>
              <p>
                {{ scope.row.content }}
              </p>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageNation">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper,total"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { heartListApi } from "@/utils/api/index";
export default {
  props: {},
  data() {
    return {
      gridData: [],
      girdloading: true,
      isShow: false,
      page: 1, // 当前页数
      pageSize: 50, // 每页数量
      total: 0, //总条数
      termid: "",
    };
  },
  methods: {
    //tootip提示
    cutout(cellValue) {
      var aString = cellValue.content
        .replace(/\,/g, "</br>")
        .replace(/{|}/g, "")
        .replace(/"|"/g, "")
        .replace(/msg:/g, "");

      return aString;
    },
    getQueryList() {
      this.girdloading = true;
      this.gridData = []
      heartListApi({
        termId: this.termid,
        pageNum: this.page,
        pageSize: this.pageSize,
      })
        .then((res) => {
          console.log(res);
          this.gridData = res.data.list;
           this.total = Number(res.data.total);
          this.girdloading = false;
        })
        .catch((err) => {});
    },
    display(val) {
      this.isShow = true;
      this.termid = val.id;
      this.getQueryList();
    },

    hide() {
      this.isShow = false;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getQueryList();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getQueryList();
    },
  },
};
</script>
<style lang="less">
.cmdMsgDialog {
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
  .el-dialog {
    width: 95%;
    height: 83%;
    margin-top: 0px !important;

    .el-dialog__body {
      padding: 12px;
      width: calc(100% - 24px);
      height: calc(100% - 78px);

      .cmdBoxMain {
        width: 100%;
        height: 100%;

        .el-table {
          .el-table__cell {
            text-align: center;
          }
          .msgClass {
            .cell {
              p {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                cursor: default;
              }
            }
          }
        }
      }
      .pageNation {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
.msgTootip {
  color: #333;
  overflow: auto;
  height: 90%;
  p {
    font-size: 14px;
    line-height: 22px;
  }
}
</style>