Merge branch 'master' into 重构/1078

# Conflicts: # src/main/java/com/genersoft/iot/vmp/service/impl/MediaServiceImpl.java # 数据库/2.7.3/初始化-mysql-2.7.3.sql # 数据库/2.7.3/初始化-postgresql-kingbase-2.7.3.sql
2024-12-19 23:19:09 +08:00
parent 4e48eb6cab 4757cbd34e
commit 51f126e571
60 changed files with 1899 additions and 208 deletions
--- a/web_src/src/components/GBRecordDetail.vue
+++ b/web_src/src/components/GBRecordDetail.vue
@@ -58,8 +58,8 @@
            </el-button-group>

            <el-button-group >
-              <el-button size="mini" class="iconfont icon-zanting" title="开始" @click="gbPause()"></el-button>
-              <el-button size="mini" class="iconfont icon-kaishi" title="暂停" @click="gbPlay()"></el-button>
+              <el-button size="mini" class="iconfont icon-zanting" title="暂停" @click="gbPause()"></el-button>
+              <el-button size="mini" class="iconfont icon-kaishi" title="开始" @click="gbPlay()"></el-button>
              <el-dropdown size="mini" title="播放倍速"  @command="gbScale">
                <el-button size="mini">
                  倍速 <i class="el-icon-arrow-down el-icon--right"></i>
