接口对接
This commit is contained in:
parent
94aa9bf1c5
commit
6a1fbee12c
|
@ -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">
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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(
|
||||
{
|
||||
areaCode:510521,
|
||||
streetCode:510521100,
|
||||
land_id:18
|
||||
}
|
||||
).then(res=>{
|
||||
console.log(res.data)
|
||||
})
|
||||
// deviceCountLandApi(
|
||||
// {
|
||||
// areaCode:510521,
|
||||
// streetCode:510521100,
|
||||
// land_id:18
|
||||
// }
|
||||
// ).then(res=>{
|
||||
// console.log(res.data)
|
||||
// })
|
||||
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue