设备告警修改
This commit is contained in:
parent
9b0ec613eb
commit
5bc6506e55
|
@ -5,7 +5,9 @@ import axios from "axios";
|
||||||
|
|
||||||
// 创建axios 实例
|
// 创建axios 实例
|
||||||
const instacne = axios.create({
|
const instacne = axios.create({
|
||||||
baseURL: "http://ceshi-suyuan.lihaink.cn/",
|
// baseURL: "http://ceshi-suyuan.lihaink.cn/",
|
||||||
|
baseURL: "https://suyuan.lihaink.cn/",
|
||||||
|
|
||||||
timeout: 30000,
|
timeout: 30000,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -42,6 +42,8 @@ const choseTownFn = (item) => {
|
||||||
|
|
||||||
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${510521}`)
|
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${510521}`)
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
|
|
||||||
|
userInfoStore.changeareaCodeList(response.data.data)
|
||||||
response.data.data.forEach(item => {
|
response.data.data.forEach(item => {
|
||||||
areaList.push(item)
|
areaList.push(item)
|
||||||
})
|
})
|
||||||
|
|
|
@ -42,6 +42,8 @@ import * as echarts from 'echarts';
|
||||||
import geoJson from "/static/jsonData/luxian_geo.js"
|
import geoJson from "/static/jsonData/luxian_geo.js"
|
||||||
import { useRouter } from "vue-router"
|
import { useRouter } from "vue-router"
|
||||||
import { areaObj } from "@/store/index.js"
|
import { areaObj } from "@/store/index.js"
|
||||||
|
import { landListApi } from "@/api.js"
|
||||||
|
|
||||||
const areaStore = areaObj()
|
const areaStore = areaObj()
|
||||||
|
|
||||||
const showArea = (ref(true))
|
const showArea = (ref(true))
|
||||||
|
@ -86,9 +88,24 @@ const pointerFn = () => {
|
||||||
})
|
})
|
||||||
return list
|
return list
|
||||||
}
|
}
|
||||||
|
const pointerFn2 = (lists) => {
|
||||||
|
let list = []
|
||||||
|
lists.forEach((item, index) => {
|
||||||
|
list.push({
|
||||||
|
coord: item.value,
|
||||||
|
value: item.name,
|
||||||
|
animation: true,
|
||||||
|
symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
|
||||||
|
symbolSize: [100, 30], // 图片大小
|
||||||
|
symbolOffset: ['50%', '-50%'],
|
||||||
|
data: lists,
|
||||||
|
|
||||||
|
},)
|
||||||
|
})
|
||||||
|
return list
|
||||||
|
}
|
||||||
const initAreaMap = () => {
|
const initAreaMap = () => {
|
||||||
showArea.value=true
|
showArea.value = true
|
||||||
var mapName = 'lz';
|
var mapName = 'lz';
|
||||||
const myChart = document.getElementById("chart2")
|
const myChart = document.getElementById("chart2")
|
||||||
let option = {
|
let option = {
|
||||||
|
@ -298,7 +315,12 @@ const initAreaMap = () => {
|
||||||
const bg = echarts.init(myChart)
|
const bg = echarts.init(myChart)
|
||||||
bg.setOption(option);
|
bg.setOption(option);
|
||||||
bg.on('click', function (params) {
|
bg.on('click', function (params) {
|
||||||
areaStore.changeAddress('',params.name||params.value)
|
areaStore.areaCodeList.forEach(item => {
|
||||||
|
if (item.name == (params.name||params.value)) {
|
||||||
|
areaStore.changeUserInfoFn(510521, item.code)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
areaStore.changeAddress('', params.name || params.value)
|
||||||
initTownMap(params.name || params.value)
|
initTownMap(params.name || params.value)
|
||||||
|
|
||||||
|
|
||||||
|
@ -306,13 +328,45 @@ const initAreaMap = () => {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
const initTownMap = (name) => {
|
const initTownMap = async (name) => {
|
||||||
showArea.value = false
|
showArea.value = false
|
||||||
|
let center = []
|
||||||
|
let pointerList = []
|
||||||
|
let res = await landListApi({
|
||||||
|
...areaStore.userInfo
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log(res.data,4545)
|
||||||
|
|
||||||
|
res.data.list.forEach(item => {
|
||||||
|
|
||||||
|
center.push([item.longitude, item.latitude])
|
||||||
|
pointerList.push({
|
||||||
|
value: [item.longitude, item.latitude],
|
||||||
|
name: item.title,
|
||||||
|
id: item.id
|
||||||
|
})
|
||||||
|
})
|
||||||
|
console.log(center,'center')
|
||||||
|
// let center2 = [[105.33113, 29.121584], [105.329675, 29.122785], [105.329046, 29.123046], [105.328221, 29.123388], [105.266415, 29.138461], [105.266196, 29.167795]]
|
||||||
|
let pointerList2 = []
|
||||||
|
center.forEach((item, index) => {
|
||||||
|
pointerList2.push({
|
||||||
|
value: item,
|
||||||
|
name: "土地" + index,
|
||||||
|
id: 18
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
const townJson = deepCopy(geoJson)
|
const townJson = deepCopy(geoJson)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
townJson.features = townJson.features.filter((item) => {
|
townJson.features = townJson.features.filter((item) => {
|
||||||
return item.properties.name == name
|
return item.properties.name == name
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
var mapName = 'town';
|
var mapName = 'town';
|
||||||
const myChart = document.getElementById("chart3")
|
const myChart = document.getElementById("chart3")
|
||||||
let option = {
|
let option = {
|
||||||
|
@ -492,27 +546,27 @@ const initTownMap = (name) => {
|
||||||
// return val[2] / 10;
|
// return val[2] / 10;
|
||||||
},
|
},
|
||||||
markPoint: {
|
markPoint: {
|
||||||
// data: pointerFn()
|
data: pointerFn2(pointerList2)
|
||||||
},
|
},
|
||||||
|
|
||||||
// data: (() => {
|
data: (() => {
|
||||||
// let data = {
|
let data = {
|
||||||
// 资产数: geoJson.center
|
资产数: center
|
||||||
|
|
||||||
// }
|
}
|
||||||
// let finalData = []
|
let finalData = []
|
||||||
// Object.keys(data).map((i, index) => {
|
Object.keys(data).map((i, index) => {
|
||||||
// let child = data[i].map((row, index) => ({
|
let child = data[i].map((row, index) => ({
|
||||||
// value: row,
|
value: row,
|
||||||
// itemStyle: {
|
itemStyle: {
|
||||||
// color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
|
color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
|
||||||
// },
|
},
|
||||||
// }))
|
}))
|
||||||
|
|
||||||
// finalData = [...finalData, ...child]
|
finalData = [...finalData, ...child]
|
||||||
// })
|
})
|
||||||
// return finalData
|
return finalData
|
||||||
// })(),
|
})(),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -521,6 +575,22 @@ const initTownMap = (name) => {
|
||||||
const bg = echarts.init(myChart)
|
const bg = echarts.init(myChart)
|
||||||
bg.setOption(option);
|
bg.setOption(option);
|
||||||
bg.on('click', function (params) {
|
bg.on('click', function (params) {
|
||||||
|
let longInfo = params.data.coord
|
||||||
|
areaStore.areaCodeList.forEach(item => {
|
||||||
|
if (item.name == name) {
|
||||||
|
areaStore.changeUserInfoFn(510521, item.code)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
params.data.data.forEach(item => {
|
||||||
|
|
||||||
|
if (item.value[0] == longInfo[0] && item.value[1] == longInfo[1]) {
|
||||||
|
router.push(`/detail?landId=${item.id}&town=${name}&parmas=${JSON.stringify(areaStore.userInfo) }`)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
// console.log(params.data.coord)
|
||||||
|
// console.log(params.data.data)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -529,13 +599,12 @@ watch(
|
||||||
() => areaStore.address,
|
() => areaStore.address,
|
||||||
(value, oldValue) => {
|
(value, oldValue) => {
|
||||||
|
|
||||||
if(value.city){
|
if (value.city) {
|
||||||
initAreaMap()
|
initAreaMap()
|
||||||
}
|
}
|
||||||
else if(value.area){
|
else if (value.area) {
|
||||||
showArea.value = false
|
showArea.value = false
|
||||||
initTownMap(value.area)
|
initTownMap(value.area)
|
||||||
console.log(showArea.value)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -18,6 +18,10 @@
|
||||||
import { monitorInfoApi } from "@/api.js"
|
import { monitorInfoApi } from "@/api.js"
|
||||||
|
|
||||||
import {ref,reactive} from "vue"
|
import {ref,reactive} from "vue"
|
||||||
|
const props = defineProps({
|
||||||
|
data:Object,
|
||||||
|
})
|
||||||
|
|
||||||
const statusFn=(min,max,item )=>{
|
const statusFn=(min,max,item )=>{
|
||||||
|
|
||||||
if(item.value>=min&&item.value<=max ) item.flag=true
|
if(item.value>=min&&item.value<=max ) item.flag=true
|
||||||
|
@ -27,9 +31,7 @@ else item.flag=false
|
||||||
|
|
||||||
monitorInfoApi(
|
monitorInfoApi(
|
||||||
{
|
{
|
||||||
areaCode: 510521,
|
...props.data
|
||||||
streetCode: 510521100,
|
|
||||||
land_id: 18
|
|
||||||
}
|
}
|
||||||
|
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
@ -54,13 +56,6 @@ statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
console.log(environmentData)
|
|
||||||
console.log(monitorThreshold)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
const environmentData = reactive({
|
const environmentData = reactive({
|
||||||
|
|
||||||
|
|
|
@ -5,8 +5,12 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import warnDetail from "@/components/warnDetail.vue"
|
import warnDetail from "@/components/warnDetail.vue"
|
||||||
import scrollTable from "@/components/scrollTable.vue"
|
import scrollTable from "@/components/scrollTable.vue"
|
||||||
import { ref, reactive,onMounted } from "vue"
|
import { ref, reactive,onMounted,defineProps } from "vue"
|
||||||
import {deviceAlarmCountApi} from "@/api.js"
|
import {deviceAlarmCountApi} from "@/api.js"
|
||||||
|
const props = defineProps({
|
||||||
|
data:Object,
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
const showWarnDeatil = ref(false)
|
const showWarnDeatil = ref(false)
|
||||||
|
|
||||||
|
@ -34,24 +38,13 @@ const config3 = reactive({
|
||||||
oddRowBGC: "#0C2045",
|
oddRowBGC: "#0C2045",
|
||||||
headerStyle: "background-image: url('/static/index/SBGJBG.png');font-family: FZCYJ;background-size: 100% 100%;",
|
headerStyle: "background-image: url('/static/index/SBGJBG.png');font-family: FZCYJ;background-size: 100% 100%;",
|
||||||
align: alignFn(4),
|
align: alignFn(4),
|
||||||
data: [
|
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>`,],
|
|
||||||
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted( ()=>{
|
onMounted( ()=>{
|
||||||
deviceAlarmCountApi(
|
deviceAlarmCountApi(
|
||||||
{
|
{
|
||||||
areaCode:510521,
|
...props.data
|
||||||
streetCode:510521100,
|
|
||||||
land_id:18
|
|
||||||
}
|
}
|
||||||
).then(res=>{
|
).then(res=>{
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||||
<span>种植总面积: </span>
|
<span style="font-size: 15px;">种植总面积: </span>
|
||||||
<div>
|
<div>
|
||||||
<span class="area-num " v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span>
|
<span class="area-num " v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="">种植种类:</div>
|
<div style="font-size: 15px;">种植种类 :</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="lands">
|
<div class="lands">
|
||||||
<div class="land" v-for="(item, index) in plantData.plantKindList" :key="index">{{ item.kind }}</div>
|
<div class="land" v-for="(item, index) in plantData.plantKindList" :key="index">{{ item.kind }}</div>
|
||||||
|
@ -15,7 +15,15 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {areaPlantTypeCountApi} from "@/api.js"
|
import {areaPlantTypeCountApi} from "@/api.js"
|
||||||
import {ref,reactive} from "vue"
|
import {ref,reactive,defineProps} from "vue"
|
||||||
|
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data:Object,
|
||||||
|
})
|
||||||
|
|
||||||
|
// ...props.data
|
||||||
|
|
||||||
|
|
||||||
let plantData=reactive({
|
let plantData=reactive({
|
||||||
totalArea:0,
|
totalArea:0,
|
||||||
|
@ -26,9 +34,7 @@ let plantData=reactive({
|
||||||
// api/dataview.land/areaPlantTypeCount?areaCode=510521&streetCode=510521100
|
// api/dataview.land/areaPlantTypeCount?areaCode=510521&streetCode=510521100
|
||||||
areaPlantTypeCountApi(
|
areaPlantTypeCountApi(
|
||||||
{
|
{
|
||||||
areaCode:510521,
|
...props.data
|
||||||
streetCode:510521100,
|
|
||||||
land_id:12
|
|
||||||
}
|
}
|
||||||
).then(res=>{
|
).then(res=>{
|
||||||
for (let key in res.data){
|
for (let key in res.data){
|
||||||
|
|
|
@ -9,8 +9,11 @@
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive } from "vue"
|
import { reactive,defineProps } from "vue"
|
||||||
import { monitorInfoApi } from "@/api.js"
|
import { monitorInfoApi } from "@/api.js"
|
||||||
|
const props = defineProps({
|
||||||
|
data:Object,
|
||||||
|
})
|
||||||
|
|
||||||
const statusFn=(min,max,item )=>{
|
const statusFn=(min,max,item )=>{
|
||||||
|
|
||||||
|
@ -22,9 +25,7 @@ else item.flag=false
|
||||||
|
|
||||||
monitorInfoApi(
|
monitorInfoApi(
|
||||||
{
|
{
|
||||||
areaCode: 510521,
|
...props.data
|
||||||
streetCode: 510521100,
|
|
||||||
land_id: 18
|
|
||||||
}
|
}
|
||||||
|
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>监控设备总数: <span class="num color-font">{{ totalNum }}</span> 台</div>
|
<div style="font-size: 15px;">监控设备总数: <span class="num color-font">{{ totalNum }}</span> 台</div>
|
||||||
<div class="cont">
|
<div class="cont">
|
||||||
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
|
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
|
||||||
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
|
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||||
|
@ -30,8 +30,13 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { ref, reactive, onMounted } from "vue"
|
import { ref, reactive, onMounted,defineProps } from "vue"
|
||||||
import { deviceCountLandApi } from "@/api.js"
|
import { deviceCountLandApi } from "@/api.js"
|
||||||
|
const props = defineProps({
|
||||||
|
data:Object,
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
const totalNum = ref(0)
|
const totalNum = ref(0)
|
||||||
const onlineNum = ref(0)
|
const onlineNum = ref(0)
|
||||||
const offlineNum = ref(0)
|
const offlineNum = ref(0)
|
||||||
|
@ -319,7 +324,8 @@ const initCharts = (tag, option) => {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
deviceCountLandApi({
|
deviceCountLandApi({
|
||||||
areaCode: 510521, streetCode: 510521100,land_id:18
|
...props.data
|
||||||
|
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
totalNum.value = res.data.total
|
totalNum.value = res.data.total
|
||||||
onlineNum.value = res.data.online
|
onlineNum.value = res.data.online
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
<div>
|
<div>
|
||||||
<div style="width: 45vw;height: 50vh;" id="farmerchart"></div>
|
<div style="width: 45vw;height: 50vh;" id="farmerchart"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
@ -33,12 +32,17 @@
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue"
|
import { ref, onMounted,defineEmits } from "vue"
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import "echarts-gl"
|
import "echarts-gl"
|
||||||
import geoJson from "/static/jsonData/luxian_geo.js"
|
import geoJson from "/static/jsonData/luxian_geo.js"
|
||||||
import { useRoute } from "vue-router"
|
import { useRoute } from "vue-router"
|
||||||
const deepCopy=(obj)=> {
|
import { areaObj } from "@/store/index.js"
|
||||||
|
import { landListApi } from "@/api.js"
|
||||||
|
const emit = defineEmits(['changeLand'])
|
||||||
|
|
||||||
|
const areaStore = areaObj()
|
||||||
|
const deepCopy = (obj) => {
|
||||||
if (typeof obj !== 'object' || obj === null) {
|
if (typeof obj !== 'object' || obj === null) {
|
||||||
return obj;
|
return obj;
|
||||||
}
|
}
|
||||||
|
@ -53,36 +57,71 @@ const deepCopy=(obj)=> {
|
||||||
|
|
||||||
return copy;
|
return copy;
|
||||||
}
|
}
|
||||||
|
|
||||||
const townJson=deepCopy(geoJson)
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
const townJson = deepCopy(geoJson)
|
||||||
townJson.features = townJson.features.filter((item) => {
|
townJson.features = townJson.features.filter((item) => {
|
||||||
return item.properties.name == route.query.town
|
return item.properties.name == route.query.town
|
||||||
})
|
})
|
||||||
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
|
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
|
||||||
const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
|
const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
|
||||||
|
|
||||||
const pointerFn = () => {
|
const pointerFn2 = (lists) => {
|
||||||
return
|
|
||||||
let list = []
|
let list = []
|
||||||
geoJson.center.forEach((item, index) => {
|
lists.forEach((item, index) => {
|
||||||
list.push({
|
list.push({
|
||||||
coord: item,
|
coord: item.value,
|
||||||
symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
|
value: item.name,
|
||||||
symbolSize: [100, 30], // 图片大小
|
|
||||||
symbolOffset: ['50%', '-50%'],
|
|
||||||
value: geoJson.features[index]?.properties.name || '泸县',
|
|
||||||
animation: true,
|
animation: true,
|
||||||
|
data: lists,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: 'red',
|
||||||
|
borderWidth: 1, // 标注边线线宽,单位px,默认为1
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: false
|
||||||
color: 'white',
|
}
|
||||||
fontSize: 14,
|
|
||||||
},
|
},
|
||||||
|
emphasis: {
|
||||||
|
borderColor: 'red',
|
||||||
|
borderWidth: 5,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
},)
|
},)
|
||||||
})
|
})
|
||||||
return list
|
return list
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
|
let center = []
|
||||||
|
let pointerList = []
|
||||||
|
let res = await landListApi({
|
||||||
|
...areaStore.userInfo
|
||||||
|
})
|
||||||
|
|
||||||
|
res.data.list.forEach(item => {
|
||||||
|
center.push([item.longitude, item.latitude])
|
||||||
|
pointerList.push({
|
||||||
|
value: [item.longitude, item.latitude],
|
||||||
|
name: item.title,
|
||||||
|
id: item.id
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
let center2 = [[105.33113, 29.121584], [105.329675, 29.122785], [105.329046, 29.123046], [105.328221, 29.123388], [105.266415, 29.138461], [105.266196, 29.167795]]
|
||||||
|
let pointerList2 = []
|
||||||
|
center2.forEach((item, index) => {
|
||||||
|
pointerList2.push({
|
||||||
|
value: item,
|
||||||
|
name: "土地" + index,
|
||||||
|
id: 17
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
var mapName = 'lz';
|
var mapName = 'lz';
|
||||||
const myChart = document.getElementById("farmerchart")
|
const myChart = document.getElementById("farmerchart")
|
||||||
/*获取地图数据*/
|
/*获取地图数据*/
|
||||||
|
@ -261,13 +300,13 @@ onMounted(() => {
|
||||||
// return val[2] / 10;
|
// return val[2] / 10;
|
||||||
},
|
},
|
||||||
markPoint: {
|
markPoint: {
|
||||||
data: pointerFn()
|
data: pointerFn2(pointerList2)
|
||||||
},
|
},
|
||||||
|
|
||||||
data: (() => {
|
data: (() => {
|
||||||
return
|
|
||||||
let data = {
|
let data = {
|
||||||
资产数: geoJson.center
|
资产数: center2
|
||||||
|
|
||||||
}
|
}
|
||||||
let finalData = []
|
let finalData = []
|
||||||
|
@ -287,15 +326,19 @@ onMounted(() => {
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
document.getElementById("farmerchart").removeAttribute('_echarts_instance_');
|
document.getElementById("farmerchart").removeAttribute('_echarts_instance_');
|
||||||
|
|
||||||
echarts.registerMap(mapName, townJson)
|
echarts.registerMap(mapName, townJson)
|
||||||
const bg = echarts.init(myChart)
|
const bg = echarts.init(myChart)
|
||||||
bg.setOption(option);
|
bg.setOption(option);
|
||||||
|
|
||||||
bg.on('click', function (params) {
|
bg.on('click', function (params) {
|
||||||
// mapClick()
|
let longInfo = params.data.coord
|
||||||
console.log(params.name)
|
params.data.data.forEach(item => {
|
||||||
|
if (item.value[0] == longInfo[0] && item.value[1] == longInfo[1]) {
|
||||||
|
|
||||||
|
emit('changeLand',item.id)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<warnPop v-if="showWarnPop" ref="ChildsDom" @off="showWarnPop = false"></warnPop>
|
<warnPop v-if="showWarnPop" ref="ChildsDom" @off="showWarnPop = false" :item="item"></warnPop>
|
||||||
<scrollTable v-if="config.data.length" :config="config" @click="hdClick" style="width:100%;height:100%"></scrollTable>
|
<scrollTable v-if="config.data.length" :config="config" @click="hdClick" style="width:100%;height:100%"></scrollTable>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
@ -12,11 +12,15 @@ const userInfoStore=areaObj()
|
||||||
// ...userInfoStore.userInfo
|
// ...userInfoStore.userInfo
|
||||||
const showWarnPop = ref(false)
|
const showWarnPop = ref(false)
|
||||||
const ChildsDom = ref(null);
|
const ChildsDom = ref(null);
|
||||||
|
const dataList=ref("")
|
||||||
|
const item=ref('')
|
||||||
const hdClick = (e) => {
|
const hdClick = (e) => {
|
||||||
// console.log(e)
|
// console.log(e)
|
||||||
if (e.ceil) {
|
if (e.ceil) {
|
||||||
if (e.columnIndex == 9) {
|
if (e.columnIndex == 9) {
|
||||||
showWarnPop.value = true
|
showWarnPop.value = true
|
||||||
|
item.value=dataList.value[e.rowIndex]
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -45,6 +49,7 @@ landCollectionListApi(
|
||||||
}
|
}
|
||||||
|
|
||||||
).then(res=>{
|
).then(res=>{
|
||||||
|
dataList.value=res.data.list
|
||||||
res.data.list.forEach(item => {
|
res.data.list.forEach(item => {
|
||||||
config.data.push(
|
config.data.push(
|
||||||
[item.title, item.soil_temperature,item.soil_moisture, item.soil_PH,item.soil_potassium_phosphate_nitrogen+'/'+item.soil_potassium_phosphate_phosphorus+'/'+item.soil_potassium_phosphate_potassium, item.wind_speed, item.ambient_temperature, item.ambient_humidity, item.carbon_dioxide, `<span style='color:#2562AD' > 查看<span>`]
|
[item.title, item.soil_temperature,item.soil_moisture, item.soil_PH,item.soil_potassium_phosphate_nitrogen+'/'+item.soil_potassium_phosphate_phosphorus+'/'+item.soil_potassium_phosphate_potassium, item.wind_speed, item.ambient_temperature, item.ambient_humidity, item.carbon_dioxide, `<span style='color:#2562AD' > 查看<span>`]
|
||||||
|
|
|
@ -58,7 +58,6 @@ onMounted( ()=>{
|
||||||
}
|
}
|
||||||
).then(res=>{
|
).then(res=>{
|
||||||
|
|
||||||
console.log(res)
|
|
||||||
res.data.list.forEach(item => {
|
res.data.list.forEach(item => {
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -3,17 +3,17 @@
|
||||||
<div class="offWarn" @click="emit('off')">关闭</div>
|
<div class="offWarn" @click="emit('off')">关闭</div>
|
||||||
<div class="box-top">
|
<div class="box-top">
|
||||||
<img :src="props.data.image" style="width: 5vw;height: 4.5vw;" alt="">
|
<img :src="props.data.image" style="width: 5vw;height: 4.5vw;" alt="">
|
||||||
<div style="display: flex;justify-content: space-between;flex-direction: column;margin-left: 1vw;">
|
<div style="display: flex;flex-direction: column;margin-left: 1vw;">
|
||||||
<div style="font-family:FZCYJ ;">告警数据:</div>
|
<div style="font-family:FZCYJ ;">告警数据:</div>
|
||||||
<div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">1</span>
|
<div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">1</span>
|
||||||
<span class="text"> 老东赛!</span>
|
<span class="text"> {{ props.data.value }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num"> 2</span>
|
<!-- <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num"> 2</span>
|
||||||
<span class="text"> 这是一名后端开发</span>
|
<span class="text"> 这是一名后端开发</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">3</span> <span
|
<div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">3</span> <span
|
||||||
class="text"> 这是一名地方都是开发建设的咖啡机发动机</span>
|
class="text"> 这是一名地方都是开发建设的咖啡机发动机</span>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-bottom">
|
<div class="box-bottom">
|
||||||
|
@ -55,6 +55,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 15vw;
|
width: 15vw;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-top: 1vh;
|
||||||
|
|
||||||
|
|
||||||
.pm-img {
|
.pm-img {
|
||||||
|
|
|
@ -136,8 +136,15 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import options from "@/view/option"
|
import options from "@/view/option"
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { ref, reactive, onMounted, defineEmits } from "vue"
|
import { ref, reactive, onMounted, defineEmits,defineProps } from "vue"
|
||||||
import { landMonitorAlarmHistoryApi } from "@/api.js"
|
import { landMonitorAlarmHistoryApi } from "@/api.js"
|
||||||
|
import { areaObj } from "@/store/index.js"
|
||||||
|
const userStore=areaObj()
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
item:Object,
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
const data=reactive({})
|
const data=reactive({})
|
||||||
const emit = defineEmits(['off'])
|
const emit = defineEmits(['off'])
|
||||||
|
@ -426,16 +433,14 @@ const CKP = {
|
||||||
|
|
||||||
|
|
||||||
landMonitorAlarmHistoryApi({
|
landMonitorAlarmHistoryApi({
|
||||||
areaCode: 510521,
|
...userStore.userInfo,
|
||||||
streetCode: 510521100,
|
land_id: props.item.land_id
|
||||||
land_id: 18
|
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
|
||||||
|
|
||||||
for (let key in res.data.list){
|
for (let key in res.data.list){
|
||||||
data[key]=res.data.list[key]
|
data[key]=res.data.list[key]
|
||||||
}
|
}
|
||||||
console.log(data,5656)
|
|
||||||
|
|
||||||
initCharts('l_t', setoptionsFn(res.data.list.soil_temperature.historyList[0].time, res.data.list.soil_temperature.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_c', setoptionsFn(res.data.list.soil_moisture.historyList[0].time, res.data.list.soil_moisture.historyList[1].value))
|
||||||
|
|
|
@ -5,10 +5,11 @@ import {
|
||||||
export const areaObj = defineStore('counter', {
|
export const areaObj = defineStore('counter', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
userInfo: {
|
userInfo: {
|
||||||
// areaCode:'',
|
areaCode:'',
|
||||||
// streetCode:'',
|
streetCode:'',
|
||||||
|
|
||||||
},
|
},
|
||||||
|
areaCodeList:[],
|
||||||
address:{
|
address:{
|
||||||
city:"",
|
city:"",
|
||||||
area:""
|
area:""
|
||||||
|
@ -26,6 +27,9 @@ export const areaObj = defineStore('counter', {
|
||||||
this.address.city=c
|
this.address.city=c
|
||||||
this.address.area=a
|
this.address.area=a
|
||||||
|
|
||||||
|
},
|
||||||
|
changeareaCodeList(list){
|
||||||
|
this.areaCodeList=list
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,35 +2,40 @@
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="l">
|
<div class="l">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<leftTop></leftTop>
|
<leftTop :data="data" :key="data.land_id"></leftTop>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom top">
|
<div class="bottom top">
|
||||||
<leftCenter></leftCenter>
|
<leftCenter :data="data" :key="data.land_id"></leftCenter>
|
||||||
</div>
|
</div>
|
||||||
<div class="top center">
|
<div class="top center">
|
||||||
<video style="margin-top: 1vh;width: 100%;height: 100%;" autoplay muted
|
|
||||||
|
<JessibucaDemo v-if="video_url" :src="video_url"></JessibucaDemo>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <video style="margin-top: 1vh;width: 100%;height: 100%;" autoplay muted
|
||||||
src="http://192.168.1.27/live/test.live.mp4?secret=gqig2yFKkDpIMic1uWZY1L5MsIo0eflm">
|
src="http://192.168.1.27/live/test.live.mp4?secret=gqig2yFKkDpIMic1uWZY1L5MsIo0eflm">
|
||||||
</video>
|
</video> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div class="top-c">
|
<div class="top-c">
|
||||||
<div style="display: flex;justify-content: space-between;">
|
<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" @click="router.push('/')">返回首页</span></div>
|
||||||
<div class=" c-top-tits"><span class="color-font">{{route.query.town}}地块</span> </div>
|
<div class=" c-top-tits"><span class="color-font">{{ route.query.town }}地块</span> </div>
|
||||||
</div>
|
</div>
|
||||||
<farmerMap></farmerMap>
|
<farmerMap @changeLand="changeLandFn"></farmerMap>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<centerBottom></centerBottom>
|
<centerBottom :data="data" :key="data.land_id"></centerBottom>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="r">
|
<div class="r">
|
||||||
<div class="center top">
|
<div class="center top">
|
||||||
<rightTop></rightTop>
|
<rightTop :data="data" :key="data.land_id"></rightTop>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<rightBottom></rightBottom>
|
<rightBottom :data="data" :key="data.land_id"></rightBottom>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,10 +49,36 @@ import leftCenter from "../components/detail/leftCenter.vue";
|
||||||
import centerBottom from "../components/detail/centerBottom.vue";
|
import centerBottom from "../components/detail/centerBottom.vue";
|
||||||
import rightTop from "../components/detail/rightTop.vue";
|
import rightTop from "../components/detail/rightTop.vue";
|
||||||
import rightBottom from "../components/detail/rightBottom.vue";
|
import rightBottom from "../components/detail/rightBottom.vue";
|
||||||
import {useRouter,useRoute} from "vue-router"
|
import { useRouter, useRoute } from "vue-router"
|
||||||
const router=useRouter()
|
import JessibucaDemo from "@/components/videoFlv.vue"
|
||||||
const route=useRoute()
|
import { landListApi } from "@/api.js"
|
||||||
|
const video_url = ref('')
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
let data = reactive(
|
||||||
|
{
|
||||||
|
land_id: route.query.landId,
|
||||||
|
areaCode: JSON.parse(route.query.parmas).areaCode,
|
||||||
|
streetCode: JSON.parse(route.query.parmas).streetCode
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
landListApi({
|
||||||
|
...data
|
||||||
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
res.data.list.forEach(item => {
|
||||||
|
if (item.id == data.land_id) {
|
||||||
|
video_url.value = item.video_url
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const changeLandFn = (land_id) => {
|
||||||
|
|
||||||
|
data.land_id = land_id
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.box {
|
.box {
|
||||||
|
|
|
@ -13,7 +13,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="c">
|
<div class="c">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="c-top-tit">
|
<div style="display: flex;justify-content: space-between;" v-if="userInfoStore.userInfo.streetCode">
|
||||||
|
<div class=" c-top-tits"><span class="color-font" @click="back">返回首页</span></div>
|
||||||
|
<div class=" c-top-tits"><span class="color-font">地块</span> </div>
|
||||||
|
</div>
|
||||||
|
<div class="c-top-tit" v-else>
|
||||||
<div class="c-top-li">种植面积 <span class="color-font"
|
<div class="c-top-li">种植面积 <span class="color-font"
|
||||||
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.totalArea }}</span> ㎡</div>
|
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.totalArea }}</span> ㎡</div>
|
||||||
<div class="c-top-li">种植种类 <span class="color-font"
|
<div class="c-top-li">种植种类 <span class="color-font"
|
||||||
|
@ -70,6 +74,8 @@ import areaMap from "@/components/areaMap.vue"
|
||||||
import { landListApi } from "@/api.js"
|
import { landListApi } from "@/api.js"
|
||||||
import rightTop from "../components/index/rightTop.vue"
|
import rightTop from "../components/index/rightTop.vue"
|
||||||
import { areaObj } from "@/store/index.js"
|
import { areaObj } from "@/store/index.js"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
const router=useRouter()
|
||||||
const userInfoStore= areaObj()
|
const userInfoStore= areaObj()
|
||||||
// ...userInfoStore.userInfo
|
// ...userInfoStore.userInfo
|
||||||
|
|
||||||
|
@ -107,7 +113,9 @@ const choseUrl=(item)=>{
|
||||||
},500)
|
},500)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
const back=()=>{
|
||||||
|
router.go(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue