From f5b4cdc0731e105cc72a3aedce7c58f711113d7b Mon Sep 17 00:00:00 2001
From: lxz <lxz15516116653@163.com>
Date: Tue, 2 Jan 2024 18:13:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=B1=95=E9=A6=86=E5=B1=95?=
=?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/index/leftBottom.vue | 8 ++--
src/components/index/leftCenter.vue | 2 +-
src/components/index/rightTop.vue | 2 +-
src/components/warnPop.vue | 64 +++++++++++++----------------
4 files changed, 35 insertions(+), 41 deletions(-)
diff --git a/src/components/index/leftBottom.vue b/src/components/index/leftBottom.vue
index f3567f2..95fa7f4 100644
--- a/src/components/index/leftBottom.vue
+++ b/src/components/index/leftBottom.vue
@@ -6,7 +6,7 @@ import scrollTable from "@/components/scrollTable.vue"
import { ref, reactive, onMounted } from "vue"
import { plantProductCountApi } from "@/api.js"
import { areaObj } from "@/store/index.js"
-const userInfoStore=areaObj()
+const userInfoStore = areaObj()
// ...userInfoStore.userInfo
const alignFn = (num) => {
let arr = []
@@ -22,7 +22,7 @@ const config2 = reactive({
headerStyle: "background:#0E316B",
align: alignFn(4),
- data: [ ]
+ data: []
})
@@ -45,14 +45,14 @@ const correctionListFn = (list) => {
plantProductCountApi(
{
- ...userInfoStore.userInfo
+ ...userInfoStore.userInfo
}
).then(res => {
correctionListFn(res.data.list).forEach(item => {
config2.data.push(
- [item[0].kind, `<img src=${ item[0].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>` , item[1].kind,`<img src=${ item[1].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>` ]
+ [item[0].kind, `<img src=${item[0].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`, item[1].kind, `<img src=${item[1].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`]
)
})
})
diff --git a/src/components/index/leftCenter.vue b/src/components/index/leftCenter.vue
index 1d5e02f..b607a45 100644
--- a/src/components/index/leftCenter.vue
+++ b/src/components/index/leftCenter.vue
@@ -46,7 +46,7 @@ const setOnlineFn = (data) => {
title: [
{
- text: (data.value / data.total * 100) + '%',
+ text: (data.value / data.total * 100).toFixed(2) + '%',
x: 'center',
top: '42%',
textStyle: {
diff --git a/src/components/index/rightTop.vue b/src/components/index/rightTop.vue
index 61ae6f3..25b075e 100644
--- a/src/components/index/rightTop.vue
+++ b/src/components/index/rightTop.vue
@@ -1,7 +1,7 @@
<template>
<div class="content" id="eq">
<div class="eq" v-for="item in productList" :key="item">
- <img :src="item.image" style="width:8vw;height: 100%;border-radius: 1vh;" alt="">
+ <img :src="item.image" style="height: 100%;border-radius: 1vh;" alt="">
<div
style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
<div style="display: flex;align-items: center;">
diff --git a/src/components/warnPop.vue b/src/components/warnPop.vue
index fc233fb..3886fc6 100644
--- a/src/components/warnPop.vue
+++ b/src/components/warnPop.vue
@@ -4,22 +4,22 @@
<div class="l">
<div style="position: relative;padding-top: 5px;">
- <div style="position: absolute;top: 0;">
+ <div style="position: absolute;top: 0;font-size: 10px;">
土壤温度（℃）已预警 <span style="color: #B7555A;">{{ data.soil_temperature?.alarmCount }}</span> （次）
</div>
<div class="t" style="width: 15vw;" id="l_t"></div>
</div>
<div style="position: relative;padding-top: 5px;">
- <div style="position: absolute;top: 0;">
- 土壤湿度（℃）已预警 <span style="color: #B7555A;">{{data.soil_moisture?.alarmCount }}</span> （次）
+ <div style="position: absolute;top: 0;font-size: 10px;">
+ 土壤湿度（℃）已预警 <span style="color: #B7555A;">{{ data.soil_moisture?.alarmCount }}</span> （次）
</div>
<div class="t" id="l_c"></div>
</div>
<div style="position: relative;padding-top: 5px;">
- <div style="position: absolute;top: 0;">
- 土壤PH值 已预警 <span style="color: #B7555A;">{{data.soil_PH?.alarmCount }}</span> （次）
+ <div style="position: absolute;top: 0;font-size: 10px;">
+ 土壤PH值 已预警 <span style="color: #B7555A;">{{ data.soil_PH?.alarmCount }}</span> （次）
</div>
<div class="t" id="l_b"></div>
</div>
@@ -27,30 +27,31 @@
<div class="c">
<div>
- <div style="position: absolute;top: 0;">
- 土壤氮磷钾 已预警 <span style="color: #B7555A;">{{data.soil_potassium_phosphate_nitrogen?.alarmCount }}</span> （次）
+ <div style="position: absolute;top: 0;font-size: 10px;margin-bottom: 2px;">
+ 土壤氮磷钾 已预警 <span style="color: #B7555A;">{{ data.soil_potassium_phosphate_nitrogen?.alarmCount }}</span>
+ （次）
</div>
<div class="c-t" id="c_t"></div>
</div>
<div class="c-b">
- <div style="position: absolute;top: 0;left: 5vw;">
- 风速（m/s） 已预警 <span style="color: #B7555A;">{{ data.wind_speed?.alarmCount }}</span> （次）
+ <div style="position: absolute;top: 0;left: 5vw;font-size: 10px;">
+ 风速（m/s） 已预警 <span style="color: #B7555A;">{{ data.wind_speed?.alarmCount }}</span> （次）
</div>
<div id="c_b" style="width: 100%;height: 100%;"></div>
</div>
</div>
<div class="l">
<div style="position: relative;padding-top: 5px;">
- <div style="position: absolute;top: 0;">
+ <div style="position: absolute;top: 0;font-size: 10px;">
环境温度（℃）已预警 <span style="color: #B7555A;">{{ data.ambient_temperature?.alarmCount }}</span> （次）
</div>
<div class="t" style="width: 14vw;" id="r_t"></div>
</div>
<div style="position: relative;padding-top: 5px;">
- <div style="position: absolute;top: 0;">
+ <div style="position: absolute;top: 0;font-size: 10px;">
环境湿度（℃）已预警 <span style="color: #B7555A;">{{ data.ambient_humidity?.alarmCount }}</span> （次）
</div>
<div class="t" id="r_c"></div>
@@ -58,7 +59,7 @@
<!-- <div class="l-c"></div> -->
<div style="position: relative;padding-top: 5px;">
- <div style="position: absolute;top: 0;">
+ <div style="position: absolute;top: 0;font-size: 10px;">
二氧化碳 已预警 <span style="color: #B7555A;">{{ data.carbon_dioxide?.alarmCount }}</span> （次）
</div>
<div class="t" id="r_b"></div>
@@ -136,17 +137,17 @@
<script setup>
import options from "@/view/option"
import * as echarts from 'echarts';
-import { ref, reactive, onMounted, defineEmits,defineProps } from "vue"
+import { ref, reactive, onMounted, defineEmits, defineProps } from "vue"
import { landMonitorAlarmHistoryApi } from "@/api.js"
import { areaObj } from "@/store/index.js"
-const userStore=areaObj()
+const userStore = areaObj()
const props = defineProps({
- item:Object,
+ item: Object,
})
-const data=reactive({})
+const data = reactive({})
const emit = defineEmits(['off'])
const off = () => {
@@ -164,7 +165,7 @@ const initCharts = (tag, option) => {
-const setoptionsFn = (X, Y) => {
+const setoptionsFn = (X, Y, tits) => {
let data = {
color: ["#ffc20e", "#00ae9d"],
@@ -179,6 +180,7 @@ const setoptionsFn = (X, Y) => {
trigger: "axis",
backgroundColor: "rgba(61, 85, 102, 0.2)",
borderWidth: 1,
+ confine:true,
borderColor: "#9DBAE1", // 边框颜色
// 选中线颜色
axisPointer: {
@@ -189,16 +191,7 @@ const setoptionsFn = (X, Y) => {
// 字体颜色
textStyle: {
color: "#fff",
- fontSize: 10
- }
- },
- legend: {
- right: "3%",
- icon: "circle",
- itemWidth: 8,
- itemGap: 20,
- textStyle: {
- padding: [0, 0, 0, 5]
+ fontSize: 8
}
},
xAxis: [
@@ -238,7 +231,7 @@ const setoptionsFn = (X, Y) => {
],
series: [
{
- name: "",
+ name: tits,
type: "line",
smooth: true, // 是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
@@ -285,6 +278,7 @@ const CKP = {
trigger: "axis",
backgroundColor: "rgba(61, 85, 102, 0.2)",
borderWidth: 1,
+ confine:true,
borderColor: "#9DBAE1", // 边框颜色
// 选中线颜色
axisPointer: {
@@ -303,7 +297,7 @@ const CKP = {
icon: "circle",
itemWidth: 8,
itemGap: 20,
- show:false,
+ show: false,
textStyle: {
padding: [0, 0, 0, 5]
}
@@ -433,17 +427,17 @@ const CKP = {
landMonitorAlarmHistoryApi({
- ...userStore.userInfo,
+ ...userStore.userInfo,
land_id: props.item.land_id
}).then(res => {
- for (let key in res.data.list){
- data[key]=res.data.list[key]
+ for (let key in res.data.list) {
+ data[key] = res.data.list[key]
}
- initCharts('l_t', setoptionsFn(res.data.list.soil_temperature.historyList[0].time, res.data.list.soil_temperature.historyList[1].value))
- initCharts('l_c', setoptionsFn(res.data.list.soil_moisture.historyList[0].time, res.data.list.soil_moisture.historyList[1].value))
+ initCharts('l_t', setoptionsFn(res.data.list.soil_temperature.historyList[0].time, res.data.list.soil_temperature.historyList[1].value),'土壤温度')
+ initCharts('l_c', setoptionsFn(res.data.list.soil_moisture.historyList[0].time, res.data.list.soil_moisture.historyList[1].value),'土壤湿度')
initCharts('l_b', setoptionsFn(res.data.list.soil_PH.historyList[0].time, res.data.list.soil_PH.historyList[1].value))
initCharts('c_b', setoptionsFn(res.data.list.wind_speed.historyList[0].time, res.data.list.wind_speed.historyList[1].value))
initCharts('r_t', setoptionsFn(res.data.list.ambient_temperature.historyList[0].time, res.data.list.ambient_temperature.historyList[1].value))
@@ -467,6 +461,6 @@ onMounted(() => {
document.getElementById("r_t").removeAttribute('_echarts_instance_');
document.getElementById("r_c").removeAttribute('_echarts_instance_');
document.getElementById("r_b").removeAttribute('_echarts_instance_');
-
+
})
</script>
\ No newline at end of file