490 lines
8.5 KiB
Vue
490 lines
8.5 KiB
Vue
<template>
|
||
<Card title="实时湿度监测">
|
||
<div class="top-right-box">
|
||
<div class="humidity-pic">
|
||
<img src="@/assets/images/standardCureRoom/yuanZhu.png" alt="" />
|
||
</div>
|
||
<div class="humidity-detail">
|
||
<div class="text-detail">
|
||
<i>湿度: {{ realValue }}%RH</i>
|
||
</div>
|
||
<div class="icon-detail">
|
||
<img src="@/assets/images/standardCureRoom/thermometer.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div
|
||
id="realtimeHumidity"
|
||
ref="realtimeHumidity"
|
||
style="width: 80%; height: 85%; padding-left: 12%; padding-top: 10%"
|
||
></div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { GlobalStore } from "@/stores";
|
||
import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
|
||
import * as echarts from "echarts";
|
||
import { onMounted, reactive, ref } from "vue";
|
||
import Card from "@/components/card.vue";
|
||
const store = GlobalStore();
|
||
let option = ref();
|
||
let realValue = ref(120 as any);
|
||
function initOption() {
|
||
let TP_value = realValue.value; // 展示温度
|
||
let kd = []; // 刻度
|
||
let kd2 = [];
|
||
let Gradient = []; // 存放颜色的数组
|
||
let showValue = ""; // 显示内容 温度数字
|
||
|
||
// 刻度最大值
|
||
let maxValue = 120;
|
||
if (TP_value > 120) {
|
||
maxValue = TP_value;
|
||
}
|
||
|
||
// 刻度差值
|
||
let diffValue = 0;
|
||
diffValue = 130 - maxValue;
|
||
|
||
// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
|
||
for (let i = 0, len = 155; i <= len; i++) {
|
||
if (i < 10 || i > 130) {
|
||
kd.push("");
|
||
} else {
|
||
if ((i - 10) % 20 === 0) {
|
||
kd.push("-5");
|
||
} else if ((i - 10) % 4 === 0) {
|
||
kd.push("-3");
|
||
} else {
|
||
kd.push("");
|
||
}
|
||
}
|
||
}
|
||
console.log("刻度", kd);
|
||
for (let i = 0, len = 145; i <= len; i++) {
|
||
if (i < 10 || i > 130) {
|
||
kd2.push("");
|
||
} else {
|
||
if ((i - 10) % 20 === 0) {
|
||
kd2.push("5");
|
||
} else if ((i - 10) % 4 === 0) {
|
||
kd2.push("3");
|
||
} else {
|
||
kd2.push("");
|
||
}
|
||
}
|
||
}
|
||
|
||
//中间线的渐变色和文本内容
|
||
if (TP_value > 110) {
|
||
Gradient.push(
|
||
{
|
||
offset: 0,
|
||
color: "#1755F0"
|
||
},
|
||
{
|
||
offset: 0.25,
|
||
color: "#33C6FF"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#93FE94"
|
||
},
|
||
{
|
||
offset: 0.75,
|
||
color: "#E4D225"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#E01F28"
|
||
}
|
||
);
|
||
} else if (TP_value > 60) {
|
||
Gradient.push(
|
||
{
|
||
offset: 0,
|
||
color: "#1755F0"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#33C6FF"
|
||
},
|
||
{
|
||
offset: 0.75,
|
||
color: "#93FE94"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#E4D225"
|
||
}
|
||
);
|
||
} else if (TP_value > 42) {
|
||
Gradient.push(
|
||
{
|
||
offset: 0,
|
||
color: "#1755F0"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#33C6FF"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#93FE94"
|
||
}
|
||
);
|
||
} else {
|
||
Gradient.push(
|
||
{
|
||
offset: 0,
|
||
color: "#1755F0"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#33C6FF"
|
||
}
|
||
);
|
||
}
|
||
// if (TP_value > 120) {
|
||
// showValue = 120;
|
||
// } else {
|
||
// if (TP_value < 0) {
|
||
// showValue = 0;
|
||
// } else {
|
||
// showValue = TP_value;
|
||
// }
|
||
// }
|
||
showValue = TP_value;
|
||
// 避免温度过低 右侧指示内容出界
|
||
if (TP_value < -10) {
|
||
boxPosition = [65, -120];
|
||
}
|
||
|
||
// leftColor = Gradient[Gradient.length - 1].color;
|
||
// 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
|
||
|
||
option.value = {
|
||
// backgroundColor: "#0C2F6F",
|
||
yAxis: [
|
||
{
|
||
show: false,
|
||
data: [],
|
||
min: 0,
|
||
max: 135,
|
||
axisLine: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
min: 0,
|
||
max: 50
|
||
},
|
||
{
|
||
type: "category",
|
||
data: ["", "", "", "", "", "", "", "", "", ""],
|
||
position: "left",
|
||
offset: -150,
|
||
axisLabel: {
|
||
fontSize: 18,
|
||
color: "white"
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
xAxis: [
|
||
{
|
||
show: false,
|
||
min: -10,
|
||
max: 80,
|
||
data: []
|
||
},
|
||
{
|
||
show: false,
|
||
min: -10,
|
||
max: 80,
|
||
data: []
|
||
},
|
||
{
|
||
show: false,
|
||
min: -10,
|
||
max: 80,
|
||
data: []
|
||
},
|
||
{
|
||
show: false,
|
||
min: -5,
|
||
max: 80
|
||
},
|
||
{
|
||
show: false,
|
||
min: -17,
|
||
max: 80
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: "条/温度计柱",
|
||
type: "bar",
|
||
// 对应上面XAxis的第一个对象配置
|
||
xAxisIndex: 0,
|
||
data: [
|
||
{
|
||
value: showValue + diffValue
|
||
}
|
||
],
|
||
barWidth: 13,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient),
|
||
barBorderRadius: 50
|
||
}
|
||
},
|
||
z: 2
|
||
},
|
||
{
|
||
name: "白框/里面填充柱",
|
||
type: "bar",
|
||
xAxisIndex: 1,
|
||
barGap: "-100%",
|
||
data: [131],
|
||
barWidth: 25,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#0C2E6D",
|
||
barBorderRadius: 50
|
||
}
|
||
},
|
||
z: 1
|
||
},
|
||
{
|
||
name: "外框",
|
||
type: "bar",
|
||
xAxisIndex: 2,
|
||
barGap: "-100%",
|
||
data: [132],
|
||
barWidth: 26,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#4577BA",
|
||
barBorderRadius: 50
|
||
}
|
||
},
|
||
z: 0
|
||
},
|
||
{
|
||
name: "圆",
|
||
type: "scatter",
|
||
hoverAnimation: false,
|
||
data: [0],
|
||
xAxisIndex: 0,
|
||
symbolSize: 20,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#0A34B4",
|
||
opacity: 1,
|
||
// 边框颜色
|
||
borderColor: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 1,
|
||
x2: 1,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: "#688dea" // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "#3b60cb" // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
},
|
||
borderWidth: 5
|
||
}
|
||
},
|
||
|
||
z: 2
|
||
},
|
||
{
|
||
name: "白圆/温度计圆下方圆",
|
||
type: "scatter",
|
||
hoverAnimation: false,
|
||
data: [0],
|
||
xAxisIndex: 1,
|
||
symbolSize: 40,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#0C2E6D",
|
||
opacity: 1,
|
||
borderColor: "#1a479a",
|
||
borderWidth: 2
|
||
}
|
||
},
|
||
z: 1
|
||
},
|
||
{
|
||
name: "外圆/最外层圆",
|
||
type: "scatter",
|
||
hoverAnimation: false,
|
||
data: [0],
|
||
xAxisIndex: 2,
|
||
symbolSize: 30,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#4577BA",
|
||
opacity: 1
|
||
}
|
||
},
|
||
z: 0
|
||
},
|
||
{
|
||
name: "刻度",
|
||
type: "bar",
|
||
yAxisIndex: 0,
|
||
xAxisIndex: 3,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "left",
|
||
distance: 10,
|
||
color: "#97B4EE",
|
||
fontSize: 12,
|
||
formatter: function (params) {
|
||
if (params.dataIndex > 130 || params.dataIndex < 10) {
|
||
return "";
|
||
} else {
|
||
if ((params.dataIndex - 10) % 20 === 0) {
|
||
return params.dataIndex - diffValue;
|
||
} else {
|
||
return "";
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
barGap: "-100%",
|
||
data: kd,
|
||
barWidth: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#97B4EE",
|
||
barBorderRadius: 120
|
||
}
|
||
},
|
||
z: 0
|
||
},
|
||
{
|
||
name: "刻度2",
|
||
type: "bar",
|
||
grid: {
|
||
left: "0%"
|
||
},
|
||
yAxisIndex: 0,
|
||
xAxisIndex: 4,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "right",
|
||
distance: 10,
|
||
color: "#97B4EE",
|
||
fontSize: 12,
|
||
formatter: function (params) {
|
||
if (params.dataIndex > 130 || params.dataIndex < 10) {
|
||
return "";
|
||
} else {
|
||
if ((params.dataIndex - 10) % 20 === 0) {
|
||
return params.dataIndex - diffValue;
|
||
} else {
|
||
return "";
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
barGap: "100%",
|
||
data: kd2,
|
||
barWidth: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#97B4EE",
|
||
barBorderRadius: 120
|
||
}
|
||
},
|
||
z: 0
|
||
}
|
||
]
|
||
};
|
||
drawChart();
|
||
}
|
||
function drawChart() {
|
||
let chartDom = document.getElementById("realtimeHumidity");
|
||
if (chartDom) {
|
||
chartDom.removeAttribute("_echarts_instance_");
|
||
}
|
||
let realtimeHumidity = echarts.init(document.getElementById("realtimeHumidity"));
|
||
realtimeHumidity.setOption(option.value);
|
||
// window.onresize = function () {
|
||
// myEchart.resize();
|
||
// }
|
||
}
|
||
onMounted(async () => {
|
||
initOption();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.top-right-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.humidity-pic {
|
||
position: absolute;
|
||
top: 10%;
|
||
left: 10%;
|
||
width: 35%;
|
||
height: 80%;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.humidity-detail {
|
||
position: absolute;
|
||
width: 40%;
|
||
height: 45%;
|
||
top: 35%;
|
||
right: 5%;
|
||
.text-detail {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 15%;
|
||
font-size: 20px;
|
||
font-family: OPPOSans-Bold, OPPOSans;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
background: url("@/assets/images/standardCureRoom/textBg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.icon-detail {
|
||
width: 90%;
|
||
height: 60%;
|
||
margin-top: 10%;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|