<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-25 14:31:44
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-03-25 17:32:34
|
* @FilePath: \srs-police-affairs\src\views\activity\components\layersShowControl.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div>
|
<div class="plan-control" v-show="dialogVisible && (isHavePolice || isHaveArrow || isHaveLine)">
|
<div class="row-box" v-show="isHavePolice">
|
<div class="category">要素资源：</div>
|
<div class="category-value">
|
<el-switch v-model="policeSwitch" @change="switchChange" active-color="#13ce66"
|
inactive-color="#ccc"></el-switch>
|
</div>
|
</div>
|
|
<div class="row-box" v-show="isHaveArrow">
|
<div class="category">作战标绘：</div>
|
<div class="category-value">
|
<el-switch v-model="arrowBtnSwitch" @change="switchArrowBtnChange" active-color="#13ce66"
|
inactive-color="#ccc"></el-switch>
|
</div>
|
</div>
|
|
<div class="row-box" v-show="isHaveLine">
|
<div class="category">巡逻路线：</div>
|
<div class="category-value">
|
<el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
|
inactive-color="#ccc"></el-switch>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: [
|
'dialogVisible',
|
'isHavePolice',
|
'isHaveArrow',
|
'isHaveLine',
|
'policeSwitch',
|
'arrowBtnSwitch',
|
'polylineBtnSwitch',
|
],
|
|
data () {
|
return {
|
}
|
},
|
|
methods: {
|
// 切换轨警力资源显示
|
switchChange (e) {
|
this.$parent.switchChange(e)
|
},
|
|
// 切换作战标绘
|
switchArrowBtnChange (e) {
|
this.$parent.switchArrowBtnChange(e)
|
},
|
|
// 切换轨迹播放控件
|
switchBtnChange (e) {
|
this.$parent.switchBtnChange(e)
|
},
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.plan-control {
|
position: fixed;
|
top: 150px;
|
right: 450px;
|
width: 180px;
|
padding: 10px;
|
color: #fff;
|
background-color: $bg-color;
|
border-radius: 8px;
|
z-index: 98;
|
|
.row-box {
|
width: 100%;
|
line-height: 28px;
|
display: flex;
|
|
&>div {
|
text-align: left;
|
}
|
|
.category {
|
width: 96px;
|
}
|
|
.category-value {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