--- a/web_src/src/components/RecordPLan.vue
+++ b/web_src/src/components/RecordPLan.vue
@@ -0,0 +1,236 @@
+<template>
+  <div id="recordPLan" style="width: 100%">
+    <div class="page-header">
+        <div class="page-title">
+          <div >录像计划</div>
+        </div>
+        <div class="page-header-btn">
+          <div style="display: inline;">
+            搜索:
+            <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
+                      prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
+            <el-button size="mini" type="primary" @click="add()">
+              添加
+            </el-button>
+            <el-button icon="el-icon-refresh-right" circle size="mini" @click="getRecordPlanList()"></el-button>
+          </div>
+        </div>
+      </div>
+      <el-table size="medium" ref="recordPlanListTable" :data="recordPlanList" :height="winHeight" style="width: 100%"
+                header-row-class-name="table-header" >
+        <el-table-column type="selection" width="55" >
+        </el-table-column>
+        <el-table-column prop="name" label="名称" >
+        </el-table-column>
+        <el-table-column prop="channelCount" label="关联通道" >
+        </el-table-column>
+        <el-table-column prop="updateTime" label="更新时间">
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间">
+        </el-table-column>
+        <el-table-column label="操作" width="300" fixed="right">
+          <template v-slot:default="scope">
+            <el-button size="medium" icon="el-icon-link" type="text" @click="link(scope.row)">关联通道</el-button>
+            <el-button size="medium" icon="el-icon-edit" type="text" @click="edit(scope.row)">编辑</el-button>
+            <el-button size="medium" icon="el-icon-delete" style="color: #f56c6c" type="text" @click="deletePlan(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        style="text-align: right"
+        @size-change="handleSizeChange"
+        @current-change="currentChange"
+        :current-page="currentPage"
+        :page-size="count"
+        :page-sizes="[15, 25, 35, 50]"
+        layout="total, sizes, prev, pager, next"
+        :total="total">
+      </el-pagination>
+    <editRecordPlan ref="editRecordPlan"></editRecordPlan>
+    <LinkChannelRecord ref="linkChannelRecord"></LinkChannelRecord>
+  </div>
+</template>
+
+<script>
+import uiHeader from '../layout/UiHeader.vue'
+import EditRecordPlan from "./dialog/editRecordPlan.vue";
+import LinkChannelRecord from "./dialog/linkChannelRecord.vue";
+
+export default {
+  name: 'recordPLan',
+  components: {
+    EditRecordPlan,
+    LinkChannelRecord,
+    uiHeader,
+  },
+  data() {
+    return {
+      recordPlanList: [],
+      searchSrt: "",
+      winHeight: window.innerHeight - 180,
+      currentPage: 1,
+      count: 15,
+      total: 0,
+      loading: false,
+    };
+  },
+
+  created() {
+    this.initData();
+  },
+  destroyed() {
+  },
+  methods: {
+    initData: function () {
+      this.getRecordPlanList();
+    },
+    currentChange: function (val) {
+      this.currentPage = val;
+      this.initData();
+    },
+    handleSizeChange: function (val) {
+      this.count = val;
+      this.getRecordPlanList();
+    },
+    getRecordPlanList: function () {
+      this.$axios({
+        method: 'get',
+        url: `/api/record/plan/query`,
+        params: {
+          page: this.currentPage,
+          count: this.count,
+          query: this.searchSrt,
+        }
+      }).then((res) => {
+        if (res.data.code === 0) {
+          this.total = res.data.data.total;
+          this.recordPlanList = res.data.data.list;
+          // 防止出现表格错位
+          this.$nextTick(() => {
+            this.$refs.recordPlanListTable.doLayout();
+          })
+        }
+
+      }).catch((error) => {
+        console.log(error);
+      });
+    },
+    getSnap: function (row) {
+      let baseUrl = window.baseUrl ? window.baseUrl : "";
+      return ((process.env.NODE_ENV === 'development') ? process.env.BASE_API : baseUrl) + '/api/device/query/snap/' + this.deviceId + '/' + row.deviceId;
+    },
+    search: function () {
+      this.currentPage = 1;
+      this.total = 0;
+      this.initData();
+    },
+    refresh: function () {
+      this.initData();
+    },
+    add: function () {
+      this.$refs.editRecordPlan.openDialog(null, ()=>{
+        this.initData()
+      })
+    },
+    edit: function (plan) {
+      this.$refs.editRecordPlan.openDialog(plan, ()=>{
+        this.initData()
+      })
+    },
+    link: function (plan) {
+      this.$refs.linkChannelRecord.openDialog(plan.id, ()=>{
+        this.initData()
+      })
+    },
+    deletePlan: function (plan) {
+      this.$confirm('确定删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'delete',
+          url: "/api/record/plan/delete",
+          params: {
+            planId: plan.id,
+          }
+        }).then((res) => {
+          if (res.data.code === 0) {
+            this.$message({
+              showClose: true,
+              message: '删除成功',
+              type: 'success',
+            });
+            this.initData();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: 'error'
+            });
+          }
+        }).catch((error) => {
+          console.error(error)
+        });
+      }).catch(() => {
+
+      });
+
+    },
+  }
+};
+</script>
+
+<style>
+.videoList {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+
+.video-item {
+  position: relative;
+  width: 15rem;
+  height: 10rem;
+  margin-right: 1rem;
+  background-color: #000000;
+}
+
+.video-item-img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.video-item-img:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../assets/loading.png");
+  background-size: cover;
+  background-color: #000000;
+}
+
+.video-item-title {
+  position: absolute;
+  bottom: 0;
+  color: #000000;
+  background-color: #ffffff;
+  line-height: 1.5rem;
+  padding: 0.3rem;
+  width: 14.4rem;
+}
+</style>
--- a/web_src/src/components/common/GroupTree.vue
+++ b/web_src/src/components/common/GroupTree.vue
@@ -14,6 +14,7 @@
    </div>
    <div v-if="showHeader" style="height: 2rem; background-color: #FFFFFF"></div>
    <div>
+      <el-alert v-if="showAlert && edit" title="操作提示" description="你可以使用右键菜单管理节点" type="info" style="text-align: left"></el-alert>
      <vue-easy-tree
        class="flow-tree"
        ref="veTree"
@@ -65,6 +66,7 @@ export default {
        id: "treeId"
      },
      showCode: false,
+      showAlert: true,
      searchSrt: "",
      chooseId: "",
      treeData: [],
