296 lines
8.3 KiB
Vue
296 lines
8.3 KiB
Vue
<template>
|
|
<div class="box">
|
|
<div class="l">
|
|
<div class="top">
|
|
<leftTop :key="userInfoStore.userInfo.streetCode"></leftTop>
|
|
</div>
|
|
<div class="center top">
|
|
<leftCenter :key="userInfoStore.userInfo.streetCode"></leftCenter>
|
|
</div>
|
|
<div class="bottom top">
|
|
<leftBottom :key="userInfoStore.userInfo.streetCode"></leftBottom>
|
|
</div>
|
|
</div>
|
|
<div class="c">
|
|
<div class="top">
|
|
<div style="display: flex;justify-content: space-between;" v-if="userInfoStore.userInfo.streetCode">
|
|
<div class="c-top-tits" style="z-index: 99999;"><span class="color-font" @click="back">返回首页</span></div>
|
|
<div class="c-top-tits" style="z-index: 99999;"><span class="color-font">{{ townName }}地块</span> </div>
|
|
</div>
|
|
<div class="c-top-tit" v-else>
|
|
<div class="c-top-li">种植面积 <span class="color-font"
|
|
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.totalArea }}</span> ㎡</div>
|
|
<div class="c-top-li">种植种类 <span class="color-font"
|
|
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.plantCount }}</span> 种</div>
|
|
<div class="c-top-li">地块数量 <span class="color-font"
|
|
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.landCount }}</span> 块</div>
|
|
</div>
|
|
|
|
|
|
<div class="map">
|
|
<areaMap @getTowmName="getTowmName"></areaMap>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<centerBottom :key="userInfoStore.userInfo.streetCode"></centerBottom>
|
|
</div>
|
|
</div>
|
|
<div class="r">
|
|
<div class="top">
|
|
<rightTop :key="userInfoStore.userInfo.streetCode"></rightTop>
|
|
</div>
|
|
<div class="bottoms">
|
|
<div style="height: 35%;">
|
|
<div class="landa">
|
|
<div class="land-li" @click="choseUrl(item)" v-for="(item, index) in landlist" :key="index">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="video" style="height: 65%;">
|
|
<div class="video-tit "> 实时监测影像 </div>
|
|
<JessibucaDemo v-if="video_url" :src="video_url"></JessibucaDemo>
|
|
<div style="height: 100%;height: 100%;background-color: #0C2856;position: relative;" v-else>
|
|
|
|
<img src="/static/index/video.png" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 50px;height: 50px;" alt="">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from "vue"
|
|
import leftTop from "@/components/index/leftTop.vue"
|
|
import leftCenter from "../components/index/leftCenter.vue"
|
|
import leftBottom from "../components/index/leftBottom.vue"
|
|
import centerBottom from "../components/index/centerBottom.vue"
|
|
import JessibucaDemo from "@/components/videoFlv.vue"
|
|
import { centralCountApi } from "@/api.js"
|
|
import areaMap from "@/components/areaMap.vue"
|
|
import { landListApi } from "@/api.js"
|
|
import rightTop from "../components/index/rightTop.vue"
|
|
import { areaObj } from "@/store/index.js"
|
|
import { useRouter } from "vue-router"
|
|
const router=useRouter()
|
|
const userInfoStore= areaObj()
|
|
// ...userInfoStore.userInfo
|
|
|
|
centralCountApi({
|
|
...userInfoStore.userInfo
|
|
}).then(res => {
|
|
|
|
for (let key in centerData){
|
|
centerData[key]=res.data[key]
|
|
}
|
|
})
|
|
|
|
const centerData = reactive({
|
|
landCount: "",
|
|
plantCount: "",
|
|
totalArea: "",
|
|
|
|
})
|
|
// 地块
|
|
const landlist = reactive([])
|
|
|
|
landListApi({
|
|
...userInfoStore.userInfo
|
|
}).then(res => {
|
|
res.data.list.forEach(item => { landlist.push(item) })
|
|
|
|
})
|
|
const video_url=ref('')
|
|
|
|
const choseUrl=(item)=>{
|
|
video_url.value=''
|
|
setTimeout( ()=>{
|
|
video_url.value=item.video_url
|
|
|
|
},500)
|
|
|
|
}
|
|
const back=()=>{
|
|
console.log("back")
|
|
router.go(0)
|
|
}
|
|
const townName=ref("")
|
|
const getTowmName=(e)=>{
|
|
townName.value=e
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss">
|
|
.box {
|
|
width: 100vw;
|
|
height: 93vh;
|
|
margin-top: 1vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.l {
|
|
width: 25vw;
|
|
height: 93vh;
|
|
|
|
.top {
|
|
width: 25vw;
|
|
height: 30vh;
|
|
background-size: 100% 100%;
|
|
// background-color: pink;
|
|
background-image: url('/static/index/SBGJTJ.png');
|
|
margin-top: 1vh;
|
|
box-sizing: border-box;
|
|
padding: 6vh 2vh 1vh 2vh;
|
|
color: white;
|
|
font-size: 14px;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.center {
|
|
background-image: url('/static/index/JCSBSLTJ.png');
|
|
|
|
|
|
|
|
}
|
|
|
|
.bottom {
|
|
background-image: url('/static/index/SYCPTJ.png');
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.c {
|
|
width: 49vw;
|
|
height: 93vh;
|
|
|
|
.top {
|
|
margin-top: 1vh;
|
|
width: 49vw;
|
|
height: 61vh;
|
|
// background-color: RED;
|
|
background-image: url('/static/index/ZBK.png');
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 2vh 2vw;
|
|
|
|
.c-top-tit {
|
|
display: flex;
|
|
color: white;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
line-height: 2vh;
|
|
|
|
.c-top-li {
|
|
padding: 2vh 3vw;
|
|
// background-color: #fff;
|
|
background-image: url('/static/index/DBTC.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.map {
|
|
width: 100%;
|
|
height: 50vh;
|
|
// background-color: #fff;
|
|
// border: 1px solid red;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bottom {
|
|
width: 49vw;
|
|
height: 30vh;
|
|
margin-top: 1vh;
|
|
background-image: url('/static/index/ZNYJ.png');
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 6vh 1vh 1vh 2vh;
|
|
position: relative;
|
|
|
|
}
|
|
}
|
|
|
|
.r {
|
|
width: 25vw;
|
|
height: 93vh;
|
|
|
|
.bottoms {
|
|
width: 25vw;
|
|
box-sizing: border-box;
|
|
padding-top: 6vh;
|
|
padding: 6vh 1vh 0;
|
|
height: 61vh;
|
|
background-size: 100% 100%;
|
|
|
|
background-image: url('/static/index/MQ.png');
|
|
margin-top: 1vh;
|
|
|
|
.landa {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 14px;
|
|
flex-wrap: wrap;
|
|
|
|
.land-li {
|
|
|
|
padding: 2px 20px;
|
|
margin-right: 10px;
|
|
background-image: url('/static/index/DK.png');
|
|
background-size: 100% 100%;
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 3vh;
|
|
|
|
}
|
|
}
|
|
|
|
.video {
|
|
.video-tit {
|
|
color: #CEE4FE;
|
|
width: 110px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
background-image: url('/static/index/JKBT.png');
|
|
background-size: cover;
|
|
font-size: 15px;
|
|
margin-bottom: 3vh;
|
|
font-size: 15px;
|
|
font-family: FZCYJ;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.top {
|
|
width: 25vw;
|
|
height: 30vh;
|
|
padding: 2vh;
|
|
box-sizing: border-box;
|
|
background-size: 100% 100%;
|
|
background-image: url('/static/index/YJCP.png');
|
|
margin-top: 1vh;
|
|
padding-top: 6vh;
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-top-tits {
|
|
|
|
padding: 1vh 1vw;
|
|
font-size: 20px;
|
|
// border: 1px solid red;
|
|
cursor: pointer;
|
|
background-image: url('/static/detail/FHSY.png');
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
</style> |