1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套 2.全局页面样式优化，如滚动条、标题栏等

xiaoxie

2022-04-21 fb843d41c1e186b2109bfeea73509cad2b135cdc

 web_src/src/components/channelList.vue

@@ -1,29 +1,36 @@
<template>
<div id="channelList">
    <el-container>
        <el-header>
            <uiHeader></uiHeader>
        </el-header>
        <el-main>
            <div style="background-color: #FFFFFF; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
                <span style="font-size: 1rem; font-weight: 500; ">通道列表({{parentChannelId ==0 ? deviceId:parentChannelId}})</span>
      <span
        style="font-size: 1rem; font-weight: 500; ">通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</span>

            </div>
            <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
                <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">返回</el-button>
                搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
    <div
      style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
      <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">
        返回
      </el-button>
      搜索:
      <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" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
      通道类型:
      <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择"
                 default-first-option>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="设备" value="false"></el-option>
                    <el-option label="子目录" value="true"></el-option>
                </el-select>
                在线状态: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择" default-first-option>
      在线状态:
      <el-select size="mini" style="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-checkbox size="mini" style="margin-right: 1rem; float: right;" v-model="autoList" @change="autoListChange">自动刷新</el-checkbox>
      <el-checkbox size="mini" style="margin-right: 1rem; float: right;" v-model="autoList" @change="autoListChange">
        自动刷新
      </el-checkbox>
            </div>
            <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
            <!--设备列表-->
@@ -81,26 +88,31 @@
                        <el-button-group>
                            <!-- <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">播放</el-button> -->
                            <el-button size="mini" icon="el-icon-video-play" @click="sendDevicePush(scope.row)">播放</el-button>
                            <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId" @click="stopDevicePush(scope.row)">停止</el-button>
                            <el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.subCount > 0" @click="changeSubchannel(scope.row)">查看</el-button>
                            <el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录象</el-button>
            <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId"
                       @click="stopDevicePush(scope.row)">停止
            </el-button>
            <el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.subCount > 0"
                       @click="changeSubchannel(scope.row)">查看
            </el-button>
            <el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录象
            </el-button>
                            <!--                             <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> -->
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total">
    <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="currentChange"
                   :current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]"
                   layout="total, sizes, prev, pager, next" :total="total">
            </el-pagination>

        </el-main>
    </el-container>
</div>
</template>

<script>
import devicePlayer from './dialog/devicePlayer.vue'
import uiHeader from './UiHeader.vue'
import uiHeader from '../layout/UiHeader.vue'
import moment from "moment";

export default {
    name: 'channelList',
    components: {
@@ -229,7 +241,8 @@
                }else {
                  that.$message.error(res.data.msg);
                }
            }).catch(function (e) {});
      }).catch(function (e) {
      });
        },
        queryRecords: function (itemData) {
            var format = moment().format("YYYY-M-D");