@@ -101,6 +103,9 @@ export default {
          }
        }).then((res) => {
          if (res.data.code === 0) {
+            if (res.data.data.length > 0) {
+              this.showAlert = false
+            }
            resolve(res.data.data);
          }

--- a/web_src/src/components/common/RegionTree.vue
+++ b/web_src/src/components/common/RegionTree.vue
@@ -12,7 +12,8 @@
      </div>
    </div>
    <div v-if="showHeader" style="height: 2rem; background-color: #FFFFFF" ></div>
-    <div >
+    <div>
+      <el-alert v-if="showAlert && edit" title="操作提示" description="你可以使用右键菜单管理节点" type="info" style="text-align: left"></el-alert>
      <vue-easy-tree
        class="flow-tree"
        ref="veTree"
@@ -63,6 +64,7 @@ export default {
        label: "name",
      },
      showCode: false,
+      showAlert: true,
      searchSrt: "",
      chooseId: "",
      treeData: [],
@@ -99,6 +101,9 @@ export default {
          }
        }).then((res) => {
          if (res.data.code === 0) {
+            if (res.data.data.length > 0) {
+              this.showAlert = false
+            }
            resolve(res.data.data);
          }

--- a/web_src/src/components/dialog/GbChannelSelect.vue
+++ b/web_src/src/components/dialog/GbChannelSelect.vue
@@ -64,16 +64,22 @@
          </template>
        </el-table-column>
      </el-table>
-      <el-pagination
-        style="text-align: right"
-        @size-change="handleSizeChange"
-        @current-change="currentChange"
-        :current-page="currentPage"
-        :page-size="count"
-        :page-sizes="[10, 25, 35, 50, 200, 1000, 50000]"
-        layout="total, sizes, prev, pager, next"
-        :total="total">
-      </el-pagination>
+      <div style="display: grid; grid-template-columns: 1fr 1fr">
+        <div style="text-align: left; line-height: 32px">
+          <i class="el-icon-info"></i>未找到通道，可在国标设备/通道中选择编辑按钮， 选择{{dataType === 'civilCode'?'行政区划':'父节点编码'}}
+        </div>
+        <el-pagination
+          style="text-align: right"
+          @size-change="handleSizeChange"
+          @current-change="currentChange"
+          :current-page="currentPage"
+          :page-size="count"
+          :page-sizes="[10, 25, 35, 50, 200, 1000, 50000]"
+          layout="total, sizes, prev, pager, next"
+          :total="total">
+        </el-pagination>
+      </div>
+
    </el-dialog>
  </div>
 </template>
--- a/web_src/src/components/dialog/editRecordPlan.vue
+++ b/web_src/src/components/dialog/editRecordPlan.vue
@@ -0,0 +1,228 @@
+<template>
+  <div id="editRecordPlan" v-loading="loading" style="text-align: left;">
+    <el-dialog
+      title="录制计划"
+      width="700px"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div id="shared" style="margin-right: 20px;">
+        <el-form >
+          <el-form-item label="名称">
+            <el-input type="text" v-model="planName"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <ByteWeektimePicker v-model="byteTime" name="name"/>
+          </el-form-item>
+          <el-form-item>
+            <div style="float: right; margin-top: 20px">
+              <el-button type="primary" @click="onSubmit">保存</el-button>
+              <el-button @click="close">取消</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { ByteWeektimePicker } from 'byte-weektime-picker'
+
+
+export default {
+  name: "editRecordPlan",
+  props: {},
+  components: {ByteWeektimePicker},
+  created() {
+  },
+  data() {
+    return {
+      options: [],
+      loading: false,
+      edit: false,
+      planName: null,
+      id: null,
+      showDialog: false,
+      endCallback: "",
+      byteTime: "",
+    };
+  },
+  methods: {
+    openDialog: function (recordPlan, endCallback) {
+      this.endCallback = endCallback;
+      this.showDialog = true;
+      this.byteTime= "";
+      if (recordPlan) {
+        this.edit = true
+        this.planName = recordPlan.name
+        this.id = recordPlan.id
+        this.$axios({
+          method: 'get',
+          url: "/api/record/plan/get",
+          params: {
+            planId: recordPlan.id,
+          }
+        }).then((res) => {
+          if (res.data.code === 0 && res.data.data.planItemList) {
+            this.byteTime = this.plan2Byte(res.data.data.planItemList)
+          }
+        }).catch((error) => {
+          console.error(error)
+        });
+
+      }
+    },
+    onSubmit: function () {
+      let planList = this.byteTime2PlanList();
+      if (!this.edit) {
+        this.$axios({
+          method: 'post',
+          url: "/api/record/plan/add",
+          data: {
+            name: this.planName,
+            planItemList: planList
+          }
+        }).then((res) => {
+          if (res.data.code === 0) {
+            this.$message({
+              showClose: true,
+              message: '添加成功',
+              type: 'success',
+            });
+            this.showDialog = false;
+            this.endCallback()
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: 'error'
+            });
+          }
+        }).catch((error) => {
+          console.error(error)
+        });
+      }else {
+        this.$axios({
+          method: 'post',
+          url: "/api/record/plan/update",
+          data: {
+            id: this.id,
+            name: this.planName,
+            planItemList: planList
+          }
+        }).then((res) => {
+          if (res.data.code === 0) {
+            this.$message({
+              showClose: true,
+              message: '更新成功',
+              type: 'success',
+            });
+            this.showDialog = false;
+            this.endCallback()
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: 'error'
+            });
+          }
+        }).catch((error) => {
+          console.error(error)
+        });
+      }
+
+    },
+    close: function () {
+      this.showDialog = false;
+      this.id = null
+      this.planName = null
+      this.byteTime = ""
+      this.endCallback = ""
+      if(this.endCallback) {
+        this.endCallback();
+      }
+    },
+    byteTime2PlanList() {
+      if (this.byteTime.length === 0) {
+        return;
+      }
+      const DayTimes = 24 * 2;
+      let planList = []
+      let week = 1;
+      // 把 336长度的 list 分成 7 组，每组 48 个
+      for (let i = 0; i < this.byteTime.length; i += DayTimes) {
+        let planArray = this.byteTime2Plan(this.byteTime.slice(i, i + DayTimes));
+        if(!planArray || planArray.length === 0) {
+          week ++;
+          continue
+        }
+        for (let j = 0; j < planArray.length; j++) {
+          planList.push({
+            planId: this.id,
+            start: planArray[j].start,
+            stop: planArray[j].stop,
+            weekDay: week
+          })
+        }
+        week ++;
+      }
+      return planList
+    },
+    byteTime2Plan(weekItem){
+      let start = null;
+      let stop = null;
+      let result = []
+      for (let i = 0; i < weekItem.length; i++) {
+        let item = weekItem[i]
+        if (item === '1') { // 表示选中
+          stop = i
+          if (start === null ) {
+            start = i
+          }
+          if (i === weekItem.length - 1 && start != null && stop != null) {
+            result.push({
+              start: start,
+              stop: stop,
+            })
+          }
+        } else {
+          if (stop !== null){
+            result.push({
+              start: start,
+              stop: stop,
+            })
+            start = null
+            stop = null
+          }
+        }
+      }
+      return result;
+    },
+    plan2Byte(planList) {
+      let byte = ""
+      let indexArray = {}
+      for (let i = 0; i < planList.length; i++) {
+
+        let weekDay = planList[i].weekDay
+        let index = planList[i].start
+        let endIndex = planList[i].stop
+        for (let j = index; j <= endIndex; j++) {
+          indexArray["key_" + (j + (weekDay - 1 )*48)] = 1
+        }
+      }
+      for (let i = 0; i < 336; i++) {
+        if (indexArray["key_" + i]){
+          byte += "1"
+        }else {
+          byte += "0"
+        }
+      }
+      return byte
+    }
+  },
+};
+</script>
--- a/web_src/src/components/dialog/groupEdit.vue
+++ b/web_src/src/components/dialog/groupEdit.vue
@@ -22,7 +22,7 @@
          </el-form-item>
          <el-form-item label="行政区划" prop="name">
            <el-input v-model="group.civilCode" >
