1
This commit is contained in:
parent
21574f62da
commit
c92431e963
@ -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)
|
||||||
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -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 {
|
||||||
|
@ -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
BIN
src/assets/img/img-13.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 154 KiB |
@ -316,3 +316,148 @@ export function thisWeekTemperature_echart(id, data) {
|
|||||||
myChart.resize();
|
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();
|
||||||
|
});
|
||||||
|
}
|
@ -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" });
|
||||||
|
@ -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')
|
||||||
},
|
},
|
||||||
// 虫情查看的
|
// 虫情查看的
|
||||||
{
|
{
|
||||||
|
@ -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 },
|
||||||
|
@ -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 },
|
||||||
|
@ -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);
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
// 添加画范围
|
// 添加画范围
|
||||||
@ -1375,6 +1381,10 @@ 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);
|
||||||
}
|
}
|
||||||
@ -3502,9 +3512,22 @@ 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;
|
||||||
|
@ -12,16 +12,38 @@
|
|||||||
</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",
|
||||||
|
|
||||||
@ -30,24 +52,85 @@ export default {
|
|||||||
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 },
|
||||||
|
{ 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() {
|
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 {
|
|||||||
|
|
||||||
// 获取本地的userid和token
|
// 获取本地的userid和token
|
||||||
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);
|
||||||
|
// 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() {
|
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(
|
||||||
|
to bottom,
|
||||||
#ffffff 45%,
|
#ffffff 45%,
|
||||||
#e9f8ff 90%,
|
#e9f8ff 90%,
|
||||||
#77baff 100%);
|
#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;
|
||||||
@ -194,17 +307,26 @@ 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
|
@ -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>
|
|
||||||
<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>
|
</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));
|
|
||||||
});
|
|
||||||
let data = {
|
|
||||||
day: this.day_list,
|
|
||||||
maxTemperature: this.maxTemperature_list,
|
|
||||||
minTemperature: this.minTemperature_list,
|
|
||||||
};
|
};
|
||||||
// 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(){
|
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_ {
|
||||||
|
1115
src/views/page/largeScreen4.vue
Normal file
1115
src/views/page/largeScreen4.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -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: [],
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user