This commit is contained in:
home孙 2025-06-30 18:18:40 +08:00
parent 21574f62da
commit c92431e963
14 changed files with 1735 additions and 186 deletions

View File

@ -886,5 +886,8 @@ getIccid(data){
getInsectChartData(data){ getInsectChartData(data){
return sendPostParamsRequest(`/v1/getInsectChartData`, data) return sendPostParamsRequest(`/v1/getInsectChartData`, data)
}, },
getGetDeviceRunParam(data){
return sendPostParamsRequest(`/v1/getGetDeviceRunParam`, data)
},
}; };

View File

@ -1257,7 +1257,6 @@ textarea {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
padding: 0 8px;
} }
.input-sel-time .el-input__inner { .input-sel-time .el-input__inner {
@ -1265,11 +1264,12 @@ textarea {
border: 2px solid rgba(0, 186, 255, 0.4); border: 2px solid rgba(0, 186, 255, 0.4);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
color: #fff;
} }
.input-sel-time .el-input__inner .el-range-input { .input-sel-time .el-input__inner .el-range-input {
background: transparent; background: transparent;
color: #fff; color: #fff !important;
} }
.input-btn { .input-btn {

View File

@ -1329,7 +1329,6 @@ textarea {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
padding: 0 8px;
} }
.el-input__inner { .el-input__inner {
@ -1337,10 +1336,10 @@ textarea {
border: 2px solid rgba(0, 186, 255, 0.40); border: 2px solid rgba(0, 186, 255, 0.40);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
color: #fff;
.el-range-input { .el-range-input {
background: transparent; background: transparent;
color: #fff; color: #fff!important;
} }
} }
} }

BIN
src/assets/img/img-13.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

View File

@ -311,6 +311,151 @@ export function thisWeekTemperature_echart(id, data) {
] ]
}; };
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
export function pestMonitor_num(id, data) {
let chartDom = document.getElementById(id);
let myChart = echarts.init(chartDom);
var myColor = [
"#eb2100",
"#eb3600",
"#d0570e",
"#d0a00e",
"#34da62",
"#00e9db",
"#00c0e9",
"#0096f3",
"#33CCFF",
"#33FFCC",
];
var header=data.header
var dataList=data.data.list[0]
// 排序header
var headerNames = Object.keys(header).sort().map(key => header[key]);
// 排序数据
var objValues = Object.keys(header).sort().map(key => Number(dataList[key]) || 0);
const maxValue = Math.max(...objValues);
const maxList = new Array(objValues.length).fill(maxValue);
const minList = new Array(objValues.length).fill(0);
var option = {
grid: {
left: "11%",
top: "3%",
right: "0%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
show: false,
},
],
yAxis: [
{
axisTick: "none",
axisLine: "none",
offset: "27",
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "12",
},
},
data:headerNames
},
{
axisTick: "none",
axisLine: "none",
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "12",
},
},
data: objValues,
},
{
name: "",
nameTextStyle: {
color: "#ffffff",
fontSize: "16",
},
axisLine: {
lineStyle: {
color: "rgba(0,0,0,0)",
},
},
data: [],
},
],
series: [
{
name: "条",
type: "bar",
yAxisIndex: 0,
data: objValues,
// label: {
// normal: {
// show: true,
// position: "right",
// textStyle: {
// color: "#ffffff",
// fontSize: "16",
// },
// },
// },
barWidth: 6,
itemStyle: {
normal: {
color: function (params) {
var num = myColor.length;
return myColor[params.dataIndex % num];
},
},
},
z: 2,
},
{
name: "白框",
type: "bar",
yAxisIndex: 1,
barGap: "-100%",
data:maxList,
barWidth: 12,
itemStyle: {
normal: {
color: "#0e2147",
barBorderRadius: 5,
},
},
z: 1,
},
{
name: "外圆",
type: "scatter",
hoverAnimation: false,
data: minList,
yAxisIndex: 2,
symbolSize: 14,
itemStyle: {
normal: {
color: function (params) {
var num = myColor.length;
return myColor[params.dataIndex % num];
},
opacity: 1,
},
},
z: 2,
},
],
};
option && myChart.setOption(option); option && myChart.setOption(option);
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();

View File