-              <el-button slot="append" @click="buildCivilCode(group.civilCode)">生成</el-button>
+              <el-button slot="append" @click="buildCivilCode(group.civilCode)">选择</el-button>
            </el-input>
          </el-form-item>

@@ -37,17 +37,17 @@
      </div>
    </el-dialog>
    <channelCode ref="channelCode"></channelCode>
-    <regionCode ref="regionCode"></regionCode>
+    <chooseCivilCode ref="chooseCivilCode"></chooseCivilCode>
  </div>
 </template>

 <script>
 import channelCode from "./channelCode.vue";
-import regionCode from "./regionCode.vue";
+import ChooseCivilCode from "./chooseCivilCode.vue";

 export default {
  name: "groupEdit",
-  components: {channelCode, regionCode},
+  components: {ChooseCivilCode, channelCode},
  computed: {},
  props: [],
  created() {},
@@ -116,11 +116,9 @@ export default {
      }, deviceId, 5 , lockContent);
    },
    buildCivilCode: function (deviceId){
-      this.$refs.regionCode.openDialog(code=>{
-        console.log("2222")
-        console.log(code)
+      this.$refs.chooseCivilCode.openDialog(code=>{
        this.group.civilCode = code;
-      }, deviceId)
+      });
    },
    close: function () {
      this.showDialog = false;
--- a/web_src/src/components/dialog/linkChannelRecord.vue
+++ b/web_src/src/components/dialog/linkChannelRecord.vue
@@ -0,0 +1,355 @@
+<template>
+  <div id="linkChannelRecord" style="width: 100%;  background-color: #FFFFFF; display: grid; grid-template-columns: 200px auto;">
+    <el-dialog title="通道关联" v-loading="dialogLoading" v-if="showDialog" top="2rem" width="80%" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
+      <div style="display: grid; grid-template-columns: 100px auto;">
+        <el-tabs tab-position="left" style="" v-model="hasLink" @tab-click="search">
+          <el-tab-pane label="未关联" name="false"></el-tab-pane>
+          <el-tab-pane label="已关联" name="true"></el-tab-pane>
+        </el-tabs>
+        <div>
+          <div class="page-header">
+            <div class="page-header-btn" >
+              <div  style="display: inline;">
+                搜索:
+                <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
+                          prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
+
+                在线状态:
+                <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择"
+                           default-first-option>
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="在线" value="true"></el-option>
+                  <el-option label="离线" value="false"></el-option>
+                </el-select>
+                类型:
+                <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="channelType" placeholder="请选择"
+                           default-first-option>
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="国标设备" :value="0"></el-option>
+                  <el-option label="推流设备" :value="1"></el-option>
+                  <el-option label="拉流代理" :value="2"></el-option>
+                </el-select>
+                <el-button v-if="hasLink !=='true'" size="mini" type="primary" @click="add()">
+                  添加
+                </el-button>
+                <el-button v-if="hasLink ==='true'" size="mini" type="danger" @click="remove()">
+                  移除
+                </el-button>
+                <el-button size="mini" v-if="hasLink !=='true'" @click="addByDevice()">按设备添加</el-button>
+                <el-button size="mini" v-if="hasLink ==='true'" @click="removeByDevice()">按设备移除</el-button>
+                <el-button size="mini" v-if="hasLink !=='true'" @click="addAll()">添加所有通道</el-button>
+                <el-button size="mini" v-if="hasLink ==='true'" @click="removeAll()">移除所有通道</el-button>
+                <el-button size="mini" @click="getChannelList()">刷新</el-button>
+              </div>
+            </div>
+          </div>
+          <el-table size="small"  ref="channelListTable" :data="channelList" :height="winHeight"
+                    header-row-class-name="table-header" @selection-change="handleSelectionChange" >
+            <el-table-column type="selection" width="55" >
+            </el-table-column>
+            <el-table-column prop="gbName" label="名称" min-width="180">
+            </el-table-column>
+            <el-table-column prop="gbDeviceId" label="编号" min-width="180">
+            </el-table-column>
+            <el-table-column prop="gbManufacturer" label="厂家" min-width="100">
+            </el-table-column>
+            <el-table-column label="类型" min-width="100">
+              <template v-slot:default="scope">
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium" effect="plain" v-if="scope.row.gbDeviceDbId">国标设备</el-tag>
+                  <el-tag size="medium" effect="plain" type="success" v-if="scope.row.streamPushId">推流设备</el-tag>
+                  <el-tag size="medium" effect="plain" type="warning" v-if="scope.row.streamProxyId">拉流代理</el-tag>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" min-width="100">
+              <template v-slot:default="scope">
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium" v-if="scope.row.gbStatus === 'ON'">在线</el-tag>
+                  <el-tag size="medium" type="info" v-if="scope.row.gbStatus !== 'ON'">离线</el-tag>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            style="text-align: right"
+            @size-change="handleSizeChange"
+            @current-change="currentChange"
+            :current-page="currentPage"
+            :page-size="count"
+            :page-sizes="[15, 25, 35, 50]"
+            layout="total, sizes, prev, pager, next"
+            :total="total">
+          </el-pagination>
+          <gbDeviceSelect ref="gbDeviceSelect"></gbDeviceSelect>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import gbDeviceSelect from "./GbDeviceSelect.vue";
+
+export default {
+  name: 'linkChannelRecord',
+  components: {gbDeviceSelect},
+  data() {
+    return {
+      dialogLoading: false,
+      showDialog: false,
+      chooseData: {},
+      channelList: [],
+      searchSrt: "",
+      channelType: "",
+      online: "",
+      hasLink: "false",
+      winHeight: window.innerHeight - 250,
+      currentPage: 1,
+      count: 15,
+      total: 0,
+      loading: false,
+      planId: null,
+      loadSnap: {},
+      multipleSelection: []
+    };
+  },
+
+  created() {},
+  destroyed() {},
+  methods: {
+    openDialog(planId, closeCallback) {
+      this.planId = planId
+      this.showDialog = true
+      this.closeCallback = closeCallback
+      this.initData()
+    },
+    initData: function () {
+      this.currentPage= 1;
+      this.count= 15;
+      this.total= 0;
+      this.getChannelList();
+    },
+    currentChange: function (val) {
+      this.currentPage = val;
+      this.initData();
+    },
+    handleSizeChange: function (val) {
+      this.count = val;
+      this.getChannelList();
+    },
+    getChannelList: function () {
+      this.$axios({
+        method: 'get',
+        url: `/api/record/plan/channel/list`,
+        params: {
+          page: this.currentPage,
+          count: this.count,
+          query: this.searchSrt,
+          online: this.online,
+          channelType: this.channelType,
+          planId: this.planId,
+          hasLink: this.hasLink
+        }
+      }).then((res)=> {
+        if (res.data.code === 0) {
+          this.total = res.data.data.total;
+          this.channelList = res.data.data.list;
+          // 防止出现表格错位
+          this.$nextTick(() => {
+            this.$refs.channelListTable.doLayout();
+          })
+        }
+
+      }).catch((error)=> {
+
+        console.log(error);
+      });
+    },
+    handleSelectionChange: function (val){
+      this.multipleSelection = val;
+    },
+
+    linkPlan: function (data){
+      this.loading = true
+      return this.$axios({
+        method: 'post',
+        url: `/api/record/plan/link`,
+        data: data
+      }).then((res)=> {
+        if (res.data.code === 0) {
+          this.$message.success({
+            showClose: true,
+            message: "保存成功"
+          })
+          this.getChannelList()
+        }else {
+          this.$message.error({
+            showClose: true,
+            message: res.data.msg
+          })
+        }
+        this.loading = false
+      }).catch((error)=> {
+        this.$message.error({
+          showClose: true,
+          message: error
+        })
+        this.loading = false
+      })
+    },
+
+    add: function (row) {
+      let channels = []
+      for (let i = 0; i < this.multipleSelection.length; i++) {
+        channels.push(this.multipleSelection[i].gbId)
+      }
+      if (channels.length === 0) {
+        this.$message.info({
+          showClose: true,
+          message: "请选择通道"
+        })
+        return;
+      }
+      this.linkPlan({
+        planId: this.planId,
+        channelIds: channels
+      })
+    },
+    addAll: function (row) {
+      this.$confirm("添加所有通道将包括已经添加到其他计划的通道，确定添加所有通道？", '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.linkPlan({
+          planId: this.planId,
+          allLink: true
+        })
+        }).catch(() => {
+      });
+    },
+
+    addByDevice: function (row) {
+      this.$refs.gbDeviceSelect.openDialog((rows)=>{
+        let deviceIds = []
+        for (let i = 0; i < rows.length; i++) {
+          deviceIds.push(rows[i].id)
+        }
+        this.linkPlan({
+          planId: this.planId,
+          deviceDbIds: deviceIds
+        })
+      })
+    },
+
+    removeByDevice: function (row) {
+      this.$refs.gbDeviceSelect.openDialog((rows)=>{
+        let deviceIds = []
+        for (let i = 0; i < rows.length; i++) {
+          deviceIds.push(rows[i].id)
+        }
+        this.linkPlan({
+          deviceDbIds: deviceIds
+        })
+      })
+    },
+    remove: function (row) {
+      let channels = []
+      for (let i = 0; i < this.multipleSelection.length; i++) {
+        channels.push(this.multipleSelection[i].gbId)
+      }
+      if (channels.length === 0) {
+        this.$message.info({
+          showClose: true,
+          message: "请选择通道"
+        })
+        return;
+      }
+
+      this.linkPlan({
+        channelIds: channels
+      })
+    },
+    removeAll: function (row) {
+
+      this.$confirm("确定移除所有通道？", '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.linkPlan({
+          planId: this.planId,
+          allLink: false
+        })
+      }).catch(() => {
+      });
+    },
+    search: function () {
+      this.currentPage = 1;
+      this.total = 0;
+      this.initData();
+    },
+    refresh: function () {
+      this.initData();
+    },
+  }
+};
+</script>
+
+<style>
+.videoList {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+
+.video-item {
+  position: relative;
+  width: 15rem;
+  height: 10rem;
+  margin-right: 1rem;
+  background-color: #000000;
+}
+
+.video-item-img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.video-item-img:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../../assets/loading.png");
+  background-size: cover;
+  background-color: #000000;
+}
+
+.video-item-title {
+  position: absolute;
+  bottom: 0;
+  color: #000000;
+  background-color: #ffffff;
+  line-height: 1.5rem;
+  padding: 0.3rem;
+  width: 14.4rem;
+}
+</style>
--- a/web_src/src/components/group.vue
+++ b/web_src/src/components/group.vue
@@ -8,9 +8,10 @@
      <el-main style="padding: 5px;">
        <div class="page-header">
          <div class="page-title">
