Browse Source

Merge branch 'develop' of gitadmin/tuoheng_lc_web into release

tags/v1.2.0
zhangtao 1 year ago
parent
commit
4d0c6c505b
1 changed files with 61 additions and 4 deletions
  1. +61
    -4
      src/views/dashboard/components/SpeedChart.vue

+ 61
- 4
src/views/dashboard/components/SpeedChart.vue View File

<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>

Loading…
Cancel
Save