模拟流媒体页面开发

src/api/analogData.js

@@ -41,3 +41,11 @@ export function disarmingAlarm(data) {
     data,
   });
 }
+//解除报警
+export function getStream(data) {
+  return request({
+    method: "get",
+    url: "/service/baseCameraManagement/getCameraManagementList",
+    data,
+  });
+}

src/views/streamRadio/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="dashboard-container">
+    <el-table :data="tableData">
+      <el-table-column prop="installMile" label="里程" min-width="150" show-overflow-tooltip="false" fixed="left">
+      </el-table-column>
+      <el-table-column prop="cameraCode" label="相机名称" min-width="280" show-overflow-tooltip="false">
+      </el-table-column>
+      <el-table-column prop="streamPath" label="StreamPath" min-width="150" show-overflow-tooltip="false">
+      </el-table-column>
+      <el-table-column prop="type" label="类型" width="150">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始时间" width="150"></el-table-column>
+
+      <el-table-column label="音频">
+        <el-table-column label="格式" width="120">
+          <template slot-scope="scope">
+            {{ scope.row.audioTracks.name }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="province" label="采样率" width="120">
+          <template slot-scope="scope">
+            {{ scope.row.audioTracks.sampleRate }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="city" label="声道" width="120">
+          <template slot-scope="scope">
+            {{ scope.row.audioTracks.channels }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="码率">
+          <template slot-scope="scope">
+            {{ scope.row.audioTracks.bps }}
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="视频">
+        <el-table-column prop="name" label="格式" width="120">
+          <template slot-scope="scope">
+            {{ scope.row.videoTracks.name }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="province" label="分辨率" width="120">
+          <template slot-scope="scope">
+            {{ scope.row.videoTracks.resolution }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="city" label="GOP" width="120">
+          <template slot-scope="scope">
+            {{ scope.row.videoTracks.gop }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="码率">
+          <template slot-scope="scope">
+            {{ scope.row.videoTracks.bps }}
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column prop="subscribers" label="订阅者" width="120" fixed="right">
+      </el-table-column>
+    </el-table>
+  </div>
+</div></template>
+<script>
+import axios from 'axios'
+import { getStream } from '@/api/analogData'
+export default {
+  name: 'streamRadio',
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    hoursUntil(targetTime) {
+      // 创建目标时间的Date对象
+      var target = new Date(targetTime);
+      // 创建当前时间的Date对象
+      var now = new Date();
+      // 计算时间差（毫秒）
+      var difference = target - now;
+      // 将时间差转换为小时
+      var hours = difference / (1000 * 60 * 60);
+      // 返回结果
+      return Math.round(hours * -1) + '小时前';
+    },
+    getData() {
+      getStream().then(res=>{
+          this.tableData=res.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+
+.dashboard-container {
+  .search-content {
+    width: 100%;
+    height: 74px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+
+    .el-input {
+      margin: 0 10px;
+    }
+
+    .el-select {
+      margin: 0 10px;
+    }
+
+    .search-btn {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      margin-left: 10px;
+
+      div {
+        // margin: 0 6px;
+        display: inline-block;
+        width: 80px;
+        height: 40px;
+        border-radius: 2px;
+        font-size: 14px;
+        line-height: 40px;
+        text-align: center;
+      }
+
+      div:hover {
+        cursor: pointer;
+      }
+
+      .search {
+        margin-right: 10px;
+        background-color: #2766DD;
+        color: #F7F8FB;
+      }
+
+      .search:hover {
+        background-color: #4D85F4;
+      }
+
+      .reset {
+        color: #333334;
+        border: 1px solid #D7D7D7;
+      }
+
+      .reset:hover {
+        color: #1F9FFF;
+        border: 1px solid #1F9FFF;
+      }
+    }
+  }
+
+  .table-content {
+    margin-top: 15px;
+    width: 100%;
+    background-color: #fff;
+    padding: 0 20px 20px;
+
+    .btn {
+      margin: 15px 20px 15px 0;
+      cursor: pointer;
+      float: left;
+      text-align: center;
+      width: 98px;
+      height: 34px;
+      border-radius: 2px;
+      border: 1px solid #ABC7FD;
+      line-height: 34px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #2250C8;
+      background-color: #E7EEFF;
+    }
+
+    .btn:hover {
+      color: #FFFFFF;
+      background-color: #2250C8;
+      border: 1px solid #2250C8;
+    }
+
+    .btn:active {
+      color: #FFFFFF;
+      background-color: #194DA4;
+      border: 1px solid #194DA4;
+    }
+
+    .startUsing {
+      width: 54px;
+      height: 24px;
+      margin: 14.5px auto 0;
+      line-height: 24px;
+      text-align: center;
+      font-size: 12px;
+      color: #00974D;
+      border-radius: 4px;
+      background-color: #E7FAF0;
+      border: 1px solid #BEFDDD;
+    }
+
+    .Deactivate {
+      width: 54px;
+      height: 24px;
+      margin: 14.5px auto 0;
+      line-height: 24px;
+      text-align: center;
+      font-size: 12px;
+      color: #FF9933;
+      border-radius: 4px;
+      background-color: #FFF3E8;
+      border: 1px solid #FDE6CF;
+    }
+
+    .operateBtn {
+      display: flex;
+      justify-content: center;
+      color: #2866DD;
+
+      div {
+        font-size: 14px;
+        margin: 0 5px;
+        cursor: pointer;
+      }
+    }
+
+    .pagination {
+      margin: 10px 0;
+      width: 100%;
+      height: 20px;
+
+      .el-pagination {
+        float: right;
+        margin: 10px 0;
+      }
+    }
+  }
+
+}
+</style>