|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
|
<div id="myChart" class="my-chart" /> |
|
|
|
|
|
|
|
|
<div class="control__container" :class="[chartShow ? 'open': 'closed']"> |
|
|
|
|
|
<n-icon class="control__close" size="20" color="#fff" @click="chartShow = true"> |
|
|
|
|
|
<DoubleLeftOutlined /> |
|
|
|
|
|
</n-icon> |
|
|
|
|
|
<n-icon class="control__open" size="20" color="#fff" @click="chartShow = false"> |
|
|
|
|
|
<DoubleRightOutlined /> |
|
|
|
|
|
</n-icon> |
|
|
|
|
|
<div id="myChart" class="my-chart" /> |
|
|
|
|
|
<div class="panel__title">高度速度</div> |
|
|
|
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script> |
|
|
<script> |
|
|
import * as echarts from 'echarts' |
|
|
import * as echarts from 'echarts' |
|
|
import { onMounted, reactive, toRefs, watch } from 'vue' |
|
|
import { onMounted, reactive, toRefs, watch } from 'vue' |
|
|
|
|
|
import { |
|
|
|
|
|
DoubleLeftOutlined, |
|
|
|
|
|
DoubleRightOutlined |
|
|
|
|
|
} from '@vicons/antd' |
|
|
export default { |
|
|
export default { |
|
|
name: 'SpeedChart', |
|
|
name: 'SpeedChart', |
|
|
|
|
|
components: { DoubleLeftOutlined, DoubleRightOutlined }, |
|
|
props: { |
|
|
props: { |
|
|
info: { |
|
|
info: { |
|
|
type: Array, |
|
|
type: Array, |
|
|
|
|
|
|
|
|
setup(props) { |
|
|
setup(props) { |
|
|
const data = reactive({ |
|
|
const data = reactive({ |
|
|
myChart: null, |
|
|
myChart: null, |
|
|
|
|
|
chartShow: true, |
|
|
chartOption: {}, |
|
|
chartOption: {}, |
|
|
chartDom: null, |
|
|
chartDom: null, |
|
|
uavData: [], |
|
|
uavData: [], |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
<style> |
|
|
|
|
|
|
|
|
<style scoped lang='scss'> |
|
|
.my-chart { |
|
|
.my-chart { |
|
|
position: relative; |
|
|
position: relative; |
|
|
z-index: 99; |
|
|
z-index: 99; |
|
|
background-color: rgba(0, 0, 0, 1); |
|
|
background-color: rgba(0, 0, 0, 1); |
|
|
width: 734px; |
|
|
|
|
|
|
|
|
width: 100%; |
|
|
height: 220px; |
|
|
height: 220px; |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
font-weight: 400; |
|
|
font-weight: 400; |
|
|
color: rgba(255, 255, 255, 1); |
|
|
color: rgba(255, 255, 255, 1); |
|
|
margin: 0 5px 0 0; |
|
|
|
|
|
|
|
|
margin: 0 10px 0 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.control__container{ |
|
|
|
|
|
position: relative; |
|
|
|
|
|
z-index: 99; |
|
|
|
|
|
height: 220px; |
|
|
|
|
|
width: 734px; |
|
|
|
|
|
background: rgba(0, 0, 0, 1); |
|
|
|
|
|
padding: 10px 15px 10px 10px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
margin: 0 5px 0 0; |
|
|
|
|
|
|
|
|
|
|
|
&.open{ |
|
|
|
|
|
transition: width 1s; |
|
|
|
|
|
.control__close,.panel__title{ |
|
|
|
|
|
display: none; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
&.closed{ |
|
|
|
|
|
width: 70px; |
|
|
|
|
|
transition: width 1s; |
|
|
|
|
|
.my-chart,.control__open{ |
|
|
|
|
|
display: none; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.panel__title{ |
|
|
|
|
|
width: 16px; |
|
|
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.n-icon{ |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.control__close,.control__open{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 5px; |
|
|
|
|
|
top: 5px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |