1
This commit is contained in:
parent
a75b50eca7
commit
2b1fde693a
@ -33,8 +33,6 @@
|
||||
|
||||
.tips-model {
|
||||
padding: 10px;
|
||||
color: #ff7f00;
|
||||
color: #ff7f00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@ -36,8 +36,7 @@
|
||||
|
||||
.tips-model {
|
||||
padding: 10px;
|
||||
color: #ff7f00;
|
||||
color: #ff7f00;
|
||||
|
||||
color: #fff;
|
||||
|
||||
.tips-model-title {
|
||||
|
||||
1
src/assets/js/mapData.js
Normal file
1
src/assets/js/mapData.js
Normal file
@ -0,0 +1 @@
|
||||
export default {"features":[{"geometry":{"coordinates":[[121.696882,31.411424],[121.696958,31.41096],[121.697851,31.411053],[121.69778,31.411508],[121.696878,31.411428]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.695994,31.411383],[121.696079,31.410871],[121.696878,31.410964],[121.696769,31.411456],[121.695984,31.411379]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.694794,31.411299],[121.69495,31.410742],[121.695937,31.410855],[121.695819,31.411412],[121.694789,31.411295]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.694978,31.41067],[121.695143,31.410234],[121.69606,31.410347],[121.695914,31.410779],[121.694978,31.41067]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.696055,31.410779],[121.696178,31.410359],[121.696816,31.41044],[121.696868,31.410448],[121.696759,31.410875],[121.696055,31.410771]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698399,31.411109],[121.69847,31.410625],[121.700237,31.410762],[121.700162,31.411258],[121.698404,31.411105]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698182,31.41042],[121.698229,31.410089],[121.700525,31.410238],[121.700445,31.410605],[121.698168,31.41042]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698111,31.409996],[121.698139,31.409702],[121.700544,31.409871],[121.700488,31.410149],[121.698106,31.409996]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698097,31.409557],[121.698125,31.40927],[121.700558,31.40946],[121.700511,31.409742],[121.698101,31.409553]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.69812,31.409186],[121.698149,31.40898],[121.700015,31.409133],[121.699973,31.409327],[121.698111,31.409186]],"type":"LineString"},"type":"Feature","properties":{}}],"type":"FeatureCollection"}
|
||||
110
src/components/large-nav.vue
Normal file
110
src/components/large-nav.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="large-nav">
|
||||
<div class="nav">
|
||||
<div class="item" :class="active==0?'item_act':''" @click="largeScreen">
|
||||
|
||||
<img v-if="active==0" src="../assets/img/nav1_act.png" alt="" />
|
||||
<img v-else src="../assets/img/nav1.png" alt="" />
|
||||
<span>基地总览</span>
|
||||
</div>
|
||||
<div class="item" :class="active==1?'item_act':''" @click="largeScreen2">
|
||||
<img v-if="active==1" src="../assets/img/nav4_act.png" alt="" />
|
||||
<img v-else src="../assets/img/nav4.png" alt="" />
|
||||
<span>监控设备</span>
|
||||
</div>
|
||||
<div class="item" :class="active==2?'item_act':''" @click="largeScreen3">
|
||||
<img v-if="active==2" src="../assets/img/nav2_act.png" alt="" />
|
||||
<img v-else src="../assets/img/nav2.png" alt="" />
|
||||
<span>虫情监测</span>
|
||||
</div>
|
||||
<div class="item" :class="active==3?'item_act':''" @click="toBackPage">
|
||||
<img v-if="active==3" src="../assets/img/nav5_act.png" alt="" />
|
||||
<img v-else src="../assets/img/nav5.png" alt="" />
|
||||
<span>环境监测</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
active: {
|
||||
type: Number,
|
||||
default:0
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
mounted(){},
|
||||
methods:{
|
||||
largeScreen() {
|
||||
this.$router.push({ path: "/largeScreen" });
|
||||
},
|
||||
largeScreen2() {
|
||||
this.$router.push({ path: "/largeScreen2" });
|
||||
},
|
||||
largeScreen3() {
|
||||
this.$router.push({ path: "/largeScreen3" });
|
||||
},
|
||||
toBackPage() {
|
||||
this.$router.push({ path: "/realTime" });
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.nav {
|
||||
// width: 2.5rem;
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
bottom: 0.17rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 .2rem;
|
||||
cursor: pointer;
|
||||
>img {
|
||||
width: 1.08rem;
|
||||
height: 0.91rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: 0.2rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
color: #b1eaff;
|
||||
}
|
||||
}
|
||||
|
||||
.item_act {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>img {
|
||||
width: 1.08rem;
|
||||
height: 0.91rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: 0.2rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -43,6 +43,14 @@ const routes = [
|
||||
path: '/largeScreen1',
|
||||
name: 'largeScreen1',
|
||||
component: () => import('../views/page/largeScreen1.vue')
|
||||
},{
|
||||
path: '/largeScreen2',
|
||||
name: 'largeScreen2',
|
||||
component: () => import('../views/page/largeScreen2.vue')
|
||||
},{
|
||||
path: '/largeScreen3',
|
||||
name: 'largeScreen3',
|
||||
component: () => import('../views/page/largeScreen3.vue')
|
||||
},
|
||||
// 虫情查看的
|
||||
{
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
<span>{{ time.time }}</span>
|
||||
</div>
|
||||
<el-button class="large-btn" @click="toBackPage" type="primary" v-if="limitUserId==9">{{$t('text.return')}}</el-button>
|
||||
<div class="nav" v-if="limitUserId!=9">
|
||||
<div class="item">
|
||||
<div class="nav" v-if="limitUserId!=9 && limitUserId!=13">
|
||||
<div class="item" >
|
||||
<img src="../../assets/img/nav1_act.png" alt="" />
|
||||
<span>大数据平台</span>
|
||||
</div>
|
||||
@ -38,6 +38,25 @@
|
||||
<span>市场行情</span>
|
||||
</div>
|
||||
</div>
|
||||
<largeNav :active="0" v-if="limitUserId==13"></largeNav>
|
||||
<!-- <div class="nav" >
|
||||
<div class="item" >
|
||||
<img src="../../assets/img/nav1_act.png" alt="" />
|
||||
<span>基地总览</span>
|
||||
</div>
|
||||
<div class="item item_act" @click="toBackPage">
|
||||
<img src="../../assets/img/nav5.png" alt="" />
|
||||
<span>环境监测</span>
|
||||
</div>
|
||||
<div class="item item_act">
|
||||
<img src="../../assets/img/nav4.png" alt="" />
|
||||
<span>监控设备</span>
|
||||
</div>
|
||||
<div class="item item_act">
|
||||
<img src="../../assets/img/nav2.png" alt="" />
|
||||
<span>虫情监测</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="content">
|
||||
<div class="left" v-show="limitUserId != 5">
|
||||
<div class="weatherStation" v-if="limitUserId != 12&&limitUserId != 9"></div>
|
||||
@ -126,7 +145,7 @@
|
||||
</div>
|
||||
</vue-seamless>
|
||||
</div>
|
||||
<div class="map">
|
||||
<div class="map" :class="`map1-${limitUserId}`">
|
||||
<div class="map1">
|
||||
<!-- 丽水 -->
|
||||
<div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
|
||||
@ -541,11 +560,13 @@ import vueSeamless from "vue-seamless-scroll";
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
import mapData from "@/assets/js/mapData.js";
|
||||
import { changeLanguage, getLanguage } from '@/utils/language'
|
||||
import { pestLine } from "@/assets/js/charts";
|
||||
import largeNav from '@/components/large-nav.vue'
|
||||
export default {
|
||||
name: "largeScreen",
|
||||
components: { vueSeamless },
|
||||
components: { vueSeamless,largeNav },
|
||||
computed: {
|
||||
defaultOption() {
|
||||
return {
|
||||
@ -723,7 +744,9 @@ export default {
|
||||
},
|
||||
watch:{
|
||||
'$i18n.locale'() {
|
||||
this.dataInit()
|
||||
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
|
||||
this.dataInit(userInfo.userid, this.limitUserId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -798,7 +821,7 @@ export default {
|
||||
// 根据用户id查询对应的设备大数据信息
|
||||
dataInit(userid, limitUserId) {
|
||||
this.api.Bigdata_getAllControl(userid).then((res) => {
|
||||
// console.log('根据用户id查询对应的设备大数据信息', res);
|
||||
console.log('根据用户id查询对应的设备大数据信息', res);
|
||||
this.dataList = res.data.data;
|
||||
setTimeout(() => {
|
||||
new Swiper(".middle_disasterWarningAnalysis", {
|
||||
@ -935,6 +958,7 @@ export default {
|
||||
this.getWeatherData(list[0].deviceId);
|
||||
// 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
|
||||
if(limitUserId == 13){
|
||||
this.mapInit()
|
||||
this.getImage();
|
||||
this.getCharts();
|
||||
}
|
||||
@ -1282,7 +1306,7 @@ export default {
|
||||
this.dataInit(userId, this.limitUserId);
|
||||
}else if (this.limitUserId == 13) {
|
||||
// this.drag_boxHandler13();
|
||||
this.mapInit()
|
||||
|
||||
this.dataInit(userId, this.limitUserId);
|
||||
}
|
||||
|
||||
@ -1314,7 +1338,41 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
|
||||
title: "上海前卫柑桔有限公司",
|
||||
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
|
||||
});
|
||||
// 添加画范围
|
||||
var listall = mapData.features;
|
||||
listall.forEach((el, index) => {
|
||||
console.log(el,111);
|
||||
var polygon = new AMap.Polygon({
|
||||
map: map,
|
||||
path: el.geometry.coordinates, //设置多边形边界路径
|
||||
strokeColor: '#ff0000', //线颜色
|
||||
strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 2, //线宽
|
||||
fillColor: '#ff0000', //填充色
|
||||
fillOpacity: 0.5, //填充透明度
|
||||
});
|
||||
polygon.on("click", function (e) {
|
||||
// 在点击事件处理程序中获取点击位置的经纬度坐标
|
||||
var lng = e.lnglat.getLng(); // 获取经度
|
||||
var lat = e.lnglat.getLat(); // 获取纬度
|
||||
|
||||
// 输出经纬度坐标
|
||||
console.log("点击位置的经度：" + lng);
|
||||
console.log("点击位置的纬度：" + lat);
|
||||
});
|
||||
polygon.on("mouseover", (e) => {
|
||||
// 点击之后覆盖物的样式
|
||||
// console.log(e,index);
|
||||
});
|
||||
// 鼠标移出事件
|
||||
polygon.on("mouseout", () => {
|
||||
// 鼠标移开覆盖物之后覆盖物的样式
|
||||
// console.log('离开');
|
||||
});
|
||||
|
||||
//将绘制的面对象添加到地图上
|
||||
map.add(polygon);
|
||||
});
|
||||
map.add(marker);
|
||||
},
|
||||
// autoPlay1() {
|
||||
@ -2219,7 +2277,7 @@ window.open("http://localhost:8080/");
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 2.5rem;
|
||||
// width: 2.5rem;
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
left: 50%;
|
||||
@ -2233,7 +2291,8 @@ window.open("http://localhost:8080/");
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
margin: 0 .2rem;
|
||||
cursor: pointer;
|
||||
>img {
|
||||
width: 1.08rem;
|
||||
height: 0.91rem;
|
||||
@ -2521,6 +2580,12 @@ window.open("http://localhost:8080/");
|
||||
blue 80%,
|
||||
transparent 90%,
|
||||
transparent 100%);
|
||||
&.map1-13{
|
||||
-webkit-mask-image: unset;
|
||||
.map1{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.map1 {
|
||||
width: 90%;
|
||||
@ -2543,7 +2608,7 @@ window.open("http://localhost:8080/");
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.drag_box1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -2743,8 +2808,8 @@ window.open("http://localhost:8080/");
|
||||
z-index: 10;
|
||||
-webkit-mask-image: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
blue 13%,
|
||||
blue 87%,
|
||||
blue 27%,
|
||||
blue 73%,
|
||||
transparent 100%);
|
||||
.drag_img {
|
||||
width: 100%;
|
||||
|
||||
213
src/views/page/largeScreen2.vue
Normal file
213
src/views/page/largeScreen2.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<div class="kuang">
|
||||
<div class="title">温室智慧云数据统计</div>
|
||||
<div class="calendar">
|
||||
<img src="../../assets/img/calendar.png" alt="" />
|
||||
<span>{{ getNowTime() }}</span>
|
||||
<span class="line"></span>
|
||||
<span>{{ time.week }}</span>
|
||||
<span class="line"></span>
|
||||
<span>{{ time.time }}</span>
|
||||
</div>
|
||||
<largeNav :active="1"></largeNav>
|
||||
<div class="content">
|
||||
<div class="video" v-for="item,index in 12" :key="index"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getnowtime } from "../../assets/js/nowTime";
|
||||
import largeNav from '@/components/large-nav.vue'
|
||||
export default {
|
||||
name: "largeScreen2",
|
||||
|
||||
components: {largeNav },
|
||||
data() {
|
||||
return {
|
||||
typeList:[],
|
||||
limitUserId:13,
|
||||
time:{}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.login();
|
||||
|
||||
this.getTime();
|
||||
this.typeList=this.$store.state.typeList
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
// 根据用户id查询对应的设备大数据信息
|
||||
dataInit(userid) {
|
||||
|
||||
},
|
||||
|
||||
|
||||
// 数据单位
|
||||
getTypeList(val) {
|
||||
let typeList1 = [];
|
||||
typeList1 = this.typeList.filter((item) => {
|
||||
return item.value == val;
|
||||
});
|
||||
return typeList1[0].unit;
|
||||
},
|
||||
|
||||
// 获取本地的userid和token
|
||||
login() {
|
||||
|
||||
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
|
||||
this.dataInit(userInfo.userid);
|
||||
|
||||
|
||||
},
|
||||
|
||||
getTime() {
|
||||
this.time = getnowtime();
|
||||
// console.log(this.time);
|
||||
const that = this;
|
||||
setInterval(() => {
|
||||
that.time = getnowtime();
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
getNowTime() {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = (now.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = now.getDate().toString().padStart(2, "0");
|
||||
const formattedDate = `${year}.${month}.${day}`;
|
||||
return formattedDate;
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.about {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../../assets/img/bg.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0.1rem;
|
||||
|
||||
.kuang {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../../assets/img/kuang.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.06rem;
|
||||
font-size: 0.54rem;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
color: #eff8fc;
|
||||
line-height: 0.54rem;
|
||||
opacity: 0.89;
|
||||
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
|
||||
|
||||
background: linear-gradient(to bottom,
|
||||
#ffffff 45%,
|
||||
#e9f8ff 90%,
|
||||
#77baff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.yuan {
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
background: url("../../assets/img/yuan_bg.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 0.53rem;
|
||||
left: 0.71rem;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>img {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 4rem;
|
||||
height: 0.3rem;
|
||||
position: absolute;
|
||||
top: 0.33rem;
|
||||
right: 0.66rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
>img {
|
||||
width: 0.28rem;
|
||||
height: 0.3rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
font-size: 0.24rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
>span:nth-child(4) {
|
||||
font-size: 0.2rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
>span:nth-child(6) {
|
||||
font-size: 0.3rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 0.02rem;
|
||||
height: 0.3rem;
|
||||
background: #ffffff;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
height: calc(100% - 2.4rem);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
grid-row-gap:.2rem;//纵向间隔
|
||||
grid-column-gap:.2rem;//横向间隔
|
||||
.video{
|
||||
// height: calc((100% - .4rem) / 3);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
2597
src/views/page/largeScreen3.vue
Normal file
2597
src/views/page/largeScreen3.vue
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user