sheyang
/
MaindataPGIS
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of http://8.136.197.230:3000/sheyang/MaindataPGIS into dev

Browse Source
dev
独树的风 10 months ago
parent 045f5320e8 1efd1b0e49
commit c9c06fb487
3 changed files with 126 additions and 63 deletions
Show Stats Download Patch File Download Diff File

7
src/views/coastalMap/index.vue
Unescape View File

@ -50,6 +50,9 @@
<!-- <div class="overlay" v-if="play"></div> <!-- <div class="overlay" v-if="play"></div>
<div v-else></div> --> <div v-else></div> -->
<!-- --> <!-- -->
<!-- 实有单位弹窗 -->
<ActualUnit></ActualUnit>
<div class="turn_btn"></div> <div class="turn_btn"></div>
</div> </div>
</template> </template>
@ -64,6 +67,7 @@ import PoliceSpread from './components/policeSpread.vue' // * 警力分布
import SeaElement from './components/seaElement.vue' // * 涉海要素 import SeaElement from './components/seaElement.vue' // * 涉海要素
import PoliceStatus from './components/policeStatus.vue' // * 警情统计 import PoliceStatus from './components/policeStatus.vue' // * 警情统计
// import KeyInformantion from './components/keyInformantion.vue' //弹窗组件 // import KeyInformantion from './components/keyInformantion.vue' //弹窗组件
export default { export default {
name: 'CoastalMap', name: 'CoastalMap',
components: { components: {
@ -72,7 +76,8 @@ export default {
KeyPerson, KeyPerson,
PoliceSpread, PoliceSpread,
SeaElement, SeaElement,
PoliceStatus, PoliceStatus
//KeyInformantion //KeyInformantion
}, },
data() { data() {

94
src/views/videoMonitor/components/livePlayer.vue
Unescape View File

@ -4,7 +4,7 @@
<!-- 弹窗整体 --> <!-- 弹窗整体 -->
<div class="live_card"> <div class="live_card">
<div class="live_card_header"> <div class="live_card_header">
<div class="live_card_title">射阳县合德镇解放西路42号（枪机）</div> <div class="live_card_title">射阳幸福大道明湖大桥西侧东向西2(标卡)</div>
<!-- 关闭弹窗 --> <!-- 关闭弹窗 -->
<div class="delete" @click="handleClose"></div> <div class="delete" @click="handleClose"></div>
<!-- <div class="live_card_icon" @click="handleClose"> <!-- <div class="live_card_icon" @click="handleClose">
@ -21,7 +21,9 @@
<div class="live_card_body_left_bottom_div"> <div class="live_card_body_left_bottom_div">
<div class="item"> <div class="item">
设备名称： 设备名称：
<div class="bottom_div_color">阿德飒飒打撒</div> <div class="bottom_div_color">
射阳幸福大道明湖大桥西侧东向西2(标卡)
</div>
</div> </div>
<div class="item"> <div class="item">
设备Ip: 设备Ip:
@ -59,40 +61,36 @@
<span class="add">视频回放</span> <span class="add">视频回放</span>
</el-button> </el-button>
<el-button class="button_right"> <el-button class="button_right">
<div class="icon_left1"></div> <span class="icon_left1"></span>
视频回放 <span class="add1">视频回放</span>
</el-button> </el-button>
</div> </div>
<!-- 开始时间 --> <!-- 开始时间 -->
<div class="live_card_body_left_bottom_starttime"> <div class="live_card_body_left_bottom_starttime">
<div class="time_icon"></div> <div class="time_icon"></div>
<span>开始时间:</span> <span> 开始时间:</span>
<span> <el-date-picker
<el-date-picker placeholder="请选择日期与时间"
placeholder="请选择日期与时间" prefix-icon="prefix-icon-class"
prefix-icon="prefix-icon-class" type="datetime"
type="datetime" ></el-date-picker>
></el-date-picker>
</span>
</div> </div>
<!-- 结束时间 --> <!-- 结束时间 -->
<div class="live_card_body_left_bottom_endtime"> <div class="live_card_body_left_bottom_endtime">
<div class="time_icon1"></div> <div class="time_icon1"></div>
<span>结束时间:</span> <span>结束时间:</span>
<span> <el-date-picker
<el-date-picker placeholder="请选择日期与时间"
placeholder="请选择日期与时间" prefix-icon="prefix-icon-class"
prefix-icon="prefix-icon-class" type="datetime"
type="datetime" >
> </el-date-picker>
</el-date-picker>
</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 视频 --> <!-- 视频 -->
<div class="live_card_body_right"> <div class="live_card_body_right">
<LivePlayer></LivePlayer> <LivePlayer aspect="fullscreen"></LivePlayer>
<div class="video_button"> <div class="video_button">
<div class="video_buton_style"> <div class="video_buton_style">
<div class="video_icon video_icon1"></div> <div class="video_icon video_icon1"></div>
@ -113,7 +111,7 @@
<script> <script>
import LivePlayer from '@liveqing/liveplayer' import LivePlayer from '@liveqing/liveplayer'
export default { export default {
name: 'MapPlayer', name: 'videoMap',
components: { LivePlayer }, components: { LivePlayer },
props: { props: {
videoUrl: { videoUrl: {
@ -202,6 +200,7 @@ export default {
background-image: url(../../../assets/icon-hza/bg_left.png); background-image: url(../../../assets/icon-hza/bg_left.png);
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
border-bottom: 3px solid #00539f;
.live_card_body_left_top { .live_card_body_left_top {
width: 100%; width: 100%;
height: 4vh; height: 4vh;
@ -212,6 +211,7 @@ export default {
align-items: center; align-items: center;
padding-left: 1vw; padding-left: 1vw;
color: #bfe7f9; color: #bfe7f9;
font-size: 1.3rem;
} }
.live_card_body_left_bottom { .live_card_body_left_bottom {
width: 100%; width: 100%;
@ -226,7 +226,7 @@ export default {
justify-content: space-around; justify-content: space-around;
.item { .item {
display: flex; display: flex;
font-size: 1rem; font-size: 1.2rem;
color: #ecf4f9; color: #ecf4f9;
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
} }
@ -260,9 +260,15 @@ export default {
color: #fff; color: #fff;
border-radius: 0%; border-radius: 0%;
border-color: #063d6c; border-color: #063d6c;
position: relative;
&:hover { &:hover {
background-color: #005ea1; background-color: #005ea1;
} }
.add {
position: absolute;
right: 2vw;
top: 1.1vh;
}
.icon_left { .icon_left {
width: 1vw; width: 1vw;
height: 2vh; height: 2vh;
@ -271,6 +277,7 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
margin-right: 0.5vw; margin-right: 0.5vw;
margin-right: 3vw;
} }
} }
.button_right { .button_right {
@ -283,9 +290,16 @@ export default {
color: #fff; color: #fff;
border-radius: 0%; border-radius: 0%;
border-color: #063d6c; border-color: #063d6c;
position: relative;
&:hover { &:hover {
background-color: #005ea1; background-color: #005ea1;
} }
.add1 {
// background-color: #fff;
position: absolute;
right: 2vw;
top: 1.1vh;
}
.icon_left1 { .icon_left1 {
width: 1vw; width: 1vw;
height: 2vh; height: 2vh;
@ -294,6 +308,7 @@ export default {
margin-right: 0.5vw; margin-right: 0.5vw;
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 3vw;
} }
} }
} }
@ -304,12 +319,14 @@ export default {
margin-left: 1vw; margin-left: 1vw;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; // justify-content: space-between;
color: #ecf4f9; color: #ecf4f9;
position: relative; position: relative;
.el-input--suffix .el-input__inner { .el-input--suffix .el-input__inner {
background-color: transparent; background-color: transparent;
width: 15vw; width: 15vw;
margin-left: 1vw;
} }
.el-input--prefix .el-input__inner { .el-input--prefix .el-input__inner {
border-color: #00539f; border-color: #00539f;
@ -322,13 +339,13 @@ export default {
position: absolute; position: absolute;
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
right: 0.4vw; right: 1vw;
} }
} }
.live_card_body_left_bottom_endtime { .live_card_body_left_bottom_endtime {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; // justify-content: space-between;
width: 18vw; width: 18vw;
height: 4vh; height: 4vh;
margin-left: 1vw; margin-left: 1vw;
@ -338,6 +355,7 @@ export default {
.el-input--suffix .el-input__inner { .el-input--suffix .el-input__inner {
background-color: transparent; background-color: transparent;
width: 15vw; width: 15vw;
margin-left: 1vw;
} }
.el-input--prefix .el-input__inner { .el-input--prefix .el-input__inner {
border-color: #00539f; border-color: #00539f;
@ -353,7 +371,7 @@ export default {
position: absolute; position: absolute;
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
right: 0.4vw; right: 1vw;
top: 0.4vh; top: 0.4vh;
} }
} }
@ -366,12 +384,24 @@ export default {
background-image: url(../../../assets/picture/bg_right.png); background-image: url(../../../assets/picture/bg_right.png);
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
border: 3px solid #00539f;
position: relative;
.video-wrapper .alt {
width: 51.5vw;
height: 59vh;
margin-left: 0.25vw;
}
.video_button { .video_button {
width: 52vw; width: 15vw;
height: 5vh; height: 5vh;
display: flex; position: absolute;
justify-content: center; left: 20vw;
align-items: center; bottom: 0vh;
// background-color: #fff;
// display: flex;
// justify-content: center;
// align-items: center;
.video_buton_style { .video_buton_style {
width: 13vw; width: 13vw;
height: 3.5vh; height: 3.5vh;
@ -403,7 +433,7 @@ export default {
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 2vw; width: 2vw;
height: 4vh; height: 4.5vh;
margin-top: 0; margin-top: 0;
} }
.video_icon5 { .video_icon5 {

88
src/views/videoMonitor/index.vue
Unescape View File

@ -19,22 +19,23 @@
</div> </div>
</div> </div>
</div> </div>
<div class="children"> <div class="video_chose">
<div class="coverage"> <div class="coverage_header">
<p>图层</p> <p>图层</p>
</div> </div>
<div class="coveragebottom"> <div class="coveragebody">
<el-checkbox label="" class="checkbox" size="mini">全选</el-checkbox> <div class="header_title3">
<div class="hander"> <el-checkbox label="" class="checkbox" size="mini"> </el-checkbox>
<el-checkbox label="" size="mini" class="checkbox" <p>全选</p>
>沿海视频 （446）</el-checkbox </div>
> <div class="header_title1">
<div> <el-checkbox label="" size="mini" class="checkbox"> </el-checkbox>
<el-checkbox label="" size="mini" class="checkbox" <p>沿海视频(446)</p>
>非沿海视频 （674）</el-checkbox </div>
> <div class="header_title2">
</div> <el-checkbox label="" size="mini" class="checkbox"> </el-checkbox>
<p>非沿海视频 (674)</p>
</div> </div>
</div> </div>
</div> </div>
@ -184,18 +185,20 @@ export default {
z-index: 1; z-index: 1;
} }
} }
.children { .video_chose {
width: 18vw; width: 15vw;
height: 89vh; height: 89vh;
background-color: rgba(25, 64, 166, 0.5); background-image: url(../../assets/icon-hza/frame.png);
background-size: 100% auto;
background-repeat: no-repeat;
position: absolute; position: absolute;
top: 10vh; top: 10vh;
left: 2vh; left: 1vh;
z-index: 2; z-index: 2;
border-radius: 1vh; border-radius: 1vh;
color: #fff; color: #fff;
.coverage { .coverage_header {
height: 4vh; height: 4vh;
align-self: center; align-self: center;
display: flex; display: flex;
@ -203,24 +206,46 @@ export default {
font-size: 1.5rem; font-size: 1.5rem;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
background: url('../../assets/icon-hza/bg_104.png'); background: url('../../assets/icon-hza/bg_104.png');
background-size: 100% auto; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-left: 3vw; padding-left: 3vw;
padding-top: 2vh; padding-top: 2vh;
.checkbox {
padding-top: 1.5vh;
padding-left: 3vh;
color: #fff;
}
} }
.coveragebottom { .coveragebody {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; padding-top: 1vh;
font-size: 1.2rem;
.checkbox { .checkbox {
padding-top: 1.5vh; margin-right: 0.5vw;
padding-left: 2vw; }
color: #fff; .header_title1 {
margin-left: 1.5vw;
width: 12vw;
height: 4vh;
background-image: url(../../assets/icon-hza/bg_25.png);
background-size: 100% auto;
background-repeat: no-repeat;
align-items: center;
display: flex;
margin-top: 1vh;
padding-left: 0.5vw;
}
.header_title2 {
width: 12vw;
padding-left: 0.5vw;
height: 4vh;
margin-left: 1.5vw;
background-image: url(../../assets/icon-hza/bg_25.png);
background-size: 100% auto;
background-repeat: no-repeat;
align-items: center;
display: flex;
margin-top: 1vh;
}
.header_title3 {
margin-left: 1.5vw;
display: flex;
} }
} }
} }
@ -230,16 +255,19 @@ export default {
position: absolute; position: absolute;
top: 10vh; top: 10vh;
z-index: 2; z-index: 2;
right: 8vh; right: 2vw;
.el-input__inner { .el-input__inner {
background-color: #02427b; background-color: #02427b;
border-radius: 0; border-radius: 0;
border: 1px solid #00f5ff; border: 1px solid #00f5ff;
border-right: 0;
width: 13vw; width: 13vw;
height: 4vh;
} }
.buttonstyle { .buttonstyle {
background-color: #03d6df; background-color: #03d6df;
border-radius: 0%; border-radius: 0%;
height: 4vh;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save