fajiao
/
wvp-GB28181-pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

通道页适配全局样式

pull/443/head
xiaoxie 3 years ago
parent
fb843d41c1
commit
5623b5ee0f
1 changed files with 81 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      web_src/src/components/channelList.vue

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

@ -1,15 +1,12 @@
<template> <template>
<div id="channelList"> <div id="channelList" style="width: 100%">
<div style="background-color: #FFFFFF; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;"> <div class="page-header">
<span <div class="page-title">
style="font-size: 1rem; font-weight: 500; ">通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</span> <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">
返回
</div> </el-button>
<div 通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</div>
style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> <div class="page-header-btn">
<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="关键字" <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input> prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
@ -28,83 +25,84 @@
<el-option label="在线" value="true"></el-option> <el-option label="在线" value="true"></el-option>
<el-option label="离线" value="false"></el-option> <el-option label="离线" value="false"></el-option>
</el-select> </el-select>
<el-checkbox size="mini" style="margin-right: 1rem; float: right;" v-model="autoList" @change="autoListChange"> <el-checkbox size="mini" v-model="autoList" @change="autoListChange">
自动刷新 自动刷新
</el-checkbox> </el-checkbox>
</div> </div>
<devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer> </div>
<!--设备列表--> <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
<el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%"> <!--设备列表-->
<el-table-column prop="channelId" label="通道编号" width="200"> <el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%">
</el-table-column> <el-table-column prop="channelId" label="通道编号" width="200">
<el-table-column prop="name" label="通道名称"> </el-table-column>
</el-table-column> <el-table-column prop="name" label="通道名称">
<el-table-column label="快照" width="80" align="center"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="快照" width="80" align="center">
<img style="max-height: 3rem;max-width: 4rem;" <template slot-scope="scope">
:id="scope.row.deviceId + '_' + scope.row.channelId" <img style="max-height: 3rem;max-width: 4rem;"
:src="getSnap(scope.row)" :id="scope.row.deviceId + '_' + scope.row.channelId"
@error="getSnapErrorEvent($event.target.id)" :src="getSnap(scope.row)"
alt=""> @error="getSnapErrorEvent($event.target.id)"
<!-- <el-image--> alt="">
<!-- :id="'snapImg_' + scope.row.deviceId + '_' + scope.row.channelId"--> <!-- <el-image-->
<!-- :src="getSnap(scope.row)"--> <!-- :id="'snapImg_' + scope.row.deviceId + '_' + scope.row.channelId"-->
<!-- @error="getSnapErrorEvent($event, scope.row)"--> <!-- :src="getSnap(scope.row)"-->
<!-- :fit="'contain'">--> <!-- @error="getSnapErrorEvent($event, scope.row)"-->
<!-- <div slot="error" class="image-slot">--> <!-- :fit="'contain'">-->
<!-- <i class="el-icon-picture-outline"></i>--> <!-- <div slot="error" class="image-slot">-->
<!-- </div>--> <!-- <i class="el-icon-picture-outline"></i>-->
<!-- </el-image>--> <!-- </div>-->
</template> <!-- </el-image>-->
</el-table-column> </template>
<el-table-column prop="subCount" label="子节点数"> </el-table-column>
</el-table-column> <el-table-column prop="subCount" label="子节点数">
<el-table-column prop="manufacture" label="厂家"> </el-table-column>
</el-table-column> <el-table-column prop="manufacture" label="厂家">
<el-table-column label="位置信息" align="center"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="位置信息" align="center">
<span>{{ scope.row.longitude }},{{ scope.row.latitude }}</span> <template slot-scope="scope">
</template> <span>{{ scope.row.longitude }},{{ scope.row.latitude }}</span>
</el-table-column> </template>
<el-table-column prop="ptztypeText" label="云台类型"/> </el-table-column>
<el-table-column label="开启音频" align="center"> <el-table-column prop="ptztypeText" label="云台类型"/>
<template slot-scope="scope"> <el-table-column label="开启音频" align="center">
<el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF"> <template slot-scope="scope">
</el-switch> <el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
</template> </el-switch>
</el-table-column> </template>
<el-table-column label="状态" width="180" align="center"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="状态" width="180" align="center">
<div slot="reference" class="name-wrapper"> <template slot-scope="scope">
<el-tag size="medium" v-if="scope.row.status == 1">开启</el-tag> <div slot="reference" class="name-wrapper">
<el-tag size="medium" type="info" v-if="scope.row.status == 0">关闭</el-tag> <el-tag size="medium" v-if="scope.row.status == 1">开启</el-tag>
</div> <el-tag size="medium" type="info" v-if="scope.row.status == 0">关闭</el-tag>
</template> </div>
</el-table-column> </template>
</el-table-column>
<el-table-column label="操作" width="280" align="center" fixed="right"> <el-table-column label="操作" width="280" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button-group> <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" 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-video-play" @click="sendDevicePush(scope.row)">播放</el-button>
<el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId" <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId"
@click="stopDevicePush(scope.row)">停止 @click="stopDevicePush(scope.row)">停止
</el-button> </el-button>
<el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.subCount > 0" <el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.subCount > 0"
@click="changeSubchannel(scope.row)">查看 @click="changeSubchannel(scope.row)">查看
</el-button> </el-button>
<el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录象 <el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录象
</el-button> </el-button>
<!-- <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> --> <!-- <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> -->
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination style="float: right" @size-change="handleSizeChange" @current-change="currentChange" <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="currentChange"
:current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]" :current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]"
layout="total, sizes, prev, pager, next" :total="total"> layout="total, sizes, prev, pager, next" :total="total">
</el-pagination> </el-pagination>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save