完善断流监控,集群和设备详情的查询

zhangzengfei

2022-12-07 0dbf19e9f92f5cb1d5ca9a06fd268d3b16e466e3

 src/views/hashrate/HashManage/components/HashCard.vue

@@ -1,9 +1,9 @@
<template>
  <div class="HashCard">
    <div class="hashrate">
      <img v-if="type == 0" src="/images/hashrate/轮询算力.png" alt="" />
      <img v-if="type == 1" src="/images/hashrate/实时算力.png" alt="" />
      <img v-if="type == 2" src="/images/hashrate/数据栈算力.png" alt="" />
      <img v-if="type == 0" src="/images/hashrate/polling.png" alt="" />
      <img v-if="type == 1" src="/images/hashrate/realTime2.png" alt="" />
      <img v-if="type == 2" src="/images/hashrate/static.png" alt="" />
      <div class="hashrateContent">
        <div class="label" v-if="type == 0">轮询算力</div>
        <div class="label" v-if="type == 1">实时算力</div>
@@ -16,9 +16,7 @@
    </div>
    <div class="detail">
      <div class="detailItem">
        <div class="label">
          <span class="iconfont">&#xe62f;</span>打开分析开关
        </div>
        <div class="label"><span class="iconfont">&#xe62f;</span>打开分析开关</div>
        <div class="data">
          <span class="number">{{ hashrate.valid }}</span
          >路
@@ -38,16 +36,28 @@
          >路
        </div>
      </div>
      <div class="detailItem">
        <div class="label" title="因未知原因未处理">
          <span class="iconfont">&#xe631;</span>因未知原因未处理
        </div>
      <div class="detailItem click" @click="showDetail">
        <div class="label" title="因未知原因未处理"><span class="iconfont">&#xe631;</span>因未知原因未处理</div>
        <div class="data">
          <span class="number">{{ hashrate.noDeal }}</span
          >路
        </div>
      </div>
    </div>
    <el-dialog
      title="取流异常数据"
      destroy-on-close
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="device" label="设备ID" > </el-table-column>
        <el-table-column prop="name" label="通道名称" > </el-table-column>
        <el-table-column prop="rtsp" label="通道号"> </el-table-column>
      </el-table>
      
    </el-dialog>
  </div>
</template>

@@ -55,12 +65,62 @@
export default {
  props: {
    type: {},
    hashrate: {},
    hashrate: {}
  },
  data() {
    return {};
    return {
      page: 1,
      size: 10, //分页相关
      total: 0, //总数,

      id: "",
      dialogVisible: false,
      tableData: [
      ]
    }
  },
};
  methods: {
    showDetail() {
      console.log(this.hashrate)

      // 有断流摄像机的信息才显示, 其他原因不展示明细
      if (this.hashrate.hasOwnProperty("duanliu") && this.hashrate.duanliu.length > 0) {
        this.tableData = []
        this.hashrate.duanliu.forEach(element => {
          let cameraInfo = element.split("->")
          if (cameraInfo.length != 4) {
            return
          }
          
          this.tableData.push({
            "device":cameraInfo[0],
            "name":cameraInfo[2],
            "rtsp":cameraInfo[3]
            })            
        });

        this.dialogVisible = true
      }
    },
    refrash(page) {
      this.page = page
      this.lookUp()
    },
    handleSizeChange(size) {
      this.size = size
      this.lookUp()
    },

    handleClose(done) {
      // this.dialogVisible = false
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      done()
      // })
      // .catch((_) => {})
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -150,6 +210,19 @@
        border-right: 1px solid #e9ebee;
      }
    }

    .click{
      cursor: pointer;
    }
  }
}
</style>
.el-pagination ::v-deep {
  margin-top: 30px;

  text-align: center;
  height: 24px;
  .el-pagination__sizes {
    margin-right: 0;
  }
}
</style>