This commit is contained in:
parent
6c6f065cae
commit
493ad1d66c
|
|
@ -16,7 +16,27 @@ export const getBreedTypeCount = (data) => {
|
|||
return axios.get('dataview.farm/breedTypeCount', { params: data });
|
||||
}
|
||||
|
||||
// 养殖产品溯源
|
||||
// 监测设备在线/警告统计
|
||||
export const getDeviceCount = (data) => {
|
||||
return axios.get('dataview.device/deviceCount', { params: data });
|
||||
}
|
||||
|
||||
// 基地设备警告
|
||||
export const getDeviceAlarmCount = (data) => {
|
||||
return axios.get('dataview.device/deviceAlarmCount', { params: data });
|
||||
}
|
||||
|
||||
// 具体基地监测设备在线/警告统计
|
||||
export const getFarmDeviceCount = (data) => {
|
||||
return axios.get('dataview.farm/deviceCount', { params: data });
|
||||
}
|
||||
|
||||
// 具体基地设备警告
|
||||
export const getFarmDeviceAlarmCount = (data) => {
|
||||
return axios.get('dataview.farm/deviceAlarmCount', { params: data });
|
||||
}
|
||||
|
||||
// 具体基地设备警告
|
||||
export const getFarmInfo = (data) => {
|
||||
return axios.get('dataview.farm/farmInfo', { params: data });
|
||||
}
|
||||
|
|
@ -56,15 +56,25 @@ const offAreaList = (e) => {
|
|||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const navToDelivery = () => {
|
||||
if (route.path == '/') router.push('/delivery');
|
||||
else {
|
||||
const navTo = () => {
|
||||
if (route.path == '/') return location.reload();
|
||||
else if(route.path == '/indexc'){
|
||||
appStore.setAddress({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: ''
|
||||
})
|
||||
router.push('/?areaCode='+appStore.address.areaCode);
|
||||
}
|
||||
else if(route.path == '/delivery') {
|
||||
router.push({
|
||||
path: '/indexc',
|
||||
query: {
|
||||
areaCode: route.query.areaCode,
|
||||
streetCode: route.query.streetCode,
|
||||
name: route.query.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let nowTime = ref([]);
|
||||
|
|
@ -180,7 +190,7 @@ onMounted(() => {
|
|||
<img
|
||||
class="logo item"
|
||||
src="/src/assets/head_img/back.png"
|
||||
@click="navToDelivery"
|
||||
@click="navTo"
|
||||
/>
|
||||
<datePicker multiCalendars range @changeTime="changeTime" />
|
||||
<!-- <div class="item">{{ nowTime[0] }}</div> -->
|
||||
|
|
|
|||
|
|
@ -11,6 +11,11 @@ const routes = [
|
|||
name: '',
|
||||
component: () => import('../view/index/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/indexc',
|
||||
name: 'indexc',
|
||||
component: () => import('../view/indexc/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/delivery',
|
||||
name: 'delivery',
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,17 +1,42 @@
|
|||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { getFarmDeviceCount, getFarmDeviceAlarmCount } from "@/api/api.js"
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const appStore = useAppStore();
|
||||
const route = useRoute();
|
||||
|
||||
const leftInfo = ref({
|
||||
offline: 0,
|
||||
online: 0,
|
||||
total: 0,
|
||||
todayAlarmCount: 0,
|
||||
alarmCount: 0
|
||||
})
|
||||
const initDeviceCount = ()=>{
|
||||
getFarmDeviceCount({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: appStore.address.streetCode || route.query.streetCode,
|
||||
id: route.query.id || undefined
|
||||
}).then(res=>{
|
||||
Object.keys(leftInfo.value).forEach(key=>{
|
||||
if(res.data[key]) leftInfo.value[key] = res.data[key];
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const initData = (data) => {
|
||||
let arr = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
arr.push(
|
||||
[
|
||||
`${i + 1}`,
|
||||
`-`,
|
||||
`-`,
|
||||
`-`,
|
||||
`-`,
|
||||
`-`,
|
||||
`${data[i].code||'-'}`,
|
||||
`${data[i].name||'-'}`,
|
||||
`${data[i].create_time||'-'}`,
|
||||
`${data[i].alarm_value||'-'}`,
|
||||
`${data[i].alarm_reason||'-'}`,
|
||||
`<span class="btn">查看详情></span>`,
|
||||
]
|
||||
)
|
||||
|
|
@ -27,7 +52,6 @@ const list = reactive({
|
|||
`设备名称`,
|
||||
`警告时间`,
|
||||
`警告数据`,
|
||||
`设备图片`,
|
||||
`警告原因`,
|
||||
`解决方案`,
|
||||
],
|
||||
|
|
@ -36,19 +60,35 @@ const list = reactive({
|
|||
headerBGC: 'rgba(0, 156, 255, 0.4)',
|
||||
oddRowBGC: 'rgba(91, 219, 246, 0.10)',
|
||||
evenRowBGC: '',
|
||||
columnWidth: [100,150,200],
|
||||
align: 'center',
|
||||
rowNum: 9
|
||||
rowNum: 6
|
||||
})
|
||||
|
||||
const show = ref(false);
|
||||
const showInfo = ref({});
|
||||
const clickList = (e) => {
|
||||
console.log(e);
|
||||
console.log(e.rowIndex);
|
||||
show.value = true;
|
||||
if(e.columnIndex==5||e.columnIndex==6){
|
||||
showInfo.value = deviceList.value[e.rowIndex];
|
||||
show.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
const deviceList = ref([]);
|
||||
const initDeviceAlarmCount = ()=>{
|
||||
getFarmDeviceAlarmCount({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: appStore.address.streetCode || route.query.streetCode,
|
||||
id: route.query.id || undefined
|
||||
}).then(res=>{
|
||||
deviceList.value = res.data.list;
|
||||
initData(res.data.list);
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initData();
|
||||
initDeviceCount();
|
||||
initDeviceAlarmCount();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -65,34 +105,34 @@ onMounted(() => {
|
|||
<img src="/src/assets/index_img/ball.png" />
|
||||
<div class="count">
|
||||
<div>设备总数</div>
|
||||
<div>12</div>
|
||||
<div>{{ leftInfo.total }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ball1 ball-item">
|
||||
<div class="count">
|
||||
<img src="/src/assets/index_img/ball1.png" />
|
||||
<span>{{ 6 }}</span>
|
||||
<span>{{ leftInfo.offline }}</span>
|
||||
</div>
|
||||
离线设备
|
||||
</div>
|
||||
<div class="ball2 ball-item">
|
||||
<div class="count">
|
||||
<img src="/src/assets/index_img/ball2.png" />
|
||||
<span>{{ 6 }}</span>
|
||||
<span>{{ leftInfo.todayAlarmCount }}</span>
|
||||
</div>
|
||||
今日警告数
|
||||
</div>
|
||||
<div class="ball3 ball-item">
|
||||
<div class="count">
|
||||
<img src="/src/assets/index_img/ball1.png" />
|
||||
<span>{{ 6 }}</span>
|
||||
<span>{{ leftInfo.online }}</span>
|
||||
</div>
|
||||
在线设备
|
||||
</div>
|
||||
<div class="ball4 ball-item">
|
||||
<div class="count">
|
||||
<img src="/src/assets/index_img/ball2.png" />
|
||||
<span>{{ 6 }}</span>
|
||||
<span>{{ leftInfo.alarmCount }}</span>
|
||||
</div>
|
||||
警告总数
|
||||
</div>
|
||||
|
|
@ -100,7 +140,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<div class="view box2">
|
||||
<div class="box-title">
|
||||
<div class="text">养殖基地视频监控</div>
|
||||
<div class="text">养殖基地设备警告</div>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="c-box">
|
||||
|
|
@ -121,29 +161,30 @@ onMounted(() => {
|
|||
<div class="info">
|
||||
<div class="info-item">
|
||||
<div class="tips">设备编号:</div>
|
||||
<div>25566333</div>
|
||||
<div>{{ showInfo.code || '-' }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="tips">设备名称:</div>
|
||||
<div>甲烷监测设备</div>
|
||||
<div>{{ showInfo.name || '-' }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="tips">警告事件:</div>
|
||||
<div>2023-12-7 12:30</div>
|
||||
<div class="tips">警告时间:</div>
|
||||
<div>{{ showInfo.create_time || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info-item">
|
||||
<div class="tips">设备图片:</div>
|
||||
<img src="/src/assets/index_img/icon2.png" alt="" />
|
||||
<img class="img" :src="showInfo.image" alt="" />
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="tips">警告原因:</div>
|
||||
<div>甲烷含量超标, 同时浓度也超标了</div>
|
||||
<div>{{ showInfo.alarm_reason || '-' }}</div>
|
||||
</div>
|
||||
<div class="info-item" style="flex: 1">
|
||||
<div class="tips">警告数据:</div>
|
||||
<div>甲烷含量>1000ppm 浓度>120</div>
|
||||
<div v-if="(typeof showInfo.alarm_value == 'object')">{{ showInfo.alarm_value.join(', ') || '-' }}</div>
|
||||
<div v-else>{{ showInfo.alarm_value || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
|
|
@ -151,10 +192,9 @@ onMounted(() => {
|
|||
<div class="tips">解决方案:</div>
|
||||
<div class="list">
|
||||
<div>
|
||||
确保良好的通风系统：提供良好的通风以排除甲烷气体。这可以包括安装有效的排气扇、通风管道和通风设备，以确保空气流动。
|
||||
检修和维护设备：定期检查和维护可能产生甲烷泄漏的设备，如管道、阀门、连接件等。确保它们的密封性和操作正常，及时修复任何泄漏。
|
||||
{{ showInfo.alarm_resolution || '-' }}
|
||||
</div>
|
||||
<div>1.优化饲养管理 2.粪便处理设施改…</div>
|
||||
<!-- <div>1.优化饲养管理 2.粪便处理设施改…</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -339,6 +379,12 @@ onMounted(() => {
|
|||
text-align: start;
|
||||
padding-right: 0.4rem;
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 3; /* 显示的行数 */
|
||||
line-height: 1.5rem; /* 行高 */
|
||||
}
|
||||
.tips {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -346,6 +392,10 @@ onMounted(() => {
|
|||
.list {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
.img{
|
||||
height: 4.5rem;
|
||||
width: 4.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ import naxi from "@/assets/json/naxi.json";
|
|||
import luxian_geo from "@/utils/luxian_geo.js";
|
||||
import xuyong_geo from "@/utils/xuyong_geo.js";
|
||||
import jiangyang_geo from "@/utils/jiangyang_geo.js";
|
||||
import longma_geo from "@/utils/longma_geo.js";
|
||||
import gulin_geo from "@/utils/gulin_geo.js";
|
||||
import hejiang_geo from "@/utils/hejiang_geo.js";
|
||||
import naxi_geo from "@/utils/naxi_geo.js";
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
import geoJSON from "@/utils/geo.js";
|
||||
|
||||
|
|
@ -499,6 +503,10 @@ const mapInfo = () => {
|
|||
if (area.name == "泸县") map = luxian_geo;
|
||||
if (area.name == "江阳区") map = jiangyang_geo;
|
||||
if (area.name == "叙永县") map = xuyong_geo;
|
||||
if (area.name == "龙马潭区") map = longma_geo;
|
||||
if (area.name == "纳溪区") map = naxi_geo;
|
||||
if (area.name == "合江县") map = hejiang_geo;
|
||||
if (area.name == "古蔺县") map = gulin_geo;
|
||||
map = JSON.parse(JSON.stringify(map));
|
||||
if (appStore.address.streetCode) {
|
||||
let street = appStore.street.find(
|
||||
|
|
|
|||
|
|
@ -1,18 +1,31 @@
|
|||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { getFarmInfo } from "@/api/api.js"
|
||||
import * as echarts from "echarts"
|
||||
import videoFlv from "@/components/videoFlv.vue";
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const appStore = useAppStore();
|
||||
const route = useRoute();
|
||||
|
||||
const circleRef = ref(null);
|
||||
const initCircle = () => {
|
||||
const echart = echarts.init(circleRef.value);
|
||||
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
||||
|
||||
let data = [
|
||||
{ value: 400, name: '本地鸡' },
|
||||
{ value: 435, name: '鸭' },
|
||||
{ value: 580, name: '鹅' },
|
||||
{ value: 884, name: '猪' },
|
||||
]
|
||||
// let data = [
|
||||
// { value: 400, name: '本地鸡' },
|
||||
// { value: 435, name: '鸭' },
|
||||
// { value: 580, name: '鹅' },
|
||||
// { value: 884, name: '猪' },
|
||||
// ]
|
||||
let data = breedTypeRows.value.map(item=>{
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.animalCount
|
||||
}
|
||||
});
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
|
@ -109,6 +122,14 @@ const initMap = () => {
|
|||
return color
|
||||
}
|
||||
|
||||
let dataText = [];
|
||||
let dataValue = [];
|
||||
|
||||
breedTypeRows.value.forEach(item=>{
|
||||
dataText.push(item.name);
|
||||
dataValue.push(item.animalCount);
|
||||
})
|
||||
|
||||
let option = {
|
||||
grid: {
|
||||
left: '12%',
|
||||
|
|
@ -144,7 +165,7 @@ const initMap = () => {
|
|||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: ['鸡', '鸭', '鹅', '猪'],
|
||||
data: dataText,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
|
|
@ -215,16 +236,32 @@ const initMap = () => {
|
|||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [726, 622, 820, 454],
|
||||
data: dataValue,
|
||||
z: 10
|
||||
}]
|
||||
};
|
||||
echart.setOption(option)
|
||||
}
|
||||
|
||||
const farmInfo = ref({});
|
||||
const breedTypeRows = ref([]);
|
||||
const getInfo = ()=>{
|
||||
getFarmInfo({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: appStore.address.streetCode || route.query.streetCode,
|
||||
id: route.query.id || undefined
|
||||
}).then(res=>{
|
||||
farmInfo.value = res.data.farmInfo;
|
||||
breedTypeRows.value = res.data.breedTypeRows;
|
||||
initCircle();
|
||||
initMap();
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initCircle();
|
||||
initMap();
|
||||
getInfo();
|
||||
// initCircle();
|
||||
// initMap();
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -232,12 +269,15 @@ onMounted(() => {
|
|||
<div class="box">
|
||||
<div class="view box1">
|
||||
<div class="box-title">
|
||||
<div class="text">泸县原生态养殖基地</div>
|
||||
<div class="text">{{ farmInfo.farm_name }}</div>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="c-box">
|
||||
<img src="/src/assets/index_img/video.png" />
|
||||
<div class="name">泸县原生态养殖基地</div>
|
||||
<videoFlv
|
||||
class="img"
|
||||
:url="farmInfo.video_url"
|
||||
/>
|
||||
<div class="name">{{ farmInfo.farm_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view box2">
|
||||
|
|
@ -301,7 +341,7 @@ onMounted(() => {
|
|||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
img {
|
||||
.img {
|
||||
height: 76%;
|
||||
width: 96%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { getDeviceCount } from "@/api/api.js"
|
||||
import { getDeviceCount, getDeviceAlarmCount } from "@/api/api.js"
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const appStore = useAppStore();
|
||||
const route = useRoute();
|
||||
|
||||
const leftInfo = ref({
|
||||
offline: 0,
|
||||
online: 0,
|
||||
total: 0
|
||||
total: 0,
|
||||
todayAlarmCount: 0,
|
||||
alarmCount: 0
|
||||
})
|
||||
const initDeviceCount = ()=>{
|
||||
getDeviceCount({
|
||||
|
|
@ -24,15 +28,14 @@ const initDeviceCount = ()=>{
|
|||
|
||||
const initData = (data) => {
|
||||
let arr = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
arr.push(
|
||||
[
|
||||
`${i + 1}`,
|
||||
`-`,
|
||||
`-`,
|
||||
`-`,
|
||||
`-`,
|
||||
`-`,
|
||||
`${data[i].code||'-'}`,
|
||||
`${data[i].name||'-'}`,
|
||||
`${data[i].create_time||'-'}`,
|
||||
`${data[i].alarm_value||'-'}`,
|
||||
`${data[i].alarm_reason||'-'}`,
|
||||
`<span class="btn">查看详情></span>`,
|
||||
]
|
||||
)
|
||||
|
|
@ -48,7 +51,6 @@ const list = reactive({
|
|||
`设备名称`,
|
||||
`警告时间`,
|
||||
`警告数据`,
|
||||
`设备图片`,
|
||||
`警告原因`,
|
||||
`解决方案`,
|
||||
],
|
||||
|
|
@ -57,20 +59,35 @@ const list = reactive({
|
|||
headerBGC: 'rgba(0, 156, 255, 0.4)',
|
||||
oddRowBGC: 'rgba(91, 219, 246, 0.10)',
|
||||
evenRowBGC: '',
|
||||
columnWidth: [100,150,200],
|
||||
align: 'center',
|
||||
rowNum: 9
|
||||
rowNum: 6
|
||||
})
|
||||
|
||||
const show = ref(false);
|
||||
const showInfo = ref({});
|
||||
const clickList = (e) => {
|
||||
console.log(e);
|
||||
console.log(e.rowIndex);
|
||||
show.value = true;
|
||||
if(e.columnIndex==5||e.columnIndex==6){
|
||||
showInfo.value = deviceList.value[e.rowIndex];
|
||||
show.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
const deviceList = ref([]);
|
||||
const initDeviceAlarmCount = ()=>{
|
||||
getDeviceAlarmCount({
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: appStore.address.streetCode || route.query.streetCode,
|
||||
id: route.query.id || undefined
|
||||
}).then(res=>{
|
||||
deviceList.value = res.data.list;
|
||||
initData(res.data.list);
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initData();
|
||||
initDeviceCount();
|
||||
initDeviceAlarmCount();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -100,7 +117,7 @@ onMounted(() => {
|
|||
<div class="ball2 ball-item">
|
||||
<div class="count">
|
||||
<img src="/src/assets/index_img/ball2.png" />
|
||||
<span>{{ 6 }}</span>
|
||||
<span>{{ leftInfo.todayAlarmCount }}</span>
|
||||
</div>
|
||||
今日警告数
|
||||
</div>
|
||||
|
|
@ -114,7 +131,7 @@ onMounted(() => {
|
|||
<div class="ball4 ball-item">
|
||||
<div class="count">
|
||||
<img src="/src/assets/index_img/ball2.png" />
|
||||
<span>{{ 6 }}</span>
|
||||
<span>{{ leftInfo.alarmCount }}</span>
|
||||
</div>
|
||||
警告总数
|
||||
</div>
|
||||
|
|
@ -122,7 +139,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<div class="view box2">
|
||||
<div class="box-title">
|
||||
<div class="text">养殖基地视频监控</div>
|
||||
<div class="text">养殖基地设备警告</div>
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
<div class="c-box">
|
||||
|
|
@ -143,29 +160,30 @@ onMounted(() => {
|
|||
<div class="info">
|
||||
<div class="info-item">
|
||||
<div class="tips">设备编号:</div>
|
||||
<div>25566333</div>
|
||||
<div>{{ showInfo.code || '-' }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="tips">设备名称:</div>
|
||||
<div>甲烷监测设备</div>
|
||||
<div>{{ showInfo.name || '-' }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="tips">警告事件:</div>
|
||||
<div>2023-12-7 12:30</div>
|
||||
<div class="tips">警告时间:</div>
|
||||
<div>{{ showInfo.create_time || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info-item">
|
||||
<div class="tips">设备图片:</div>
|
||||
<img src="/src/assets/index_img/icon2.png" alt="" />
|
||||
<img class="img" :src="showInfo.image" alt="" />
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="tips">警告原因:</div>
|
||||
<div>甲烷含量超标, 同时浓度也超标了</div>
|
||||
<div>{{ showInfo.alarm_reason || '-' }}</div>
|
||||
</div>
|
||||
<div class="info-item" style="flex: 1">
|
||||
<div class="tips">警告数据:</div>
|
||||
<div>甲烷含量>1000ppm 浓度>120</div>
|
||||
<div v-if="(typeof showInfo.alarm_value == 'object')">{{ showInfo.alarm_value.join(', ') || '-' }}</div>
|
||||
<div v-else>{{ showInfo.alarm_value || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
|
|
@ -173,10 +191,9 @@ onMounted(() => {
|
|||
<div class="tips">解决方案:</div>
|
||||
<div class="list">
|
||||
<div>
|
||||
确保良好的通风系统：提供良好的通风以排除甲烷气体。这可以包括安装有效的排气扇、通风管道和通风设备，以确保空气流动。
|
||||
检修和维护设备：定期检查和维护可能产生甲烷泄漏的设备，如管道、阀门、连接件等。确保它们的密封性和操作正常，及时修复任何泄漏。
|
||||
{{ showInfo.alarm_resolution || '-' }}
|
||||
</div>
|
||||
<div>1.优化饲养管理 2.粪便处理设施改…</div>
|
||||
<!-- <div>1.优化饲养管理 2.粪便处理设施改…</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -361,6 +378,12 @@ onMounted(() => {
|
|||
text-align: start;
|
||||
padding-right: 0.4rem;
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 3; /* 显示的行数 */
|
||||
line-height: 1.5rem; /* 行高 */
|
||||
}
|
||||
.tips {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -368,6 +391,10 @@ onMounted(() => {
|
|||
.list {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
.img{
|
||||
height: 4.5rem;
|
||||
width: 4.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,10 @@ import naxi from "@/assets/json/naxi.json";
|
|||
import luxian_geo from "@/utils/luxian_geo.js";
|
||||
import xuyong_geo from "@/utils/xuyong_geo.js";
|
||||
import jiangyang_geo from "@/utils/jiangyang_geo.js";
|
||||
import geoJSON from "@/utils/geo.js";
|
||||
import longma_geo from "@/utils/longma_geo.js";
|
||||
import gulin_geo from "@/utils/gulin_geo.js";
|
||||
import hejiang_geo from "@/utils/hejiang_geo.js";
|
||||
import naxi_geo from "@/utils/naxi_geo.js";
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
import { sendMsg } from "@/api/sendMsg.js";
|
||||
|
||||
|
|
@ -500,9 +503,18 @@ const initMap = () => {
|
|||
name: params.name
|
||||
}})
|
||||
} else {
|
||||
router.push({
|
||||
path: '/delivery',
|
||||
// router.push({
|
||||
// path: '/delivery',
|
||||
// query: {
|
||||
// name: params.name
|
||||
// }
|
||||
// })
|
||||
let obj = appStore.street.find(item=>item.name==params.name);
|
||||
if(obj) router.push({
|
||||
path: '/indexc',
|
||||
query: {
|
||||
areaCode: appStore.address.areaCode,
|
||||
streetCode: obj.code,
|
||||
name: params.name
|
||||
}
|
||||
})
|
||||
|
|
@ -519,6 +531,10 @@ const mapInfo = () => {
|
|||
if (area.name == "泸县") map = luxian_geo;
|
||||
if (area.name == "江阳区") map = jiangyang_geo;
|
||||
if (area.name == "叙永县") map = xuyong_geo;
|
||||
if (area.name == "龙马潭区") map = longma_geo;
|
||||
if (area.name == "纳溪区") map = naxi_geo;
|
||||
if (area.name == "合江县") map = hejiang_geo;
|
||||
if (area.name == "古蔺县") map = gulin_geo;
|
||||
map = JSON.parse(JSON.stringify(map));
|
||||
if (appStore.address.streetCode) {
|
||||
let street = appStore.street.find(
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ const initBreedTypeCount = ()=>{
|
|||
streetCode: appStore.address.streetCode
|
||||
}).then((res)=>{
|
||||
breedTypeRows.value = res.data.breedTypeRows;
|
||||
if(res.data.animalList.length>6) res.data.animalList = res.data.animalList.slice(0,6);
|
||||
animalList.value = res.data.animalList;
|
||||
animalList.value.forEach(item=>{
|
||||
QRCode.toDataURL('d_' + item.sn, {
|
||||
|
|
@ -264,7 +265,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<div class="tab-item">
|
||||
<img src="/src/assets/index_img/icon1.png" />
|
||||
<div>占地规模</div>
|
||||
<div>养殖规模</div>
|
||||
<div class="count">{{ farmInfo.totalScale }}亩</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,629 @@
|
|||
<script setup>
|
||||
import { onMounted, reactive, ref, inject, nextTick } 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 luxian from "@/assets/json/luxian.json";
|
||||
import hejiang from "@/assets/json/hejiang.json";
|
||||
import xuyong from "@/assets/json/xuyong.json";
|
||||
import gulin from "@/assets/json/gulin.json";
|
||||
import jiangyang from "@/assets/json/jiangyang.json";
|
||||
import longma from "@/assets/json/longma.json";
|
||||
import naxi from "@/assets/json/naxi.json";
|
||||
import luxian_geo from "@/utils/luxian_geo.js";
|
||||
import xuyong_geo from "@/utils/xuyong_geo.js";
|
||||
import jiangyang_geo from "@/utils/jiangyang_geo.js";
|
||||
import longma_geo from "@/utils/longma_geo.js";
|
||||
import gulin_geo from "@/utils/gulin_geo.js";
|
||||
import hejiang_geo from "@/utils/hejiang_geo.js";
|
||||
import naxi_geo from "@/utils/naxi_geo.js";
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
import geoJSON from "@/utils/geo.js";
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
let geoJson = JSON.parse(JSON.stringify(geoJSON));
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Object,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const mapType = reactive({
|
||||
name: '',
|
||||
json: ''
|
||||
})
|
||||
|
||||
const changeType = (name = 'luxian') => {
|
||||
mapType.name = name;
|
||||
if (name == 'luxian') mapType.json = luxian;
|
||||
if (name == 'hejiang') mapType.json = hejiang;
|
||||
if (name == 'xuyong') mapType.json = xuyong;
|
||||
if (name == 'gulin') mapType.json = gulin;
|
||||
if (name == 'jiangyang') mapType.json = jiangyang;
|
||||
if (name == 'longma') mapType.json = longma;
|
||||
if (name == 'naxi') mapType.json = naxi;
|
||||
}
|
||||
|
||||
let dataValue = []
|
||||
|
||||
const customFormatter = (params) => {
|
||||
// console.log(params.data);
|
||||
// return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
|
||||
return ''
|
||||
}
|
||||
|
||||
const initDataValue = () => {
|
||||
dataValue.forEach(item => {
|
||||
item.label = {
|
||||
show: true, // 显示标签
|
||||
formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
|
||||
fontSize: 12, // 字体大小
|
||||
fontWeight: 'bold', // 字体粗细
|
||||
color: '#fff', // 字体颜色
|
||||
offset: [-50, -40], // 标签偏移量，可根据需要调整
|
||||
rich: {
|
||||
img: {
|
||||
backgroundColor: {
|
||||
image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
|
||||
},
|
||||
height: 40,
|
||||
width: 140,
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14,
|
||||
fontFamily: 'ifonts',
|
||||
align: 'center',
|
||||
padding: [0, 0, 20, 0]
|
||||
},
|
||||
t: {
|
||||
fontSize: 10,
|
||||
align: 'center'
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const echartsRef = ref(null);
|
||||
let chart = null;
|
||||
|
||||
const initMap = () => {
|
||||
// 基于DOM元素初始化echarts实例
|
||||
if (chart == null) {
|
||||
chart = echarts.init(echartsRef.value);
|
||||
}
|
||||
echarts.registerMap(mapType.name, mapType.json);
|
||||
|
||||
let option = {
|
||||
animation: false,
|
||||
title: {
|
||||
text: route.query.name,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22
|
||||
},
|
||||
top: '10%',
|
||||
left: '10%'
|
||||
},
|
||||
//geo方式地理坐标系组件。
|
||||
geo: [
|
||||
{
|
||||
map: mapType.name,
|
||||
zoom: 1.0,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
// 选中状态下的多边形和标签样式
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
// color: '#546686', //地图背景色
|
||||
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||
borderWidth: 1,
|
||||
},
|
||||
label: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
select: {
|
||||
disabled: true
|
||||
},
|
||||
// aspectScale:0.75, //长宽比
|
||||
// roam: true, //是否允许缩放
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// color: '#546686', //地图背景色
|
||||
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||
borderWidth: 1,
|
||||
areaColor: "#3f5171",
|
||||
shadowColor: "#5bdbf6",
|
||||
shadowOffsetX: 5,
|
||||
shadowOffsetY: 10,
|
||||
// shadowBlur: 2
|
||||
shadowBlur: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
//第一层投影
|
||||
{
|
||||
map: mapType.name,
|
||||
zlevel: -1,
|
||||
zoom: 1.01, //当前视角的缩放比例
|
||||
roam: false, //是否开启平游或缩放
|
||||
show: true,
|
||||
tooltip: {
|
||||
show: false // 取消鼠标移上去时的文字提示
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
select: {
|
||||
disabled: true
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderJoin: "round",
|
||||
borderColor: "rgba(176,228,252,1)",
|
||||
borderWidth: 3,
|
||||
areaColor: "rgba(133,188,232,1)",
|
||||
shadowColor: "rgba(133,188,232,.7)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 25,
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
// console.log(params);
|
||||
if (params.data) {
|
||||
return `<div
|
||||
style="background-image: url(\'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png\');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 180px;
|
||||
height: 80px;">
|
||||
<div style="font-size: 12px;height: 15px;">基地名称</div>
|
||||
<div style="font-size: 15px;font-family: 'ifonts';height: 50px;display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;">${params.data.name}</div>
|
||||
</div>`;
|
||||
} else return '';
|
||||
},
|
||||
position: 'top',
|
||||
// extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
|
||||
backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
|
||||
borderColor: "rgba(0, 156, 255, 0)",
|
||||
padding: 0,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "map",
|
||||
map: mapType.name,
|
||||
label: {
|
||||
emphasis: {
|
||||
color: 'rgba(0,0,0,0)' // 鼠标经过时的文字颜色
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
disabled: false,
|
||||
},
|
||||
select: {
|
||||
disabled: true
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: "#3f5171",
|
||||
borderColor: "#5bdbf6",
|
||||
borderWidth: 1,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#0680ca', // 鼠标经过时的背景色
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "scatter",
|
||||
coordinateSystem: "geo",
|
||||
data: dataValue,
|
||||
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
|
||||
symbolSize: [30, 45],
|
||||
hoverSymbolSize: [45, 60],
|
||||
label: {
|
||||
formatter: "",
|
||||
position: "center",
|
||||
show: false
|
||||
},
|
||||
// tooltip: {
|
||||
// formatter (value) {
|
||||
// console.log(value);
|
||||
// return "";
|
||||
// },
|
||||
// show: true
|
||||
// },
|
||||
// encode: {
|
||||
// value: 2
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: "#0efacc"
|
||||
// },
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
}
|
||||
option = {
|
||||
geo: [
|
||||
{
|
||||
type: "map",
|
||||
map: mapType.name,
|
||||
aspectScale: 1,
|
||||
zoom: 0.9,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
show: true,
|
||||
map: mapType.name,
|
||||
zoom: 0.9,
|
||||
aspectScale: 1,
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: "transparent",
|
||||
borderColor: "#5AD0E0",
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: {
|
||||
type: "radial", // linear 线性渐变 radial径向渐变
|
||||
x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
|
||||
y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
|
||||
r: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#A46759", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.1,
|
||||
color: "#A46759", // 0% 处的颜色
|
||||
},
|
||||
|
||||
{
|
||||
offset: 1,
|
||||
color: "#FFB821", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// borderWidth: 0
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
// console.log(params);
|
||||
if (params.data) {
|
||||
return `<div
|
||||
style="background-image: url(\'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png\');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 180px;
|
||||
height: 80px;">
|
||||
<div style="font-size: 12px;height: 15px;">基地名称</div>
|
||||
<div style="font-size: 15px;font-family: 'ifonts';height: 40px;display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;">${params.data.name}</div>
|
||||
</div>`;
|
||||
} else return '';
|
||||
},
|
||||
position: 'top',
|
||||
// extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
|
||||
backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
|
||||
borderColor: "rgba(0, 156, 255, 0)",
|
||||
padding: 0,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapType.name,
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 0.9,
|
||||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.6)",
|
||||
borderColor: "#5AD0E0",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapType.name,
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 0.9,
|
||||
layoutCenter: ["50%", "52%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(17, 149, 216,0.6)",
|
||||
borderColor: "rgba(90, 208, 224,0.5)",
|
||||
shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// {
|
||||
// type: "map",
|
||||
// map: mapType.name,
|
||||
// zlevel: -2,
|
||||
// aspectScale: 1,
|
||||
// zoom: 1,
|
||||
// layoutCenter: ["50%", "53%"],
|
||||
// layoutSize: "110%",
|
||||
// roam: false,
|
||||
// silent: true,
|
||||
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderWidth: 1,
|
||||
// borderColor: "rgba(17, 149, 216,0.4)",
|
||||
// borderColor: "#5AD0E0",
|
||||
// shadowColor: "rgba(172, 122, 255,0.5)",
|
||||
// shadowOffsetY: 5,
|
||||
// shadowBlur: 15,
|
||||
// areaColor: "rgba(5,21,35,0.1)",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
{
|
||||
type: "map",
|
||||
map: mapType.name,
|
||||
zlevel: -4,
|
||||
aspectScale: 1,
|
||||
zoom: 0.9,
|
||||
layoutCenter: ["50%", "53%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 5,
|
||||
borderColor: "rgba(11, 43, 97,0.8)",
|
||||
// borderColor: "rgba(5,9,57,0.6)",
|
||||
shadowColor: "rgba(29, 111, 165,1)",
|
||||
shadowOffsetY: 10,
|
||||
shadowBlur: 10,
|
||||
areaColor: "rgba(5,21,35,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
color: '#1f7df5',
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "scatter",
|
||||
coordinateSystem: "geo",
|
||||
data: dataValue,
|
||||
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
|
||||
symbolSize: [30, 45],
|
||||
hoverSymbolSize: [45, 60],
|
||||
label: {
|
||||
formatter: "",
|
||||
position: "center",
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
// 使用配置项显示图表
|
||||
chart.setOption(option);
|
||||
|
||||
// 监听标记点的点击事件
|
||||
chart.on('click', function (params) {
|
||||
if (params.seriesType === 'scatter') {
|
||||
// 处理你的点击事件逻辑
|
||||
console.log('点击了', params.data.name);
|
||||
router.push({
|
||||
path: '/delivery',
|
||||
query: {
|
||||
areaCode: route.query.areaCode,
|
||||
streetCode: route.query.streetCode,
|
||||
name: route.query.name
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const mapInfo = () => {
|
||||
let area = appStore.area.find(
|
||||
(item) => item.code == appStore.address.areaCode
|
||||
);
|
||||
let map;
|
||||
if (area.name == "泸县") map = luxian_geo;
|
||||
if (area.name == "江阳区") map = jiangyang_geo;
|
||||
if (area.name == "叙永县") map = xuyong_geo;
|
||||
if (area.name == "龙马潭区") map = longma_geo;
|
||||
if (area.name == "纳溪区") map = naxi_geo;
|
||||
if (area.name == "合江县") map = hejiang_geo;
|
||||
if (area.name == "古蔺县") map = gulin_geo;
|
||||
map = JSON.parse(JSON.stringify(map));
|
||||
if (appStore.address.streetCode) {
|
||||
let street = appStore.street.find(
|
||||
(item) => item.code == appStore.address.streetCode
|
||||
);
|
||||
initStreetMap(street, map);
|
||||
dataValue = dataValue.filter(
|
||||
(item) => item.street_code == appStore.address.streetCode
|
||||
);
|
||||
} if (route.query.name) {
|
||||
initStreetMap({name: route.query.name}, map);
|
||||
} else {
|
||||
mapType.name = area.name;
|
||||
mapType.json = map;
|
||||
}
|
||||
};
|
||||
const initStreetMap = (street, map) => {
|
||||
map.features = map.features.filter(
|
||||
(item) => item?.properties?.name == street?.name
|
||||
);
|
||||
mapType.name = street?.name;
|
||||
mapType.json = map;
|
||||
};
|
||||
|
||||
const filterMap = () => {
|
||||
geoJson.features = geoJson.features.filter((item) => {
|
||||
return item.properties.name == route.query.name
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
if (route.query.name) {
|
||||
filterMap()
|
||||
}
|
||||
dataValue = props.list;
|
||||
dataValue[0] = {
|
||||
name: '福集镇养殖基地',
|
||||
value: [105.36, 29.20]
|
||||
}
|
||||
// changeType('luxian');
|
||||
mapInfo();
|
||||
initDataValue();
|
||||
initMap();
|
||||
nextTick(() => {
|
||||
mitt.on('map_info', e => {
|
||||
// changeType(e.pinyin);
|
||||
mapInfo();
|
||||
initDataValue();
|
||||
initMap();
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="map">
|
||||
<div class="map-a">
|
||||
<ani class="ani" />
|
||||
</div>
|
||||
<div class="map-e">
|
||||
<div class="echarts" ref="echartsRef"></div>
|
||||
</div>
|
||||
<div class="map-t">{{ route.query.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
/* background-color: rgba($color: #fff, $alpha: 0.3); */
|
||||
|
||||
.map-a {
|
||||
position: absolute;
|
||||
bottom: -24%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.map-e {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.map-t{
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
color: #fff;
|
||||
font-family: 'ifonts';
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<script setup>
|
||||
import leftItme from "../index/components/left.vue";
|
||||
import rightItme from "../index/components/right.vue";
|
||||
import center2Itme from "./components/center2.vue";
|
||||
import bottomItme from "../index/components/bottom.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="center">
|
||||
<div class="item">
|
||||
<leftItme style="height: 98%"></leftItme>
|
||||
</div>
|
||||
<div class="item item_c">
|
||||
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||
<center2Itme style="width: 64%"></center2Itme>
|
||||
<rightItme style="width: 35%"></rightItme>
|
||||
</div>
|
||||
<div style="height: 36%">
|
||||
<bottomItme style="width: 100%"></bottomItme>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
.item {
|
||||
width: 26%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-content: center;
|
||||
/* border: 1px solid red; */
|
||||
& > .div {
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.item_c {
|
||||
width: 72%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue