增加录像列表

src/router/index.js

@@ -137,15 +137,28 @@ export const constantRoutes = [
   },
   {
     path: '',
+    redirect: '/device/channel/record',
+    hidden: true,
+    children: [
+      {
+        path: '/device/channel/record',
+        component: () => import('@/views/biz/dc/record'),
+        name: '通道录像',
+      }
+    ]
+  },
+  {
+    path: '',
     component: Layout,
     redirect: '/alarm',
     children: [
       {
         path: '/alarm',
         name: '事件中枢',
-        beforeEnter() {
-          window.open('https://smp.quanmate.com.cn/admin/yet_another_workflow/flows?page=1&per_page=24&status=active', '_blank');
-        },
+        component: () => import('@/views/event/index'),
+        // beforeEnter() {
+        //   window.open('https://smp.quanmate.com.cn/admin/yet_another_workflow/flows?page=1&per_page=24&status=active', '_blank');
+        // },
         meta: { title: '事件中枢', png: 'ico_alarm.png', affix: true }
       }
     ]

src/views/biz/dc/index.vue

@@ -1,88 +1,112 @@
 <template>
   <div class="app-container">
     <el-table v-loading="loading" :data="dcList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="通道ID" align="center" prop="channelId" />
-      <el-table-column label="通道名称" align="center" prop="channelName" />
-<!--      <el-table-column label="仓库名称" align="center" prop="houseName" />-->
-<!--      <el-table-column label="仓库编码" align="center" prop="houseCode" />-->
-<!--      <el-table-column label="主通道" align="center" key="updateBy">-->
-<!--        <template #default="scope">-->
-<!--          <el-switch-->
-<!--              v-model="scope.row.updateBy"-->
-<!--              active-value="0"-->
-<!--              inactive-value="1"-->
-<!--              @change="handleStatusChange(scope.row)"-->
-<!--          ></el-switch>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="设备名称" align="center" prop="deviceName" />-->
-<!--      <el-table-column label="设备编号" align="center" prop="deviceCode" />-->
-      <el-table-column label="厂商" align="center" prop="manufacturer" />
-      <el-table-column label="型号" align="center" prop="model" />
-      <el-table-column label="状态" align="center" prop="status" />
-<!--      <el-table-column label="创建人" align="center" prop="createBy" />-->
-<!--      <el-table-column label="创建时间" align="center" prop="createTime" width="180">-->
-<!--        <template #default="scope">-->
-<!--          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="更新人" align="center" prop="updateBy" />-->
-<!--      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">-->
-<!--        <template #default="scope">-->
-<!--          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="备注" align="center" prop="remark" />-->
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="通道ID" align="center" prop="channelId"/>
+      <el-table-column label="通道名称" align="center" prop="channelName"/>
+      <!--      <el-table-column label="仓库名称" align="center" prop="houseName" />-->
+      <!--      <el-table-column label="仓库编码" align="center" prop="houseCode" />-->
+      <!--      <el-table-column label="主通道" align="center" key="updateBy">-->
+      <!--        <template #default="scope">-->
+      <!--          <el-switch-->
+      <!--              v-model="scope.row.updateBy"-->
+      <!--              active-value="0"-->
+      <!--              inactive-value="1"-->
+      <!--              @change="handleStatusChange(scope.row)"-->
+      <!--          ></el-switch>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      <el-table-column label="设备名称" align="center" prop="deviceName" />-->
+      <!--      <el-table-column label="设备编号" align="center" prop="deviceCode" />-->
+      <el-table-column label="厂商" align="center" prop="manufacturer"/>
+      <el-table-column label="型号" align="center" prop="model"/>
+      <el-table-column label="状态" align="center" prop="status"/>
+      <!--      <el-table-column label="创建人" align="center" prop="createBy" />-->
+      <!--      <el-table-column label="创建时间" align="center" prop="createTime" width="180">-->
+      <!--        <template #default="scope">-->
+      <!--          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      <el-table-column label="更新人" align="center" prop="updateBy" />-->
+      <!--      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">-->
+      <!--        <template #default="scope">-->
+      <!--          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      <el-table-column label="备注" align="center" prop="remark" />-->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">播放视频</el-button>
+          <el-button link type="primary" icon="VideoPlay" @click="handleUpdate(scope.row)">播放视频</el-button>
+          <el-button link type="primary" icon="VideoCameraFilled" @click="handleReplay(scope.row)">查看录像</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
+        v-show="total>0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
     />
-
-      <div class="contrlset" v-show="open">
-        <div class="video-play">
-            <Player ref="playerVideo"/>
+    <div class="contrlset" v-show="open">
+      <div class="video-play">
+        <Player ref="playerVideo"/>
+      </div>
+      <div class="cloudset">
+        <div><span class="close" @click.stop="cancel()" style="top:10px"></span></div>
+        <div class="camername">{{ playerObj.deviceName }}摄像头</div>
+        <div class="cc">
+          <div class="cc_bg"></div>
+          <div class="cc_01" @click="ccMove(1,5)"></div>
+          <div class="cc_02" @click="ccMove(2,5)"></div>
+          <div class="cc_03" @click="ccMove(3,5)"></div>
+          <div class="cc_04" @click="ccMove(4,5)"></div>
         </div>
-                    <div class="cloudset">
-                      <div><span class="close" @click.stop="cancel()" style="top:10px"></span></div>
-                      <div class="camername">{{ playerObj.deviceName }}摄像头</div>
-                      <div class="cc">
-                        <div class="cc_bg"></div>
-                        <div class="cc_01" @click="ccMove(1,5)"></div>
-                        <div class="cc_02" @click="ccMove(2,5)"></div>
-                        <div class="cc_03" @click="ccMove(3,5)"></div>
-                        <div class="cc_04" @click="ccMove(4,5)"></div>
-                      </div>
-                      <div class="cc_params"><span class="span1">变倍</span><img src="/images/cc_sub.png" @click="ccParamsSet(1,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params1+'%'}"></span><span class="span32" :style="{'left':(cc_params1-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(1,1)"></div>
-                      <div class="cc_params"><span class="span1">变焦</span><img src="/images/cc_sub.png" @click="ccParamsSet(2,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params2+'%'}"></span><span class="span32" :style="{'left':(cc_params2-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(2,1)"></div>
-                      <div class="cc_params"><span class="span1">光圈</span><img src="/images/cc_sub.png" @click="ccParamsSet(3,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params3+'%'}"></span><span class="span32" :style="{'left':(cc_params3-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(3,1)"></div>
-                      <div class="audio">
-                        <img v-if="cc_params4>0" src="/images/cc_a.png" @click="cc_params4=0">
-                        <img v-else src="/images/cc_b.png" @click="cc_params4=50">
-                      </div>
-                      <div class="cc_params"><span class="span1">音量</span><img src="/images/cc_sub.png" @click="ccParamsSet(4,-10)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params4+'%'}"></span><span class="span32" :style="{'left':(cc_params4-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(4,10)"></div>
-                    </div>
+        <div class="cc_params"><span class="span1">变倍</span><img src="/images/cc_sub.png"
+                                                                   @click="ccParamsSet(1,-1)"><span
+            class="span2">|</span><span class="span3"><span class="span31"
+                                                            :style="{'width':cc_params1+'%'}"></span><span
+            class="span32" :style="{'left':(cc_params1-8)+'px'}"></span></span><span class="span4">|</span><img
+            src="/images/cc_add.png" @click="ccParamsSet(1,1)"></div>
+        <div class="cc_params"><span class="span1">变焦</span><img src="/images/cc_sub.png"
+                                                                   @click="ccParamsSet(2,-1)"><span
+            class="span2">|</span><span class="span3"><span class="span31"
+                                                            :style="{'width':cc_params2+'%'}"></span><span
+            class="span32" :style="{'left':(cc_params2-8)+'px'}"></span></span><span class="span4">|</span><img
+            src="/images/cc_add.png" @click="ccParamsSet(2,1)"></div>
+        <div class="cc_params"><span class="span1">光圈</span><img src="/images/cc_sub.png"
+                                                                   @click="ccParamsSet(3,-1)"><span
+            class="span2">|</span><span class="span3"><span class="span31"
+                                                            :style="{'width':cc_params3+'%'}"></span><span
+            class="span32" :style="{'left':(cc_params3-8)+'px'}"></span></span><span class="span4">|</span><img
+            src="/images/cc_add.png" @click="ccParamsSet(3,1)"></div>
+        <div class="audio">
+          <img v-if="cc_params4>0" src="/images/cc_a.png" @click="cc_params4=0">
+          <img v-else src="/images/cc_b.png" @click="cc_params4=50">
+        </div>
+        <div class="cc_params"><span class="span1">音量</span><img src="/images/cc_sub.png" @click="ccParamsSet(4,-10)"><span
+            class="span2">|</span><span class="span3"><span class="span31"
+                                                            :style="{'width':cc_params4+'%'}"></span><span
+            class="span32" :style="{'left':(cc_params4-8)+'px'}"></span></span><span class="span4">|</span><img
+            src="/images/cc_add.png" @click="ccParamsSet(4,10)"></div>
       </div>
+    </div>
+
+    <el-dialog :title="dialogTitle" v-model="houseConfigOpen" width="100%" append-to-body>
+      <iframe :src="dialogUrl" width="100%" height="480" frameborder="0"></iframe>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="Dc">
-import { listDc, getDc, delDc, addDc, updateDc } from "@/api/biz/dc";
-import { useRoute } from "vue-router";
+import {addDc, delDc, listDc, updateDc} from "@/api/biz/dc";
+import {useRoute} from "vue-router";
 import request from '@/utils/request';
 import Player from '../../components/player.vue'
+import axios from "axios";
 
-const { proxy } = getCurrentInstance();
+const {proxy} = getCurrentInstance();
 
 const playerVideo = ref(null);
 const playerObj = ref({});
@@ -96,11 +120,10 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
-const cc_params1=ref(0);
-const cc_params2=ref(0);
-const cc_params3=ref(0);
-const cc_params4=ref(50);
-
+const cc_params1 = ref(0);
+const cc_params2 = ref(0);
+const cc_params3 = ref(0);
+const cc_params4 = ref(50);
 const data = reactive({
   form: {},
   queryParams: {
@@ -120,11 +143,13 @@ const data = reactive({
     updateTime: null,
     remark: null
   },
-  rules: {
-  }
+  rules: {},
+  dialogUrl: "",
+  dialogTitle: "",
+  houseConfigOpen: false,
 });
+const {queryParams, form, rules, dialogUrl, dialogTitle, houseConfigOpen} = toRefs(data);
 
-const { queryParams, form, rules } = toRefs(data);
 /** 用户状态修改  */
 function handleStatusChange(row) {
   let text = row.status === "0" ? "启用" : "停用";
@@ -136,6 +161,7 @@ function handleStatusChange(row) {
     row.status = row.status === "0" ? "1" : "0";
   });
 };
+
 /** 查询视频通道列表 */
 function getList() {
   if (route.query.deviceCode) {
@@ -161,58 +187,59 @@ function cancel() {
 //1:向上 ptzcmd=A50F0108007D003A 2：向下 ptzcmd=A50F0104007D0036 3：向右 ptzcmd=A50F01017D000033 4：向左 ptzcmd=A50F01027D000034
 //Bearer monibuca
 //停止指令：ptzcmd=A50F0100000000B5
-const ccMove=(dir,v)=>{
+const ccMove = (dir, v) => {
   let cmd = "";
   //http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd=A50F0108007D003A
-  if(dir==1){
+  if (dir == 1) {
     cmd = "A50F0108007D003A"
-  }else if(dir==2){
+  } else if (dir == 2) {
     cmd = "A50F0104007D0036"
-  }else if(dir==3){
+  } else if (dir == 3) {
     cmd = "A50F01017D000033"
-  }else if(dir==4){
+  } else if (dir == 4) {
     cmd = "A50F01027D000034"
   }
   request({
-      url: 'http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
-      headers: {
-        authorization: 'Bearer monibuca',
-      },
-      method: 'get',
-      data: null
-    }).then(res=>{
-      if(res.code==0){
-        cmd='A50F0100000000B5';
-        request({
-            url: 'http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
-            headers: {
-              authorization: 'Bearer monibuca',
-            },
-            method: 'get',
-            data: null
-          }).then(res=>{});
-      }
+    url: 'http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd=' + cmd,
+    headers: {
+      authorization: 'Bearer monibuca',
+    },
+    method: 'get',
+    data: null
+  }).then(res => {
+    if (res.code == 0) {
+      cmd = 'A50F0100000000B5';
+      request({
+        url: 'http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd=' + cmd,
+        headers: {
+          authorization: 'Bearer monibuca',
+        },
+        method: 'get',
+        data: null
+      }).then(res => {
+      });
+    }
   });
 }
 
-const ccParamsSet=(type,value)=>{
-  if(type==1){
+const ccParamsSet = (type, value) => {
+  if (type == 1) {
     cc_params1.value += value;
-    if(cc_params1.value>100) cc_params1.value=100
-    if(cc_params1.value<0) cc_params1.value=0
-  }  else if(type==2) {
+    if (cc_params1.value > 100) cc_params1.value = 100
+    if (cc_params1.value < 0) cc_params1.value = 0
+  } else if (type == 2) {
     cc_params2.value += value;
-    if(cc_params2.value>100) cc_params2.value=100
-    if(cc_params2.value<0) cc_params2.value=0
-  }  else if(type==3) {
+    if (cc_params2.value > 100) cc_params2.value = 100
+    if (cc_params2.value < 0) cc_params2.value = 0
+  } else if (type == 3) {
     cc_params3.value += value;
-    if(cc_params3.value>100) cc_params3.value=100
-    if(cc_params3.value<0) cc_params3.value=0
-  }  else if(type==4) {
+    if (cc_params3.value > 100) cc_params3.value = 100
+    if (cc_params3.value < 0) cc_params3.value = 0
+  } else if (type == 4) {
     //音量
     cc_params4.value += value;
-    if(cc_params4.value>100) cc_params4.value=100
-    if(cc_params4.value<0) cc_params4.value=0
+    if (cc_params4.value > 100) cc_params4.value = 100
+    if (cc_params4.value < 0) cc_params4.value = 0
     playerVideo.value.volumeChange(cc_params4.value);
   }
 }
@@ -266,19 +293,27 @@ function handleAdd() {
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
+
   playerObj.value = row;
   open.value=true
   const url = `http://47.108.159.150:8080/flv/${row.deviceCode}/${row.channelId}`;
   playerVideo.value.play(url);
-  // reset();
-  // const _channelId = row.channelId || ids.value
-  // getDc(_channelId).then(response => {
-  //   form.value = response.data;
-  //   open.value = true;
-  //   title.value = "修改视频通道";
-  // });
+  reset();
+  const _channelId = row.channelId || ids.value
+  getDc(_channelId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改视频通道";
+  });
 }
 
+function handleReplay(row) {
+  dialogUrl.value = "/device/channel/record?device=" + row.deviceCode + "&channel=" + row.channelId;
+  dialogTitle.value = row.channelName+"通道录像";
+  houseConfigOpen.value = true;
+}
+
+
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["dcRef"].validate(valid => {
@@ -303,12 +338,13 @@ function submitForm() {
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _channelIds = row.channelId || ids.value;
-  proxy.$modal.confirm('是否确认删除视频通道编号为"' + _channelIds + '"的数据项？').then(function() {
+  proxy.$modal.confirm('是否确认删除视频通道编号为"' + _channelIds + '"的数据项？').then(function () {
     return delDc(_channelIds);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+  }).catch(() => {
+  });
 }
 
 /** 导出按钮操作 */
@@ -321,186 +357,208 @@ function handleExport() {
 getList();
 </script>
 <style>
-.contrlset{
-                      position: absolute;
-                      width: 1088px !important;
-                      height: 560px !important;
-                      z-index: 1000;
-                      left: 50%;
-                      top: 50%;
-                      margin-top: -280px !important;
-                      margin-left: -544px !important;
-                      border-radius: 10px;
-                      border: 1px solid #4f555c;
-                      .video-title{
-                        border-radius: 10px 10px 0 0 !important;
-                      }
-                      .cloudset{
-                        width: 258px !important;
-                        margin-left: 4px;
-                        background-color: #303740;
-                        border: 1px solid #4f555c;
-                        height: calc(100% - 0px);
-                        float: right;
-                        border-radius: 0 0 10px 0;
-                        .close{
-                            position: absolute;
-                            right: 15px;
-                            top: 20px;
-                            background-image: url(/images/close.png);
-                            cursor: pointer;
-                            width: 16px;
-                            height: 16px;
-                            background-size: 55%;
-                            background-repeat: no-repeat;
-                            background-position-x: center;
-                            background-position-y: center;
-                            border: 1px solid #ccc;
-                        }
-                        .camername{
-                          color: #dadada;
-                          font-weight: bold;
-                          font-size: 20px;
-                          width: 100%;
-                          text-align: center;
-                          height: 80px;
-                          line-height: 80px;
-                        }
-                        .cc{
-                          position: relative;
-                          height: 200px;
-                          width: 100%;
-                          .cc_bg{
-                            background-image: url('/images/cc_bg.png');
-                            width: 150px;
-                            height: 150px;
-                            position: absolute;
-                            top: 50%;
-                            left: 50%;
-                            margin-left: -75px;
-                            margin-top: -75px;
-                            background-size: contain;                            
-                          }
-                          .cc_01{
-                            background-image: url('/images/cc_01.png');
-                            background-size: contain;
-                            width: 20px;
-                            height: 20px;
-                            position: absolute;
-                            top:50px;
-                            left:50%;
-                            margin-left: -10px;
-                            cursor: pointer;
-                          }
-                          .cc_02{
-                            background-image: url('/images/cc_02.png');
-                            background-size: contain;
-                            width: 20px;
-                            height: 20px;
-                            position: absolute;
-                            bottom:50px;
-                            left:50%;
-                            margin-left: -10px;
-                            cursor: pointer;
-                          }
-                          .cc_03{
-                            background-image: url('/images/cc_03.png');
-                            background-size: contain;
-                            width: 20px;
-                            height: 20px;
-                            position: absolute;
-                            top:50%;
-                            right:73px;
-                            margin-top: -10px;
-                            margin-left: -10px;
-                            cursor: pointer;
-                          }
-                          .cc_04{
-                            background-image: url('/images/cc_04.png');
-                            background-size: contain;
-                            width: 20px;
-                            height: 20px;
-                            position: absolute;
-                            top:50%;
-                            left:82px;
-                            margin-top: -10px;
-                            margin-left: -10px;
-                            cursor: pointer;
-                          }
-                        }
-                        .cc_params{
-                          color: #dadada;
-                          height: 40px;
-                          line-height: 40px;
-                          font-size: 12px;
-                          width: 100%;
-                          padding: 0 20px;
-                          display: flex;
-                          img{
-                            height: 32px;
-                            width: 32px;
-                            cursor: pointer;
-                            margin-top: 4px;
-                          }
-                          .span1{
-                            width:36px;
-                          }
-                          .span2{
-                            margin-left:5px;
-                            font-size: 10px;
-                          }
-                          .span3{
-                            font-size: 10px;
-                            display: inline-block;
-                            width: 100px;
-                            height: 2px;
-                            background: #ffffff33;
-                            margin: 20px 0;
-                            position: relative;
-                            .span31{
-                              position: absolute;
-                              height: 2px;
-                              background-color: #fff;
-                              left:0;
-                              top:0;
-                              width:0%;
-                            }
-                            .span32{
-                              background-image: url('/images/cc_p.png');
-                              background-size: contain;
-                              width: 20px;
-                              height: 20px;
-                              position: absolute;
-                              top:-9px;
-                              left:-8px;
-                            }
-                          }
-                          .span4{
-                            font-size: 10px;
-                            opacity: 0.2;
-                            margin-right:5px;
-                          }
-                        }
-                        .audio{
-                          position: relative;
-                          height: 50px;
-                          margin-top: 30px;
-                          width: 100%;
-                          img{
-                            width:48px;
-                            height: 48px;
-                            position: absolute;
-                            top: 50%;
-                            left: 50%;
-                            margin-left: -24px;
-                            margin-top: -24px;
-                          }
-                        }
-                      }
-                      .video-play{
-                        width:824px !important;
-                        height: calc(100% - 0px);
-                        float: left;
-                      }
-                    }
+.contrlset {
+  position: absolute;
+  width: 1088px !important;
+  height: 560px !important;
+  z-index: 1000;
+  left: 50%;
+  top: 50%;
+  margin-top: -280px !important;
+  margin-left: -544px !important;
+  border-radius: 10px;
+  border: 1px solid #4f555c;
+
+.video-title {
+  border-radius: 10px 10px 0 0 !important;
+}
+
+.cloudset {
+  width: 258px !important;
+  margin-left: 4px;
+  background-color: #303740;
+  border: 1px solid #4f555c;
+  height: calc(100% - 0px);
+  float: right;
+  border-radius: 0 0 10px 0;
+
+.close {
+  position: absolute;
+  right: 15px;
+  top: 20px;
+  background-image: url(/images/close.png);
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  background-size: 55%;
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: center;
+  border: 1px solid #ccc;
+}
+
+.camername {
+  color: #dadada;
+  font-weight: bold;
+  font-size: 20px;
+  width: 100%;
+  text-align: center;
+  height: 80px;
+  line-height: 80px;
+}
+
+.cc {
+  position: relative;
+  height: 200px;
+  width: 100%;
+
+.cc_bg {
+  background-image: url('/images/cc_bg.png');
+  width: 150px;
+  height: 150px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -75px;
+  margin-top: -75px;
+  background-size: contain;
+}
+
+.cc_01 {
+  background-image: url('/images/cc_01.png');
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 50px;
+  left: 50%;
+  margin-left: -10px;
+  cursor: pointer;
+}
+
+.cc_02 {
+  background-image: url('/images/cc_02.png');
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 50px;
+  left: 50%;
+  margin-left: -10px;
+  cursor: pointer;
+}
+
+.cc_03 {
+  background-image: url('/images/cc_03.png');
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 50%;
+  right: 73px;
+  margin-top: -10px;
+  margin-left: -10px;
+  cursor: pointer;
+}
+
+.cc_04 {
+  background-image: url('/images/cc_04.png');
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 50%;
+  left: 82px;
+  margin-top: -10px;
+  margin-left: -10px;
+  cursor: pointer;
+}
+
+}
+.cc_params {
+  color: #dadada;
+  height: 40px;
+  line-height: 40px;
+  font-size: 12px;
+  width: 100%;
+  padding: 0 20px;
+  display: flex;
+
+img {
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+  margin-top: 4px;
+}
+
+.span1 {
+  width: 36px;
+}
+
+.span2 {
+  margin-left: 5px;
+  font-size: 10px;
+}
+
+.span3 {
+  font-size: 10px;
+  display: inline-block;
+  width: 100px;
+  height: 2px;
+  background: #ffffff33;
+  margin: 20px 0;
+  position: relative;
+
+.span31 {
+  position: absolute;
+  height: 2px;
+  background-color: #fff;
+  left: 0;
+  top: 0;
+  width: 0%;
+}
+
+.span32 {
+  background-image: url('/images/cc_p.png');
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: -9px;
+  left: -8px;
+}
+
+}
+.span4 {
+  font-size: 10px;
+  opacity: 0.2;
+  margin-right: 5px;
+}
+
+}
+.audio {
+  position: relative;
+  height: 50px;
+  margin-top: 30px;
+  width: 100%;
+
+img {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -24px;
+  margin-top: -24px;
+}
+
+}
+}
+.video-play {
+  width: 824px !important;
+  height: calc(100% - 0px);
+  float: left;
+}
+
+}
 </style>

src/views/biz/dc/record.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="app-container">
+    <el-table v-loading="loading" :data="drList">
+<!--      <el-table-column type="selection" width="55" align="center"/>-->
+      <el-table-column label="通道名称" align="center" prop="name"/>
+      <el-table-column label="录像开始时间" align="center" prop="startTime"/>
+      <el-table-column label="录像结束时间" align="center" prop="endTime"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="VideoPlay" @click="handleVideo(scope.row)">播放录像</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup name="Dc">
+import {useRoute} from "vue-router";
+import axios from "axios";
+
+const {proxy} = getCurrentInstance();
+
+const route = useRoute();
+const drList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    channelName: null,
+    houseName: null,
+    houseCode: null,
+    deviceName: null,
+    deviceCode: null,
+    manufacturer: null,
+    model: null,
+    status: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    remark: null
+  },
+  rules: {}
+});
+
+/** 查询视频通道列表 */
+function getList() {
+  const device = route.query.device;
+  const channel = route.query.channel;
+  const start = new Date().getTime() - 1000 * 60 * 60 * 24;
+  axios.get(`http://47.108.159.150:8080/gb28181/api/records/${device}/${channel}?start=${start}`).then(response => {
+    drList.value=response.data.data;
+  })
+  loading.value=false;
+}
+
+function handleVideo(row) {
+  const device = route.query.device;
+  const channel = route.query.channel;
+  const gb = "gb_" + new Date().getTime();
+  const start = new Date(row.startTime).getTime()/1000;
+  const end = new Date(row.endTime).getTime();
+  const url = `http://47.108.159.150:8080/flv/${gb}/${device}/${channel}?start=${start}&end=${end}`;
+  console.log(url);
+}
+
+getList();
+</script>

src/views/event/index.vue

@@ -0,0 +1,49 @@
+<template>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import axios from 'axios'
+import { useRouter } from 'vue-router'
+
+onMounted(() => {
+  const targetUrl = "https://smp.quanmate.com.cn/admin/yet_another_workflow/flows?page=1&per_page=24&status=active";
+  // 使用window.open打开链接
+  window.open(targetUrl, '_blank')
+  // 页面路由返回到/index
+  const router = useRouter()
+  router.push('/index')
+  // handleUserLogin()
+})
+
+const handleUserLogin = async () => {
+  try {
+    // 调用POST接口传user_id=86
+    const response = await axios.post('https://smp.quanmate.com.cn/api/v4/user_login_token', {
+      user_id: 86
+    })
+
+    // 检查响应是否包含user_login_token
+    if (response.data && response.data.user_login_token) {
+      const userLoginToken = response.data.user_login_token
+
+      // 组装目标URL (这里假设url是固定的，如果需要从某处获取，请相应调整)
+      const targetUrl = `https://smp.quanmate.com.cn?_user_login_token=${userLoginToken}`
+      // 使用window.open打开链接
+      window.open(targetUrl, '_blank')
+    }
+   const targetUrl = "https://smp.quanmate.com.cn/admin/yet_another_workflow/flows?page=1&per_page=24&status=active";
+    // 使用window.open打开链接
+    window.open(targetUrl, '_blank')
+    // 页面路由返回到/index
+    const router = useRouter()
+    await router.push('/index')
+  } catch (error) {
+    console.error('Error during user login process:', error)
+
+    // 即使出错也返回首页
+    const router = useRouter()
+    router.push('/index')
+  }
+}
+</script>