Merge branch 'dev' of https://git.code.tencent.com/lian-cbtc/jl-client into dev
This commit is contained in:
zyy
commit
ab0728d973
@ -21,8 +21,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="pa-table-content" @click="clickArea(i,j)">
|
<div class="pa-table-content" @click="clickArea(i,j)">
|
||||||
<div v-if="isSelected(i, j)" class="pa-table-content-inside-selected" />
|
<div class="pa-table-content-inside" :style="{background: selectedAreaList.includes(i + '-' + j)? '#2EFF74':'#CDCDCD'}" />
|
||||||
<div v-else class="pa-table-content-inside" />
|
|
||||||
</div>
|
</div>
|
||||||
<div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">0</div>
|
<div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">0</div>
|
||||||
</div>
|
</div>
|
||||||
@ -119,17 +118,12 @@ export default {
|
|||||||
this.selectedAreaList.push(i + '-' + j);
|
this.selectedAreaList.push(i + '-' + j);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isSelected(i, j) {
|
|
||||||
return this.selectedAreaList.includes(i + '-' + j);
|
|
||||||
},
|
|
||||||
selectedAll() {
|
selectedAll() {
|
||||||
const flag = this.checkSelectedAll();
|
const flag = this.checkSelectedAll();
|
||||||
this.selectedAreaList = [];
|
this.selectedAreaList = [];
|
||||||
for (let i = 1; i < this.verticalHeader.length; i++) {
|
for (let i = 1; i < this.verticalHeader.length; i++) {
|
||||||
for (let j = 0; j < this.stationList.length; j++) {
|
for (let j = 0; j < this.stationList.length; j++) {
|
||||||
if (flag) {
|
if (!flag) {
|
||||||
this.selectedAreaList = [];
|
|
||||||
} else {
|
|
||||||
this.selectedAreaList.push(i + '-' + j);
|
this.selectedAreaList.push(i + '-' + j);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -314,19 +308,6 @@ export default {
|
|||||||
border-right: 2px solid #898888;
|
border-right: 2px solid #898888;
|
||||||
border-bottom: 2px solid #898888;
|
border-bottom: 2px solid #898888;
|
||||||
}
|
}
|
||||||
.pa-table-content-inside-selected{
|
|
||||||
height: 10px;
|
|
||||||
width: 10px;
|
|
||||||
margin: auto;
|
|
||||||
background:#27FF27;
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
border-top: 2px solid #fff;
|
|
||||||
border-left: 2px solid #fff;
|
|
||||||
border-right: 2px solid #898888;
|
|
||||||
border-bottom: 2px solid #898888;
|
|
||||||
}
|
|
||||||
.pa-grey-box{
|
.pa-grey-box{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 4%;
|
left: 4%;
|
||||||
|
|||||||
@ -5,11 +5,14 @@
|
|||||||
<div class="time-cctv-top-inner">
|
<div class="time-cctv-top-inner">
|
||||||
<div class="time-cctv-top-lefttop">选择显示终端</div>
|
<div class="time-cctv-top-lefttop">选择显示终端</div>
|
||||||
<div class="time-cctv-top-left1">
|
<div class="time-cctv-top-left1">
|
||||||
<div class="each-time-cctv-top-btn">单画面</div>
|
<div style="display: inline-block;">
|
||||||
<div class="each-time-cctv-top-btn">站厅<br/>默认画面</div>
|
<div class="each-time-cctv-top-btn">单画面</div>
|
||||||
<div class="each-time-cctv-top-btn active">四画面</div>
|
<div class="each-time-cctv-top-btn">站厅<br/>默认画面</div>
|
||||||
<div class="each-time-cctv-top-btn">站台<br/>默认画面</div>
|
<div class="each-time-cctv-top-btn active">四画面</div>
|
||||||
<div class="each-time-cctv-top-btn">大屏</div>
|
<div class="each-time-cctv-top-btn">站台<br/>默认画面</div>
|
||||||
|
<div class="each-time-cctv-top-btn">大屏</div>
|
||||||
|
</div>
|
||||||
|
<div class="each-time-cctv-top-btn1">停止时序</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="time-cctv-top-right1">
|
<div class="time-cctv-top-right1">
|
||||||
<div class="time-cctv-top-right1-line">
|
<div class="time-cctv-top-right1-line">
|
||||||
@ -46,19 +49,84 @@
|
|||||||
header-cell-class-name="time_cctv_thead"
|
header-cell-class-name="time_cctv_thead"
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
border
|
border
|
||||||
style="width: 100%"
|
style="width: 100%;overflow-y:auto;border: none;"
|
||||||
|
height="260px"
|
||||||
>
|
>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="编号"
|
label="编号"
|
||||||
type="index"
|
type="index"
|
||||||
:index="indexMethod"
|
:index="indexMethod"
|
||||||
width="40"
|
width="80"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="describe"
|
||||||
|
label="描述"
|
||||||
/>
|
/>
|
||||||
</el-table>
|
</el-table>
|
||||||
<div class="time-cctv-content-btn1">启动时序</div>
|
<div class="time-cctv-content-btn1Out">
|
||||||
|
<div class="time-cctv-content-btn1">启动时序</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-cctv-content-bottomR">
|
||||||
|
<div class="time-cctv-content-bottomRT">车站可编辑时序列表</div>
|
||||||
|
<div class="time-cctv-content-bottomRTB">
|
||||||
|
<div class="time-cctv-content-bottomRTBL">
|
||||||
|
<el-table
|
||||||
|
cell-class-name="time_cctv_column"
|
||||||
|
header-cell-class-name="time_cctv_thead"
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
style="width: 100%;overflow-y:auto;border: none;"
|
||||||
|
height="260px"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
label="编号"
|
||||||
|
type="index"
|
||||||
|
:index="indexMethod"
|
||||||
|
width="80"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="describe"
|
||||||
|
label="描述"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
<div class="time-cctv-content-btn1Out">
|
||||||
|
<div class="time-cctv-content-btn1">启动时序</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-cctv-content-bottomRTBR">
|
||||||
|
<div class="time-cctv-content-bottomRTBRtitle">可编辑序列内容</div>
|
||||||
|
<div class="time-cctv-content-bottomRTBRt1">
|
||||||
|
<div class="time-cctv-content-bottomRTBRlabel1">序列编号</div>
|
||||||
|
<input type="text" class="time-cctv-content-bottomRTBRtext">
|
||||||
|
</div>
|
||||||
|
<div class="time-cctv-content-bottomRTBRt1">
|
||||||
|
<div class="time-cctv-content-bottomRTBRlabel1">序列描述</div>
|
||||||
|
<input type="text" class="time-cctv-content-bottomRTBRtext">
|
||||||
|
</div>
|
||||||
|
<el-table
|
||||||
|
cell-class-name="time_cctv_column"
|
||||||
|
header-cell-class-name="time_cctv_thead1"
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
style="width: 100%;overflow-y:auto;border:none;margin-top:10px;"
|
||||||
|
height="230px"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
label="位置描述"
|
||||||
|
type="index"
|
||||||
|
:index="indexMethod"
|
||||||
|
width="120"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="describe"
|
||||||
|
label="时间（秒）"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="time-cctv-content-bottomR"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="time-cctv-bottom">
|
<div class="time-cctv-bottom">
|
||||||
@ -77,7 +145,19 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableData:[
|
||||||
|
{describe:''},
|
||||||
|
{describe:''}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
indexMethod(index) {
|
||||||
|
return index + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -130,6 +210,23 @@ justify-content:center;text-align:center;
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
}
|
}
|
||||||
|
.each-time-cctv-top-btn1{
|
||||||
|
margin-left:10px;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
width:65px;
|
||||||
|
height:40px;font-size:12px;
|
||||||
|
background:#ef8634;
|
||||||
|
justify-content:center;
|
||||||
|
text-align:center;
|
||||||
|
border-top: 2px solid #fefbfe;
|
||||||
|
border-left: 2px solid #e7d9e5;
|
||||||
|
border-right: 2px solid #a85321;
|
||||||
|
border-bottom: 2px solid #502b53;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight:bold;
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
.each-time-cctv-top-btn.active{
|
.each-time-cctv-top-btn.active{
|
||||||
background: #EBB570;
|
background: #EBB570;
|
||||||
border-top: 2px solid #795B31;
|
border-top: 2px solid #795B31;
|
||||||
@ -211,16 +308,86 @@ justify-content:center;text-align:center;
|
|||||||
padding: 5px 0px;
|
padding: 5px 0px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
.time-cctv-content-bottom{display:flex;}
|
.time-cctv-content-bottom{display:flex;padding-bottom:10px;}
|
||||||
.time-cctv-content-bottomL{
|
.time-cctv-content-bottomL{
|
||||||
width: 300px;
|
width: 300px;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
.time_cctv_column{}
|
.time_cctv_column{}
|
||||||
.time_cctv_thead{}
|
.time_cctv_thead{}
|
||||||
.time-cctv-content-btn1{}
|
.time-cctv-content-btn1Out{background:#000077;padding-top:10px;padding-bottom:10px;display: inline-block;
|
||||||
.time-cctv-content-bottomR{}
|
width: 100%;}
|
||||||
.time-cctv-content-bottomLT{text-align:center;color:#56E5DE;font-size:13px;margin-top:5px;
|
.time-cctv-content-btn1{color:#000;font-size:12px;padding:8px 0px;
|
||||||
|
width:60px;text-align:center;
|
||||||
|
background: #ef8634;
|
||||||
|
margin-right:10px;
|
||||||
|
border-top: 2px solid #fefbfe;
|
||||||
|
border-left: 2px solid #e7d9e5;
|
||||||
|
border-right: 2px solid #a85321;
|
||||||
|
border-bottom: 2px solid #502b53;
|
||||||
|
font-weight:bold;
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
.time-cctv-content-bottomR{width:560px;
|
||||||
|
margin-left:300px;
|
||||||
|
}
|
||||||
|
.time-cctv-content-bottomLT{text-align:center;color:#56E5DE;
|
||||||
|
font-size:13px;
|
||||||
|
margin-top:5px;font-weight:bold;
|
||||||
margin-bottom: 5px;}
|
margin-bottom: 5px;}
|
||||||
.time-cctv-content-bottomLB{}
|
.time-cctv-content-bottomLB{
|
||||||
|
border-top: 2px solid #8c8a89;
|
||||||
|
border-left: 2px solid #8c8a89;
|
||||||
|
border-right: 2px solid #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
padding:2px;
|
||||||
|
}
|
||||||
|
.time-cctv-content-bottomRT{text-align:center;
|
||||||
|
color: #56E5DE;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-top: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.time-cctv-content-bottomRTB{
|
||||||
|
border-top: 2px solid #8c8a89;
|
||||||
|
border-left: 2px solid #8c8a89;
|
||||||
|
border-right: 2px solid #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
padding:4px;
|
||||||
|
display:flex;
|
||||||
|
}
|
||||||
|
.time-cctv-content-bottomRTBL{width:250px;}
|
||||||
|
.time-cctv-content-bottomRTBR{
|
||||||
|
margin-left: 50px;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
.time-cctv-content-bottomRTBRtitle{
|
||||||
|
background: #000077;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
padding:3px 0px;
|
||||||
|
font-size: 13px;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
.time-cctv-content-bottomRTBRt1{
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.time-cctv-content-bottomRTBRlabel1{
|
||||||
|
font-size: 13px;
|
||||||
|
color: #56E5DE;
|
||||||
|
margin-right: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.time-cctv-content-bottomRTBRtext{
|
||||||
|
height:20px;
|
||||||
|
width:180px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.el-table .time_cctv_column .cell{font-size:12px;}
|
||||||
|
.el-table td.time_cctv_column{padding:5px 0px;}
|
||||||
|
.el-table .time_cctv_thead{background:#000077;color:#fff;padding:0px 0px;text-align:left;font-size: 12px;}
|
||||||
|
.el-table .time_cctv_thead1{background:#5c48f8;color:#fff;padding:0px 0px;text-align:left;font-size: 12px;}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,10 +1,180 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="edit-cctv-box">
|
||||||
车站时序编辑
|
<div class="title-name">CCTV时序编辑</div>
|
||||||
|
<div class="edit-cctv-top">
|
||||||
|
<div class="edit-cctv-top-title"></div>
|
||||||
|
<div class="edit-cctv-top-content">
|
||||||
|
<div class="edit-cctv-top-contentL">
|
||||||
|
<el-table
|
||||||
|
cell-class-name="edit_cctv_column"
|
||||||
|
header-cell-class-name="edit_cctv_thead"
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
style="width: 100%;overflow-y:auto;border:none;margin-top:10px;"
|
||||||
|
height="230px"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
label="编号"
|
||||||
|
type="index"
|
||||||
|
:index="indexMethod"
|
||||||
|
width="60"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="describe"
|
||||||
|
label="描述"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="edit-cctv-top-contentC"></div>
|
||||||
|
<div class="edit-cctv-top-contentR">
|
||||||
|
<el-table
|
||||||
|
cell-class-name="edit_cctv_column"
|
||||||
|
header-cell-class-name="edit_cctv_thead"
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
style="width: 100%;overflow-y:auto;border:none;margin-top:10px;"
|
||||||
|
height="230px"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
label="车站"
|
||||||
|
type="index"
|
||||||
|
:index="indexMethod"
|
||||||
|
width="60"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
width="100"
|
||||||
|
prop="describe"
|
||||||
|
label="位置描述"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="describe"
|
||||||
|
label="时间（秒）"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="edit-cctv-bottom">
|
||||||
|
<div class="edit-cctv-bottom-title"></div>
|
||||||
|
<div class="edit-cctv-bottom-content">
|
||||||
|
<div class="edit-cctv-bottom-contentL"></div>
|
||||||
|
<div class="edit-cctv-bottom-contentR"></div>
|
||||||
|
</div>
|
||||||
|
<div class="edit-cctv-bottom-foot">
|
||||||
|
<div class="edit-cctv-bottom-footL">信息提示：</div>
|
||||||
|
<div class="edit-cctv-bottom-footC"></div>
|
||||||
|
<div class="edit-cctv-bottom-footR">
|
||||||
|
<div class="edit-cctv-bottom-footRbtn">车站时序</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableData:[
|
||||||
|
{describe:''},
|
||||||
|
{describe:''}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
indexMethod(index) {
|
||||||
|
return index + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.edit-cctv-box{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
.title-name{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-top: 30px;
|
||||||
|
color: #56E5DE;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.edit-cctv-top{width:96%;margin-left:2%;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-top: 2px solid #8c8a89;
|
||||||
|
border-left: 2px solid #8c8a89;
|
||||||
|
border-right: 2px solid #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
}
|
||||||
|
.edit-cctv-top-title{
|
||||||
|
height:20px;
|
||||||
|
background:#071c77;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
.edit-cctv-top-content{
|
||||||
|
width:700px;
|
||||||
|
margin: 10px auto;
|
||||||
|
display:flex
|
||||||
|
}
|
||||||
|
.edit-cctv-top-contentL{
|
||||||
|
width:300px;
|
||||||
|
}
|
||||||
|
.edit-cctv-top-contentC{
|
||||||
|
width:100px;
|
||||||
|
}
|
||||||
|
.edit-cctv-top-contentR{
|
||||||
|
width:300px;
|
||||||
|
}
|
||||||
|
.edit-cctv-bottom{
|
||||||
|
width:96%;margin-left:2%;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-top: 2px solid #8c8a89;
|
||||||
|
border-left: 2px solid #8c8a89;
|
||||||
|
border-right: 2px solid #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
}
|
||||||
|
.edit-cctv-bottom-title{
|
||||||
|
height:20px;
|
||||||
|
background:#071c77;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
.edit-cctv-bottom-foot{margin:10px 0px;display:flex;}
|
||||||
|
.edit-cctv-bottom-footL{
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #061c77;
|
||||||
|
width: 26%;
|
||||||
|
}
|
||||||
|
.edit-cctv-bottom-footC{
|
||||||
|
width: 45%;
|
||||||
|
height: 20px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.edit-cctv-bottom-footR{
|
||||||
|
width:27%;
|
||||||
|
font-size:12px;
|
||||||
|
}
|
||||||
|
.edit-cctv-bottom-footRbtn{margin-right:10px;float:right;
|
||||||
|
width: 80px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-top: 3px solid #f9f9f9;
|
||||||
|
border-left: 3px solid #f6f8f8;
|
||||||
|
border-right: 3px solid #565656;
|
||||||
|
padding: 2px 0px;
|
||||||
|
border-bottom: 3px solid #565656;
|
||||||
|
background: #cccccc;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.edit-cctv-bottom-content{}
|
||||||
|
.edit-cctv-bottom-contentL{}
|
||||||
|
.edit-cctv-bottom-contentR{}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.el-table .edit_cctv_column .cell{font-size:12px;}
|
||||||
|
.el-table td.edit_cctv_column{padding:5px 0px;}
|
||||||
|
.el-table .edit_cctv_thead{background:#5c48f8;color:#fff;padding:0px 0px;text-align:left;font-size: 12px;}
|
||||||
|
</style>
|
||||||
|
|||||||
437
src/views/iscs/iscsSystem/config/pis/infoBroadcast.vue
Normal file
437
src/views/iscs/iscsSystem/config/pis/infoBroadcast.vue
Normal file
@ -0,0 +1,437 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-dialogDrag
|
||||||
|
:visible.sync="visible"
|
||||||
|
width="800px"
|
||||||
|
:before-close="doClose"
|
||||||
|
class="iscs-voice-broadcast-dialog"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="dialog-header">信息广播</div>
|
||||||
|
<div class="iscs-pis-dialog-info">
|
||||||
|
<el-radio-group v-model="addModel.infoType">
|
||||||
|
<el-radio label="realTime">实时信息</el-radio>
|
||||||
|
<el-radio label="common">普通信息</el-radio>
|
||||||
|
<el-radio label="emergency" class="iscs-pis-dialog-emergencyInfo">紧急信息</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
<div v-show="addModel.infoType !== 'realTime'" class="secondary-title">{{ this.message[this.addModel.infoType].title }}</div>
|
||||||
|
<div v-show="addModel.infoType !== 'realTime'" class="information-description-box">
|
||||||
|
<div v-for="(item,index) in message[addModel.infoType].infoList" :key="index">
|
||||||
|
<div class="information-box">{{item.title}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="addModel.infoType === 'realTime'">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="20">
|
||||||
|
<div>
|
||||||
|
<div class="secondary-title">实时信息显示内容</div>
|
||||||
|
<div class="information-context-box">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="4"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="addModel.infoContent">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3" :offset="1">
|
||||||
|
<div class="iscs-pis-dialog-info" style="text-align: left">
|
||||||
|
<div style="margin-bottom: 20px; font-size: 16px; margin-top: 10px;">优先等级</div>
|
||||||
|
<el-radio v-model="addModel.priority" style="margin-bottom: 20px;" label="common">普通</el-radio>
|
||||||
|
<el-radio v-model="addModel.priority" label="emergency">紧急</el-radio>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 10px">
|
||||||
|
<div style="display: inline;">名称：</div>
|
||||||
|
<input class="pis-dialog-input" style="width: 550px;" v-model="addModel.infoTitle"/>
|
||||||
|
<input v-show="addModel.infoType !== 'emergency'" class="pis-dialog-input" style="width: 140px;" v-model="addModel.infoTime"/>
|
||||||
|
<div v-show="addModel.infoType !== 'emergency'" style="display: inline;">次</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="addModel.infoType !== 'realTime'" class="secondary-title" style="margin-top: 10px">{{ this.message[this.addModel.infoType].title + '内容显示' }}</div>
|
||||||
|
<div v-show="addModel.infoType !== 'realTime'" class="information-context-box">站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类</div>
|
||||||
|
<div v-show="addModel.infoType === 'realTime'" class="information-description-box" style="margin-top: 15px;">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="6" style="border-right:2px solid #898888; min-height: 100px">
|
||||||
|
<div v-for="(item,index) in message[addModel.infoType].infoList" :key="index">
|
||||||
|
<div class="information-box" @click="selectedRealTimeInfo(item)">{{item.title}}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<div>{{ showRealTimeInfo }}</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<div class="button-group">
|
||||||
|
<el-select v-show="addModel.infoType === 'realTime'" v-model="value" placeholder="信息选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in infoList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<div v-show="addModel.infoType === 'realTime'" class="pis-button">储存</div>
|
||||||
|
<div class="button-group-content" :style="{left: addModel.infoType ==='realTime'?'280px':'550px'}">
|
||||||
|
<div class="pis-button">设定中</div>
|
||||||
|
<div class="pis-button" @click="releaseBroadcast">发布</div>
|
||||||
|
<div class="pis-button">取消</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="pis-dialog-form-box">
|
||||||
|
<el-form ref="form" :model="form" label-width="95px">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="3">
|
||||||
|
<div class="pis-button" style="position: relative; top: 10px;left: 5px; padding: 7px 10px ;">导入描述</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="21">
|
||||||
|
<el-form-item :prop="description" label-width="0">
|
||||||
|
<input v-model="form.description" style="width:600px;position: relative; top: 8px;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="21">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :prop="startDate" label="开始日期">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="form.startDate"
|
||||||
|
type="date"
|
||||||
|
size="mini"
|
||||||
|
placeholder="选择日期"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :prop="endTime" label="结束时间">
|
||||||
|
<el-time-picker
|
||||||
|
arrow-control
|
||||||
|
v-model="form.endTime"
|
||||||
|
size="mini"
|
||||||
|
placeholder="选择时间"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :prop="startTime" label="开始时间">
|
||||||
|
<el-time-picker
|
||||||
|
arrow-control
|
||||||
|
v-model="form.startTime"
|
||||||
|
size="mini"
|
||||||
|
placeholder="选择时间"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :prop="endDate" label="结束日期">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="form.endDate"
|
||||||
|
type="date"
|
||||||
|
size="mini"
|
||||||
|
placeholder="选择日期"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item :prop="durationTime" label="延续时间">
|
||||||
|
<el-time-picker
|
||||||
|
arrow-control
|
||||||
|
v-model="form.durationTime"
|
||||||
|
size="mini"
|
||||||
|
placeholder="选择时间"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div style="text-align: center;padding-top: 10px;">
|
||||||
|
<div class="pis-button">今日</div>
|
||||||
|
<div class="pis-button">一次</div>
|
||||||
|
<div class="pis-button">无截止</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3">
|
||||||
|
<div class="each_operate_button">排定<br>确认</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'VoiceBroadcast',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
addModel: {
|
||||||
|
infoType: 'common',
|
||||||
|
infoTitle: '',
|
||||||
|
infoTime: '',
|
||||||
|
infoContent: '',
|
||||||
|
priority: 'common'
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
startDate: '',
|
||||||
|
startTime: '',
|
||||||
|
durationTime: '',
|
||||||
|
endTime: '',
|
||||||
|
endDate: ''
|
||||||
|
},
|
||||||
|
infoList: [],
|
||||||
|
showRealTimeInfo: '',
|
||||||
|
message: {
|
||||||
|
realTime: {
|
||||||
|
title: '实时信息',
|
||||||
|
infoList:[
|
||||||
|
{
|
||||||
|
title: 'mes1实时信息',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes2',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes3',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes4',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes5',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes6',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes7',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
common: {
|
||||||
|
title: '普通信息',
|
||||||
|
infoList:[
|
||||||
|
{
|
||||||
|
title: 'mes1普通信息',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes2',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes3',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes4',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes5',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
emergency: {
|
||||||
|
title: '紧急信息',
|
||||||
|
infoList:[
|
||||||
|
{
|
||||||
|
title: '紧急信息',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes2',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes3',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes4',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'mes5',
|
||||||
|
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
|
||||||
|
time: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.showRealTimeInfo = '';
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
doClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
doShow() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
releaseBroadcast() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
selectedRealTimeInfo(item) {
|
||||||
|
this.showRealTimeInfo = item.content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dialog-header{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.pis-dialog-form-box{
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px 5px;
|
||||||
|
border-top: 2px solid #898888;
|
||||||
|
border-left: 2px solid #898888;
|
||||||
|
border-right: 2px solid #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
}
|
||||||
|
.information-description-box{
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
background: #DCDCDC;
|
||||||
|
border-left: 2px solid #898888;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.information-box{
|
||||||
|
white-space: nowrap;
|
||||||
|
background: #DCDCDC;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.secondary-title{
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
background: #A9A9A9;
|
||||||
|
border-top: 2px solid #898888;
|
||||||
|
border-left: 2px solid #898888;
|
||||||
|
border-right: 2px solid #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
}
|
||||||
|
.pis-dialog-input{
|
||||||
|
background: #DCDCDC;
|
||||||
|
border-top: 2px solid #898888;
|
||||||
|
border-left: 2px solid #898888;
|
||||||
|
border-right: 2px solid #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
}
|
||||||
|
.information-context-box{
|
||||||
|
background: #DCDCDC;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.button-group{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.button-group-content{
|
||||||
|
position: relative;
|
||||||
|
left: 550px;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.pis-button{
|
||||||
|
background: #CCCCCC;
|
||||||
|
color: #000;
|
||||||
|
display: inline;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 7px 15px;
|
||||||
|
border-top: 2px solid #fff;
|
||||||
|
border-left: 2px solid #fff;
|
||||||
|
border-right: 2px solid #454541;
|
||||||
|
border-bottom: 2px solid #454541;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.iscs-pis-dialog-info{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.iscs-pis-dialog-emergencyInfo{
|
||||||
|
color: #F00 !important;
|
||||||
|
}
|
||||||
|
.each_operate_button{
|
||||||
|
position: relative;
|
||||||
|
top: 100px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 5px;
|
||||||
|
cursor:pointer;
|
||||||
|
color: #000;
|
||||||
|
background: #CCCCCC;
|
||||||
|
display: inline-block;
|
||||||
|
border-top: 2px solid #fff;
|
||||||
|
border-left: 2px solid #fff;
|
||||||
|
border-right: 2px solid #565656;
|
||||||
|
border-bottom: 2px solid #565656;
|
||||||
|
padding: 5px 10px;
|
||||||
|
line-height: 140%;}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.iscs-voice-broadcast-dialog .el-dialog__body{
|
||||||
|
background: #A9A9A9;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
.iscs-voice-broadcast-dialog .el-dialog__headerbtn{
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
.iscs-voice-broadcast-dialog .el-dialog__header{
|
||||||
|
background-image: linear-gradient(#FFE4C4, #F4A460, #FFE4C4);
|
||||||
|
}
|
||||||
|
.iscs-pis-dialog-info .el-radio__input.is-checked+.el-radio__label{
|
||||||
|
color: #606266;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.iscs-pis-dialog-info .el-radio__input+.el-radio__label {
|
||||||
|
color: #606266;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.iscs-pis-dialog-info .iscs-pis-dialog-emergencyInfo .el-radio__input.is-checked+.el-radio__label{
|
||||||
|
color: #F00;
|
||||||
|
}
|
||||||
|
.iscs-voice-broadcast-dialog .information-context-box .el-textarea__inner {
|
||||||
|
background: #DCDCDC;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -7,14 +7,14 @@
|
|||||||
<div class="screen_left">
|
<div class="screen_left">
|
||||||
<div class="screen_left_tab">特定区域</div>
|
<div class="screen_left_tab">特定区域</div>
|
||||||
<div class="sceen_left_content">
|
<div class="sceen_left_content">
|
||||||
<div class="screen_operate_name" :class="allLine?'active':''" @click="clickIt">全线</div>
|
<div class="screen_operate_name" @click="selectedAllLine">全线</div>
|
||||||
<div class="screen_operate_name">全站厅(LCD)</div>
|
<div class="screen_operate_name" @click="selectedAreaBatch(0)">全站厅(LCD)</div>
|
||||||
<div class="screen_operate_name">全上行站台</div>
|
<div class="screen_operate_name" @click="selectedAreaBatch(1)">全上行站台</div>
|
||||||
<div class="screen_operate_name">全下行站台</div>
|
<div class="screen_operate_name" @click="selectedAreaBatch(2)">全下行站台</div>
|
||||||
<div class="screen_operate_name">全出入口</div>
|
<div class="screen_operate_name" @click="selectedAreaBatch(3)">全出入口</div>
|
||||||
<div class="screen_operate_name">全物业</div>
|
<div class="screen_operate_name" @click="selectedAreaBatch(4)">全物业</div>
|
||||||
<div class="screen_operate_name">全天桥</div>
|
<div class="screen_operate_name" @click="selectedAreaBatch(5)">全天桥</div>
|
||||||
<div class="screen_operate_name">出入口(LED)</div>
|
<div class="screen_operate_name" @click="selectedAreaBatch(6)">出入口(LED)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="screen_main_content">
|
<div class="screen_main_content">
|
||||||
@ -32,25 +32,26 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="screen_right_group">
|
<div class="screen_right_group">
|
||||||
<div class="screen_right_group_in">
|
<div class="screen_right_group_in">
|
||||||
<div v-for="station in stationList" :key="station.name" class="each_station_info">
|
<div v-for="station in stationList" :key="station.stationName" class="each_station_info">
|
||||||
<div class="each_data_info">
|
<div class="each_data_info" @click="selectedStation(station)">
|
||||||
<div class="screen_station_name">{{ station.stationName }}</div>
|
<div class="screen_station_name">{{ station.stationName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="station.chidren&&station.chidren.length>0">
|
<div v-if="station.children&&station.children.length>0">
|
||||||
<div v-for="(child,index) in station.chidren" :key="station.name+index" class="each_data_info">
|
<div v-for="(child,index) in station.children" :key="station.stationName+index" class="each_data_info" @click="selectArea(station.stationName,index)" style="text-align: center;">
|
||||||
<div v-if="child.status=='default'" class="data_button_info button_default" />
|
<div v-if="child.status==='default'" class="button_default_content">
|
||||||
|
<div class="button_default" :style="{background:selectedAreaList.includes(station.stationName + '-' + index)?'#2EFF74':'#CDCDCD'}" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="screen_right">
|
<div class="screen_right">
|
||||||
<div class="each_operate">
|
<div class="each_operate">
|
||||||
<div class="each_operate_text">操作</div>
|
<div class="each_operate_text">操作</div>
|
||||||
<div class="each_operate_button">信息发布<br>窗口</div>
|
<div class="each_operate_button" @click="showInfoBrroadcast">信息发布<br>窗口</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="each_operate">
|
<div class="each_operate">
|
||||||
<div class="each_operate_text">信息清除</div>
|
<div class="each_operate_text">信息清除</div>
|
||||||
@ -79,18 +80,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<info-broadcast ref="infoBroadcast" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import InfoBroadcast from './infoBroadcast';
|
||||||
export default {
|
export default {
|
||||||
name:'MainScreen',
|
name:'MainScreen',
|
||||||
|
components: {
|
||||||
|
InfoBroadcast
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
allLine:false,
|
|
||||||
stationList:[
|
stationList:[
|
||||||
{
|
{
|
||||||
stationName:'会展中心站',
|
stationName:'会展中心站',
|
||||||
chidren:[
|
children:[
|
||||||
{status:'none'}, {status:'default'},
|
{status:'none'}, {status:'default'},
|
||||||
{status:'default'}, {status:'default'},
|
{status:'default'}, {status:'default'},
|
||||||
{status:'none'}, {status:'none'},
|
{status:'none'}, {status:'none'},
|
||||||
@ -99,7 +104,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
stationName:'世纪大道站',
|
stationName:'世纪大道站',
|
||||||
chidren:[
|
children:[
|
||||||
{status:'none'}, {status:'default'},
|
{status:'none'}, {status:'default'},
|
||||||
{status:'default'}, {status:'default'},
|
{status:'default'}, {status:'default'},
|
||||||
{status:'none'}, {status:'none'},
|
{status:'none'}, {status:'none'},
|
||||||
@ -108,7 +113,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
stationName:'交通大学站',
|
stationName:'交通大学站',
|
||||||
chidren:[
|
children:[
|
||||||
{status:'none'}, {status:'default'},
|
{status:'none'}, {status:'default'},
|
||||||
{status:'default'}, {status:'default'},
|
{status:'default'}, {status:'default'},
|
||||||
{status:'none'}, {status:'none'},
|
{status:'none'}, {status:'none'},
|
||||||
@ -117,7 +122,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
stationName:'市图书馆站',
|
stationName:'市图书馆站',
|
||||||
chidren:[
|
children:[
|
||||||
{status:'none'}, {status:'default'},
|
{status:'none'}, {status:'default'},
|
||||||
{status:'default'}, {status:'default'},
|
{status:'default'}, {status:'default'},
|
||||||
{status:'none'}, {status:'none'},
|
{status:'none'}, {status:'none'},
|
||||||
@ -126,7 +131,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
stationName:'中心医院站',
|
stationName:'中心医院站',
|
||||||
chidren:[
|
children:[
|
||||||
{status:'none'}, {status:'default'},
|
{status:'none'}, {status:'default'},
|
||||||
{status:'default'}, {status:'default'},
|
{status:'default'}, {status:'default'},
|
||||||
{status:'none'}, {status:'none'},
|
{status:'none'}, {status:'none'},
|
||||||
@ -135,7 +140,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
stationName:'未来路站',
|
stationName:'未来路站',
|
||||||
chidren:[
|
children:[
|
||||||
{status:'none'}, {status:'default'},
|
{status:'none'}, {status:'default'},
|
||||||
{status:'default'}, {status:'default'},
|
{status:'default'}, {status:'default'},
|
||||||
{status:'none'}, {status:'none'},
|
{status:'none'}, {status:'none'},
|
||||||
@ -144,7 +149,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
stationName:'火车站',
|
stationName:'火车站',
|
||||||
chidren:[
|
children:[
|
||||||
{status:'none'}, {status:'default'},
|
{status:'none'}, {status:'default'},
|
||||||
{status:'default'}, {status:'default'},
|
{status:'default'}, {status:'default'},
|
||||||
{status:'none'}, {status:'none'},
|
{status:'none'}, {status:'none'},
|
||||||
@ -153,7 +158,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
stationName:'人民广场站',
|
stationName:'人民广场站',
|
||||||
chidren:[
|
children:[
|
||||||
{status:'none'}, {status:'default'},
|
{status:'none'}, {status:'default'},
|
||||||
{status:'default'}, {status:'default'},
|
{status:'default'}, {status:'default'},
|
||||||
{status:'none'}, {status:'none'},
|
{status:'none'}, {status:'none'},
|
||||||
@ -162,23 +167,103 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
stationName:'体育中心站',
|
stationName:'体育中心站',
|
||||||
chidren:[
|
children:[
|
||||||
{status:'none'}, {status:'default'},
|
{status:'none'}, {status:'default'},
|
||||||
{status:'default'}, {status:'default'},
|
{status:'default'}, {status:'default'},
|
||||||
{status:'none'}, {status:'none'},
|
{status:'none'}, {status:'none'},
|
||||||
{status:'none'}, {status:'default'}
|
{status:'none'}, {status:'default'}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
selectedAreaList: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
clickIt(event) {
|
showInfoBrroadcast() {
|
||||||
if (!this.allLine) {
|
this.$refs.infoBroadcast.doShow();
|
||||||
this.allLine = true;
|
},
|
||||||
|
selectedAllLine() {
|
||||||
|
const flag = this.checkSelectedAllLine();
|
||||||
|
this.selectedAreaList = [];
|
||||||
|
this.stationList.forEach(station => {
|
||||||
|
station.children.forEach((item, index) => {
|
||||||
|
if (item.status === 'default' && !flag) {
|
||||||
|
this.selectedAreaList.push(station.stationName + '-' + index);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
checkSelectedAllLine() {
|
||||||
|
let selectedAllLineFlag = true;
|
||||||
|
this.stationList.some(station => {
|
||||||
|
station.children.some((item, index) => {
|
||||||
|
if (item.status === 'default') {
|
||||||
|
const elem = station.stationName + '-' + index;
|
||||||
|
selectedAllLineFlag = this.selectedAreaList.includes(elem);
|
||||||
|
return !selectedAllLineFlag;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return !selectedAllLineFlag;
|
||||||
|
});
|
||||||
|
return selectedAllLineFlag;
|
||||||
|
},
|
||||||
|
selectArea(stationName, index) {
|
||||||
|
const elem = stationName + '-' + index;
|
||||||
|
if (this.selectedAreaList.includes(elem)) {
|
||||||
|
const areaIndex = this.selectedAreaList.indexOf(elem);
|
||||||
|
this.selectedAreaList.splice(areaIndex, 1);
|
||||||
} else {
|
} else {
|
||||||
this.allLine = false;
|
this.selectedAreaList.push(elem);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
selectedStation(station) {
|
||||||
|
const flag = this.checkStationSelected(station);
|
||||||
|
station.children.forEach((item, index) => {
|
||||||
|
const elem = station.stationName + '-' + index;
|
||||||
|
if (item.status === 'default' && flag) {
|
||||||
|
const areaIndex = this.selectedAreaList.indexOf(elem);
|
||||||
|
this.selectedAreaList.splice(areaIndex, 1);
|
||||||
|
} else if (item.status === 'default' && !flag && !this.selectedAreaList.includes(elem)) {
|
||||||
|
this.selectedAreaList.push(elem);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
checkStationSelected(station) {
|
||||||
|
let stationSelectedFlag = true;
|
||||||
|
station.children.some((item, index) => {
|
||||||
|
if (item.status === 'default') {
|
||||||
|
stationSelectedFlag = this.selectedAreaList.includes(station.stationName + '-' + index);
|
||||||
|
return !stationSelectedFlag;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return stationSelectedFlag;
|
||||||
|
},
|
||||||
|
selectedAreaBatch(areaIndex) {
|
||||||
|
const flag = this.checkAreaBatchSelected(areaIndex);
|
||||||
|
this.stationList.forEach(station => {
|
||||||
|
station.children.forEach((item, index) => {
|
||||||
|
const elem = station.stationName + '-' + index;
|
||||||
|
if (item.status === 'default' && index === areaIndex && flag) {
|
||||||
|
const selectedAreaIndex = this.selectedAreaList.indexOf(elem);
|
||||||
|
this.selectedAreaList.splice(selectedAreaIndex, 1);
|
||||||
|
} else if (item.status === 'default' && index === areaIndex && !flag && !this.selectedAreaList.includes(elem)) {
|
||||||
|
this.selectedAreaList.push(elem);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
checkAreaBatchSelected(areaIndex) {
|
||||||
|
let selectedAreaBatchFlag = true;
|
||||||
|
this.stationList.some(station => {
|
||||||
|
station.children.some((item, index) => {
|
||||||
|
if (item.status === 'default' && index === areaIndex) {
|
||||||
|
selectedAreaBatchFlag = this.selectedAreaList.includes(station.stationName + '-' + index);
|
||||||
|
return !selectedAreaBatchFlag;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return !selectedAreaBatchFlag;
|
||||||
|
});
|
||||||
|
return selectedAreaBatchFlag;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -247,6 +332,14 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
|
|||||||
border-right: 2px solid #9e9e9e;
|
border-right: 2px solid #9e9e9e;
|
||||||
border-bottom: 2px solid #636667;
|
border-bottom: 2px solid #636667;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
&.active,
|
||||||
|
&:hover{
|
||||||
|
background: #EBB570;
|
||||||
|
border-top: 2px solid #795B31;
|
||||||
|
border-left: 2px solid #795B31;
|
||||||
|
border-right: 2px solid #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.screen_station_name{
|
.screen_station_name{
|
||||||
width: 120px;
|
width: 120px;
|
||||||
@ -263,7 +356,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
|
|||||||
// border-bottom: 2px solid #fff;
|
// border-bottom: 2px solid #fff;
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
.screen_operate_name.active,.screen_station_name.active{
|
.screen_station_name.active{
|
||||||
background: #EBB570;
|
background: #EBB570;
|
||||||
border-top: 2px solid #795B31;
|
border-top: 2px solid #795B31;
|
||||||
border-left: 2px solid #795B31;
|
border-left: 2px solid #795B31;
|
||||||
@ -279,49 +372,28 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.button_default{
|
.button_default{
|
||||||
border-top: 2px solid #edf1f2;border-left: 2px solid #d0d8dd;border-right: 2px solid #8c8a88;border-bottom: 2px solid #8a8887;
|
|
||||||
}
|
|
||||||
.button_default:before{
|
|
||||||
content:'';
|
|
||||||
border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
|
|
||||||
min-width: 10px;
|
|
||||||
height: 10px;
|
height: 10px;
|
||||||
display: inline-block;
|
width: 10px;
|
||||||
vertical-align: top;
|
margin: auto;
|
||||||
background: #cccccc;
|
background:#CCCCCC;
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-top: 2px solid #fff;
|
||||||
|
border-left: 2px solid #fff;
|
||||||
|
border-right: 2px solid #898888;
|
||||||
|
border-bottom: 2px solid #898888;
|
||||||
}
|
}
|
||||||
.button_default::before{
|
.button_default_content{
|
||||||
content:'';
|
margin:0 auto;
|
||||||
border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
|
height: 18px;
|
||||||
min-width: 10px;
|
width: 18px;
|
||||||
height: 10px;
|
background: #D4D4D4;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
border-top: 2px solid #fff;
|
||||||
background: #cccccc;
|
border-left: 2px solid #fff;
|
||||||
}
|
border-right: 2px solid #898888;
|
||||||
.button_default:after{
|
border-bottom: 2px solid #898888;
|
||||||
content:'';
|
|
||||||
border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
|
|
||||||
min-width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
background: #c9c9c9;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.button_default::after{
|
|
||||||
content:'';
|
|
||||||
border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
|
|
||||||
min-width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
background: #c9c9c9;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
.screen_right_group_in{
|
.screen_right_group_in{
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user