接口对接

src/components/detail/centerBottom.vue

@@ -1,7 +1,7 @@
 <template>
 
 
-<div class="bottom-li" :class="(item.flag) ? 'act' : ''" v-for="(item, index) in environmentData">
+<div class="bottom-li" :class="(item.flag) ? '' : 'act'" v-for="(item, index) in environmentData">
 
 <span class="color-font">{{ item.name }}</span>
 <span>{{ item.value }}{{ item.unit }}</span>
@@ -15,59 +15,107 @@
 </template>
 <script setup>
 
+import { monitorInfoApi } from "@/api.js"
 
 import {ref,reactive} from "vue"
-const environmentData = reactive([
+const statusFn=(min,max,item  )=>{
 
+if(item.value>=min&&item.value<=max ) item.flag=true
+else item.flag=false
+    
+} 
+
+monitorInfoApi(
     {
+        areaCode: 510521,
+        streetCode: 510521100,
+        land_id: 18
+    }
+
+).then(res => {
+    for (let key in res.data.monitorThreshold){
+    monitorThreshold[key]=res.data.monitorThreshold[key]
+}
+    for (let key in environmentData){
+        environmentData[key].value=res.data.landCollection[key]
+}
+
+
+statusFn(monitorThreshold.wind_speed_min,monitorThreshold.wind_speed_max,environmentData.wind_speed )
+// statusFn(monitorThreshold.wind_speed_min,monitorThreshold.wind_speed_max,environmentData.wind_direction )
+statusFn(monitorThreshold.air_mois_mix,monitorThreshold.air_mois_max,environmentData.ambient_humidity )
+statusFn(monitorThreshold.air_temp_min,monitorThreshold.air_temp_max,environmentData.ambient_temperature )
+statusFn(monitorThreshold.air_co2_content_min,monitorThreshold.air_co2_content_max,environmentData.carbon_dioxide )
+statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.ambient_air_pressure )
+// statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.rainfall )
+// statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.ambient_lighting )
+
+
+
+
+
+
+console.log(environmentData)
+console.log(monitorThreshold)
+
+
+
+
+})
+const environmentData = reactive({
+
+    wind_speed:  {
         name: "风速",
         value: 10,
         unit: "m/s",
         flag: true
     },
-    {
+    wind_direction:  {
         name: "风向",
         value: 10,
         unit: "",
-        flag: false
+        flag: true
     },
-    {
+    ambient_humidity:    {
         name: "环境湿度",
         value: 10,
         unit: "%",
-        flag: false
+        flag: true
     },
-    {
+    ambient_temperature: {
         name: "环境温度",
         value: 10,
         unit: "℃",
-        flag: false
+        flag: true
     },
-    {
+    carbon_dioxide:  {
         name: "二氧化碳",
         value: 10,
         unit: "ppm",
         flag: true
     },
-    {
+    ambient_air_pressure: {
         name: "环境气压",
         value: 10,
         unit: "pa",
         flag: true
     },
-    {
+    rainfall: {
         name: "雨量",
         value: 10,
         unit: "mm/h",
-        flag: false
+        flag: true
     },
-    {
+    ambient_lighting:  {
         name: "环境光照",
         value: 10,
         unit: "%",
         flag: true
     },
-])
+}
+)
+const monitorThreshold=reactive({})
+
 </script>
 <style lang="scss">
 

src/components/detail/leftCenter.vue

@@ -1,17 +1,19 @@
 <template>
     <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false"></warnDetail>
-    <scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%"></scrollTable>
+    <scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%" v-if="config3.data.length"></scrollTable>
 </template>
 <script setup>
-import { ref, reactive } from "vue"
 import warnDetail from "@/components/warnDetail.vue"
+import scrollTable from "@/components/scrollTable.vue"
+import { ref, reactive,onMounted } from "vue"
+import {deviceAlarmCountApi} from "@/api.js"
 
 const showWarnDeatil = ref(false)
-import scrollTable from "@/components/scrollTable.vue"
 
 const hdClick3 = (e) => {
     if (e.ceil) {
         if (e.columnIndex == 3) {
+            // showWarnPop.value = true
             showWarnDeatil.value = true
         }
     }
@@ -24,21 +26,40 @@ const alignFn = (num) => {
     return arr
 }
 
+
+
 const config3 = reactive({
-    header: ['产品名称', '溯源码', '产品名称', '溯源码',],
+    header: ['设备名称', '设备编号', '告警时间', '操作',],
     headerBGC: "#092757",
     oddRowBGC: "#0C2045",
     headerStyle: "background-image: url('/static/index/SBGJBG.png');font-family: FZCYJ;background-size: 100% 100%;",
     align: alignFn(4),
     data: [
-        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
+        // ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
-        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
+        // ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
-        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
+        // ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
-        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
+        // ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
-        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
+        // ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
-        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
+        // ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
-        ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
+        // ['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
 
     ]
 })
+
+onMounted( ()=>{
+    deviceAlarmCountApi(
+    {
+        areaCode:510521,
+        streetCode:510521100,
+        land_id:18
+    }
+    ).then(res=>{
+
+        res.data.list.forEach(item => {
+            config3.data.push(
+                [item.device_name, item.device_code, item.update_time, `<span style="color:#2562AD"> 详情 </span>`,],
+            )
+        });
+    })
+} )
 </script>

src/components/detail/rightBottom.vue

@@ -12,6 +12,14 @@
 import { reactive } from "vue"
 import { monitorInfoApi } from "@/api.js"
 
+const statusFn=(min,max,item  )=>{
+
+if(item.value>=min&&item.value<=max ) item.flag=true
+else item.flag=false
+    
+} 
+
+
 monitorInfoApi(
     {
         areaCode: 510521,
@@ -20,53 +28,81 @@ monitorInfoApi(
     }
 
 ).then(res => {
-    console.log(res.data)
+
+for (let key in res.data.monitorThreshold){
+    monitorThreshold[key]=res.data.monitorThreshold[key]
+}
+
+for (let key in MoistureData){
+    MoistureData[key].value=res.data.landCollection[key]
+}
+
+statusFn(monitorThreshold.soil_temp_min,monitorThreshold.soil_temp_max,MoistureData.soil_temperature )
+statusFn(monitorThreshold.soil_mois_min,monitorThreshold.soil_mois_max,MoistureData.soil_moisture )
+// statusFn(monitorThreshold.soil_mois_min,monitorThreshold.soil_mois_max,MoistureData.soil_conductivity )
+statusFn(monitorThreshold.soil_ph_min,monitorThreshold.soil_ph_max,MoistureData.soil_PH )
+statusFn(monitorThreshold.soil_n_content_min,monitorThreshold.soil_n_content_max,MoistureData.soil_potassium_phosphate_nitrogen )
+statusFn(monitorThreshold.soil_p_content_min,monitorThreshold.soil_p_content_max,MoistureData.soil_potassium_phosphate_phosphorus )
+statusFn(monitorThreshold.soil_k_content_max,monitorThreshold.soil_k_content_max,MoistureData.soil_potassium_phosphate_potassium )
 })
 // /api/dataview.land/monitorInfo?areaCode=510521&streetCode=510521100&land_id=18
 
 
-const MoistureData = reactive([
+const MoistureData = reactive(
-    {
+{
+    soil_temperature: {
         name: "土壤温度",
         value: 12,
         unit: "℃",
         flag: true
-    }, {
+    },
+    soil_moisture: {
         name: "土壤湿度",
         value: 12,
         unit: "℃",
-        flag: false
+        flag: true
-    }, {
+    },
+    soil_conductivity: {
         name: "土壤电导率",
         value: 12,
         unit: "ps/cm",
         flag: true
-    }, {
+    }, 
+    soil_PH:{
         name: "土壤PH值",
         value: 4,
         unit: "",
         flag: true
-    }, {
+    }, 
+    soil_potassium_phosphate_nitrogen:{
         name: "土壤含氮量",
         value: 12,
         unit: "",
-        flag: false
+        flag: true
-    }, {
+    },
+    soil_potassium_phosphate_phosphorus: {
         name: "土壤含磷量",
         value: 12,
         unit: "",
-        flag: false
+        flag: true
     },
-    {
+    soil_potassium_phosphate_potassium:    {
         name: "土壤含钾量",
         value: 12,
         unit: "",
         flag: true
     },
+}
+
+ 
 
 
 
-])
+)
+
+
+
+const monitorThreshold=reactive({})
 
 </script>
 

src/components/detail/rightTop.vue

@@ -34,15 +34,15 @@ import {ref,reactive,onMounted} from "vue"
 import * as echarts from 'echarts';
 import options from "@/view/option.js"
 import {deviceCountLandApi} from "@/api.js"
-deviceCountLandApi(
+// deviceCountLandApi(
-    {
+//     {
-        areaCode:510521,
+//         areaCode:510521,
-        streetCode:510521100,
+//         streetCode:510521100,
-        land_id:18
+//         land_id:18
-    }
+//     }
-).then(res=>{
+// ).then(res=>{
-    console.log(res.data)
+//     console.log(res.data)
-})
+// })
 
 // 图表
 const initCharts = (tag, option) => {

src/view/detail.vue

@@ -17,7 +17,7 @@
             <div class="top-c">
                 <div style="display: flex;justify-content: space-between;">
                     <div class="  c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
-                    <div class="  c-top-tits"><span class="color-font">同谭政地块</span> </div>
+                    <div class="  c-top-tits"><span class="color-font">{{route.query.town}}地块</span> </div>
                 </div>
                 <farmerMap></farmerMap>
             </div>
@@ -44,8 +44,9 @@ import leftCenter from "../components/detail/leftCenter.vue";
 import centerBottom from "../components/detail/centerBottom.vue";
 import rightTop from "../components/detail/rightTop.vue";
 import rightBottom from "../components/detail/rightBottom.vue";
-import {useRouter} from "vue-router"
+import {useRouter,useRoute} from "vue-router"
 const router=useRouter()
+const route=useRoute()
 
 </script>
 <style lang="scss">