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