调整综合监控站台数据,及样式

This commit is contained in:
zyy 2020-03-20 11:20:13 +08:00
parent 912f0f206f
commit 3e14220cfc
5 changed files with 242 additions and 256 deletions

View File

@ -39,7 +39,7 @@
<div v-if="scope.$index == 9" class="table-9-top">状态比较</div>
</template>
</el-table-column>
<el-table-column prop="province" width="120">
<el-table-column prop="code" width="120">
<template slot="header">
<div style="width: 100%">模式</div>
<div style="width: 100%">编号</div>
@ -47,31 +47,31 @@
</el-table-column>
<el-table-column label="大系统模式表">
<el-table-column label="新风机">
<el-table-column prop="province" label="FAF-1" width="120" />
<el-table-column prop="city" label="FAF-2" width="120" />
<el-table-column prop="faf1" label="FAF-1" width="120" />
<el-table-column prop="faf2" label="FAF-2" width="120" />
</el-table-column>
<el-table-column label="组合式空调器">
<el-table-column prop="province" label="AHU-1" width="120" />
<el-table-column prop="city" label="AHU-2" width="120" />
<el-table-column prop="ahu1" label="AHU-1" width="120" />
<el-table-column prop="ahu2" label="AHU-2" width="120" />
</el-table-column>
<el-table-column label="回排风机">
<el-table-column prop="province" label="RAF/SEF-1" width="120" />
<el-table-column prop="city" label="RAF/SEF-2" width="120" />
<el-table-column prop="raf1" label="RAF/SEF-1" width="120" />
<el-table-column prop="raf2" label="RAF/SEF-2" width="120" />
</el-table-column>
<el-table-column label="风机1">
<el-table-column prop="province" label="MD-1" width="120" />
<el-table-column prop="province" label="MD-2" width="120" />
<el-table-column prop="province" label="MD-3" width="120" />
<el-table-column prop="province" label="MD-4" width="120" />
<el-table-column prop="province" label="MD-5" width="120" />
<el-table-column prop="province" label="MD-6" width="120" />
<el-table-column prop="province" label="MD-7" width="120" />
<el-table-column prop="province" label="MD-8" width="120" />
<el-table-column prop="province" label="MD-9" width="120" />
<el-table-column prop="province" label="MD-10" width="120" />
<el-table-column prop="province" label="MD-11" width="120" />
<el-table-column prop="province" label="MD-12" width="120" />
<el-table-column prop="province" label="MD-13" width="120" />
<el-table-column prop="md1" label="MD-1" width="120" />
<el-table-column prop="md1" label="MD-2" width="120" />
<el-table-column prop="md1" label="MD-3" width="120" />
<el-table-column prop="md1" label="MD-4" width="120" />
<el-table-column prop="md1" label="MD-5" width="120" />
<el-table-column prop="md1" label="MD-6" width="120" />
<el-table-column prop="md1" label="MD-7" width="120" />
<el-table-column prop="md1" label="MD-8" width="120" />
<el-table-column prop="md1" label="MD-9" width="120" />
<el-table-column prop="md1" label="MD-10" width="120" />
<el-table-column prop="md1" label="MD-11" width="120" />
<el-table-column prop="md1" label="MD-12" width="120" />
<el-table-column prop="md1" label="MD-13" width="120" />
</el-table-column>
</el-table-column>
</el-table>
@ -107,65 +107,95 @@ export default {
tableTitleStyle: 'text-align: center; height: 28px; padding: 0;background: #45607B;',
rowStyle: 'text-align: center;height: 28px; padding: 0; background: #45607B;',
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
code: '101',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '关闭'
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
code: '102',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
code: '103',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '关闭'
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
code: '104',
faf1: '打开',
faf2: '关闭',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
code: '105',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '关闭'
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
code: '106',
faf1: '打开',
faf2: '关闭',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
code: '107',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
code: '108',
faf1: '打开',
faf2: '关闭',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
zip: 200333
code: '',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
date: '',
name: '',
province: '',
city: '',
zip: ''
code: '',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}]
};
},

View File

