xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/index.js
View File

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

4
src/assets/css/main.css
View File

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

5
src/assets/css/main.scss
View File

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

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

145
src/assets/js/echarts.js
View File

@ -316,3 +316,148 @@ export function thisWeekTemperature_echart(id, data) {
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);
window.addEventListener("resize", function () {
myChart.resize();
});
}

12
src/components/large-nav.vue
View File

@ -17,8 +17,13 @@
<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="" />
<div class="item" :class="active==3?'item_act':''" @click="largeScreen4">
<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="" />
<span>环境监测</span>
</div>
@ -48,6 +53,9 @@ export default {
},
largeScreen3() {
this.$router.push({ path: "/largeScreen3" });
},
largeScreen4() {
this.$router.push({ path: "/largeScreen4" });
},
toBackPage() {
this.$router.push({ path: "/realTime" });

4
src/router/index.js
View File

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

11
src/views/page/heatFan.vue
View File

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

2
src/views/page/intrinsicParameter.vue
View File

@ -671,7 +671,7 @@ export default {
warnModel: true,
modelPassword:'',
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: 2 }), value: 2 },
{ label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 3 }), value: 3 },

65
src/views/page/largeScreen.vue
View File

@ -269,20 +269,10 @@
</div>
</div>
<div class="right" v-if="limitUserId == 13">
<div class="e_title">虫情图片</div>
<div class="right-image-list">
<div
class="image-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 class="e_title">项目简介</div>
<div class="right-aboutUs ">
<img src="@/assets/img/img-13.jpg" alt="">
<div class="scroll">上海前卫柑桔有限公司成立于1992年，地处长江入海口的长兴岛上，位于青草沙水源保护区和长兴岛郊野公园内。是目前我国规模最大、集约化程度最高的柑桔生产经营企业之一。也是上海市首批通过国家认证的绿色食品，通过了HACCP国际食品安全管理体系认证，并多次在全国柑桔评比中获得金奖、银奖和“农业部优质果品”称号。公司主营业务为柑桔生产和销售，兼营场地租赁、农业旅游、衍生品开发、技术推广等业务。 </div>
</div>
<div class="e_title">虫情趋势图</div>
<div class="right-charts" id="pest-charts"></div>
@ -405,7 +395,7 @@
<img src="../../assets/img/i_title_img.png" alt="" />
<span>风机</span>
<span class="line"></span>
<span>$t('text.invalid')</span>
<span>{{$t('text.invalid')}}</span>
<span class="line"></span>
<span>菜单</span>
</div>
@ -451,7 +441,7 @@
<img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.name }}</span>
<span class="line"></span>
<span>$t('text.invalid')</span>
<span>{{$t('text.invalid')}}</span>
<span class="line"></span>
<span>位置{{ item.progress }}%</span>
<span>菜单</span>
@ -477,7 +467,7 @@
<img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span>
<span class="line"></span>
<span>$t('text.invalid')</span>
<span>{{$t('text.invalid')}}</span>
<span class="line"></span>
<span>菜单</span>
</div>
@ -502,7 +492,7 @@
<img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span>
<span class="line"></span>
<span>$t('text.invalid')</span>
<span>{{$t('text.invalid')}}</span>
<span class="line"></span>
<span>菜单</span>
</div>
@ -527,7 +517,7 @@
<img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span>
<span class="line"></span>
<span>$t('text.invalid')</span>
<span>{{$t('text.invalid')}}</span>
<span class="line"></span>
<span>菜单</span>
</div>
@ -1313,16 +1303,32 @@ export default {
});
},
mapInit(){
const that = this
const map = new AMap.Map("map-13", {
zoom: 18,
center: [121.696506, 31.410799],
center: [121.697751,31.410188],
});
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
// map.setLayers([]); // 先清空现有图层
satelliteLayer.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);
// });
// 添加画范围
@ -1375,6 +1381,10 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
icon: icon,
title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
});
marker.on("click", function (e) {
that.$router.push({ path: "/largeScreen1" });
});
map.add(marker);
}
@ -3502,9 +3512,22 @@ window.open("http://localhost:8080/");
color: #fff;
}
}
.right-image-list,.right-charts{
.right-image-list,.right-charts,.right-aboutUs{
width: 100%;
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 {
width: 4rem;

166
src/views/page/largeScreen2.vue
View File

@ -12,16 +12,38 @@
</div>
<largeNav :active="1"></largeNav>
<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>
</template>
<script>
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 {
name: "largeScreen2",
@ -30,24 +52,85 @@ export default {
return {
typeList: [],
limitUserId: 13,
time:{}
time: {},
videoList: [],
list1: [],
list2: [],
currentPage: 1,
};
},
mounted() {
this.login();
// this.login();
this.getTime();
this.typeList=this.$store.state.typeList
this.typeList = this.$store.state.typeList;
this.list1 = [
{ cameraid: "FT5712546", channelid: 1, player: null },
{ 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: {
// 根据用户id查询对应的设备大数据信息
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) {
@ -60,12 +143,9 @@ export default {
// 获取本地的userid和token
login() {
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
this.dataInit(userInfo.userid);
},
getTime() {
@ -76,7 +156,40 @@ export default {
that.time = getnowtime();
}, 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);
// divW和divH是获取了父级宽高 使播放容器能铺满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,
// 官方url例子：ezopen://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() {
const now = new Date();
const year = now.getFullYear();
@ -85,8 +198,7 @@ export default {
const formattedDate = `${year}.${month}.${day}`;
return formattedDate;
},
}
},
};
</script>
<style lang="scss" scoped>
@ -118,16 +230,17 @@ export default {
opacity: 0.89;
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
background: linear-gradient(to bottom,
background: linear-gradient(
to bottom,
#ffffff 45%,
#e9f8ff 90%,
#77baff 100%);
#77baff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.yuan {
width: 0.56rem;
height: 0.56rem;
@ -194,17 +307,26 @@ export default {
.content {
width: 100%;
padding: 0 1rem;
height: calc(100% - 2.4rem);
height: calc(100% - 2.7rem);
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-row-gap:.2rem;//纵向间隔
grid-column-gap:.2rem;//横向间隔
grid-row-gap: 0.2rem; //纵向间隔
grid-column-gap: 0.2rem; //横向间隔
.video {
// height: calc((100% - .4rem) / 3);
background-color: #fff;
height: calc((100vh - 3.1rem) / 3);
.video-js {
width: 100%;
height: 100%;
}
}
}
.pagination {
width: 100%;
display: flex;
padding-right: 100px;
justify-content: flex-end;
}
}
}
::-webkit-scrollbar {

329
src/views/page/largeScreen3.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="home">
<div class="home largeScreen3">
<div class="kuang">
<div class="title">温室智慧云数据统计</div>
@ -16,46 +16,30 @@
<largeNav :active="2"></largeNav>
<div class="content">
<div class="left">
<div class="weatherStation"></div>
<div class="weather">
<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 class="e_title">虫情视频简介</div>
<div class="left-video">
<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>
</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="e_title">温室环境数据</div>
<div class="detail">
<!-- <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 class="e_title">虫情趋势图</div>
<div class="detail" id="pest-charts">
</div>
</div>
<div class="thisWeekTemperature" >
<div class="e_title">本周温度统计</div>
<div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div>
<div class="e_title">当日虫情数量</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 class="middle">
@ -70,6 +54,7 @@
</div>
<div class="right" >
<div class="e_title">虫情图片</div>
<div class="right-image-list">
<div
class="image-div"
@ -84,8 +69,81 @@
<div class="image-time">{{ item.shootTime }}</div>
</div>
</div>
<div class="e_title">虫情趋势图</div>
<div class="right-charts" id="pest-charts"></div>
<div class="e_title">虫情设备运行状态</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>
@ -100,7 +158,7 @@ import Swiper from "@/assets/js/swiper.min.js";
import "@/assets/js/swiper.min.css";
import {
weather_echart,
thisWeekTemperature_echart
pestMonitor_num
} from "@/assets/js/echarts";
import vueSeamless from "vue-seamless-scroll";
@ -245,7 +303,18 @@ export default {
imageList: [],
chartsData: null,
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的甘井设施农业大数据云平台
dateRange: [],
currentPage: 1,
@ -338,9 +407,8 @@ export default {
}
})
list.sort(this.compare('equipmentStatu'))
// 大冶鑫
this.get_weather_echart_data(list[0].deviceId);
this.get_thisWeekTemperature_echart_data(list[0].deviceId);
this.lefttime=this.getTime1()
this.get_environmentData(list[0].deviceId);
this.get_readControl_getState(list[0].deviceId);
this.getWeatherData(list[0].deviceId);
@ -348,6 +416,7 @@ export default {
this.getImage();
this.getCharts();
this.mapInit()
this.getInsectChartData()
}
});
@ -365,6 +434,13 @@ export default {
const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0];
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() {
var data = {
@ -384,11 +460,22 @@ export default {
// 左下角虫情趋势图
getCharts() {
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(),
endTime: this.getTimeNew(),
deviceId: 613,
};
this.api.getInsectChartData(data).then((res) => {
this.api.getInsectChartData(data1).then((res) => {
if (res.data.code == 200) {
this.chartsData = res.data;
pestLine("pest-charts", this.chartsData);
@ -413,22 +500,33 @@ export default {
},
// 获取设备一周的温度
get_thisWeekTemperature_echart_data(deviceId) {
this.api.Bigdata_getWeekTemperature(deviceId).then((res) => {
// console.log('获取设备一周的温度', res);
res.data.data.forEach((e) => {
this.day_list.push(e.day);
this.maxTemperature_list.push(Number(e.maxTemperature));
this.minTemperature_list.push(Number(e.minTemperature));
});
let data = {
day: this.day_list,
maxTemperature: this.maxTemperature_list,
minTemperature: this.minTemperature_list,
getInsectChartData(deviceId) {
var data = {
beginTime: this.lefttime,
endTime: this.lefttime,
deviceId: 613,
};
// console.log('00000000',data);
thisWeekTemperature_echart("thisWeekTemperature_echart", data);
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)
}
}
});
// this.api.getInsectChartData(deviceId).then((res) => {
// // console.log('获取设备一周的温度', res);
// console.log('00000000',res);
// // pestMonitor_num('pestMonitor_num',data)
// // thisWeekTemperature_echart("thisWeekTemperature_echart", data);
// });
},
// 主页查看控制器实时数据
@ -669,11 +767,12 @@ export default {
});
},
mapInit(){
const that = this
const map = new AMap.Map("map-13", {
zoom: 18,
viewMode: "3D",
terrain: true,
center: [121.696506, 31.410799],
center: [121.697751,31.410188],
pitch: 45
});
var satelliteLayer = new AMap.TileLayer.Satellite();
@ -698,8 +797,13 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
icon: icon,
title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
});
marker.on("click", function (e) {
that.$router.push({ path: "/largeScreen1" });
});
map.add(marker);
}
})
@ -716,15 +820,15 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
fillColor: '#ff0000', //填充色
fillOpacity: 0.5, //填充透明度
});
polygon.on("click", function (e) {
// 在点击事件处理程序中获取点击位置的经纬度坐标
var lng = e.lnglat.getLng(); // 获取经度
var lat = e.lnglat.getLat(); // 获取纬度
// polygon.on("click", function (e) {
// // 在点击事件处理程序中获取点击位置的经纬度坐标
// var lng = e.lnglat.getLng(); // 获取经度
// var lat = e.lnglat.getLat(); // 获取纬度
// 输出经纬度坐标
console.log("点击位置的经度：" + lng);
console.log("点击位置的纬度：" + lat);
});
// // 输出经纬度坐标
// console.log("点击位置的经度：" + lng);
// console.log("点击位置的纬度：" + lat);
// });
polygon.on("mouseover", (e) => {
// 点击之后覆盖物的样式
// console.log(e,index);
@ -808,6 +912,22 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
}
}
</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>
.home {
width: 100%;
@ -817,6 +937,14 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
box-sizing: border-box;
padding-bottom: 0.1rem;
position: relative;
.left-video{
width: 100%;
height: calc(50% - 1.5rem);
video{
width: 100%;
height: 100%;
}
}
.park {
position: absolute;
@ -1145,7 +1273,7 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
}
.detail {
width: 3.98rem;
height: 3.08rem;
height: 2.58rem;
overflow: hidden;
padding-top: 0.15rem;
@ -1205,11 +1333,17 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
.thisWeekTemperature {
width: 100%;
height: calc((100% - 4.04rem) / 2);
height: calc((100% - 3.04rem) / 2);
.thisWeekTemperature_echart {
width: 100%;
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{
width: 100%;
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 {
width: 4rem;
@ -2400,9 +2552,10 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
.device_content {
width: 100%;
height: calc(100% - 5.14rem);
height: calc((100% - .38rem) / 2);
overflow: auto;
color: #fff;
.content_item {
margin-top: 0.2rem;
@ -2416,16 +2569,20 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.1rem 0 0.05rem;
.data-num{
text-align: right;
}
>img {
width: 0.5rem;
height: 0.5rem;
}
>span:nth-child(2) {
>span {
font-size: 0.16rem;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
// font-weight: bold;
display: block;
width: 50%;
color: #ffffff;
}
@ -2436,20 +2593,7 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
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 {
width: 18%;
@ -2461,22 +2605,7 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
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_ {

1115
src/views/page/largeScreen4.vue Normal file
View File

File diff suppressed because it is too large Load Diff

12
src/views/page/wetFan.vue
View File

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