<style scoped>
|
.nowrap {
|
white-space: nowrap;
|
}
|
.swiper-slide.w100 img {
|
position: absolute;
|
top: 50%;
|
width: 100%;
|
}
|
.swiper-slide.h100 {
|
text-align: center;
|
}
|
.swiper-slide.h100 img {
|
height: 100%;
|
}
|
#ckPlayer {
|
height: 100%;
|
}
|
#videoItem {
|
position: relative;
|
}
|
#ckPlayerList {
|
position: absolute;
|
top: 44px;
|
bottom: 50px;
|
z-index: 600;
|
width: 60%;
|
background-color: none;
|
}
|
#ckPlayerList.hide-list {
|
width: 0;
|
}
|
.list-container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
.list-container .list-bg {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
z-index: -1;
|
background-color: #FFFFFF;
|
opacity: 0.7;
|
}
|
.list-inner {
|
padding: 8px;
|
|
}
|
#ckPlayerList.hide-list .list-inner {
|
display: none;
|
}
|
.list-inner ul {
|
margin: 0;
|
padding: 0;
|
}
|
.list-inner ul li {
|
list-style: none;
|
}
|
.list-inner ul li a {
|
display: block;
|
padding: 4px 0;
|
color: #000000;
|
}
|
.list-inner ul li a.active {
|
color: blue;
|
}
|
.toggleShow {
|
position: absolute;
|
top: 50%;
|
margin-top: -15px;
|
right: 0;
|
background-color: #FFFFFF;
|
border-radius: 4px;
|
opacity: 0.8;
|
}
|
#ckPlayerList.hide-list .toggleShow {
|
transform: rotate(180deg);
|
right: -28px;
|
}
|
</style>
|
<template>
|
<div data-name="data-home-info" class="page">
|
<!-- Top Navbar -->
|
<div class="navbar">
|
<div class="navbar-inner">
|
<div class="left">
|
<a href="#" class="link {{params.style}}">
|
<i class="icon f7-icons">chevron_left</i>
|
</a>
|
</div>
|
<div class="title center">基站信息</div>
|
<div class="right">
|
<a href="javascript:popupHomeInfo.router.refreshPage();" class="link">
|
<i class="icon f7-icons">refresh</i>
|
</a>
|
</div>
|
</div>
|
</div>
|
<div class="toolbar tabbar-labels toolbar-bottom" id="homeInfoToolbar">
|
<div class="toolbar-inner">
|
<a v-for="battItem in battInfo" v-bind:href="battItem.href" v-bind:class="battItem.cla1" class="tab-link">
|
<i class="icon f7-icons">${battItem.icon}</i>
|
<span class="tabbar-label">${battItem.title}</span>
|
</a>
|
<a v-for="homeItem in homeInfo" v-bind:href="homeItem.href" v-bind:class="homeItem.cla1" class="tab-link">
|
<i class="icon f7-icons">${homeItem.icon}</i>
|
<span class="tabbar-label">${homeItem.title}</span>
|
</a>
|
<a href="#imageItem" class="tab-link">
|
<i class="icon f7-icons">images_fill</i>
|
<span class="tabbar-label">环境图片</span>
|
</a>
|
<a href="#videoItem" class="tab-link">
|
<i class="icon f7-icons">videocam_fill</i>
|
<span class="tabbar-label">环境视频</span>
|
</a>
|
</div>
|
</div>
|
<div class="tabs-animated-wrap" id="homeInfoTabs">
|
<div class="tabs">
|
<div v-for="battItem in battInfo" v-bind:id="battItem.id" v-bind:class="battItem.cla2" class="page-content tab">
|
<div class="card data-table">
|
<div class="card-content">
|
<table>
|
<thead>
|
<tr>
|
<th>数据类型</th>
|
<th>数据值</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td class="nowrap">机房ID</td>
|
<td>${battItem.data.StationId}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">机房名称</td>
|
<td>${battItem.data.StationName}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">机房IP</td>
|
<td>${battItem.data.StationIp}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">电池组ID</td>
|
<td>${battItem.data.BattGroupId}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">电池组名称</td>
|
<td>${battItem.data.BattGroupName}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">电池组序号</td>
|
<td>${battItem.data.GroupIndexInFBSDevice+1}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">电池组品牌</td>
|
<td>${battItem.data.BattProducer}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">电池组型号</td>
|
<td>${battItem.data.BattModel}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">单体电池属性</td>
|
<td>${getMonProp}</td>
|
</tr>
|
<tr>
|
<td>投入使用日期（y-M-d）</td>
|
<td>${new Date(battItem.data.BattInUseDate).format('yyyy-MM-dd')}</td>
|
</tr>
|
<tr>
|
<td>电池浮充电流阀值（A）</td>
|
<td>${battItem.data.BattFloatCurrent}</td>
|
</tr>
|
<tr>
|
<td>电池均充电压阀值（V）</td>
|
<td>${battItem.data.FloatVolLevel}</td>
|
</tr>
|
<tr>
|
<td>充放电设备信息</td>
|
<td>${getEquipeinfo}</td>
|
</tr>
|
<tr>
|
<td>负责人</td>
|
<td></td>
|
</tr>
|
<tr>
|
<td>安装人员</td>
|
<td>${battItem.data.install_user}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div v-for="homeItem in homeInfo" v-bind:id="homeItem .id" v-bind:class="homeItem .cla2" class="page-content tab">
|
<div class="card data-table">
|
<div class="card-content">
|
<table>
|
<thead>
|
<tr>
|
<th>数据类型</th>
|
<th>数据值</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>站点ID</td>
|
<td>${homeItem.data.stationid}</td>
|
</tr>
|
<tr>
|
<td>站点名称</td>
|
<td>${homeItem.data.stationName}</td>
|
</tr>
|
<tr>
|
<td>机房ID</td>
|
<td>${homeItem.data.stationId}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">所属组织</td>
|
<td>${homeItem.data.affiliation}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">数据来源</td>
|
<td>${homeItem.data.dataSources}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">站址类型</td>
|
<td>${homeItem.data.stationType}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">经纬度</td>
|
<td>${getHomePos}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">所在地址</td>
|
<td>${homeItem.data.stationAddr}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">站址状态</td>
|
<td>${getHomeStatus}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">维护单位</td>
|
<td>${homeItem.data.maintenanceCompany}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">站址场景</td>
|
<td>${getHomeEnv}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">站址产权</td>
|
<td>${getHomePower}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">使用单位</td>
|
<td>${homeItem.data.useUnit}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">物理站址编码</td>
|
<td>${homeItem.data.siteCode}</td>
|
</tr>
|
<tr>
|
<td>历史物理站址编码</td>
|
<td>${homeItem.data.historySiteCode}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">站址内部编码</td>
|
<td>${homeItem.data.siteInternalNumber}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">站址拼音简称</td>
|
<td>${homeItem.data.sitePinyinReferred}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">中文简称</td>
|
<td>${homeItem.data.siteChineseReferred}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">是否开通业务</td>
|
<td>${homeItem.data.isOpenBusiness}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">录入人员</td>
|
<td>${homeItem.data.schoolPersonnel}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">录入时间</td>
|
<td>${homeItem.data.entryTime}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">修改人</td>
|
<td>${homeItem.data.modifyPeople}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">修改时间</td>
|
<td>${homeItem.data.modifyTime}</td>
|
</tr>
|
<tr>
|
<td class="nowrap">备注</td>
|
<td>${homeItem.data.note}</td>
|
</tr>
|
<tr>
|
<td>站址接收标记及是否有效</td>
|
<td>${getHomeIsActive}</td>
|
</tr>
|
<tr>
|
<td>移动站址名称</td>
|
<td>${homeItem.data.siteNameCMCC}</td>
|
</tr>
|
<tr>
|
<td>电信站址名称</td>
|
<td>${homeItem.data.siteNameCTC}</td>
|
</tr>
|
<tr>
|
<td>联通站址名称</td>
|
<td>${homeItem.data.siteNameCUCC}</td>
|
</tr>
|
<tr>
|
<td>品牌</td>
|
<td>${homeItem.data.producer}</td>
|
</tr>
|
<tr>
|
<td>续航测算时间</td>
|
<td>${homeItem.data.lastTimeLong}</td>
|
</tr>
|
<tr>
|
<td>续航测算类型</td>
|
<td>${homeItem.data.lastTimeType}</td>
|
</tr>
|
<tr>
|
<td>续航发生时间</td>
|
<td>${homeItem.data.lastTimeDate}</td>
|
</tr>
|
<tr>
|
<td>共享情况</td>
|
<td>${homeItem.data.shareInfo}</td>
|
</tr>
|
<tr>
|
<td>运营商购买发电服务状态</td>
|
<td>${getHomeBuyStatus}</td>
|
</tr>
|
<tr>
|
<td>是否具备发电条件</td>
|
<td>${homeItem.data.isCanElectPower==1?'是':'否'}</td>
|
</tr>
|
<tr>
|
<td>上站路程</td>
|
<td>${homeItem.data.upperStationRoute}</td>
|
</tr>
|
<tr>
|
<td>上站难易程度</td>
|
<td>${homeItem.data.upperStationDifficult}</td>
|
</tr>
|
<tr>
|
<td>客户问题库未完成蓄电池维修</td>
|
<td>${homeItem.data.clienteleErrorService}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div id="imageItem" class="page-content tab">
|
<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" data-direction="vertical" class="swiper-container swiper-init demo-swiper">
|
<div class="swiper-pagination"></div>
|
<div class="swiper-wrapper">
|
<div v-for="image in images" class="swiper-slide" v-bind:class="image.cla"><img v-bind:src="image.src" v-bind:style="image.style"/></div>
|
</div>
|
</div>
|
</div>
|
<div id="videoItem" class="page-content tab">
|
<div id="ckPlayerList" class="hide-list">
|
<div class="list-container">
|
<div class="toggleShow">
|
<i class="icon f7-icons">chevron_left</i>
|
</div>
|
<div class="list-inner">
|
<ul></ul>
|
</div>
|
<div class="list-bg"></div>
|
</div>
|
</div>
|
<div id="ckPlayer"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
return {
|
data: function() {
|
var params = this.$route.params;
|
var cView = app.views.current;
|
return {
|
params: params
|
}
|
},
|
on: {
|
pageInit: function() {
|
var _this = this;
|
var params = this.params;
|
// 标签页导航
|
var toolbarV = new Vue({
|
el: '#homeInfoToolbar',
|
delimiters: ['${', '}'],
|
data:{
|
battInfo: [],
|
homeInfo: [],
|
images: []
|
}
|
});
|
|
// 标签页内容
|
var toolbarTabsV = new Vue({
|
el: '#homeInfoTabs',
|
delimiters: ['${', '}'],
|
data:{
|
battInfo: [],
|
homeInfo: [],
|
images: []
|
},
|
methods: {
|
|
},
|
computed: {
|
getMonProp: function() { // 单体电池属性
|
var _data = this.battInfo[0].data;
|
var monproperty = '标称容量:'+_data.MonCapStd+'AH'+'；标称单体电压:'+_data.MonVolStd+'V'
|
+'；标称内阻:'+_data.MonResStd.toFixed(3)+'mΩ'
|
+'；标称温度:'+_data.MonTmpStd+'℃'+'；单体数量:'+_data.MonCount+'节';
|
return monproperty;
|
},
|
getEquipeinfo: function() { // 充放电设备信息
|
var _data = this.battInfo[0].data;
|
var equipeinfo = '型号：'+_data.FBSDeviceName+'；ID：'+_data.FBSDeviceId
|
+'；IP：'+_data.FbsDeviceIp+'；BIndex：'+_data.GroupIndexInFBSDevice;
|
return equipeinfo;
|
},
|
getHomePos: function() { // 经纬度
|
var homeData = this.homeInfo[0].data;
|
var pos = '经度：'+Number(homeData.longitude.toFixed(5))+'；纬度：'+Number(homeData.latitude.toFixed(5));
|
return pos;
|
},
|
getHomeStatus: function() { // 站址状态
|
var homeData = this.homeInfo[0].data;
|
var blockedState = homeData.blockedState?'是': '否';
|
var stationstatus = '站址等级：'+homeData.stationLevel+'；维护状态：'+homeData.maintenanceState+'；封锁状态：'+blockedState;
|
return stationstatus;
|
},
|
getHomeEnv: function() { // 站址场景
|
var homeData = this.homeInfo[0].data;
|
var environment = '业务场景：'+homeData.businessScenario+'；覆盖场景：'+homeData.CoverScenario+'；站址地形：'+homeData.siteTerrain;
|
return environment;
|
},
|
getHomePower: function() { // 站址产权
|
var homeData = this.homeInfo[0].data;
|
var isShare = homeData.isShare?'是':'否';
|
var addrpower = '产权性质：'+homeData.propertyRights+'；（原）产权单位：'+homeData.propertyUnit+'；是否共享：'+isShare;
|
return addrpower;
|
},
|
getHomeIsActive: function() { // 站址接收标记及是否有效
|
var homeData = this.homeInfo[0].data;
|
var addrMark = homeData.siteReceivesMark?'是':'否';
|
var isEffe = homeData.siteValidity?'是':'否';
|
var isactive = '站址接收标记：'+addrMark+'；是否有效：'+isEffe;
|
return isactive;
|
},
|
getHomeBuyStatus: function() { // 运营商购买发电服务状态
|
var homeData = this.homeInfo[0].data;
|
var buystauts = "移动购买:"+(homeData.electPowerCMCC==1?'是':'否')+";电信购买:"
|
+(homeData.electPowerCTC==1?'是':'否')+";联通购买:"
|
+(homeData.electPowerCUCC==1?'是':'否');
|
return buystauts;
|
}
|
}
|
});
|
|
// 根据基站id查询基站信息
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'BattInfAction!serchBattAllInfoByStationId',
|
data: 'json='+JSON.stringify({StationId: params.stationid}),
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var battInfo = [];
|
var homeInfo = [];
|
if(rs.code == 1) {
|
var data = rs.data;
|
for(var i=0; i<data.length; i++){
|
var tmp = {
|
title: '电池组'+(i+1),
|
cla1: '',
|
cla2: '',
|
icon: 'document_text_fill',
|
id: 'battGroupItem'+i,
|
href: '#battGroupItem'+i,
|
data: data[i]
|
};
|
if(i==0) {
|
tmp.cla1 = 'tab-link-active';
|
tmp.cla2= 'tab-active';
|
}
|
battInfo.push(tmp);
|
}
|
// 判断是否添加基站的信息
|
if(data[0] && data[0].StationId_ex != '0') {
|
var homeData = data[0].binf_ex;
|
homeData.stationid= data[0].StationId_ex;
|
homeData.install_user = data[0].install_user;
|
var tmp={
|
title: '基站信息',
|
cla1: '',
|
cla2: '',
|
icon: 'home',
|
id: 'homeInfoItem',
|
href: '#homeInfoItem',
|
data: homeData
|
};
|
homeInfo.push(tmp);
|
}
|
}
|
// 设置机房的信息
|
toolbarV.battInfo = battInfo;
|
toolbarV.homeInfo = homeInfo;
|
|
toolbarTabsV.battInfo = battInfo;
|
toolbarTabsV.homeInfo = homeInfo;
|
}
|
});
|
// 默认显示空
|
updateCkPlayer('');
|
// 更新ckPlayer的视频源
|
function updateCkPlayer(url, isAutoPlay) {
|
var autoPlay = isAutoPlay?true:false;
|
// 视频浏览模块
|
var videoObject = {
|
container: '#ckPlayer', //容器的ID或className
|
variable: 'player', //播放函数名称
|
loop: false, //播放结束是否循环播放
|
autoplay: autoPlay,//是否自动播放
|
//poster: 'material/poster.jpg', //封面图片
|
preview: {},
|
drag: 'start', //拖动的属性
|
video: [
|
['', 'video/mp4']
|
]
|
};
|
videoObject.video = [[url, 'video/mp4']];
|
var player = new ckplayer(videoObject);
|
console.log()
|
}
|
|
// 根据基站StationId获取环境视频
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'MyFileAction!searchStationSource',
|
data: 'json='+JSON.stringify({StationId: params.stationid, VideoOrImage: 'video'}),
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var videoList = [];
|
if(rs.code == 1) {
|
var data = rs.data;
|
// 遍历data
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
fileName: _data.fileName,
|
active: false,
|
url:'../../stationsrc/'+params.stationid+'/video/'+_data.fileName
|
};
|
videoList.push(tmp);
|
}
|
}
|
if(videoList.length>0) {
|
videoList[0].active = true;
|
updateCkPlayer(videoList[0].url);
|
}
|
|
// 生成列表
|
createList($('#ckPlayerList .list-inner ul'), videoList);
|
}
|
});
|
|
|
// 根据基站StationId获取环境图片
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'MyFileAction!searchStationSource',
|
data: 'json='+JSON.stringify({StationId: params.stationid, VideoOrImage: 'image'}),
|
dataType: 'json',
|
success: function(res) {
|
// 获取容器的宽高比
|
var cInfo = getswiperWH();
|
var rs = JSON.parse(res.result);
|
var images = [];
|
if(rs.code == 1) {
|
var data = rs.data;
|
for(var i=0; i<data.length; i++){
|
var _data = data[i];
|
var ratio = Number((_data.ims.width/_data.ims.hight).toFixed(3));
|
var tmp = {
|
cla: '',
|
style: {},
|
src: '../../stationsrc/'+params.stationid+'/image/'+_data.fileName
|
};
|
if(cInfo.ratio<ratio) {
|
tmp.cla = 'w100';
|
var _rsHt = cInfo.width/ratio/2;
|
tmp.style={
|
'marginTop': '-'+_rsHt+'px'
|
}
|
}else {
|
tmp.cla = 'h100';
|
}
|
images.push(tmp);
|
}
|
}else {
|
var ratio = 1.065;
|
var tmp = {
|
cla: '',
|
style: {},
|
src: '../images/none.jpg'
|
};
|
if(cInfo.ratio<ratio) {
|
tmp.cla = 'w100';
|
var _rsHt = cInfo.width/ratio/2;
|
tmp.style={
|
'marginTop': '-'+_rsHt+'px'
|
}
|
}else {
|
tmp.cla = 'h100';
|
}
|
images.push(tmp);
|
}
|
toolbarTabsV.images = images;
|
}
|
});
|
// 获取容器的宽高比
|
function getswiperWH() {
|
var container = $('#imageItem');
|
var width = container.width();
|
var height = container.height();
|
var ratio = Number((width/height).toFixed(3));
|
return {
|
width: width,
|
height: height,
|
ratio: ratio
|
}
|
}
|
|
// 点击显示/隐藏视频列表
|
$('#ckPlayerList .toggleShow').click(function() {
|
$('#ckPlayerList').toggleClass('hide-list');
|
});
|
|
// 点击视频列表切换视频
|
$('#ckPlayerList .list-inner ul').on('click', 'li a', function() {
|
$('#ckPlayerList .list-inner ul li a').removeClass('active');
|
$(this).addClass('active');
|
var data = $(this).data('data');
|
updateCkPlayer(data.url, true);
|
$('#ckPlayerList .toggleShow').click();
|
});
|
// 生成列表
|
function createList(container, data) {
|
// 清空容器
|
container.text("");
|
// 遍历data的值
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var li = $('<li></li>');
|
var a= $('<a href="#"></a>');
|
if(_data.active) {
|
a.addClass('active');
|
}
|
a.text(_data.fileName);
|
a.data('data', _data);
|
li.append(a);
|
container.append(li);
|
}
|
}
|
}
|
}
|
}
|
</script>
|