@ -17,8 +17,13 @@
<img v-else src="../assets/img/nav2.png" alt="" /> <img v-else src="../assets/img/nav2.png" alt="" />
<span>虫情监测</span> <span>虫情监测</span>
</div> </div>
<div class="item" :class="active==3?'item_act':''" @click="toBackPage"> <div class="item" :class="active==3?'item_act':''" @click="largeScreen4">
<img v-if="active==3" src="../assets/img/nav5_act.png" alt="" /> <img v-if="active==3" src="../assets/img/nav3_act.png" alt="" />
<img v-else src="../assets/img/nav3.png" alt="" />
<span>智能农机</span>
</div>
<div class="item" :class="active==4?'item_act':''" @click="toBackPage">
<img v-if="active==4" src="../assets/img/nav5_act.png" alt="" />
<img v-else src="../assets/img/nav5.png" alt="" /> <img v-else src="../assets/img/nav5.png" alt="" />
<span>环境监测</span> <span>环境监测</span>
</div> </div>
@ -48,6 +53,9 @@ export default {
}, },
largeScreen3() { largeScreen3() {
this.$router.push({ path: "/largeScreen3" }); this.$router.push({ path: "/largeScreen3" });
},
largeScreen4() {
this.$router.push({ path: "/largeScreen4" });
}, },
toBackPage() { toBackPage() {
this.$router.push({ path: "/realTime" }); this.$router.push({ path: "/realTime" });

View File

@ -51,6 +51,10 @@ const routes = [
path: '/largeScreen3', path: '/largeScreen3',
name: 'largeScreen3', name: 'largeScreen3',
component: () => import('../views/page/largeScreen3.vue') component: () => import('../views/page/largeScreen3.vue')
},{
path: '/largeScreen4',
name: 'largeScreen4',
component: () => import('../views/page/largeScreen4.vue')
}, },
// 虫情查看的 // 虫情查看的
{ {

View File

@ -200,11 +200,12 @@ export default {
return { return {
inputData: [], inputData: [],
typeList1: [ typeList1: [
{ label:this.$t('heatFan.gearOptions.gear0'), value: 0 }, { label:this.$t('heatFan.gear0'), value: 0 },
{ label:this.$t('heatFan.gearOptions.gear1',{index:1}), value: 1 }, { label:this.$t('heatFan.gear1',{index:1}), value: 1 },
{ label:this.$t('heatFan.gearOptions.gear1',{index:2}), value: 2 }, { label:this.$t('heatFan.gear1',{index:2}), value: 2 },
{ label:this.$t('heatFan.gearOptions.gear1',{index:3}), value: 3 }, { label:this.$t('heatFan.gear1',{index:3}), value: 3 },
{ label:this.$t('heatFan.gearOptions.gear1',{index:4}), value: 4 }, { label:this.$t('heatFan.gear1',{index:4}), value: 4 },
{ label:this.$t('heatFan.gear1',{index:5}), value: 5 },
], ],
typeList2: [ typeList2: [
{ label: this.$t('realTime.heatingMode'), value: 1 }, { label: this.$t('realTime.heatingMode'), value: 1 },

View File

@ -671,7 +671,7 @@ export default {
warnModel: true, warnModel: true,
modelPassword:'', modelPassword:'',
sensorType: '', sensorType: '',
typeList1: [{ label: this.$t('intrinsicParameter.averageSoilHumidity', {index: 1}), value: 0 }, typeList1: [{ label: this.$t('intrinsicParameterSoil.averageSoilHumidity', {index: 1}), value: 0 },
{ label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 1 }), value: 1 }, { label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 1 }), value: 1 },
{ label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 2 }), value: 2 }, { label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 2 }), value: 2 },
{ label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 3 }), value: 3 }, { label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 3 }), value: 3 },

View File

