完成断流监控前端显示

zhangzengfei

2022-12-02 bbc45d35dbf86e375fa8d09879f887673ec0fe19

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

@@ -36,7 +36,7 @@
          >路
        </div>
      </div>
      <div class="detailItem" @click="dialogVisible = true">
      <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
@@ -45,46 +45,18 @@
      </div>
    </div>
    <el-dialog
      title="异常数据查询"
      title="取流异常数据"
      destroy-on-close
      :visible.sync="dialogVisible"
      width="40%"
      width="70%"
      :before-close="handleClose"
    >
      <!-- <div style="width: 600px">
        v-if="dialogVisible"
      </div> -->
      <el-row :gutter="50">
        <el-col :span="15">
          <el-form label-width="140px">
            <el-form-item label="摄像机名称/通道号">
              <el-input placeholder="请输出摄像机名称/通道号" v-model="id"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="9"><el-button type="primary">查询</el-button></el-col>
      </el-row>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="device" label="设备" > </el-table-column>
        <el-table-column prop="name" label="名称" > </el-table-column>
        <el-table-column prop="rtsp" label="通道号"> </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @current-change="refrash"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20, 25]"
          :total="total"
          background
        ></el-pagination>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
      
    </el-dialog>
  </div>
</template>
@@ -104,30 +76,28 @@
      id: "",
      dialogVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    }
  },
  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("->")
          this.tableData.push({
            "device":cameraInfo[0],
            "name":cameraInfo[1],
            "rtsp":cameraInfo[2]
            })            
        });

        this.dialogVisible = true
      }
    },
    refrash(page) {
      this.page = page
      this.lookUp()
@@ -236,6 +206,10 @@
        border-right: 1px solid #e9ebee;
      }
    }

    .click{
      cursor: pointer;
    }
  }
}
.el-pagination ::v-deep {