Thirdparty
/
wvp-GB28181-pro
mirror of https://github.com/648540858/wvp-GB28181-pro
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化网页表格使用统一高度

pull/1777/head
lin 2025-02-21 15:20:14 +08:00
parent 4a41de6039
commit 924de556b8
17 changed files with 136 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web_src/src/App.vue
View File

@ -69,7 +69,7 @@ body,
background-color: #f0f2f5;
color: #333;
text-align: center;
padding-top: 0px !important;
padding: 0 20px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

4
web_src/src/components/ChannelEdit.vue
View File

@ -2,9 +2,7 @@
<div id="ChannelEdit" v-loading="locading" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
<el-divider direction="vertical"></el-divider>
编辑通道
<el-page-header @back="close" content="编辑通道"></el-page-header>
</div>
<div class="page-header-btn">
<div style="display: inline;">

2
web_src/src/components/CloudRecord.vue
View File

@ -44,7 +44,7 @@
</div>
</div>
<!--设备列表-->
<el-table size="medium" :data="recordList" style="width: 100%" :height="winHeight">
<el-table size="medium" :data="recordList" style="width: 100%" :height="$tableHeght">
<el-table-column
type="selection"
width="55">

3
web_src/src/components/DeviceList.vue
View File

@ -22,7 +22,7 @@
</div>
</div>
<!--设备列表-->
<el-table size="medium" :data="deviceList" style="width: 100%;font-size: 12px;" :height="winHeight" header-row-class-name="table-header">
<el-table size="medium" :data="deviceList" style="width: 100%;font-size: 12px;" :height="$tableHeght" header-row-class-name="table-header">
<el-table-column prop="name" label="名称" min-width="160">
</el-table-column>
<el-table-column prop="deviceId" label="设备编号" min-width="160" >
@ -141,7 +141,6 @@ export default {
videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth: 0,
winHeight: window.innerHeight - 200,
currentPage: 1,
count: 15,
total: 0,

4
web_src/src/components/PlatformEdit.vue
View File

@ -2,9 +2,7 @@
<div id="PlatformEdit" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
<el-divider direction="vertical"></el-divider>
添加上级平台
<el-page-header @back="close" content="添加上级平台"></el-page-header>
</div>
<div class="page-header-btn">
<div style="display: inline;">

3
web_src/src/components/PlatformList.vue
View File

@ -15,7 +15,7 @@
</div>
<!--设备列表-->
<el-table size="medium" :data="platformList" style="width: 100%" :height="winHeight" :loading="loading">
<el-table size="medium" :data="platformList" style="width: 100%" :height="$tableHeght" :loading="loading">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="serverGBId" label="平台编号" min-width="200"></el-table-column>
<el-table-column label="是否启用" min-width="80">
@ -113,7 +113,6 @@ export default {
defaultPlatform: null,
platform: null,
pushChannelLoading: false,
winHeight: window.innerHeight - 260,
searchSrt: "",
currentPage: 1,
count: 15,

3
web_src/src/components/RecordPLan.vue
View File

@ -16,7 +16,7 @@
</div>
</div>
</div>
<el-table size="medium" ref="recordPlanListTable" :data="recordPlanList" :height="winHeight" style="width: 100%"
<el-table size="medium" ref="recordPlanListTable" :data="recordPlanList" :height="$tableHeght" style="width: 100%"
header-row-class-name="table-header" >
<el-table-column type="selection" width="55" >
</el-table-column>
@ -67,7 +67,6 @@ export default {
return {
recordPlanList: [],
searchSrt: "",
winHeight: window.innerHeight - 180,
currentPage: 1,
count: 15,
total: 0,

4
web_src/src/components/StreamProxyEdit.vue
View File

@ -2,9 +2,7 @@
<div id="StreamProxyEdit" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
<el-divider direction="vertical"></el-divider>
编辑拉流代理信息
<el-page-header @back="close" content="编辑拉流代理信息"></el-page-header>
</div>
<div class="page-header-btn">
<div style="display: inline;">

3
web_src/src/components/StreamProxyList.vue
View File

@ -32,7 +32,7 @@
</div>
</div>
<devicePlayer ref="devicePlayer"></devicePlayer>
<el-table size="medium" :data="streamProxyList" style="width: 100%" :height="winHeight">
<el-table size="medium" :data="streamProxyList" style="width: 100%" :height="$tableHeght" >
<el-table-column prop="app" label="流应用名" min-width="120" show-overflow-tooltip/>
<el-table-column prop="stream" label="流ID" min-width="120" show-overflow-tooltip/>
<el-table-column label="流地址" min-width="250" show-overflow-tooltip >
@ -127,7 +127,6 @@
currentPusher: {}, //当前操作设备对象
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth:0,
winHeight: window.innerHeight - 250,
currentPage:1,
count:15,
total:0,

4
web_src/src/components/StreamPushEdit.vue
View File

@ -2,9 +2,7 @@
<div id="ChannelEdit" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
<el-divider direction="vertical"></el-divider>
编辑推流信息
<el-page-header @back="close" content="编辑推流信息"></el-page-header>
</div>
<div class="page-header-btn">
<div style="display: inline;">

3
web_src/src/components/StreamPushList.vue
View File

@ -40,7 +40,7 @@
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
</div>
</div>
<el-table size="medium" ref="pushListTable" :data="pushList" style="width: 100%" :height="winHeight" :loading="loading"
<el-table size="medium" ref="pushListTable" :data="pushList" style="width: 100%" :height="$tableHeght" :loading="loading"
@selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream">
<el-table-column type="selection" :reserve-selection="true" min-width="55">
</el-table-column>
@ -133,7 +133,6 @@ export default {
currentPusher: {}, //当前操作设备对象
updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth: 0,
winHeight: window.innerHeight - 250,
mediaServerObj: new MediaServer(),
currentPage: 1,
count: 15,

4
web_src/src/components/UserManager.vue
View File

@ -8,11 +8,10 @@
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addUser">
添加用户
</el-button>
</div>
</div>
<!--用户列表-->
<el-table size="medium" :data="userList" style="width: 100%;font-size: 12px;" :height="winHeight"
<el-table size="medium" :data="userList" style="width: 100%;font-size: 12px;" :height="$tableHeght"
header-row-class-name="table-header">
<el-table-column prop="username" label="用户名" min-width="160"/>
<el-table-column prop="pushKey" label="pushkey" min-width="160"/>
@ -69,7 +68,6 @@ export default {
videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志
currentUserLenth: 0,
winHeight: window.innerHeight - 200,
currentPage: 1,
count: 15,
total: 0,

246
web_src/src/components/channelList.vue
View File

@ -2,9 +2,7 @@
<div id="channelList" style="width: 100%">
<div v-if="!editId" class="page-header">
<div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="showDevice" ></el-button>
<el-divider direction="vertical"></el-divider>
通道列表
<el-page-header @back="showDevice" content="通道列表"></el-page-header>
</div>
<div class="page-header-btn">
<div v-if="!showTree" style="display: inline;">
@ -43,133 +41,125 @@
</div>
</div>
<devicePlayer ref="devicePlayer"></devicePlayer>
<el-container v-if="!editId" v-loading="isLoging" style="height: 82vh;">
<el-aside width="auto" style="height: 82vh; background-color: #ffffff; overflow: auto" v-if="showTree">
<DeviceTree ref="deviceTree" :device="device" :onlyCatalog="true" :clickEvent="treeNodeClickEvent"></DeviceTree>
</el-aside>
<el-main style="padding: 5px;">
<el-table size="medium" ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%"
header-row-class-name="table-header">
<el-table-column prop="name" label="名称" min-width="180">
</el-table-column>
<el-table-column prop="deviceId" label="编号" min-width="180">
</el-table-column>
<el-table-column label="快照" min-width="100">
<template v-slot:default="scope">
<el-image
:src="getSnap(scope.row)"
:preview-src-list="getBigSnap(scope.row)"
@error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)"
:fit="'contain'"
style="width: 60px">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
</el-table-column>
<!-- <el-table-column prop="subCount" label="子节点数" min-width="100">-->
<!-- </el-table-column>-->
<el-table-column prop="manufacturer" label="厂家" min-width="100">
</el-table-column>
<el-table-column label="位置信息" min-width="120">
<template v-slot:default="scope">
<span size="medium" v-if="scope.row.longitude && scope.row.latitude">{{scope.row.longitude}}<br/>{{scope.row.latitude}}</span>
<span size="medium" v-if="!scope.row.longitude || !scope.row.latitude">无</span>
</template>
</el-table-column>
<el-table-column prop="ptzType" label="云台类型" min-width="100">
<template v-slot:default="scope">
<div >{{ scope.row.ptzTypeText }}</div>
</template>
</el-table-column>
<el-table-column label="开启音频" min-width="100">
<template v-slot:default="scope">
<el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
</el-switch>
</template>
</el-table-column>
<el-table-column label="码流类型" min-width="180">
<template v-slot:default="scope">
<el-select size="mini" style="margin-right: 1rem;" @change="channelSubStreamChange(scope.row)" v-model="scope.row.streamIdentification"
placeholder="请选择码流类型" default-first-option >
<el-option label="stream:0(主码流)" value="stream:0"></el-option>
<el-option label="stream:1(子码流)" value="stream:1"></el-option>
<el-option label="streamnumber:0(主码流-2022)" value="streamnumber:0"></el-option>
<el-option label="streamnumber:1(子码流-2022)" value="streamnumber:1"></el-option>
<el-option label="streamprofile:0(主码流-大华)" value="streamprofile:0"></el-option>
<el-option label="streamprofile:1(子码流-大华)" value="streamprofile:1"></el-option>
<el-option label="streamMode:main(主码流-水星+TP-LINK)" value="streamMode:main"></el-option>
<el-option label="streamMode:sub(子码流-水星+TP-LINK)" value="streamMode:sub"></el-option>
</el-select>
</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.status === 'ON'">在线</el-tag>
<el-tag size="medium" type="info" v-if="scope.row.status !== 'ON'">离线</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="340" fixed="right">
<template v-slot:default="scope">
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-video-play"
type="text" @click="sendDevicePush(scope.row)">播放
</el-button>
<el-button size="medium" v-bind:disabled="device == null || device.online === 0"
icon="el-icon-switch-button"
type="text" style="color: #f56c6c" v-if="!!scope.row.streamId"
@click="stopDevicePush(scope.row)">停止
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
size="medium"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-s-open" type="text"
v-if="scope.row.subCount > 0 || scope.row.parental === 1 || scope.row.deviceId.length <= 8"
@click="changeSubchannel(scope.row)">查看
</el-button>
<el-divider v-if="scope.row.subCount > 0 || scope.row.parental === 1 || scope.row.deviceId.length <= 8" direction="vertical"></el-divider>
<el-dropdown @command="(command)=>{moreClick(command, scope.row)}">
<el-button size="medium" type="text" >
更多<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu>
<el-dropdown-item command="records" v-bind:disabled="device == null || device.online === 0">
设备录像</el-dropdown-item>
<el-dropdown-item command="cloudRecords" v-bind:disabled="device == null || device.online === 0" >
云端录像</el-dropdown-item>
<el-dropdown-item command="record" v-bind:disabled="device == null || device.online === 0" >
设备录像控制-开始</el-dropdown-item>
<el-dropdown-item command="stopRecord" v-bind:disabled="device == null || device.online === 0" >
设备录像控制-停止</el-dropdown-item>
</el-dropdown-menu>
<el-table size="medium" ref="channelListTable" :data="deviceChannelList" :height="$tableHeght"
header-row-class-name="table-header">
<el-table-column prop="name" label="名称" min-width="180">
</el-table-column>
<el-table-column prop="deviceId" label="编号" min-width="180">
</el-table-column>
<el-table-column label="快照" min-width="100">
<template v-slot:default="scope">
<el-image
:src="getSnap(scope.row)"
:preview-src-list="getBigSnap(scope.row)"
@error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)"
:fit="'contain'"
style="width: 60px">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
</el-table-column>
<!-- <el-table-column prop="subCount" label="子节点数" min-width="100">-->
<!-- </el-table-column>-->
<el-table-column prop="manufacturer" label="厂家" min-width="100">
</el-table-column>
<el-table-column label="位置信息" min-width="120">
<template v-slot:default="scope">
<span size="medium" v-if="scope.row.longitude && scope.row.latitude">{{scope.row.longitude}}<br/>{{scope.row.latitude}}</span>
<span size="medium" v-if="!scope.row.longitude || !scope.row.latitude">无</span>
</template>
</el-table-column>
<el-table-column prop="ptzType" label="云台类型" min-width="100">
<template v-slot:default="scope">
<div >{{ scope.row.ptzTypeText }}</div>
</template>
</el-table-column>
<el-table-column label="开启音频" min-width="100">
<template v-slot:default="scope">
<el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
</el-switch>
</template>
</el-table-column>
<el-table-column label="码流类型" min-width="180">
<template v-slot:default="scope">
<el-select size="mini" style="margin-right: 1rem;" @change="channelSubStreamChange(scope.row)" v-model="scope.row.streamIdentification"
placeholder="请选择码流类型" default-first-option >
<el-option label="stream:0(主码流)" value="stream:0"></el-option>
<el-option label="stream:1(子码流)" value="stream:1"></el-option>
<el-option label="streamnumber:0(主码流-2022)" value="streamnumber:0"></el-option>
<el-option label="streamnumber:1(子码流-2022)" value="streamnumber:1"></el-option>
<el-option label="streamprofile:0(主码流-大华)" value="streamprofile:0"></el-option>
<el-option label="streamprofile:1(子码流-大华)" value="streamprofile:1"></el-option>
<el-option label="streamMode:main(主码流-水星+TP-LINK)" value="streamMode:main"></el-option>
<el-option label="streamMode:sub(子码流-水星+TP-LINK)" value="streamMode:sub"></el-option>
</el-select>
</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.status === 'ON'">在线</el-tag>
<el-tag size="medium" type="info" v-if="scope.row.status !== 'ON'">离线</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="340" fixed="right">
<template v-slot:default="scope">
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-video-play"
type="text" @click="sendDevicePush(scope.row)">播放
</el-button>
<el-button size="medium" v-bind:disabled="device == null || device.online === 0"
icon="el-icon-switch-button"
type="text" style="color: #f56c6c" v-if="!!scope.row.streamId"
@click="stopDevicePush(scope.row)">停止
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
size="medium"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-s-open" type="text"
v-if="scope.row.subCount > 0 || scope.row.parental === 1 || scope.row.deviceId.length <= 8"
@click="changeSubchannel(scope.row)">查看
</el-button>
<el-divider v-if="scope.row.subCount > 0 || scope.row.parental === 1 || scope.row.deviceId.length <= 8" direction="vertical"></el-divider>
<el-dropdown @command="(command)=>{moreClick(command, scope.row)}">
<el-button size="medium" type="text" >
更多<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu>
<el-dropdown-item command="records" v-bind:disabled="device == null || device.online === 0">
设备录像</el-dropdown-item>
<el-dropdown-item command="cloudRecords" v-bind:disabled="device == null || device.online === 0" >
云端录像</el-dropdown-item>
<el-dropdown-item command="record" v-bind:disabled="device == null || device.online === 0" >
设备录像控制-开始</el-dropdown-item>
<el-dropdown-item command="stopRecord" v-bind:disabled="device == null || device.online === 0" >
设备录像控制-停止</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</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>
</el-main>
</el-container>
</el-dropdown>
</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>
<channel-edit v-if="editId" :id="editId" :closeEdit="closeEdit"></channel-edit>
<!--设备列表-->
</div>
</template>

5
web_src/src/components/group.vue
View File

@ -5,7 +5,7 @@
<GroupTree ref="groupTree" :show-header="true" :edit="true" :clickEvent="treeNodeClickEvent"
:onChannelChange="onChannelChange" :enableAddChannel="true" :addChannelToGroup="addChannelToGroup"></GroupTree>
</el-aside>
<el-main style="padding: 5px;">
<el-main style="padding: 0 0 0 5px;">
<div class="page-header">
<div class="page-title">
<el-breadcrumb separator="/" v-if="regionParents.length > 0">
@ -46,7 +46,7 @@
</div>
</div>
</div>
<el-table size="medium" ref="channelListTable" :data="channelList" :height="winHeight" style="width: 100%"
<el-table size="medium" ref="channelListTable" :data="channelList" :height="$tableHeght" style="width: 100%"
header-row-class-name="table-header" @selection-change="handleSelectionChange"
@row-dblclick="rowDblclick">
<el-table-column type="selection" width="55" >
@ -113,7 +113,6 @@ export default {
channelType: "",
online: "",
hasGroup: "false",
winHeight: window.innerHeight - 180,
currentPage: 1,
count: 15,
total: 0,

5
web_src/src/components/region.vue
View File

@ -5,7 +5,7 @@
<RegionTree ref="regionTree" :showHeader=true :edit="true" :clickEvent="treeNodeClickEvent"
:onChannelChange="onChannelChange" :enableAddChannel="true" :addChannelToCivilCode="addChannelToCivilCode"></RegionTree>
</el-aside>
<el-main style="padding: 5px;">
<el-main style="padding: 0 0 0 5px;">
<div class="page-header">
<div class="page-title">
<el-breadcrumb separator="/" v-if="regionParents.length > 0">
@ -45,7 +45,7 @@
</div>
</div>
</div>
<el-table size="medium" ref="channelListTable" :data="channelList" :height="winHeight" style="width: 100%"
<el-table size="medium" ref="channelListTable" :data="channelList" :height="$tableHeght" style="width: 100%"
header-row-class-name="table-header" @selection-change="handleSelectionChange"
@row-dblclick="rowDblclick">
<el-table-column type="selection" width="55">
@ -109,7 +109,6 @@ export default {
searchSrt: "",
channelType: "",
online: "",
winHeight: window.innerHeight - 180,
currentPage: 1,
count: 15,
total: 0,

6
web_src/src/layout/index.vue
View File

@ -4,11 +4,7 @@
<ui-header/>
</el-header>
<el-main>
<el-container>
<transition name="fade">
<router-view></router-view>
</transition>
</el-container>
<router-view></router-view>
</el-main>
</el-container>
</template>

1
web_src/src/main.js
View File

@ -75,6 +75,7 @@ axios.interceptors.request.use(
Vue.prototype.$axios = axios;
Vue.prototype.$cookies.config(60 * 30);
Vue.prototype.$tableHeght = window.innerHeight - 170;
new Vue({
router: router,