<template>
|
<BaseCard>
|
<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-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>
|
</template>
|
</BaseCard>
|
</template>
|
|
<script>
|
import { Legend } from '@/model/Legend';
|
import { factorUnit } from '@/constant/factor-unit';
|
import { Factor } from '@/model/Factor';
|
|
export default {
|
props: {
|
factor: {
|
type: Factor,
|
default: () => new Factor()
|
}
|
},
|
data() {
|
return {};
|
},
|
computed: {
|
legends() {
|
const res = this.factor
|
? this.refreshLegend(
|
this.factor.factorName,
|
this.factor.legendType,
|
this.factor.min,
|
this.factor.max
|
)
|
: [];
|
return res;
|
}
|
},
|
methods: {
|
/**
|
* 获取分析图例
|
*/
|
refreshLegend(name, type, min, max) {
|
var r = Legend._legend_r[name];
|
var c = Legend._legend_c[name];
|
// 没有找到标准图例的因子，默认使用自定义范围图例
|
if (r == undefined) {
|
type = Legend.C_TYPE;
|
}
|
var range = [];
|
if (type != Legend.S_TYPE && min != undefined && max != undefined) {
|
var count = Legend._custom.length;
|
var per = (max - min) / count;
|
for (let i = 0; i < count; i++) {
|
range.push([(min + per * i).toFixed(1), Legend._custom[i]]);
|
}
|
} else {
|
for (let i = 0; i < r.length; i++) {
|
range.push([r[i], c[i]]);
|
}
|
}
|
|
const legendList = [];
|
for (let i = 0; i < range.length; i++) {
|
const r = range[i];
|
const nextR = range[i + 1];
|
|
var color = r[1];
|
var bgColor =
|
'rgba(' +
|
color[0] * 255 +
|
', ' +
|
color[1] * 255 +
|
', ' +
|
color[2] * 255 +
|
', ' +
|
color[3] +
|
')';
|
legendList.push({
|
color: bgColor,
|
min: r[0],
|
max: nextR ? nextR[0] : undefined,
|
unit: factorUnit[name] ? factorUnit[name].unit : ''
|
});
|
}
|
|
return legendList;
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.text-right {
|
text-align: right;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
</style>
|
