<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>
|
<div>
|
切换绘图模式：
|
<el-switch
|
v-model="legendType"
|
width="60"
|
inline-prompt
|
style=""
|
active-text="动态"
|
inactive-text="标准"
|
@change="handleChange"
|
/>
|
</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()
|
}
|
},
|
emits: ['change'],
|
data() {
|
return {
|
// 绘图模式，false: 标准模式；true：动态模式
|
legendType: false,
|
legends: []
|
};
|
},
|
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;
|
// }
|
},
|
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] +
|
')';
|
const { scale = 1, unit = '' } = factorUnit[name];
|
legendList.push({
|
color: bgColor,
|
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
|
);
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.text-right {
|
text-align: right;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
.el-switch {
|
--el-switch-on-color: #1f9956;
|
--el-switch-off-color: #8b8b8b;
|
}
|
</style>
|