-            <el-breadcrumb separator="/">
+            <el-breadcrumb separator="/" v-if="regionParents.length > 0">
              <el-breadcrumb-item v-for="key in regionParents" key="key">{{ key }}</el-breadcrumb-item>
            </el-breadcrumb>
+            <div v-else style="color: #00c6ff">未选择虚拟组织</div>
          </div>
          <div class="page-header-btn">
            <div style="display: inline;">
@@ -121,7 +122,7 @@ export default {
      groupDeviceId: "",
      groupId: "",
      businessGroup: "",
-      regionParents: ["请选择虚拟组织"],
+      regionParents: [],
      multipleSelection: []
    };
  },
@@ -289,7 +290,11 @@ export default {
    treeNodeClickEvent: function (group) {
      if (group.deviceId === "" || group.deviceId === group.businessGroup) {
        this.channelList = []
-        this.regionParents = ["请选择虚拟组织"];
+        this.regionParents = [];
+        this.$message.info({
+          showClose: true,
+          message: "当前为业务分组，挂载通道请选择其下的虚拟组织，如不存在可右键新建"
+        })
        return
      }
      this.groupDeviceId = group.deviceId;
--- a/web_src/src/components/operationsForHistoryLog.vue
+++ b/web_src/src/components/operationsForHistoryLog.vue
@@ -82,6 +82,7 @@ import uiHeader from '../layout/UiHeader.vue'
 import MediaServer from './service/MediaServer'
 import operationsFoShowLog from './dialog/operationsFoShowLog.vue'
 import moment from 'moment'
+import userService from "./service/UserService";

 export default {
  name: 'app',
@@ -154,16 +155,47 @@ export default {

    },
    downloadFile(file) {
-      const link = document.createElement('a');
-      link.target = "_blank";
-      link.download = file.fileName;
-      if (process.env.NODE_ENV === 'development') {
-        link.href = `/debug/api/log/file/${file.fileName}`
-      }else {
-        link.href = `/api/log/file/${file.fileName}`
-      }
+      // const link = document.createElement('a');
+      // link.target = "_blank";
+      // link.download = file.fileName;
+      // if (process.env.NODE_ENV === 'development') {
+      //   link.href = `/debug/api/log/file/${file.fileName}`
+      // }else {
+      //   link.href = `/api/log/file/${file.fileName}`
+      // }
+      //
+      // link.click();

-      link.click();
+
+      // 文件下载地址
+      const fileUrl = ((process.env.NODE_ENV === 'development') ? process.env.BASE_API : baseUrl) + `/api/log/file/${file.fileName}`;
+
+      // 设置请求头
+      const headers = new Headers();
+      headers.append('access-token', userService.getToken()); // 设置授权头，替换YourAccessToken为实际的访问令牌
+      // 发起  请求
+      fetch(fileUrl, {
+        method: 'GET',
+        headers: headers,
+      })
+        .then(response => response.blob())
+        .then(blob => {
+          console.log(blob)
+          // 创建一个虚拟的链接元素，模拟点击下载
+          const link = document.createElement('a');
+          link.target = "_blank";
+          link.href = window.URL.createObjectURL(blob);
+          link.download = file.fileName; // 设置下载文件名，替换filename.ext为实际的文件名和扩展名
+          document.body.appendChild(link);
+
+          // 模拟点击
+          link.click();
+
+          // 移除虚拟链接元素
+          document.body.removeChild(link);
+          this.$message.success("已申请截图",{closed: true})
+        })
+        .catch(error => console.error('下载失败：', error));
    },
    loadEnd() {
      this.playerTitle = this.file.fileName
--- a/web_src/src/components/region.vue
+++ b/web_src/src/components/region.vue
@@ -8,9 +8,10 @@
      <el-main style="padding: 5px;">
        <div class="page-header">
          <div class="page-title">
-            <el-breadcrumb separator="/">
+            <el-breadcrumb separator="/" v-if="regionParents.length > 0">
              <el-breadcrumb-item v-for="key in regionParents" key="key">{{ key }}</el-breadcrumb-item>
            </el-breadcrumb>
+            <div v-else style="color: #00c6ff">未选择行政区划</div>
          </div>
          <div class="page-header-btn">
            <div style="display: inline;">
@@ -116,7 +117,7 @@ export default {
      loadSnap: {},
      regionId: "",
      regionDeviceId: "",
-      regionParents: ["请选择行政区划"],
+      regionParents: [],
      multipleSelection: []
    };
  },
@@ -285,7 +286,7 @@ export default {
      this.regionDeviceId = region.deviceId;
      if (region.deviceId === "") {
        this.channelList = []
-        this.regionParents = ["请选择行政区划"];
+        this.regionParents = [];
      }
      this.initData();
      // 获取regionDeviceId对应的节点信息
--- a/web_src/src/layout/UiHeader.vue
+++ b/web_src/src/layout/UiHeader.vue
@@ -16,6 +16,7 @@
        <el-menu-item index="/channel/region">行政区划</el-menu-item>
        <el-menu-item index="/channel/group">业务分组</el-menu-item>
      </el-submenu>
+      <el-menu-item index="/recordPlan">录制计划</el-menu-item>
      <el-menu-item index="/cloudRecord">云端录像</el-menu-item>
      <el-menu-item index="/mediaServerManger">节点管理</el-menu-item>
      <el-menu-item index="/platformList/15/1">国标级联</el-menu-item>
--- a/web_src/src/router/index.js
+++ b/web_src/src/router/index.js
@@ -31,6 +31,7 @@ import rtcPlayer from '../components/dialog/rtcPlayer.vue'
 import region from '../components/region.vue'
 import group from '../components/group.vue'
 import operations from '../components/operations.vue'
+import recordPLan from '../components/RecordPLan.vue'

 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
@@ -181,6 +182,10 @@ export default new VueRouter({
          path: '/operations',
          component: operations,
        },
+        {
+          path: '/recordPLan',
+          component: recordPLan,
+        },
        ]
    },
    {