@ -269,20 +269,10 @@
</div> </div>
</div> </div>
<div class="right" v-if="limitUserId == 13"> <div class="right" v-if="limitUserId == 13">
<div class="e_title">虫情图片</div> <div class="e_title">项目简介</div>
<div class="right-image-list"> <div class="right-aboutUs ">
<div <img src="@/assets/img/img-13.jpg" alt="">
class="image-div" <div class="scroll">上海前卫柑桔有限公司成立于1992年地处长江入海口的长兴岛上位于青草沙水源保护区和长兴岛郊野公园内是目前我国规模最大集约化程度最高的柑桔生产经营企业之一也是上海市首批通过国家认证的绿色食品通过了HACCP国际食品安全管理体系认证并多次在全国柑桔评比中获得金奖银奖和农业部优质果品称号公司主营业务为柑桔生产和销售兼营场地租赁农业旅游衍生品开发技术推广等业务 </div>
v-for="(item, index) in imageList"
:key="index"
>
<el-image :src="item.thumbnailUrl" :preview-src-list="srcList">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="image-time">{{ item.shootTime }}</div>
</div>
</div> </div>
<div class="e_title">虫情趋势图</div> <div class="e_title">虫情趋势图</div>
<div class="right-charts" id="pest-charts"></div> <div class="right-charts" id="pest-charts"></div>
@ -405,7 +395,7 @@
<img src="../../assets/img/i_title_img.png" alt="" /> <img src="../../assets/img/i_title_img.png" alt="" />
<span>风机</span> <span>风机</span>
<span class="line"></span> <span class="line"></span>
<span>$t('text.invalid')</span> <span>{{$t('text.invalid')}}</span>
<span class="line"></span> <span class="line"></span>
<span>菜单</span> <span>菜单</span>
</div> </div>
@ -451,7 +441,7 @@
<img src="../../assets/img/i_title_img.png" alt="" /> <img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<span class="line"></span> <span class="line"></span>
<span>$t('text.invalid')</span> <span>{{$t('text.invalid')}}</span>
<span class="line"></span> <span class="line"></span>
<span>位置{{ item.progress }}%</span> <span>位置{{ item.progress }}%</span>
<span>菜单</span> <span>菜单</span>
@ -477,7 +467,7 @@
<img src="../../assets/img/i_title_img.png" alt="" /> <img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
<span class="line"></span> <span class="line"></span>
<span>$t('text.invalid')</span> <span>{{$t('text.invalid')}}</span>
<span class="line"></span> <span class="line"></span>
<span>菜单</span> <span>菜单</span>
</div> </div>
@ -502,7 +492,7 @@
<img src="../../assets/img/i_title_img.png" alt="" /> <img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
<span class="line"></span> <span class="line"></span>
<span>$t('text.invalid')</span> <span>{{$t('text.invalid')}}</span>
<span class="line"></span> <span class="line"></span>
<span>菜单</span> <span>菜单</span>
</div> </div>
@ -527,7 +517,7 @@
<img src="../../assets/img/i_title_img.png" alt="" /> <img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
<span class="line"></span> <span class="line"></span>
<span>$t('text.invalid')</span> <span>{{$t('text.invalid')}}</span>
<span class="line"></span> <span class="line"></span>
<span>菜单</span> <span>菜单</span>
</div> </div>
@ -1313,16 +1303,32 @@ export default {
}); });
}, },
mapInit(){ mapInit(){
const that = this
const map = new AMap.Map("map-13", { const map = new AMap.Map("map-13", {
zoom: 18, zoom: 18,
center: [121.696506, 31.410799], center: [121.697751,31.410188],
}); });
var satelliteLayer = new AMap.TileLayer.Satellite(); var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet(); var roadNetLayer = new AMap.TileLayer.RoadNet();
// map.setLayers([]); // // map.setLayers([]); //
satelliteLayer.setMap(map); // satelliteLayer.setMap(map); //
// roadNetLayer.setMap(map); // // roadNetLayer.setMap(map); //
// map.on("click", function (e) {
// //
// const lnglat = e.lnglat; // AMap.LngLat
// console.log("", lnglat.toString()); // 121.696506,31.410799
// //
// console.log("", lnglat.getLng());
// console.log("", lnglat.getLat());
// //
// const infoWindow = new AMap.InfoWindow({
// content: `${lnglat.getLng()}, ${lnglat.getLat()}`,
// offset: new AMap.Pixel(0, -30),
// });
// infoWindow.open(map, lnglat);
// });
// //
@ -1376,6 +1382,10 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
title: "上海前卫柑桔有限公司", title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), // icon [center bottom] offset: new AMap.Pixel(-17.5, -40), // icon [center bottom]
}); });
marker.on("click", function (e) {
that.$router.push({ path: "/largeScreen1" });
});
map.add(marker); map.add(marker);
} }
@ -3502,10 +3512,23 @@ window.open("http://localhost:8080/");
color: #fff; color: #fff;
} }
} }
.right-image-list,.right-charts{ .right-image-list,.right-charts,.right-aboutUs{
width: 100%; width: 100%;
height: calc((100% - .38rem) / 2); height: calc((100% - .38rem) / 2);
} }
.right-aboutUs{
color:#fff;
line-height:28px;
margin-top: .2rem;
img{
width: 100%;
height: 1.5rem;
object-fit: cover
}
>div{
height: calc(100% - 1.7rem);
}
}
.liveVideo { .liveVideo {
width: 4rem; width: 4rem;
height: 0.43rem; height: 0.43rem;

View File

@ -10,44 +10,127 @@
<span class="line"></span> <span class="line"></span>
<span>{{ time.time }}</span> <span>{{ time.time }}</span>
</div> </div>
<largeNav :active="1"></largeNav> <largeNav :active="1"></largeNav>
<div class="content"> <div class="content">
<div class="video" v-for="item,index in 12" :key="index"></div> <div
class="video monitor"
v-for="(item, index) in videoList"
:key="index"
:id="'monitor' + index"
>
<div
ref="videoPlayer"
class="video-js"
:id="`video-js${index}`"
></div>
</div>
</div>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="12"
layout="total, prev, pager, next"
:total="16"
>
</el-pagination>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getnowtime } from "../../assets/js/nowTime"; import { getnowtime } from "../../assets/js/nowTime";
import largeNav from '@/components/large-nav.vue' import largeNav from "@/components/large-nav.vue";
import EZUIKit from "ezuikit-js";
export default { export default {
name: "largeScreen2", name: "largeScreen2",
components: {largeNav }, components: { largeNav },
data() { data() {
return { return {
typeList:[], typeList: [],
limitUserId:13, limitUserId: 13,
time:{} time: {},
videoList: [],
list1: [],
list2: [],
currentPage: 1,
}; };
}, },
mounted() { mounted() {
this.login(); // this.login();
this.getTime(); this.getTime();
this.typeList=this.$store.state.typeList this.typeList = this.$store.state.typeList;
this.list1 = [
}, { cameraid: "FT5712546", channelid: 1, player: null },
beforeDestroy() { { cameraid: "FT5712546", channelid: 2, player: null },
{ cameraid: "FT5712546", channelid: 3, player: null },
{ cameraid: "FT5712546", channelid: 4, player: null },
{ cameraid: "FT5712546", channelid: 5, player: null },
{ cameraid: "FT5712546", channelid: 6, player: null },
{ cameraid: "FT5712546", channelid: 7, player: null },
{ cameraid: "FT5712546", channelid: 8, player: null },
{ cameraid: "FT5712546", channelid: 9, player: null },
{ cameraid: "FT5712546", channelid: 10, player: null },
{ cameraid: "FT5712546", channelid: 11, player: null },
{ cameraid: "FT5712546", channelid: 12, player: null },
];
this.list2 = [
{ cameraid: "FT5712546", channelid: 13, player: null },
{ cameraid: "FT5712546", channelid: 14, player: null },
];
setTimeout(() => {
this.dataInit();
}, 0);
}, },
beforeDestroy() {
this.videoList.forEach((el, index) => {
//
if (el.player) {
// this.player.dispose();
el.player.stop();
el.player.destroy();
el.player = null;
}
});
},
methods: { methods: {
// id // id
dataInit(userid) { dataInit(userid) {
this.currentPage = 1;
this.videoList = this.list1;
this.videoList.forEach((el, index) => {
this.getVideoData(el.cameraid, el.channelid, index);
});
},
handleSizeChange(val) {
console.log(`每页 ${val}`);
},
handleCurrentChange(val) {
this.videoList.forEach((el, index) => {
//
if (el.player) {
// this.player.dispose();
el.player.stop();
el.player.destroy();
el.player = null;
}
});
setTimeout(() => {
if (val == 1) {
this.videoList = this.list1;
} else {
this.videoList = this.list2;
}
this.videoList.forEach((el, index) => {
this.getVideoData(el.cameraid, el.channelid, index);
});
}, 0);
}, },
// //
getTypeList(val) { getTypeList(val) {
@ -60,12 +143,9 @@ export default {
// useridtoken // useridtoken
login() { login() {
let userInfo = JSON.parse(localStorage.getItem("userInfo")); let userInfo = JSON.parse(localStorage.getItem("userInfo"));
this.dataInit(userInfo.userid); this.dataInit(userInfo.userid);
}, },
getTime() { getTime() {
@ -76,7 +156,40 @@ export default {
that.time = getnowtime(); that.time = getnowtime();
}, 1000); }, 1000);
}, },
// Copy
getVideoData(cameraid, channelid, index) {
this.api.camera_gethls(cameraid, channelid).then((res) => {
// console.log(" Copy", res);
if (res.data.code == 200) {
// this.url = res.data.data.ezopen
this.createVideoNew(
res.data.data.accesstoken,
res.data.data.ezopen,
index
);
// this.createVideo()
}
});
},
createVideoNew(accessToken, url, index) {
// console.log(accessToken, url, index, 111);
// divWdivH 使div
let divW = document.getElementById("monitor" + index).clientWidth;
let divH = document.getElementById("monitor" + index).clientHeight;
this.videoList[index].player = new EZUIKit.EZUIKitPlayer({
id: "video-js" + index, // ID
accessToken: accessToken,
url: url,
// urlezopen://open.ys7.com/G39444019/1.live .live GitHub
// simple-; standard-; security-; voice-; GitHub
template: "security",
useHardDev: true, // 7.7.x 2023.11.7 7.7.6
// plugin: ["talk"], // talk-
width: divW, // 1920 px
height: divH, // 1080 px
});
// console.log(this.player);
},
getNowTime() { getNowTime() {
const now = new Date(); const now = new Date();
const year = now.getFullYear(); const year = now.getFullYear();
@ -85,8 +198,7 @@ export default {
const formattedDate = `${year}.${month}.${day}`; const formattedDate = `${year}.${month}.${day}`;
return formattedDate; return formattedDate;
}, },
},
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -118,16 +230,17 @@ export default {
opacity: 0.89; opacity: 0.89;
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25); text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
background: linear-gradient(to bottom, background: linear-gradient(
#ffffff 45%, to bottom,
#e9f8ff 90%, #ffffff 45%,
#77baff 100%); #e9f8ff 90%,
#77baff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-align: center; text-align: center;
} }
.yuan { .yuan {
width: 0.56rem; width: 0.56rem;
height: 0.56rem; height: 0.56rem;
@ -141,7 +254,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
>img { > img {
width: 0.2rem; width: 0.2rem;
height: 0.2rem; height: 0.2rem;
} }
@ -157,26 +270,26 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
>img { > img {
width: 0.28rem; width: 0.28rem;
height: 0.3rem; height: 0.3rem;
} }
>span:nth-child(2) { > span:nth-child(2) {
font-size: 0.24rem; font-size: 0.24rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
color: #7abaff; color: #7abaff;
} }
>span:nth-child(4) { > span:nth-child(4) {
font-size: 0.2rem; font-size: 0.2rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
color: #7abaff; color: #7abaff;
} }
>span:nth-child(6) { > span:nth-child(6) {
font-size: 0.3rem; font-size: 0.3rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
@ -194,15 +307,24 @@ export default {
.content { .content {
width: 100%; width: 100%;
padding: 0 1rem; padding: 0 1rem;
height: calc(100% - 2.4rem); height: calc(100% - 2.7rem);
display: grid; display: grid;
grid-template-columns: repeat(4,1fr); grid-template-columns: repeat(4, 1fr);
grid-row-gap:.2rem;// grid-row-gap: 0.2rem; //
grid-column-gap:.2rem;// grid-column-gap: 0.2rem; //
.video{ .video {
// height: calc((100% - .4rem) / 3); height: calc((100vh - 3.1rem) / 3);
background-color: #fff; .video-js {
} width: 100%;
height: 100%;
}
}
}
.pagination {
width: 100%;
display: flex;
padding-right: 100px;
justify-content: flex-end;
} }
} }
} }

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="home"> <div class="home largeScreen3">
<div class="kuang"> <div class="kuang">
<div class="title">温室智慧云数据统计</div> <div class="title">温室智慧云数据统计</div>
@ -16,46 +16,30 @@
<largeNav :active="2"></largeNav> <largeNav :active="2"></largeNav>
<div class="content"> <div class="content">
<div class="left"> <div class="left">
<div class="weatherStation"></div> <div class="e_title">虫情视频简介</div>
<div class="left-video">
<div class="weather"> <video class="video" controls muted loop autoplay src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E9%95%BF%E5%85%B4%E5%B2%9B%E8%99%AB%E6%83%85%E8%A7%86%E9%A2%91.mp4"></video>
<div> </div>
<marquee behavior="" direction="" scrollamount="3">
<div class="item" v-for="(item, index) in weatherDataList" :key="index">
<img :src="require(`../../assets/image/real-time-${item.formula}.png`)
" alt="" />
<span>{{ item.environmentDataId }} : </span>
<span>{{
item.environmentData + getTypeList(item.formula)
}}</span>
</div>
</marquee>
</div>
</div>
<div class="weather_echart" id="weather_echart"></div>
<div class="e_title" v-show="limitUserId == 12">实时数据</div>
<div class="environmentData" :class="`environmentData-${limitUserId}`"> <div class="environmentData" :class="`environmentData-${limitUserId}`">
<div class="e_title">温室环境数据</div> <div class="e_title">虫情趋势图</div>
<div class="detail"> <div class="detail" id="pest-charts">
<!-- <div class="title_child">一号温室</div> -->
<vue-seamless class="e_content" :data="list" :class-option="defaultOption">
<div class="item" v-for="(el, index) in list" :key="index">
<!-- <img :src="el.formula" alt=""> -->
<img :src="el.img" alt="" />
<div class="item_child">
<span>{{ el.name }}</span>
<span>{{ el.num }}</span>
</div>
</div>
</vue-seamless>
</div> </div>
</div> </div>
<div class="thisWeekTemperature" > <div class="thisWeekTemperature" >
<div class="e_title">本周温度统计</div> <div class="e_title">当日虫情数量</div>
<div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div> <div class=" input-sel-time">
<el-date-picker
v-model="lefttime"
value-format="yyyy-MM-dd"
type="date"
:picker-options="pickerOptions"
@change="getInsectChartData"
placeholder="选择日期">
</el-date-picker>
</div>
<div v-show="chartsShow" class="thisWeekTemperature_echart" id="pestMonitor_num"></div>
<div v-show="!chartsShow" class="thisWeekTemperature_echart noData">当日无数据~</div>
</div> </div>
</div> </div>
<div class="middle"> <div class="middle">
@ -70,6 +54,7 @@
</div> </div>
<div class="right" > <div class="right" >
<div class="e_title">虫情图片</div> <div class="e_title">虫情图片</div>
<div class="right-image-list"> <div class="right-image-list">
<div <div
class="image-div" class="image-div"
@ -84,8 +69,81 @@
<div class="image-time">{{ item.shootTime }}</div> <div class="image-time">{{ item.shootTime }}</div>
</div> </div>
</div> </div>
<div class="e_title">虫情趋势图</div> <div class="e_title">虫情设备运行状态</div>
<div class="right-charts" id="pest-charts"></div> <div class="device_content scroll">
<div class="content_item" v-if="rightList">
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.intervalTime?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.intervalTime?.value}}分钟</span>
</div>
</div>
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.acquisitionTime?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.acquisitionTime?.value}}分钟</span>
</div>
</div>
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.heatingTime?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.heatingTime?.value}}分钟</span>
</div>
</div>
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.heatingTempMax?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.heatingTempMax?.value}}</span>
</div>
</div>
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.lowTemperature?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.lowTemperature?.value}}</span>
</div>
</div>
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.highTemperature?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.highTemperature?.value}}</span>
</div>
</div>
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.delayAfterRain?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.delayAfterRain?.value}}分钟</span>
</div>
</div>
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.startTime?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.startTime?.value}}</span>
</div>
</div>
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.endTime?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.endTime?.value}}</span>
</div>
</div>
<div style="margin-bottom: 0.15rem">
<div class="i_title">
<span>{{rightList.uploadIntervalTime?.label}}</span>
<span class="line"></span>
<span class="data-num">{{rightList.uploadIntervalTime?.value}}分钟</span>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
@ -100,7 +158,7 @@ import Swiper from "@/assets/js/swiper.min.js";
import "@/assets/js/swiper.min.css"; import "@/assets/js/swiper.min.css";
import { import {
weather_echart, weather_echart,
thisWeekTemperature_echart pestMonitor_num
} from "@/assets/js/echarts"; } from "@/assets/js/echarts";
import vueSeamless from "vue-seamless-scroll"; import vueSeamless from "vue-seamless-scroll";
@ -245,7 +303,18 @@ export default {
imageList: [], imageList: [],
chartsData: null, chartsData: null,
srcList: [], srcList: [],
lefttime:'',
chartsShow:true,
rightList:null,
pickerOptions: {
disabledDate: (time) => {
// 00:00:00
const today = new Date();
today.setHours(0, 0, 0, 0);
// time
return time.getTime() > today.getTime() - 86400000; // 86400000 = 1
},},
// id9 // id9
dateRange: [], dateRange: [],
currentPage: 1, currentPage: 1,
@ -338,9 +407,8 @@ export default {
} }
}) })
list.sort(this.compare('equipmentStatu')) list.sort(this.compare('equipmentStatu'))
// this.lefttime=this.getTime1()
this.get_weather_echart_data(list[0].deviceId);
this.get_thisWeekTemperature_echart_data(list[0].deviceId);
this.get_environmentData(list[0].deviceId); this.get_environmentData(list[0].deviceId);
this.get_readControl_getState(list[0].deviceId); this.get_readControl_getState(list[0].deviceId);
this.getWeatherData(list[0].deviceId); this.getWeatherData(list[0].deviceId);
@ -348,6 +416,7 @@ export default {
this.getImage(); this.getImage();
this.getCharts(); this.getCharts();
this.mapInit() this.mapInit()
this.getInsectChartData()
} }
}); });
@ -365,6 +434,13 @@ export default {
const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0]; const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0];
return formattedOneWeekAgo; return formattedOneWeekAgo;
}, },
getTime1() {
// YYYY-MM-DD
const oneWeekAgo = new Date();
oneWeekAgo.setDate(oneWeekAgo.getDate() - 1);
const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0];
return formattedOneWeekAgo;
},
// //
getImage() { getImage() {
var data = { var data = {
@ -384,11 +460,22 @@ export default {
// //
getCharts() { getCharts() {
var data = { var data = {
// beginTime: this.getTime7(),
// endTime: this.getTimeNew(),
deviceId: 613,
};
this.api.getGetDeviceRunParam(data).then((res) => {
if (res.data.code == 200) {
this.rightList = res.data.data;
}
});
var data1 = {
beginTime: this.getTime7(), beginTime: this.getTime7(),
endTime: this.getTimeNew(), endTime: this.getTimeNew(),
deviceId: 613, deviceId: 613,
}; };
this.api.getInsectChartData(data).then((res) => { this.api.getInsectChartData(data1).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.chartsData = res.data; this.chartsData = res.data;
pestLine("pest-charts", this.chartsData); pestLine("pest-charts", this.chartsData);
@ -413,22 +500,33 @@ export default {
}, },
// //
get_thisWeekTemperature_echart_data(deviceId) { getInsectChartData(deviceId) {
this.api.Bigdata_getWeekTemperature(deviceId).then((res) => {
// console.log('', res); var data = {
res.data.data.forEach((e) => { beginTime: this.lefttime,
this.day_list.push(e.day); endTime: this.lefttime,
this.maxTemperature_list.push(Number(e.maxTemperature)); deviceId: 613,
this.minTemperature_list.push(Number(e.minTemperature)); };
this.api.getInsectChartData(data).then((res) => {
if (res.data.code == 200) {
if(JSON.stringify(res.data.header) === '{}'){
this.chartsShow=false
}else{
this.chartsShow=true
pestMonitor_num('pestMonitor_num',res.data)
}
}
}); });
let data = { // this.api.getInsectChartData(deviceId).then((res) => {
day: this.day_list, // // console.log('', res);
maxTemperature: this.maxTemperature_list,
minTemperature: this.minTemperature_list, // console.log('00000000',res);
};
// console.log('00000000',data); // // pestMonitor_num('pestMonitor_num',data)
thisWeekTemperature_echart("thisWeekTemperature_echart", data); // // thisWeekTemperature_echart("thisWeekTemperature_echart", data);
}); // });
}, },
// //
@ -669,11 +767,12 @@ export default {
}); });
}, },
mapInit(){ mapInit(){
const that = this
const map = new AMap.Map("map-13", { const map = new AMap.Map("map-13", {
zoom: 18, zoom: 18,
viewMode: "3D", viewMode: "3D",
terrain: true, terrain: true,
center: [121.696506, 31.410799], center: [121.697751,31.410188],
pitch: 45 pitch: 45
}); });
var satelliteLayer = new AMap.TileLayer.Satellite(); var satelliteLayer = new AMap.TileLayer.Satellite();
@ -698,8 +797,13 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
icon: icon, icon: icon,
title: "上海前卫柑桔有限公司", title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), // icon [center bottom] offset: new AMap.Pixel(-17.5, -40), // icon [center bottom]
}); });
marker.on("click", function (e) {
that.$router.push({ path: "/largeScreen1" });
});
map.add(marker); map.add(marker);
} }
}) })
@ -716,15 +820,15 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
fillColor: '#ff0000', // fillColor: '#ff0000', //
fillOpacity: 0.5, // fillOpacity: 0.5, //
}); });
polygon.on("click", function (e) { // polygon.on("click", function (e) {
// // //
var lng = e.lnglat.getLng(); // // var lng = e.lnglat.getLng(); //
var lat = e.lnglat.getLat(); // // var lat = e.lnglat.getLat(); //
// // //
console.log("点击位置的经度:" + lng); // console.log("" + lng);
console.log("点击位置的纬度:" + lat); // console.log("" + lat);
}); // });
polygon.on("mouseover", (e) => { polygon.on("mouseover", (e) => {
// //
// console.log(e,index); // console.log(e,index);
@ -808,6 +912,22 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
} }
} }
</style> </style>
<style lang="scss">
.largeScreen3{
.input-sel-time {
width: 100%;
display: flex;
justify-content: center;
.el-input__inner{
height: 35px;
line-height: 35px;
}
.el-input__icon{
line-height: 35px;
}
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
width: 100%; width: 100%;
@ -817,6 +937,14 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
position: relative; position: relative;
.left-video{
width: 100%;
height: calc(50% - 1.5rem);
video{
width: 100%;
height: 100%;
}
}
.park { .park {
position: absolute; position: absolute;
@ -1145,7 +1273,7 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
} }
.detail { .detail {
width: 3.98rem; width: 3.98rem;
height: 3.08rem; height: 2.58rem;
overflow: hidden; overflow: hidden;
padding-top: 0.15rem; padding-top: 0.15rem;
@ -1205,11 +1333,17 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
.thisWeekTemperature { .thisWeekTemperature {
width: 100%; width: 100%;
height: calc((100% - 4.04rem) / 2); height: calc((100% - 3.04rem) / 2);
.thisWeekTemperature_echart { .thisWeekTemperature_echart {
width: 100%; width: 100%;
height: calc(100% - 0.19rem); height: calc(100% - 0.19rem);
&.noData{
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
} }
} }
} }
@ -2199,6 +2333,24 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
.right-image-list,.right-charts{ .right-image-list,.right-charts{
width: 100%; width: 100%;
height: calc((100% - .38rem) / 2); height: calc((100% - .38rem) / 2);
&.right-data{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-row-gap:10px;//
grid-column-gap:10px;//
.data-item{
color: #fff;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
.data-name{
margin-bottom: 5px;
font-size: 17px;
font-weight: bold;
}
}
}
} }
.liveVideo { .liveVideo {
width: 4rem; width: 4rem;
@ -2400,9 +2552,10 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
.device_content { .device_content {
width: 100%; width: 100%;
height: calc(100% - 5.14rem); height: calc((100% - .38rem) / 2);
overflow: auto; overflow: auto;
color: #fff;
.content_item { .content_item {
margin-top: 0.2rem; margin-top: 0.2rem;
@ -2416,16 +2569,20 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding: 0 0.1rem 0 0.05rem; padding: 0 0.1rem 0 0.05rem;
.data-num{
text-align: right;
}
>img { >img {
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
>span:nth-child(2) { >span {
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei-Bold; font-family: MicrosoftYaHei-Bold;
font-weight: bold; // font-weight: bold;
display: block;
width: 50%;
color: #ffffff; color: #ffffff;
} }
@ -2436,20 +2593,7 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
opacity: 0.2; opacity: 0.2;
} }
>span:nth-child(4) {
font-size: 0.14rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #4effd5;
}
// >span:nth-child(6) {
// font-size: .14rem;
// font-family: MicrosoftYaHei;
// font-weight: 400;
// color: #7AE1FF;
// margin-right: 0.47rem;
// }
.progress { .progress {
width: 18%; width: 18%;
@ -2461,22 +2605,7 @@ size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以
margin-right: 0.47rem; margin-right: 0.47rem;
} }
>span:nth-child(6),
>span:nth-child(7) {
width: 0.66rem;
height: 0.3rem;
background: linear-gradient(-35deg,
rgba(122, 225, 255, 0.49) 1%,
rgba(122, 225, 255, 0.5) 100%);
border: 0.01rem solid rgba(122, 225, 255, 0.5);
border-radius: 0.15rem;
font-size: 0.14rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #7ae1ff;
text-align: center;
line-height: 0.3rem;
}
} }
.i_title_ { .i_title_ {

File diff suppressed because it is too large Load Diff

View File

@ -402,12 +402,12 @@ export default {
loading:null, loading:null,
pageName:'湿帘风机', pageName:'湿帘风机',
typeList1: [ typeList1: [
{ label:this.$t('heatFan.gearOptions.gear0'), value: 0 }, { label:this.$t('heatFan.gear0'), value: 0 },
{ label:this.$t('heatFan.gearOptions.gear1',{index:1}), value: 1 }, { label:this.$t('heatFan.gear1',{index:1}), value: 1 },
{ label:this.$t('heatFan.gearOptions.gear1',{index:2}), value: 2 }, { label:this.$t('heatFan.gear1',{index:2}), value: 2 },
{ label:this.$t('heatFan.gearOptions.gear1',{index:3}), value: 3 }, { label:this.$t('heatFan.gear1',{index:3}), value: 3 },
{ label:this.$t('heatFan.gearOptions.gear1',{index:4}), value: 4 }, { label:this.$t('heatFan.gear1',{index:4}), value: 4 },
{ label:this.$t('heatFan.gearOptions.gear1',{index:5}), value: 5 }, { label:this.$t('heatFan.gear1',{index:5}), value: 5 },
], ],
inputDataNew: [], inputDataNew: [],
} }