@ -1,82 +1,93 @@
<template>
<div>
<div style="position: absolute; left: 48%; top: 15%;font-size: 20px;color: #9EEBEF;">语音广播</div>
<div class="area-selection">
<el-row><div style="margin-top: 10px;margin-bottom: 5px; color: #9EEBEF;">特定区域</div></el-row>
<el-row><div class="area-selection-button" @click="selectedAll">全线</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('站厅')">全站厅</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('上行站台')">全上行站台</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('下行站台')">全下行站台</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('办公区')">全办公区</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('出入口')">全出入口</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('换乘通道')">全换乘通道</div></el-row>
</div>
<div class="broadcast-form">
<div :key="i" v-for="(item,i) in verticalHeader" :style="{width: tableWidth+'px'}" class="iscs-pa-table">
<div class="left-header">{{ item.name }}</div>
<div style="position: relative; left: 5%;">
<div :key="j" v-for="(it, j) in stationList" class="table-grid">
<div v-if="item.type==='header'" class="pa-table-header" @click="selectedStation(it)">
<div style="cursor: default;">{{ it }}</div>
</div>
<div v-else>
<div class="pa-table-content" @click="clickArea(i,j)">
<div class="pa-table-content-inside" :style="{background: selectedAreaList.includes(i + '-' + j)? '#2EFF74':'#CDCDCD'}" />
<div style="margin: 20px auto 0;text-align: center;font-size: 20px;color: #9EEBEF;">语音广播</div>
<div style="overflow: hidden;">
<div class="area-selection">
<el-row><div style="margin-top: 10px;margin-bottom: 5px; color: #9EEBEF;">特定区域</div></el-row>
<el-row><div class="area-selection-button" @click="selectedAll">全线</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('站厅')">全站厅</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('上行站台')">全上行站台</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('下行站台')">全下行站台</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('办公区')">全办公区</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('出入口')">全出入口</div></el-row>
<el-row><div class="area-selection-button" @click="selectedBatch('换乘通道')">全换乘通道</div></el-row>
</div>
<div class="broadcast-form">
<div style="width: 120px; height: 300px; float: left; position: absolute; top: 20px;">
<div v-for="(item,i) in verticalHeader" :key="i" :style="{top: i * 31.5 +'px'}" class="left-header">{{ item.name }}</div>
</div>
<div style="float: left; overflow-x: auto; width: 100%; height: 314px;">
<div v-for="(item,i) in verticalHeader" :key="i" :style="{width: tableWidth+'px'}" class="iscs-pa-table">
<div style="position: relative; left: 5%;">
<div v-for="(it, j) in stationList" :key="j" class="table-grid">
<div v-if="item.type==='header'" class="pa-table-header" @click="selectedStation(it)">
<div style="cursor: default;">{{ it }}</div>
</div>
<div v-else>
<div class="pa-table-content" @click="clickArea(i,j)">
<div class="pa-table-content-inside" :style="{background: selectedAreaList.includes(i + '-' + j)? '#2EFF74':'#CDCDCD'}" />
</div>
<div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">0</div>
</div>
</div>
<div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">0</div>
</div>
</div>
</div>
</div>
<div style="float: right; width: 11%; margin-right: 1%;margin-top: 63px;">
<div class="broadcast-mode">
<el-row>
<el-col :span="12"><div style="height: 40px;text-align: center; background: #000088;color: #fff;line-height: 40px">实时广播</div></el-col>
<el-col :span="12"><div class="broadcast-mode-button">广播</div></el-col>
</el-row>
</div>
<div class="broadcast-operations">
<el-row>
<el-col :span="12"><div style="height: 80px;text-align: center; background: #000088;color: #fff;padding-top: 30px">预备<br>广播</div></el-col>
<el-col :span="12">
<div class="broadcast-mode-button" @click="selectedVideoMode('common')">
<div class="pa-check-box" :style="{background: videoMode==='common'?'#2EFF74':'#CDCDCD'}" />
<div style="position: relative; left: 5px;display: inline-block;">普通预录</div>
</div>
<br>
<div class="broadcast-mode-button" @click="selectedVideoMode('emergency')">
<div class="pa-check-box" :style="{background: videoMode==='emergency'?'#2EFF74':'#CDCDCD'}" />
<div style="position: relative; left: 5px;display: inline-block; color: #f00;">紧急预录</div>
</div>
</el-col>
</el-row>
<el-row style="padding-bottom: 10px">
<el-col :span="12">
<div class="broadcast-mode-button" @click="showBroadcastContent">广播内容</div>
</el-col>
<el-col :span="12">
<div class="broadcast-mode-button">广播停止</div>
</el-col>
</el-row>
</div>
<div class="background-music">
<el-row>
<el-col :span="12"><div style="height: 40px;text-align: center; background: #000088;color: #fff;line-height: 40px">背景音乐</div></el-col>
</el-row>
<el-row style="padding-bottom: 10px">
<el-col :span="12"><div class="broadcast-mode-button">播放音乐</div></el-col>
<el-col :span="12"><div class="broadcast-mode-button">停止音乐</div></el-col>
</el-row>
</div>
</div>
</div>
<div class="broadcast-mode">
<el-row>
<el-col :span="12"><div style="height: 40px;text-align: center; background: #000088;color: #fff;line-height: 40px">实时广播</div></el-col>
<el-col :span="12"><div class="broadcast-mode-button">广播</div></el-col>
</el-row>
<div>
<div class="pa-grey-box" />
<div class="pa-statements">
<state-table />
</div>
</div>
<div class="broadcast-operations">
<el-row>
<el-col :span="12"><div style="height: 80px;text-align: center; background: #000088;color: #fff;padding-top: 30px">预备<br>广播</div></el-col>
<el-col :span="12">
<div class="broadcast-mode-button" @click="selectedVideoMode('common')">
<div class="pa-check-box" :style="{background: videoMode==='common'?'#2EFF74':'#CDCDCD'}" />
<div style="position: relative; left: 5px;display: inline-block;">普通预录</div>
</div>
<br>
<div class="broadcast-mode-button" @click="selectedVideoMode('emergency')">
<div class="pa-check-box" :style="{background: videoMode==='emergency'?'#2EFF74':'#CDCDCD'}" />
<div style="position: relative; left: 5px;display: inline-block; color: #f00;">紧急预录</div>
</div>
</el-col>
</el-row>
<el-row style="padding-bottom: 10px">
<el-col :span="12">
<div class="broadcast-mode-button" @click="showBroadcastContent">广播内容</div>
</el-col>
<el-col :span="12">
<div class="broadcast-mode-button">广播停止</div>
</el-col>
</el-row>
</div>
<div class="background-music">
<el-row>
<el-col :span="12"><div style="height: 40px;text-align: center; background: #000088;color: #fff;line-height: 40px">背景音乐</div></el-col>
</el-row>
<el-row style="padding-bottom: 10px">
<el-col :span="12"><div class="broadcast-mode-button">播放音乐</div></el-col>
<el-col :span="12"><div class="broadcast-mode-button">停止音乐</div></el-col>
</el-row>
</div>
<div class="pa-grey-box" />
<div class="pa-statements">
<state-table />
</div>
<voice-broadcast ref="voiceBroadcast" />
<voice-broadcast ref="voiceBroadcast" />
</div>
</template>
<script>
import { getByGroupStationList } from '@/api/jmap/map';
import MusicIcon from '@/assets/iscs_icon/music_icon.png';
import StateTable from './stateTable';
import VoiceBroadcast from './voiceBroadcast';
@ -100,7 +111,7 @@ export default {
],
musicIcon: MusicIcon,
selectedAreaList: [],
stationList: ['会展中心站', '世纪大道站', '交通大学站', '市图书馆站', '中心医院站', '未来路站', '火车站', '人民广场站', '体育中心站'],
stationList: [],
videoMode: 'common'
};
},
@ -109,6 +120,18 @@ export default {
return this.stationList.length * 120 + 80;
}
},
async created () {
// 线
const res = await getByGroupStationList(this.$route.query.group);
if (res.code == 200) {
this.stationList = [];
res.data.forEach(station => {
if (!station.depot) {
this.stationList.push(station.name);
}
});
}
},
methods: {
clickArea(i, j) {
if (this.selectedAreaList.includes(i + '-' + j)) {
@ -210,9 +233,9 @@ export default {
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
width: 5%;
position: absolute;
top: 200px;
left: 1%;
float: left;
margin-top: 63px;
margin-left: 1%;
}
.area-selection-button{
width: 90%;
@ -242,12 +265,13 @@ export default {
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
width: 80%;
height: 40%;
top: 200px;
position: absolute;
left: 7%;
height: 340px;
margin-left: 10px;
float: left;
margin-top: 63px;
overflow-x: auto;
padding-top: 20px;
position: relative;
}
.table-grid{
width: 120px;
@ -258,14 +282,15 @@ export default {
}
.left-header{
width: 120px;
height: 30px;
height: 32px;
display: inline-block;
padding-left: 20px;
font-size: 14px;
text-align: left;
color: #A2E8EB;
position:fixed;
left: 7.15%;
position: absolute;
top: 0;
left: 0;
background: #45607B;
z-index: 10;
}
@ -309,11 +334,12 @@ export default {
border-bottom: 2px solid #898888;
}
.pa-grey-box{
position: absolute;
left: 4%;
top: 64%;
width: 81%;
height: 30%;
float: left;
margin-left: 5%;
margin-top: 10px;
top: 500px;
width: 78%;
height: 240px;
background: #DDDDDD;
border-top: 3px solid #898888;
border-left: 3px solid #898888;
@ -321,24 +347,21 @@ export default {
border-bottom: 3px solid #fff;
}
.pa-statements{
position: absolute;
left: 86%;
top: 64%;
width: 13%;
float: right;
margin-right: 1%;
margin-top: 50px;
width: 15%;
height: 30%;
font-size: 12px;
color: #fff;
}
.broadcast-mode{
position: absolute;
left: 88%;
top: 25%;
border-top: 3px solid #898888;
border-left: 3px solid #898888;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
width: 11%;
font-size: 12px;
margin-bottom: 13px;
}
.broadcast-mode-button{
height: 30px;
@ -364,16 +387,13 @@ export default {
}
}
.broadcast-operations{
position: absolute;
left: 88%;
top: 32%;
border-top: 3px solid #898888;
border-left: 3px solid #898888;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
width: 11%;
font-size: 12px;
background: #778899;
margin-bottom: 13px;
}
.pa-check-box{
position: relative;
@ -388,14 +408,10 @@ export default {
border-bottom: 2px solid #fff;
}
.background-music{
position: absolute;
left: 88%;
top: 48%;
border-top: 3px solid #898888;
border-left: 3px solid #898888;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
width: 11%;
font-size: 12px;
background: #778899;
}

View File

@ -1,5 +1,5 @@
<template>
<div>
<div style="height: 100%; overflow-y: auto;">
<center-home v-if="currentSystem === 'center'" />
<station-home v-else-if="currentSystem === 'local'" />
</div>

View File

@ -11,7 +11,7 @@
<emergency-release v-else-if="mode === 'EmergencyRelease'" />
<controlBAS v-else-if="mode === 'controlBAS'" />
<controlPermissionBAS v-else-if="mode === 'controlPermissionBAS'" />
<mainScreenPA v-else-if="mode === 'mainScreenPA'" />
<!-- <mainScreenPA v-else-if="mode === 'mainScreenPA'" /> -->
<radioListeningPA v-else-if="mode === 'radioListeningPA'" />
<timePreviewPA v-else-if="mode === 'timePreviewPA'" />
<controlCCTV v-else-if="mode === 'controlCCTV'" />
@ -39,7 +39,7 @@ import StationNetwork from './pis/stationNetwork';
import EmergencyRelease from './pis/emergencyRelease';
import controlBAS from './bas/controlBAS';
import controlPermissionBAS from './bas/controlPermissionBAS';
import mainScreenPA from './pa/mainScreenPA';
// import mainScreenPA from './pa/mainScreenPA';
import radioListeningPA from './pa/radioListeningPA';
import timePreviewPA from './pa/timePreviewPA';
import controlCCTV from './cctv/controlCCTV';
@ -66,7 +66,7 @@ export default {
EmergencyRelease,
controlBAS,
controlPermissionBAS,
mainScreenPA,
// mainScreenPA,
radioListeningPA,
timePreviewPA,
controlCCTV,

View File

@ -84,6 +84,7 @@
</div>
</template>
<script>
import { getByGroupStationList } from '@/api/jmap/map';
import InfoBroadcast from './infoBroadcast';
export default {
name:'MainScreen',
@ -92,92 +93,31 @@ export default {
},
data() {
return {
stationList:[
{
stationName:'会展中心站',
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
},
{
stationName:'世纪大道站',
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
},
{
stationName:'交通大学站',
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
},
{
stationName:'市图书馆站',
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
},
{
stationName:'中心医院站',
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
},
{
stationName:'未来路站',
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
},
{
stationName:'火车站',
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
},
{
stationName:'人民广场站',
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
},
{
stationName:'体育中心站',
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
}
],
stationList:[],
selectedAreaList: []
};
},
async created () {
// 线
const res = await getByGroupStationList(this.$route.query.group);
if (res.code == 200) {
this.stationList = [];
res.data.forEach(station => {
if (!station.depot) {
const param = {
stationName: station.name,
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
};
this.stationList.push(param);
}
});
}
},
methods:{
showInfoBrroadcast() {
this.$refs.infoBroadcast.doShow();
@ -318,7 +258,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
vertical-align: top;
}
.screen_status_active::after{content:'';border-top: 2px solid #a6a2a6;border-left: 2px solid #a5aca5;border-right: 2px solid #ececec;border-bottom: 2px solid #e4e4e4;background: #00ff00;min-width: 10px;height: 10px;display: inline-block;vertical-align: top;}
.screen_left_text_group{width:180px;padding: 0px 10px 10px 10px;font-size: 14px;color: #9de4e8;display: inline-block;}
.screen_left_text_group{width:210px;padding: 0px 10px 10px 10px;font-size: 14px;color: #9de4e8;display: inline-block;}
.each_data_info{margin-top:10px;height:20px;}
.screen_right_group{display: inline-block;vertical-align: top;font-size:0;overflow-x: auto;min-height:100%;}
.each_station_info{width:130px;display: inline-block;vertical-align:top;padding-right: 10px;}