web_src/src/components/CloudRecord.vue
@@ -1,15 +1,8 @@ <template> <div id="app"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span v-if="!recordDetail" >云端录像</span> <el-page-header v-if="recordDetail" @back="backToList" content="云端录像"> </el-page-header> <div style="position: absolute; right: 5rem; top: 0.3rem;"> <div id="app" style="width: 100%"> <div class="page-header"> <div class="page-title">云端录像</div> <div class="page-header-btn"> 节点选择: <el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" :disabled="recordDetail"> <el-option @@ -19,8 +12,6 @@ :value="item.id"> </el-option> </el-select> </div> <div style="position: absolute; right: 1rem; top: 0.3rem;"> <el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" @click="getRecordList()"></el-button> </div> </div> @@ -55,13 +46,12 @@ </el-pagination> </div> <cloud-record-detail ref="cloudRecordDetail" v-if="recordDetail" :recordFile="chooseRecord" :mediaServerId="mediaServerId" :mediaServerPath="mediaServerPath" ></cloud-record-detail> </el-main> </el-container> </div> </template> <script> import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue' import cloudRecordDetail from './CloudRecordDetail.vue' import MediaServer from './service/MediaServer' export default { web_src/src/components/CloudRecordDetail.vue
@@ -104,7 +104,7 @@ <script> // TODO 根据查询的时间列表设置滑轨的最大值与最小值， import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue' import player from './dialog/easyPlayer.vue' import moment from 'moment' export default { web_src/src/components/DeviceList.vue
@@ -1,14 +1,10 @@ <template> <div id="app"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">设备列表</span> <div style="position: absolute; right: 1rem; top: 0.3rem;"> <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading" @click="getDeviceList()"></el-button> <div id="app" style="width: 100%"> <div class="page-header"> <div class="page-title">设备列表</div> <div class="page-header-btn"> <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading" @click="getDeviceList()"></el-button> </div> </div> <!-- <devicePlayer ref="devicePlayer"></devicePlayer> --> @@ -57,10 +53,16 @@ <el-table-column label="操作" width="450" align="center" fixed="right"> <template slot-scope="scope"> <el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)" @mouseover="getTooltipContent(scope.row.deviceId)">刷新</el-button> <el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)" @mouseover="getTooltipContent(scope.row.deviceId)">刷新 </el-button> <el-button-group> <el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0" type="primary" @click="showChannelList(scope.row)">通道</el-button> <el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="primary" @click="showDevicePosition(scope.row)">定位</el-button> <el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0" type="primary" @click="showChannelList(scope.row)">通道 </el-button> <el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="primary" @click="showDevicePosition(scope.row)">定位 </el-button> <el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row)">编辑</el-button> <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice(scope.row)">删除</el-button> </el-button-group> @@ -79,15 +81,14 @@ </el-pagination> <deviceEdit ref="deviceEdit" ></deviceEdit> <syncChannelProgress ref="syncChannelProgress" ></syncChannelProgress> </el-main> </el-container> </div> </template> <script> import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue' import deviceEdit from './dialog/deviceEdit.vue' import syncChannelProgress from './dialog/SyncChannelProgress.vue' export default { name: 'app', components: { web_src/src/components/MediaServerManger.vue
@@ -1,15 +1,10 @@ <template> <div id="mediaServerManger"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main id="msMain"> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">节点列表</span> </div> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> <div id="mediaServerManger" style="width: 100%"> <div class="page-header"> <div class="page-title">节点列表</div> <div class="page-header-btn"> <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加节点</el-button> </div> </div> <el-row :gutter="12"> @@ -33,13 +28,11 @@ </el-col> </el-row> <mediaServerEdit ref="mediaServerEdit" ></mediaServerEdit> </el-main> </el-container> </div> </template> <script> import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue' import MediaServer from './service/MediaServer' import mediaServerEdit from './dialog/MediaServerEdit' export default { web_src/src/components/ParentPlatformList.vue
@@ -1,20 +1,16 @@ <template> <div id="app"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">上级平台列表</span> </div> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> <div id="app" style="width: 100%"> <div class="page-header"> <div class="page-title">上级平台列表</div> <div class="page-header-btn"> <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addParentPlatform">添加</el-button> </div> </div> <!--设备列表--> <el-table :data="platformList" border style="width: 100%" :height="winHeight"> <el-table-column prop="name" label="名称" align="center"></el-table-column> <el-table-column prop="serverGBId" label="平台编号" width="180" align="center"></el-table-column> <el-table-column prop="serverGBId" label="平台编号" align="center"></el-table-column> <el-table-column label="是否启用" width="120" align="center"> <template slot-scope="scope"> <div slot="reference" class="name-wrapper"> @@ -72,14 +68,12 @@ </el-pagination> <platformEdit ref="platformEdit" ></platformEdit> <chooseChannelDialog ref="chooseChannelDialog" ></chooseChannelDialog> </el-main> </el-container> </div> </template> <script> import platformEdit from './dialog/platformEdit.vue' import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue' import chooseChannelDialog from './dialog/chooseChannel.vue' export default { name: 'app', web_src/src/components/PushVideoList.vue
@@ -1,18 +1,14 @@ <template> <div id="pushVideoList"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">推流列表</span> </div> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> 搜索: <el-input @input="getPushList" 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="getPushList" style="margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" default-first-option> <div id="pushVideoList" style="width: 100%"> <div class="page-header"> <div class="page-title">推流列表</div> <div class="page-header-btn"> 搜索: <el-input @input="getPushList" 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="getPushList" style="margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" default-first-option> <el-option label="全部" value=""></el-option> <el-option v-for="item in mediaServerList" @@ -21,20 +17,29 @@ :value="item.id"> </el-option> </el-select> 推流状态: <el-select size="mini" style="margin-right: 1rem;" @change="getPushList" v-model="pushing" placeholder="请选择" default-first-option> 推流状态: <el-select size="mini" style="margin-right: 1rem;" @change="getPushList" v-model="pushing" 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-button icon="el-icon-upload2" size="mini" style="margin-right: 1rem;" type="primary" @click="importChannel">通道导入</el-button> <el-button icon="el-icon-download" size="mini" style="margin-right: 1rem;" type="primary" > <a style="color: #FFFFFF; text-align: center; text-decoration: none" href="/static/file/推流通道导入.zip" download='推流通道导入.zip' >下载模板</a> <el-button icon="el-icon-upload2" size="mini" style="margin-right: 1rem;" type="primary" @click="importChannel"> 通道导入 </el-button> <el-button icon="el-icon-delete" size="mini" style="margin-right: 1rem;" :disabled="multipleSelection.length === 0" type="danger" @click="batchDel">批量移除</el-button> <el-button icon="el-icon-download" size="mini" style="margin-right: 1rem;" type="primary"> <a style="color: #FFFFFF; text-align: center; text-decoration: none" href="/static/file/推流通道导入.zip" download='推流通道导入.zip'>下载模板</a> </el-button> <el-button icon="el-icon-delete" size="mini" style="margin-right: 1rem;" :disabled="multipleSelection.length === 0" type="danger" @click="batchDel">批量移除 </el-button> </div> </div> <devicePlayer ref="devicePlayer"></devicePlayer> <addStreamTOGB ref="addStreamTOGB"></addStreamTOGB> <el-table ref="pushListTable" :data="pushList" border style="width: 100%" :height="winHeight" @selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream"> <el-table ref="pushListTable" :data="pushList" border style="width: 100%" :height="winHeight" @selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream"> <el-table-column align="center" type="selection" :reserve-selection="true" width="55"> </el-table-column> <el-table-column prop="name" label="名称" align="center"> @@ -63,10 +68,17 @@ <el-table-column label="操作" width="360" align="center" fixed="right"> <template slot-scope="scope"> <el-button-group> <el-button size="mini" icon="el-icon-video-play" v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status" @click="playPush(scope.row)">播放</el-button> <el-button size="mini" icon="el-icon-video-play" v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status" @click="playPush(scope.row)">播放 </el-button> <el-button size="mini" icon="el-icon-delete" type="danger" @click="stopPush(scope.row)">移除</el-button> <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!!scope.row.gbId" @click="addToGB(scope.row)">加入国标</el-button> <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!scope.row.gbId" @click="removeFromGB(scope.row)">移出国标</el-button> <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!!scope.row.gbId" @click="addToGB(scope.row)">加入国标 </el-button> <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!scope.row.gbId" @click="removeFromGB(scope.row)">移出国标 </el-button> </el-button-group> </template> </el-table-column> @@ -83,8 +95,6 @@ </el-pagination> <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit> <importChannel ref="importChannel" ></importChannel> </el-main> </el-container> </div> </template> @@ -92,9 +102,10 @@ import streamProxyEdit from './dialog/StreamProxyEdit.vue' import devicePlayer from './dialog/devicePlayer.vue' import addStreamTOGB from './dialog/addStreamTOGB.vue' import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue' import importChannel from './dialog/importChannel.vue' import MediaServer from './service/MediaServer' export default { name: 'pushVideoList', components: { @@ -123,8 +134,7 @@ getDeviceListLoading: false }; }, computed: { }, computed: {}, mounted() { this.initData(); this.updateLooper = setInterval(this.getPushList, 2000); @@ -210,7 +220,11 @@ }); }, addToGB: function(row){ this.$refs.addStreamTOGB.openDialog({app: row.app, stream: row.stream, mediaServerId: row.mediaServerId}, this.initData); this.$refs.addStreamTOGB.openDialog({ app: row.app, stream: row.stream, mediaServerId: row.mediaServerId }, this.initData); }, removeFromGB: function(row){ let that = this; web_src/src/components/StreamProxyList.vue
@@ -1,16 +1,11 @@ <template> <div id="streamProxyList"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">拉流代理列表</span> </div> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> <div id="streamProxyList" style="width: 100%"> <div class="page-header"> <div class="page-title">拉流代理列表</div> <div class="page-header-btn"> <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">添加代理</el-button> <el-button v-if="false" icon="el-icon-search" size="mini" style="margin-right: 1rem;" type="primary" @click="addOnvif">搜索ONVIF</el-button> </div> </div> <devicePlayer ref="devicePlayer"></devicePlayer> <el-table :data="streamProxyList" border style="width: 100%" :height="winHeight"> @@ -108,8 +103,6 @@ </el-pagination> <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit> <onvifEdit ref="onvifEdit" ></onvifEdit> </el-main> </el-container> </div> </template> @@ -117,7 +110,7 @@ import streamProxyEdit from './dialog/StreamProxyEdit.vue' import onvifEdit from './dialog/onvifEdit.vue' import devicePlayer from './dialog/devicePlayer.vue' import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue' export default { name: 'streamProxyList', components: { web_src/src/components/UiHeader.vue
File was deleted web_src/src/components/channelList.vue
@@ -1,29 +1,34 @@ <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> <div id="channelList" style="width: 100%"> <div class="page-header"> <div class="page-title"> <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice"> 返回 </el-button> 通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</div> <div class="page-header-btn"> 搜索: <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> <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" v-model="autoList" @change="autoListChange"> 自动刷新 </el-checkbox> </div> </div> <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer> <!--设备列表--> @@ -81,26 +86,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 +239,8 @@ }else { that.$message.error(res.data.msg); } }).catch(function (e) {}); }).catch(function (e) { }); }, queryRecords: function (itemData) { var format = moment().format("YYYY-M-D"); web_src/src/components/control.vue
@@ -1,14 +1,11 @@ <template> <div id="app"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">控制台</span> <div style="position: absolute; right: 17rem; top: 0.3rem;"> 节点选择: <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;" v-model="mediaServerChoose" placeholder="请选择" default-first-option> <div id="app" style="width: 100%"> <div class="page-header"> <div class="page-title">控制台</div> <div class="page-header-btn"> 节点选择: <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;" v-model="mediaServerChoose" placeholder="请选择" default-first-option> <el-option v-for="item in mediaServerList" :key="item.id" @@ -18,10 +15,11 @@ </el-select> <span >{{loadCount}}</span> </div> <div style="position: absolute; right: 1rem; top: 0.3rem;"> <div class="page-header-btn"> <el-popover placement="bottom" width="900" height="300" trigger="click"> <div style="height: 600px; overflow:auto; padding: 20px"> <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1" style="margin-bottom: 1rem"> <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1" style="margin-bottom: 1rem"> <template slot="title"> {{key}} </template> @@ -39,7 +37,9 @@ <div style="height: 600px;overflow:auto; padding: 20px"> <el-descriptions title="国标配置" border :column="1"> <template slot="extra"> <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> </template> <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key"> <template slot="label"> @@ -52,7 +52,9 @@ <div style="margin-top: 1rem"> <el-descriptions title="基础配置" border :column="1"> <template slot="extra"> <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> </template> <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key"> <template slot="label" > @@ -64,7 +66,10 @@ 查看<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes" :key="key">{{value}}</el-dropdown-item> <el-dropdown-item v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes" :key="key">{{ value }} </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> @@ -86,7 +91,9 @@ <div style="margin-top: 1rem"> <el-descriptions title="版本信息" border :column="1"> <template slot="extra"> <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="JSON.stringify(wvpServerVersion) || ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="JSON.stringify(wvpServerVersion) || ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> </template> <el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key"> <template slot="label"> @@ -104,12 +111,123 @@ <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button> </div> </div> <el-row :gutter="30"> <!-- <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">--> <!-- <span style="font-size: 1rem; font-weight: bold;">控制台</span>--> <!-- <div style="position: absolute; right: 17rem; top: 0.3rem;">--> <!-- 节点选择:--> <!-- <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;"--> <!-- v-model="mediaServerChoose" placeholder="请选择" default-first-option>--> <!-- <el-option--> <!-- v-for="item in mediaServerList"--> <!-- :key="item.id"--> <!-- :label="item.id + '( ' + item.streamIp + ' )'"--> <!-- :value="item.id">--> <!-- </el-option>--> <!-- </el-select>--> <!-- <span>{{ loadCount }}</span>--> <!-- </div>--> <!-- <div style="position: absolute; right: 1rem; top: 0.3rem;">--> <!-- <el-popover placement="bottom" width="900" height="300" trigger="click">--> <!-- <div style="height: 600px; overflow:auto; padding: 20px">--> <!-- <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1"--> <!-- style="margin-bottom: 1rem">--> <!-- <template slot="title">--> <!-- {{ key }}--> <!-- </template>--> <!-- <el-descriptions-item v-for="(value1, key1, index1) in serverConfig[key]" :key="key1">--> <!-- <template slot="label">--> <!-- {{ getMediaKeyNameFromKey(key1) }}--> <!-- </template>--> <!-- {{ value1 }}--> <!-- </el-descriptions-item>--> <!-- </el-descriptions>--> <!-- </div>--> <!-- <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">媒体服务器配置</el-button>--> <!-- </el-popover>--> <!-- <el-popover placement="bottom" width="900" height="300" trigger="click">--> <!-- <div style="height: 600px;overflow:auto; padding: 20px">--> <!-- <el-descriptions title="国标配置" border :column="1">--> <!-- <template slot="extra">--> <!-- <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"--> <!-- v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''"--> <!-- @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>--> <!-- </template>--> <!-- <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key">--> <!-- <template slot="label">--> <!-- {{ getNameFromKey(key) }}--> <!-- </template>--> <!-- {{ value }}--> <!-- </el-descriptions-item>--> <!-- </el-descriptions>--> <!-- <div style="margin-top: 1rem">--> <!-- <el-descriptions title="基础配置" border :column="1">--> <!-- <template slot="extra">--> <!-- <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"--> <!-- v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''"--> <!-- @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>--> <!-- </template>--> <!-- <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key">--> <!-- <template slot="label">--> <!-- {{ getNameFromKey(key) }}--> <!-- </template>--> <!-- <div v-if="key === 'interfaceAuthenticationExcludes'">--> <!-- <el-dropdown>--> <!-- <span class="el-dropdown-link">--> <!-- 查看<i class="el-icon-arrow-down el-icon--right"></i>--> <!-- </span>--> <!-- <el-dropdown-menu slot="dropdown">--> <!-- <el-dropdown-item--> <!-- v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes"--> <!-- :key="key">{{ value }}--> <!-- </el-dropdown-item>--> <!-- </el-dropdown-menu>--> <!-- </el-dropdown>--> <!-- </div>--> <!-- <div v-if="key !== 'interfaceAuthenticationExcludes'">--> <!-- <div v-if="value === true">--> <!-- 已启用--> <!-- </div>--> <!-- <div v-if="value === false">--> <!-- 未启用--> <!-- </div>--> <!-- <div v-if="value !== true && value !== false">--> <!-- {{ value }}--> <!-- </div>--> <!-- </div>--> <!-- </el-descriptions-item>--> <!-- </el-descriptions>--> <!-- </div>--> <!-- <div style="margin-top: 1rem">--> <!-- <el-descriptions title="版本信息" border :column="1">--> <!-- <template slot="extra">--> <!-- <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"--> <!-- v-clipboard="JSON.stringify(wvpServerVersion) || ''"--> <!-- @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>--> <!-- </template>--> <!-- <el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key">--> <!-- <template slot="label">--> <!-- {{ getNameFromKey(key) }}--> <!-- </template>--> <!-- {{ value }}--> <!-- </el-descriptions-item>--> <!-- </el-descriptions>--> <!-- </div>--> <!-- </div>--> <!-- <el-button type="primary" slot="reference" size="mini" @click="getWVPServerConfig()">信令服务器配置</el-button>--> <!-- </el-popover>--> <!-- <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button>--> <!-- </div>--> <!-- </div>--> <el-row style="width: 100%"> <el-col :span="12"> <div class="control-table" id="ThreadsLoad">table1</div> <div class="control-table" id="ThreadsLoad" style="margin-right:10px;">table1</div> </el-col> <el-col :span="12"> <div class="control-table" id="WorkThreadsLoad">table2</div> <div class="control-table" id="WorkThreadsLoad" style="margin-left:10px;">table2</div> </el-col> </el-row> <el-table :data="allSessionData" style="margin-top: 1rem;"> @@ -121,23 +239,20 @@ <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button> </template> <template slot-scope="scope"> <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button> <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除 </el-button> </template> </el-table-column> </el-table> </el-main> <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> --> </el-container> </div> </template> <script> import uiHeader from './UiHeader.vue' import uiHeader from '../layout/UiHeader.vue' import MediaServer from './service/MediaServer' import echarts from 'echarts'; export default { name: 'app', components: { @@ -181,8 +296,7 @@ }; }, mounted() { this.initTable(); this.initTable() this.chartInterval = setInterval(this.updateData, 3000); this.mediaServer.getOnlineMediaServerList((data)=>{ this.mediaServerList = data.data; @@ -252,6 +366,10 @@ that.myChart.setOption(that.tableOption, true); // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad')); that.myChart1.setOption(that.table1Option, true); that.$nextTick(() => { that.myChart.resize() that.myChart1.resize() }) } }); } web_src/src/components/devicePosition.vue
@@ -1,10 +1,5 @@ <template> <div id="devicePosition" style="height: 100%"> <el-container style="height: 100%"> <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> </div> @@ -30,14 +25,11 @@ <div class="mapContainer" style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center; height: calc(100% - 10rem);"> <div class="baidumap" id="allmap"></div> </div> </el-main> </el-container> </div> </template> <script> import uiHeader from "./UiHeader.vue"; import moment from "moment"; import uiHeader from "../layout/UiHeader.vue"; import geoTools from "./GeoConvertTools.js"; export default { name: "devicePosition", web_src/src/components/live.vue
@@ -1,10 +1,6 @@ <template> <div id="devicePosition" style="height: 100%"> <el-container style="height: 100%"> <el-header> <uiHeader></uiHeader> </el-header> <el-container v-loading="loading" element-loading-text="拼命加载中" style="margin: 0 20px;"> <div id="devicePosition" style="height: 100%;width: 100%"> <el-container v-loading="loading" element-loading-text="拼命加载中"> <el-aside width="300px" style="background-color: #ffffff"> <div style="text-align: center;padding-top: 20px;">设备列表</div> <el-menu v-loading="loading"> @@ -26,7 +22,7 @@ <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/> </el-header> <el-main> <div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;"> <div style="width: 100%;height: calc( 100vh - 150px );display: flex;flex-wrap: wrap;background-color: #000;"> <div v-for="i in spilt" :key="i" class="play-box" :style="liveStyle" :class="{redborder:playerIdx == (i-1)}" @click="playerIdx = (i-1)" @@ -40,12 +36,11 @@ </el-main> </el-container> </el-container> </el-container> </div> </template> <script> import uiHeader from "./UiHeader.vue"; import uiHeader from "../layout/UiHeader.vue"; import player from './dialog/jessibuca.vue' import ChannelTree from './channelTree.vue'
@@ -1,14 +1,10 @@ <template> <div id="SettingForMedia"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">媒体服务</span> <div id="SettingForMedia" style="width: 100%"> <div class="page-header"> <div class="page-title">媒体服务</div> </div> <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> <el-form ref="form" :rules="rules" :model="form" label-width="140px"> <el-form-item label="IP" prop="IP"> <el-input v-model="form.IP" clearable></el-input> @@ -71,15 +67,12 @@ </el-form-item> </el-form> </div> </el-main> </el-container> </div> </template> <script> import uiHeader from '../UiHeader.vue' import uiHeader from '../../layout/UiHeader.vue' export default { name: "SettingForMedia", components: { web_src/src/components/setting/Sip.vue
@@ -1,14 +1,10 @@ <template> <div id="SettingForSip"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">国标服务</span> <div id="SettingForSip" style="width: 100%"> <div class="page-header"> <div class="page-title">国标服务</div> </div> <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> <el-form ref="form" :rules="rules" :model="form" label-width="140px"> <el-form-item label="ip" prop="ip"> <el-input v-model="form.ip" clearable></el-input> @@ -36,15 +32,12 @@ </el-form-item> </el-form> </div> </el-main> </el-container> </div> </template> <script> import uiHeader from '../UiHeader.vue' import uiHeader from '../../layout/UiHeader.vue' export default { name: "SettingForSip", components: { web_src/src/components/setting/Web.vue
@@ -1,12 +1,7 @@ <template> <div id="SettingForWeb"> <el-container> <el-header> <uiHeader></uiHeader> </el-header> <el-main> <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;"> <span style="font-size: 1rem; font-weight: bold;">WEB服务</span> <div id="SettingForWeb" style="width: 100%"> <div class="page-header"> <div class="page-title">WEB服务</div> </div> <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px"> <el-form ref="form" :rules="rules" :model="form" label-width="140px"> @@ -41,15 +36,11 @@ </el-form-item> </el-form> </div> </el-main> </el-container> </div> </template> <script> import uiHeader from '../UiHeader.vue' import uiHeader from '../../layout/UiHeader.vue' export default { name: "SettingForWeb", components: { web_src/src/layout/UiHeader.vue
New file @@ -0,0 +1,151 @@ <template> <div id="UiHeader"> <el-menu router :default-active="activeIndex" menu-trigger="click" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal"> <el-menu-item index="/control">控制台</el-menu-item> <el-menu-item index="/live">实时监控</el-menu-item> <el-menu-item index="/deviceList">国标设备</el-menu-item> <el-menu-item index="/pushVideoList">推流列表</el-menu-item> <el-menu-item index="/streamProxyList">拉流代理</el-menu-item> <el-menu-item index="/cloudRecord">云端录像</el-menu-item> <el-menu-item index="/mediaServerManger">节点管理</el-menu-item> <el-menu-item index="/parentPlatformList/15/1">国标级联</el-menu-item> <el-menu-item @click="openDoc">在线文档</el-menu-item> <!-- <el-submenu index="/setting">--> <!-- <template slot="title">系统设置</template>--> <!-- <el-menu-item index="/setting/web">WEB服务</el-menu-item>--> <!-- <el-menu-item index="/setting/sip">国标服务</el-menu-item>--> <!-- <el-menu-item index="/setting/media">媒体服务</el-menu-item>--> <!-- </el-submenu>--> <el-switch v-model="alarmNotify" active-text="报警信息推送" @change="alarmNotifyChannge"></el-switch> <!-- <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>--> <el-submenu index="" style="float: right;"> <template slot="title">欢迎，{{ this.$cookies.get("session").username }}</template> <el-menu-item @click="changePassword">修改密码</el-menu-item> <el-menu-item @click="loginout">注销</el-menu-item> </el-submenu> </el-menu> <changePasswordDialog ref="changePasswordDialog"></changePasswordDialog> </div> </template> <script> import changePasswordDialog from '../components/dialog/changePassword.vue' export default { name: "UiHeader", components: {Notification, changePasswordDialog}, data() { return { alarmNotify: false, sseSource: null, activeIndex: this.$route.path, }; }, created() { if (this.$route.path.startsWith("/channelList")) { this.activeIndex = "/deviceList" } }, mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) // window.addEventListener('unload', e => this.unloadHandler(e)) this.alarmNotify = this.getAlarmSwitchStatus() === "true"; this.sseControl(); }, methods: { loginout() { this.$axios({ method: 'get', url: "/api/user/logout" }).then((res) => { // 删除cookie，回到登录页面 this.$cookies.remove("session"); this.$router.push('/login'); this.sseSource.close(); }).catch((error) => { console.error("登出失败") console.error(error) }); }, changePassword() { this.$refs.changePasswordDialog.openDialog() }, openDoc() { console.log(process.env.BASE_API) window.open(!!process.env.BASE_API ? process.env.BASE_API + "/doc.html" : "/doc.html") }, beforeunloadHandler() { this.sseSource.close(); }, alarmNotifyChannge() { this.setAlarmSwitchStatus() this.sseControl() }, sseControl() { let that = this; if (this.alarmNotify) { console.log("申请SSE推送API调用，浏览器ID: " + this.$browserId); this.sseSource = new EventSource('/api/emit?browserId=' + this.$browserId); this.sseSource.addEventListener('message', function (evt) { that.$notify({ title: '收到报警信息', dangerouslyUseHTMLString: true, message: evt.data, type: 'warning' }); console.log("收到信息：" + evt.data); }); this.sseSource.addEventListener('open', function (e) { console.log("SSE连接打开."); }, false); this.sseSource.addEventListener('error', function (e) { if (e.target.readyState == EventSource.CLOSED) { console.log("SSE连接关闭"); } else { console.log(e.target.readyState); } }, false); } else { if (this.sseSource != null) { this.sseSource.removeEventListener('open', null); this.sseSource.removeEventListener('message', null); this.sseSource.removeEventListener('error', null); this.sseSource.close(); } } }, getAlarmSwitchStatus() { if (localStorage.getItem("alarmSwitchStatus") == null) { localStorage.setItem("alarmSwitchStatus", false); } return localStorage.getItem("alarmSwitchStatus"); }, setAlarmSwitchStatus() { localStorage.setItem("alarmSwitchStatus", this.alarmNotify); } }, destroyed() { window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e)) if (this.sseSource != null) { this.sseSource.removeEventListener('open', null); this.sseSource.removeEventListener('message', null); this.sseSource.removeEventListener('error', null); this.sseSource.close(); } }, } </script> <style> #UiHeader .el-switch__label { color: white; } #UiHeader .el-switch__label.is-active{ color: #409EFF; } </style> web_src/src/layout/index.vue
New file @@ -0,0 +1,90 @@ <template> <el-container style="height: 100%"> <el-header> <ui-header/> </el-header> <el-main> <el-container> <transition name="fade"> <router-view></router-view> </transition> </el-container> </el-main> </el-container> </template> <script> import uiHeader from "./UiHeader.vue"; export default { name: "index", components: { uiHeader }, } </script> <style> /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 8px; height: 8px; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { border-radius: 4px; background-color: #F5F5F5; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #c8c8c8; box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); } /*定义标题栏*/ .page-header { background-color: #FFFFFF; margin-bottom: 1rem; padding: 0.5rem; display: flex; justify-content: space-between; align-items: center; } .page-title { font-weight: bold; text-align: left; } .page-header-btn { text-align: right; } </style> <style scoped> .el-main { margin: 0; } .fade-enter { visibility: hidden; opacity: 0; } .fade-leave-to { display: none; } .fade-enter-active, .fade-leave-active { transition: opacity .5s ease; } .fade-enter-to, .fade-leave { visibility: visible; opacity: 1; } </style> web_src/src/router/index.js
@@ -1,5 +1,6 @@ import Vue from 'vue' import VueRouter from 'vue-router' import Layout from "../layout/index.vue" import control from '../components/control.vue' import deviceList from '../components/DeviceList.vue' @@ -32,6 +33,12 @@ routes: [ { path: '/', name: 'home', component: Layout, redirect: '/control', children: [ { path: '/control', component: control, }, { @@ -49,11 +56,6 @@ { path: '/streamProxyList', component: streamProxyList, }, { path: '/login', name: '登录', component: login, }, { path: '/channelList/:deviceId/:parentChannelId/:count/:page', @@ -106,4 +108,11 @@ component: rtcPlayer, }, ] }, { path: '/login', name: '登录', component: login, }, ] })
