zmj
/
plantScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

接口对接

This commit is contained in:
zmj 2023-12-17 21:59:48 +08:00
parent 94aa9bf1c5
commit 6a1fbee12c
6 changed files with 809 additions and 703 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/detail/centerBottom.vue
View File

@ -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">

43
src/components/detail/leftCenter.vue
View File

@ -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>

60
src/components/detail/rightBottom.vue
View File

@ -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>

18
src/components/detail/rightTop.vue
View File

@ -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) => {

5
src/view/detail.vue
View File

@ -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">

1308
yarn.lock
View File

File diff suppressed because it is too large Load Diff