This commit is contained in:
parent
493ad1d66c
commit
d76f29a5a2
|
@ -40,3 +40,13 @@ export const getFarmDeviceAlarmCount = (data) => {
|
|||
export const getFarmInfo = (data) => {
|
||||
return axios.get('dataview.farm/farmInfo', { params: data });
|
||||
}
|
||||
|
||||
// 硬件产品
|
||||
export const getDeviceDesc = (data) => {
|
||||
return axios.get('dataview.device/deviceDesc', { params: data });
|
||||
}
|
||||
|
||||
// 智能监测数据
|
||||
export const getAlarmRangeList = (data) => {
|
||||
return axios.get('dataview.farm/alarmRangeList', { params: data });
|
||||
}
|
|
@ -542,10 +542,17 @@ onMounted(() => {
|
|||
if (route.query.name) {
|
||||
filterMap()
|
||||
}
|
||||
dataValue = props.list;
|
||||
// dataValue = props.list;
|
||||
// dataValue[0] = {
|
||||
// name: '福集镇养殖基地',
|
||||
// value: [105.36, 29.20]
|
||||
// }
|
||||
if(route.query.local){
|
||||
dataValue[0] = {
|
||||
name: '福集镇养殖基地',
|
||||
value: [105.36, 29.20]
|
||||
name: route.query.farm_name,
|
||||
value: route.query.local.split(',')
|
||||
};
|
||||
console.log(dataValue);
|
||||
}
|
||||
// changeType('luxian');
|
||||
mapInfo();
|
||||
|
@ -571,6 +578,7 @@ onMounted(() => {
|
|||
<div class="map-e">
|
||||
<div class="echarts" ref="echartsRef"></div>
|
||||
</div>
|
||||
<div class="map-t">{{ route.query.farm_name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -607,5 +615,13 @@ onMounted(() => {
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
.map-t{
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
color: #fff;
|
||||
font-family: 'ifonts';
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,10 +1,26 @@
|
|||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
|
||||
import { getAlarmRangeList } from "@/api/api.js"
|
||||
import rightCard from "./rightCard.vue"
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const appStore = useAppStore();
|
||||
const route = useRoute();
|
||||
|
||||
const dataList = ref([]);
|
||||
const initAlarmRangeList = ()=>{
|
||||
getAlarmRangeList({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: appStore.address.streetCode,
|
||||
id: route.query.id
|
||||
}).then(res=>{
|
||||
dataList.value = res.data;
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
initAlarmRangeList()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
@ -18,8 +34,9 @@ onMounted(() => {
|
|||
<div class="c-box">
|
||||
<rightCard
|
||||
class="box-card"
|
||||
v-for="(item, index) in 6"
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
:info="item"
|
||||
></rightCard>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -2,13 +2,38 @@
|
|||
import { ref, reactive, onMounted } from "vue"
|
||||
import * as echarts from "echarts"
|
||||
|
||||
const props = defineProps({
|
||||
info: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
}
|
||||
})
|
||||
|
||||
function getRecentSevenDays() {
|
||||
const dates = [];
|
||||
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() - i);
|
||||
|
||||
const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
||||
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||||
|
||||
const formattedDate = month + '-' + day;
|
||||
dates.push(formattedDate);
|
||||
}
|
||||
|
||||
return dates;
|
||||
}
|
||||
|
||||
|
||||
const chartsRef = ref(null)
|
||||
const initMap = () => {
|
||||
const charts = echarts.init(chartsRef.value);
|
||||
let option = {
|
||||
title: {
|
||||
show: true,
|
||||
text: '甲烷',
|
||||
text: props.info.name,
|
||||
top: "10%",
|
||||
left: "12%",
|
||||
textStyle: {
|
||||
|
@ -62,7 +87,7 @@ const initMap = () => {
|
|||
color: '#fff',
|
||||
},
|
||||
},
|
||||
data: ['12.01', '12.02', '12.03', '12.04', '12.05', '12.06', '12.07'],
|
||||
data: getRecentSevenDays(),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
@ -91,7 +116,7 @@ const initMap = () => {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: '工厂1',
|
||||
name: '线',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
// showSymbol: false,/
|
||||
|
@ -124,7 +149,7 @@ const initMap = () => {
|
|||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
data: [100, 138, 350, 173, 180, 150, 180],
|
||||
data: props.info.RangeMonitorData,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
@ -140,8 +165,8 @@ onMounted(() => {
|
|||
<div class="c-card">
|
||||
<div class="left">
|
||||
<div>监测正常</div>
|
||||
<img src="/src/assets/img/icon.png" />
|
||||
<div>甲烷监测设备</div>
|
||||
<img :src="info.image||'/src/assets/img/icon.png'" />
|
||||
<div>{{ info.name }}</div>
|
||||
</div>
|
||||
<div class="right" ref="chartsRef"></div>
|
||||
</div>
|
||||
|
@ -155,6 +180,7 @@ onMounted(() => {
|
|||
justify-content: space-evenly;
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
|
@ -4,22 +4,25 @@ import leftItme from "./components/left.vue";
|
|||
import centerItme from "./components/center.vue";
|
||||
import bottomItme from "./components/bottom.vue";
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref } from "vue";
|
||||
|
||||
const route = useRoute();
|
||||
const key = ref(Date.now());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="center">
|
||||
<div class="item item_c">
|
||||
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||
<leftItme :key="route.query.name" style="width: 35%"></leftItme>
|
||||
<centerItme :key="route.query.name" style="width: 64%"></centerItme>
|
||||
<leftItme :key="route.query.name+key" style="width: 35%"></leftItme>
|
||||
<centerItme :key="route.query.name+key" style="width: 64%"></centerItme>
|
||||
</div>
|
||||
<div style="height: 36%">
|
||||
<bottomItme :key="route.query.name" style="width: 100%"></bottomItme>
|
||||
<bottomItme :key="route.query.name+key" style="width: 100%"></bottomItme>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<rightItme :key="route.query.name" style="height: 98%"></rightItme>
|
||||
<rightItme :key="route.query.name+key" style="height: 98%"></rightItme>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -266,7 +266,7 @@ onMounted(() => {
|
|||
<div class="tab-item">
|
||||
<img src="/src/assets/index_img/icon1.png" />
|
||||
<div>养殖规模</div>
|
||||
<div class="count">{{ farmInfo.totalScale }}亩</div>
|
||||
<div class="count">{{ farmInfo.totalScale }}只</div>
|
||||
</div>
|
||||
</div>
|
||||
<dv-scroll-board
|
||||
|
@ -284,36 +284,44 @@ onMounted(() => {
|
|||
<div class="left">
|
||||
<!-- <img src="/src/assets/index_img/video.png" /> -->
|
||||
<videoFlv
|
||||
v-if="farmList[0]?.video_url"
|
||||
style="width: 100%; height: 100%"
|
||||
:url="farmList[0].video_url||''"
|
||||
/>
|
||||
<div class="title">{{ farmList[0].farm_name }}</div>
|
||||
<div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
||||
<div class="title">{{ farmList[0]?.farm_name || "" }}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item">
|
||||
<videoFlv
|
||||
v-if="farmList[1]?.video_url"
|
||||
style="width: 100%; height: 100%"
|
||||
:url="farmList[1].video_url||''"
|
||||
/>
|
||||
<div class="title">{{ farmList[1].farm_name }}</div>
|
||||
<div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
||||
<div class="title">{{ farmList[1]?.farm_name || "" }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<videoFlv
|
||||
v-if="farmList[2]?.video_url"
|
||||
style="width: 100%; height: 100%"
|
||||
:url="farmList[2].video_url||''"
|
||||
/>
|
||||
<div class="title">{{ farmList[2].farm_name }}</div>
|
||||
<div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
||||
<div class="title">{{ farmList[2]?.farm_name || "" }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<videoFlv
|
||||
v-if="farmList[3]?.video_url"
|
||||
style="width: 100%; height: 100%"
|
||||
:url="farmList[3].video_url||''"
|
||||
/>
|
||||
<div class="title">{{ farmList[3].farm_name }}</div>
|
||||
<div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
||||
<div class="title">{{ farmList[3]?.farm_name || "" }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="/src/assets/index_img/video.png" />
|
||||
<!-- <div class="title">泸县原生态养殖基地</div> -->
|
||||
<!-- <img src="/src/assets/index_img/video.png" /> -->
|
||||
<div style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
||||
<div class="btn" @click="show = true">查看全部</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { getDeviceDesc } from "@/api/api.js";
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const dataList = ref([
|
||||
{
|
||||
|
@ -28,8 +32,18 @@ const dataList = ref([
|
|||
},
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
const hardwareList = ref([])
|
||||
const initDeviceDesc = ()=>{
|
||||
getDeviceDesc({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: appStore.address.streetCode
|
||||
}).then(res=>{
|
||||
hardwareList.value = res.data;
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initDeviceDesc();
|
||||
})
|
||||
</script>
|
||||
|
||||
|
@ -41,13 +55,13 @@ onMounted(() => {
|
|||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="c-box">
|
||||
<div class="c-item" v-for="(item, index) in 6" :key="index">
|
||||
<div class="c-item" v-for="(item, index) in hardwareList" :key="index">
|
||||
<div class="name">
|
||||
<img src="/src/assets/index_img/icon2.png" />
|
||||
<div>4G中转站</div>
|
||||
<img :src="item.icon" />
|
||||
<div>{{item.name}}</div>
|
||||
</div>
|
||||
<div class="tip">
|
||||
主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,
|
||||
{{ item.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
<script setup>
|
||||
import { onMounted, reactive, ref, inject, nextTick } from "vue";
|
||||
import { onMounted, reactive, ref, inject, nextTick, onUpdated } from "vue";
|
||||
import * as echarts from 'echarts';
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import ani from "@/components/ani.vue";
|
||||
import mitt from "@/utils/mitt";
|
||||
import { getfarmCount } from "@/api/api.js";
|
||||
import luxian from "@/assets/json/luxian.json";
|
||||
import hejiang from "@/assets/json/hejiang.json";
|
||||
import xuyong from "@/assets/json/xuyong.json";
|
||||
|
@ -491,13 +492,16 @@ const initMap = () => {
|
|||
chart.on('click', function (params) {
|
||||
if (params.seriesType === 'scatter') {
|
||||
// 处理你的点击事件逻辑
|
||||
console.log('点击了', params.data.name);
|
||||
console.log('点击了', params.data);
|
||||
router.push({
|
||||
path: '/delivery',
|
||||
query: {
|
||||
areaCode: route.query.areaCode,
|
||||
streetCode: route.query.streetCode,
|
||||
name: route.query.name
|
||||
name: route.query.name,
|
||||
id: params.data.id,
|
||||
farm_name: params.data.name,
|
||||
local: params.data.value.join(',')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -546,17 +550,41 @@ const filterMap = () => {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
const initFarmCount = ()=>{
|
||||
getfarmCount({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: appStore.address.streetCode
|
||||
}).then((res)=>{
|
||||
res.data.farmList.forEach(item=>{
|
||||
if(item.longitude && item.latitude) dataValue.push({
|
||||
id: item.id,
|
||||
name: item.farm_name,
|
||||
value: [item.longitude, item.latitude]
|
||||
})
|
||||
})
|
||||
|
||||
nextTick(() => {
|
||||
mapInfo();
|
||||
initDataValue();
|
||||
initMap();
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
if (route.query.name) {
|
||||
filterMap()
|
||||
}
|
||||
dataValue = props.list;
|
||||
dataValue[0] = {
|
||||
name: '福集镇养殖基地',
|
||||
value: [105.36, 29.20]
|
||||
}
|
||||
// changeType('luxian');
|
||||
// dataValue = props.list;
|
||||
// dataValue[0] = {
|
||||
// name: '福集镇养殖基地',
|
||||
// value: [105.36, 29.20]
|
||||
// }
|
||||
|
||||
initFarmCount()
|
||||
|
||||
mapInfo();
|
||||
initDataValue();
|
||||
initMap();
|
||||
|
@ -568,6 +596,7 @@ onMounted(() => {
|
|||
initMap();
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue