| | |
| | | <template> |
| | | <BaseCard> |
| | | <transition |
| | | name="el-zoom-in-left" |
| | | @before-enter="onBeforeEnter" |
| | | @after-leave="onAfterLeave" |
| | | > |
| | | <BaseCard v-show="show"> |
| | | <template #content> |
| | | <el-row justify="space-between" align="middle"> |
| | | <el-row align="middle"> |
| | | <img src="@/assets/mipmap/data_chart.png" class="ff-img m-r-4" /> |
| | | <span>走航图例</span> |
| | | <span v-if="factor.factorName">({{ factor.factorName }})</span> |
| | | </el-row> |
| | | <span @click="show = !show" class="btn-show"> |
| | | <el-icon v-if="show"><ArrowLeftBold /></el-icon> |
| | | <el-icon v-else><ArrowRightBold /></el-icon> |
| | | </span> |
| | | </el-row> |
| | | <div |
| | | v-for="(item, index) in legends" |
| | | :key="index" |
| | | class="flexbox align-items margin-top" |
| | | > |
| | | <div |
| | | class="rectangle" |
| | | :style="'background-color: ' + item.color" |
| | | ></div> |
| | | <el-row v-if="item.max"> |
| | | <span class="w-40 text-right">{{ item.min }}</span> |
| | | <span class="w-20 text-center">~</span> |
| | | <span class="w-40 text-right">{{ item.max }}</span> |
| | | <span class="w-60 m-l-8">{{ item.unit }}</span> |
| | | </el-row> |
| | | <el-row v-else> |
| | | <span class="w-40 text-right"></span> |
| | | <span class="w-20 text-center">></span> |
| | | <span class="w-40 text-right">{{ item.min }}</span> |
| | | <span class="w-60 m-l-8">{{ item.unit }}</span> |
| | | </el-row> |
| | | </div> |
| | | <div> |
| | | 切换绘图模式: |
| | | <el-switch |
| | | v-model="legendType" |
| | | width="60" |
| | | inline-prompt |
| | | style="" |
| | | active-text="动态" |
| | | inactive-text="标准" |
| | | @change="handleChange" |
| | | /> |
| | | </div> |
| | | </template> |
| | | </BaseCard> |
| | | </transition> |
| | | <BaseCard v-show="btnShow"> |
| | | <template #content> |
| | | <el-row justify="space-between" align="middle"> |
| | | <el-row align="middle"> |
| | | <img src="@/assets/mipmap/data_chart.png" class="ff-img m-r-4" /> |
| | | <span>走航图例</span> |
| | | </el-row> |
| | | <span>{{ factor.factorName }}</span> |
| | | </el-row> |
| | | <div |
| | | v-for="(item, index) in legends" |
| | | :key="index" |
| | | class="flexbox align-items margin-top" |
| | | > |
| | | <div class="rectangle" :style="'background-color: ' + item.color"></div> |
| | | <el-row v-if="item.max"> |
| | | <span class="w-40 text-right">{{ item.min }}</span> |
| | | <span class="w-20 text-center">~</span> |
| | | <span class="w-40 text-right">{{ item.max }}</span> |
| | | <span class="w-50 m-l-8">{{ item.unit }}</span> |
| | | </el-row> |
| | | <el-row v-else> |
| | | <span class="w-40 text-right"></span> |
| | | <span class="w-20 text-center">></span> |
| | | <span class="w-40 text-right">{{ item.min }}</span> |
| | | <span class="w-50 m-l-8">{{ item.unit }}</span> |
| | | </el-row> |
| | | </div> |
| | | <span @click="show = !show" class="btn-show"> |
| | | <img src="@/assets/mipmap/data_chart.png" class="ff-img m-r-4" /> |
| | | <el-icon v-if="show"><ArrowLeftBold /></el-icon> |
| | | <el-icon v-else><ArrowRightBold /></el-icon> |
| | | </span> |
| | | </template> |
| | | </BaseCard> |
| | | </template> |
| | | |
| | | <script> |
| | | import { Legend } from '@/model/Legend'; |
| | | import { factorUnit } from '../../constant/factor-unit'; |
| | | import { factorUnit } from '@/constant/factor-unit'; |
| | | import { Factor } from '@/model/Factor'; |
| | | |
| | | export default { |
| | |
| | | default: () => new Factor() |
| | | } |
| | | }, |
| | | emits: ['change'], |
| | | data() { |
| | | return {}; |
| | | return { |
| | | // 绘图模式,false: 标准模式;true:动态模式 |
| | | legendType: false, |
| | | legends: [], |
| | | show: true, |
| | | btnShow: false |
| | | }; |
| | | }, |
| | | watch: { |
| | | factor(nValue, oValue) { |
| | | if (nValue != oValue && nValue) { |
| | | this.legends = this.refreshLegend( |
| | | nValue.factorName, |
| | | nValue.legendType, |
| | | nValue.min, |
| | | nValue.max |
| | | ); |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | legends() { |
| | | const res = this.factor |
| | | ? this.refreshLegend( |
| | | this.factor.factorName, |
| | | this.factor.legendType, |
| | | this.factor.min, |
| | | this.factor.max |
| | | ) |
| | | : []; |
| | | return res; |
| | | } |
| | | // legends() { |
| | | // const res = this.factor |
| | | // ? this.refreshLegend( |
| | | // this.factor.factorName, |
| | | // this.factor.legendType, |
| | | // this.factor.min, |
| | | // this.factor.max |
| | | // ) |
| | | // : []; |
| | | // return res; |
| | | // } |
| | | }, |
| | | methods: { |
| | | /** |
| | |
| | | ', ' + |
| | | color[3] + |
| | | ')'; |
| | | const { scale = 1, unit = '' } = factorUnit[name]; |
| | | legendList.push({ |
| | | color: bgColor, |
| | | min: r[0], |
| | | max: nextR ? nextR[0] : undefined, |
| | | unit: factorUnit[name] |
| | | min: r[0] * scale, |
| | | max: nextR ? nextR[0] * scale : undefined, |
| | | unit: unit |
| | | }); |
| | | } |
| | | |
| | | return legendList; |
| | | }, |
| | | |
| | | handleChange(value) { |
| | | this.$emit('change', value, () => { |
| | | this.legends = this.refreshLegend( |
| | | this.factor.factorName, |
| | | this.factor.legendType, |
| | | this.factor.min, |
| | | this.factor.max |
| | | ); |
| | | }); |
| | | }, |
| | | onBeforeEnter() { |
| | | this.btnShow = false; |
| | | }, |
| | | onAfterLeave() { |
| | | this.btnShow = true; |
| | | } |
| | | } |
| | | }; |
| | |
| | | .text-center { |
| | | text-align: center; |
| | | } |
| | | |
| | | .el-switch { |
| | | --el-switch-on-color: #1f9956; |
| | | --el-switch-off-color: #8b8b8b; |
| | | } |
| | | .btn-show { |
| | | cursor: pointer; |
| | | } |
| | | .btn-show:hover { |
| | | color: #23dad1; |
| | | } |
| | | </style> |