<template>
|
<transition
|
name="el-zoom-in-left"
|
@before-enter="onBeforeEnter"
|
@after-leave="onAfterLeave"
|
>
|
<BaseCard v-show="show" direction="left">
|
<template #content>
|
<!-- <el-collapse-transition> -->
|
<el-radio-group v-model="radio" size="default" @change="handleChange">
|
<el-radio v-for="(item, i) in options" :key="i" :value="item.value">{{
|
item.label
|
}}</el-radio>
|
</el-radio-group>
|
<!-- </el-collapse-transition> -->
|
<span @click="show = !show" class="btn-show">
|
<el-icon v-if="show"><ArrowLeftBold /></el-icon>
|
<el-icon v-else><ArrowRightBold /></el-icon>
|
</span>
|
</template>
|
</BaseCard>
|
</transition>
|
<BaseCard v-show="btnShow">
|
<template #content>
|
<el-row @click="show = !show" class="btn-show">
|
<font-awesome-icon icon="fa-check-circle" />
|
<el-icon v-if="show"><ArrowLeftBold /></el-icon>
|
<el-icon v-else><ArrowRightBold /></el-icon>
|
</el-row>
|
</template>
|
</BaseCard>
|
</template>
|
|
<script>
|
// 监测因子单选框
|
import { radioOptions, defaultOptions } from '@/constant/radio-options';
|
import { TYPE0 } from '@/constant/device-type';
|
|
export default {
|
props: {
|
modelValue: {
|
type: String,
|
default: defaultOptions(TYPE0).value
|
},
|
deviceType: {
|
type: String,
|
// type0: 车载或无人机; type1:无人船
|
default: TYPE0
|
}
|
},
|
emits: ['change', 'update:modelValue'],
|
data() {
|
return {
|
radio: defaultOptions(TYPE0).value,
|
show: true,
|
btnShow: false
|
};
|
},
|
computed: {
|
options() {
|
return radioOptions(this.deviceType);
|
}
|
},
|
watch: {
|
deviceType(nV, oV) {
|
if (nV != oV) {
|
this.radio = this.options[0].value;
|
this.$emit('update:modelValue', this.radio);
|
}
|
},
|
modelValue(nV, oV) {
|
if (nV != oV) {
|
this.radio = nV;
|
}
|
}
|
},
|
methods: {
|
handleChange(value) {
|
const item = this.options.find((v) => v.value == value);
|
this.$emit('change', item.value, item);
|
this.$emit('update:modelValue', item.value);
|
// todo 地图3d图像切换展示监测因子
|
},
|
onBeforeEnter() {
|
this.btnShow = false;
|
},
|
onAfterLeave() {
|
this.btnShow = true;
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
:deep(.el-radio) {
|
--el-radio-text-color: white;
|
--el-color-primary: #23dad1;
|
margin-right: 10px;
|
height: initial;
|
}
|
|
.btn-show {
|
cursor: pointer;
|
padding: 4px 0;
|
}
|
.btn-show:hover {
|
color: #23dad1;
|
}
|
</style>
|
