wszhyWx/src/views/page/largeScreen3.vue
2025-07-01 10:24:16 +08:00

2730 lines
75 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="home largeScreen3">
<div class="kuang">
<div class="title">上海前卫柑桔大数据平台</div>
<div class="calendar" v-if="time">
<img src="../../assets/img/calendar.png" alt="" />
<span>{{ getNowTime() }}</span>
<span class="line"></span>
<span>{{ time.week }}</span>
<span class="line"></span>
<span>{{ time.time }}</span>
</div>
<largeNav :active="2"></largeNav>
<div class="content">
<div class="left">
<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>
<div class="environmentData" :class="`environmentData-${limitUserId}`">
<div class="e_title">虫情趋势图</div>
<div class="detail" id="pest-charts">
</div>
</div>
<div class="thisWeekTemperature" >
<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">
<div class="map" :class="`map1-${limitUserId}`">
<!-- 长兴前卫柑桔新优品种扩繁基地 -->
<div class="map1">
<div class="drag_box13" ref="drag_box13">
<div class="map-13" id="map-13"></div>
</div>
</div>
</div>
</div>
<div class="right" >
<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>
<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>
</div>
</div>
</template>
<script>
import { getnowtime } from "../../assets/js/nowTime";
import Swiper from "@/assets/js/swiper.min.js";
import "@/assets/js/swiper.min.css";
import {
weather_echart,
pestMonitor_num
} from "@/assets/js/echarts";
import vueSeamless from "vue-seamless-scroll";
import mapData from "@/assets/js/mapData.js";
import { changeLanguage, getLanguage } from '@/utils/language'
import { pestLine } from "@/assets/js/charts";
import largeNav from '@/components/large-nav.vue'
export default {
name: "largeScreen",
components: { vueSeamless,largeNav },
computed: {
defaultOption() {
return {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: this.limitUserId != 5 ? 8 : 18, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
data() {
return {
other_show: false,
list: [],
device_item_current: 0,
menu_current: false,
content_item_current: -1,
current: 5,
current1: 1,
dataList: [
// "一号温室", "二号温室", "三号温室", "四号温室", "五号温室", "六号温室"
],
styleContainer: {
width: "3.5rem",
height: "0.5rem",
},
styleItem: {
height: "0.3rem",
"font-size": "0.14rem",
"font-weight": "500",
color: "#70D0EE",
background: "rgba(14, 91, 165, 0.1)",
border: "0.01rem solid rgba(97, 152, 209, 0.65)",
},
deviceId: "",
// 获取设备当天的温度
weather_echart_list: [],
weather_echart_list_category: [],
weather_echart_list_value: [],
// 获取设备一周的温度
day_list: [],
maxTemperature_list: [],
minTemperature_list: [],
timer_: "",
// 根据用户id查询对应的设备数据 Copy
get_sel_eqbyid_list: [],
// 获取摄像头得地址 Copy
getVideoDataList: [],
url: "",
fanStatus: {
name: "风机",
open: 0,
status: [],
},
statusList: [],
time: "", //当前时间
weatherDataList: [],
player: null,
// 自动跳转和手动跳转切换
//autoPlay: false, //false 手动切换 true 自动切换
limitUserId: "",
// 东北
fiveControlList: [
{
title: "加温水泵",
controlState: 0,
num: "1000",
close_btn: false,
},
{
title: "地热风机",
controlState: 0,
num: "1002",
close_btn: false,
},
{
title: "上风口",
controlState: 0,
num: "1004",
close_btn: true,
progress_num: "1006",
progress: "",
},
{
title: "下风口",
controlState: 0,
num: "1007",
close_btn: true,
progress_num: "1009",
progress: "",
},
{
title: "卷被",
controlState: 0,
num: "1010",
close_btn: true,
},
{
title: "除雪",
controlState: 0,
num: "1013",
close_btn: false,
},
],
// 金山吕港草莓数据id12
imgUrl: '',
//长兴前卫柑桔新优品种扩繁基地id13单独虫情接口数据
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,
pageSize: 20,
tableData: [],
tableList: [],
};
},
beforeMount() {
this.login();
},
mounted() {
// this.login();
this.getTime();
setInterval(() => {
this.getNowTime();
}, 1000);
},
beforeDestroy() {
// 销毁播放器
if (this.player) {
// this.player.dispose();
this.player.stop()
this.player.destroy()
this.player = null
}
clearInterval(this.timer_) && this.timer_;
},
watch:{
'$i18n.locale'() {
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
this.dataInit(userInfo.userid, this.limitUserId)
}
},
methods: {
// id9的甘井设施农业大数据云平台
timeInit() {
const start = new Date()
start.setHours(0, 0, 0, 0)
const end = new Date()
this.dateRange = [start, end]
},
getdataTime(time) {
// 中国标准时间
var chinaTime = new Date(time);
// 将中国标准时间转换为UTC时间
var utcTime = new Date(chinaTime.getTime() - chinaTime.getTimezoneOffset() * 60000);
// 将UTC时间转换为2024-02-17 00:00:00格式
var formattedTime = utcTime.toISOString().slice(0, 19).replace('T', ' ');
return formattedTime
},
handlerOther() {
this.other_show = !this.other_show
},
//排序
compare(property) {
return function (a, b) {
let value1 = a[property];
let value2 = b[property];
return value1 - value2;
};
},
// 根据用户id查询对应的设备大数据信息
dataInit(userid, limitUserId) {
this.api.Bigdata_getAllControl(userid).then((res) => {
// console.log('根据用户id查询对应的设备大数据信息', res);
this.dataList = res.data.data;
setTimeout(() => {
new Swiper(".middle_disasterWarningAnalysis", {
slidesPerView: 4,
spaceBetween: 10,
navigation: {
nextEl: ".right_button",
prevEl: ".left_button",
},
});
}, 100);
if (res.status === 200) {
const list = []
this.$store.state.equipmentList.forEach((el, index) => {
if (el.deviceName == 10) {
list.push(el)
}
})
list.sort(this.compare('equipmentStatu'))
this.lefttime=this.getTime1()
this.get_environmentData(list[0].deviceId);
this.get_readControl_getState(list[0].deviceId);
this.getWeatherData(list[0].deviceId);
// 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
this.getImage();
this.getCharts();
this.mapInit()
this.getInsectChartData()
}
});
},
getTimeNew() {
// 获取当前日期格式YYYY-MM-DD
const today = new Date().toISOString().split("T")[0];
return today;
},
getTime7() {
// 获取一周前的日期格式YYYY-MM-DD
const oneWeekAgo = new Date();
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
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 = {
beginTime: this.getTime7(),
endTime: this.getTimeNew(),
deviceId: 613,
pageNum: 1,
pageSize: 4,
};
this.api.getDeviceImages(data).then((res) => {
if (res.data.code == 200) {
this.imageList = res.data.data.list;
this.srcList = this.imageList.map((item) => item.imageUrl);
}
});
},
// 左下角虫情趋势图
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(data1).then((res) => {
if (res.data.code == 200) {
this.chartsData = res.data;
pestLine("pest-charts", this.chartsData);
}
});
},
// 获取设备当天的温度
get_weather_echart_data(deviceId) {
this.api.Bigdata_getTemperature(deviceId).then((res1) => {
// console.log('获取设备当天的温度', res1);
this.weather_echart_list = res1.data.data;
this.weather_echart_list.forEach((e) => {
this.weather_echart_list_category.push(e.updateTime);
this.weather_echart_list_value.push(Number(e.environmentData));
});
let data = {
data_value: this.weather_echart_list_value,
data_category: this.weather_echart_list_category,
};
weather_echart("weather_echart", data);
});
},
// 获取设备一周的温度
getInsectChartData(deviceId) {
var data = {
beginTime: this.lefttime,
endTime: this.lefttime,
deviceId: 613,
};
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);
// });
},
// 主页查看控制器实时数据
get_environmentData(equipmentId) {
this.api.getcontrol_rtdata(equipmentId).then((res) => {
// console.log('主页查看控制器实时数据',res);
if (res.data.code == 200) {
this.list = [];
var store = this.$store.state;
var list = store.typeList;
res.data.data.forEach((el, index) => {
list.forEach((el1, index1) => {
if (el.formula == el1.value) {
var num = 0;
var name = "";
num = el.environmentData + el1.unit;
if (el.equipmentNumber == 0) {
if (el.targetValue == 1) {
name = "目标" + el.environmentDataId;
} else {
name = "1#平均" + el.environmentDataId;
}
} else if (el.equipmentNumber == 15) {
if (el.targetValue == 1) {
name = "目标" + el.environmentDataId;
} else {
name = "2#平均" + el.environmentDataId;
}
} else {
name = el.equipmentNumber + "#" + el.environmentDataId;
}
this.list.push({
...el,
name: name,
num: num,
img: require(`../../assets/image/real-time-${el.formula}.png`),
});
}
});
});
}
});
},
// 获取摄像头得地址 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()
}
});
},
// 根据用户id查询对应的设备数据 Copy
get_sel_eqbyid(userId) {
this.api.sel_eqbyid(userId).then((res) => {
// console.log("根据用户id查询对应的设备数据 Copy", res);
res.data.data.forEach((item, index) => {
//规定 指定id获取监控
//规定 id为1(丽水) 并且使用第一个设备ID的监控
// 甘井设施农业大数据云平台监控
if (
item.cameraSerialNumber != null &&
(item.deviceId == 2023042214250027 ||
item.deviceId == 2023120613270115 ||
item.deviceId == 2024070113400047 ||
item.deviceId == 2023042214250017||
item.deviceId == 2023120613270053|| (this.limitUserId==1&&index==0)
)
) {
this.get_sel_eqbyid_list.push({ ...item, number: index });
this.getVideoData(
item.cameraSerialNumber,
item.cameraChannelNumber,
index
);
// this.getVideoData("L18357958", "5")
setTimeout(() => {
new Swiper(".mySwiper_video", {
// loop: true,
autoplay: true,
autoplay: {
disableOnInteraction: false,
delay: 3000,
},
navigation: {
nextEl: ".swiper-button-next_video",
prevEl: ".swiper-button-prev_video",
},
});
}, 100);
}
});
});
},
padString(str, length) {
return str.padStart(length, "0");
},
getTime() {
this.time = getnowtime();
// console.log(this.time);
const that = this;
setInterval(() => {
that.time = getnowtime();
}, 1000);
},
getNowTime() {
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, "0");
const day = now.getDate().toString().padStart(2, "0");
const formattedDate = `${year}.${month}.${day}`;
return formattedDate;
},
// 控制器状态值获取 Copy
get_readControl_getState(deviceId) {
this.api.readControl_getState(deviceId).then((res) => {
// console.log('控制器状态值获取 Copy', res);
if (res.data.code == 200) {
this.fanStatus.open = res.data.data["1023"];
this.fanStatus.status = [];
var num = res.data.data["1024"];
var num1 = this.padString(num.toString(2), 5);
var openListNew = [];
openListNew = num1.split("");
this.fanStatus.status = openListNew.reverse();
this.statusList = [];
for (var i = 0; i < 4; i++) {
var statusData = {
name: `顶卷膜${i + 1}`,
open: res.data.data[1025 + i * 3],
progress: res.data.data[1027 + i * 3],
index: res.data.data[1026 + i * 3],
};
this.statusList.push(statusData);
}
// console.log(this.statusList);
// 五防项目状态
this.fiveControlList.forEach((el) => {
el.controlState = res.data.data[el.num];
if (el.progress_num) {
el.progress = res.data.data[el.progress_num];
}
});
}
});
0;
},
// 获取天气预报数据
getWeatherData(equipmentId) {
var params={
equipmentId:equipmentId,
enName:getLanguage()
}
this.api.getControlRtDatastation(params).then((res) => {
// console.log('获取天气预报数据', res);
if (res.data.code == 200) {
this.weatherDataList = res.data.data;
}
});
},
// 数据单位
getTypeList(val) {
var store = this.$store.state;
let typeList1 = [];
typeList1 = store.typeList.filter((item) => {
return item.value == val;
});
return typeList1[0].unit;
},
// 获取本地的userid和token
login() {
// var data = {
// "username": "lsjskymdp",
// "password": "lihemix888"
// }
// this.api.login(data).then(res => {
// // console.log('信息', res);
// if (res.status == 200) {
// localStorage.setItem('token', res.data.data.token)
// localStorage.setItem('userid', res.data.data.userid)
// // console.log(localStorage.getItem('token'),localStorage.getItem('userid'));
// this.dataInit(res.data.data.userid)
// this.get_sel_eqbyid(res.data.data.userid)
// }
// })
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
//this.dataInit(userInfo.userid);
this.get_sel_eqbyid(userInfo.userid);
// 获取用户id权限
this.get_user_getjurisdiction(userInfo.userid);
// this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
// console.log(this.autoPlay);
// if (this.autoPlay == false) {
// clearInterval(this.timer_) && this.timer_;
// } else {
// this.timer_ = setTimeout(() => {
// this.$router.push({ path: "/largeScreen1" });
// }, 20000);
// }
},
// 获取用户id权限
get_user_getjurisdiction(userId) {
this.api.user_getjurisdiction(userId).then((res) => {
if (res.data.code == 200) {
// id == 2 东北;
// id == 1 丽水;
// id == 5 石门;
// id == 5 大冶鑫;
this.limitUserId = (res.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10 || el.id == 11|| el.id == 12|| el.id == 13))[0].id;
// this.drag_boxHandler13();
this.dataInit(userId, this.limitUserId);
}
});
},
mapInit(){
const that = this
const map = new AMap.Map("map-13", {
zoom: 18,
viewMode: "3D",
terrain: true,
center: [121.697751,31.410188],
pitch: 45
});
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
// map.setLayers([]); // 先清空现有图层
satelliteLayer.setMap(map); // 加载卫星图层
// roadNetLayer.setMap(map); // 加载路网图层(覆盖在卫星图上)
// 添加标点
const iconUrl = require("@/assets/img/axis1.png");
const icon = new AMap.Icon({
image: iconUrl,
size: new AMap.Size(70, 86), // 原始大小,如果不是原始大小,可以根据需要进行调整或忽略
imageSize: new AMap.Size(35, 43) // 设置实际显示的大小为35x43像素
});
this.dataList.forEach((el,index)=>{
if(el.xaxis&&el.yaxis){
var marker = new AMap.Marker({
position:new AMap.LngLat(el.xaxis,el.yaxis),
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);
}
})
// 添加画范围
var listall = mapData.features;
listall.forEach((el, index) => {
console.log(el,111);
var polygon = new AMap.Polygon({
map: map,
path: el.geometry.coordinates, //设置多边形边界路径
strokeColor: '#ff0000', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽
fillColor: '#ff0000', //填充色
fillOpacity: 0.5, //填充透明度
});
// polygon.on("click", function (e) {
// // 在点击事件处理程序中获取点击位置的经纬度坐标
// var lng = e.lnglat.getLng(); // 获取经度
// var lat = e.lnglat.getLat(); // 获取纬度
// // 输出经纬度坐标
// console.log("点击位置的经度:" + lng);
// console.log("点击位置的纬度:" + lat);
// });
polygon.on("mouseover", (e) => {
// 点击之后覆盖物的样式
// console.log(e,index);
});
// 鼠标移出事件
polygon.on("mouseout", () => {
// 鼠标移开覆盖物之后覆盖物的样式
// console.log('离开');
});
//将绘制的面对象添加到地图上
map.add(polygon);
});
},
i_contentHandler(index) {
this.menu_current = !this.menu_current;
this.content_item_current = index;
},
handlerAxis_1() {
this.$router.push({ path: "/largeScreen1" });
},
handlerAxis_2() {
this.$router.push({ path: "/largeScreen1" });
},
handlerAxis_5() {
this.$router.push({ path: "/largeScreen1" });
},
toBackPage() {
this.$router.push({ path: "/realTime" });
},
},
};
</script>
<style lang="scss">
.environmentData {
.e_content {
>div {
width: 100% !important;
>div {
width: 100% !important;
display: flex;
flex-wrap: wrap;
}
}
}
.amap-icon{
img{
width: 100%;
height: 100%;
}
}
.e_content1 {
height: 100%;
>div {
width: 100% !important;
height: 100%;
>div {
width: 100% !important;
height: 100%;
display: flex;
flex-wrap: wrap;
}
}
}
}
</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%;
height: 100%;
background: url("../../assets/img/bg.png") center no-repeat;
background-size: 100% 100%;
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;
top: .2rem;
right: .65rem;
z-index: 99999;
color: #fff;
font-size: .2rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #7ABAFF;
}
.other {
width: 100%;
height: 100%;
position: fixed;
top: -2px;
left: 0;
z-index: 9999;
background: url('../../assets/img/map2.jpg') center no-repeat;
background-size: 100% 100%;
}
.kuang {
width: 100%;
height: 100%;
background: url("../../assets/img/kuang.png") center no-repeat;
background-size: 100% 100%;
position: relative;
top: 0;
left: 0;
z-index: 20;
.title {
width: 100%;
height: auto;
box-sizing: border-box;
padding-top: 0.06rem;
font-size: 0.54rem;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #eff8fc;
line-height: 0.54rem;
opacity: 0.9;
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
background: linear-gradient(to bottom,
#ffffff 45%,
#e9f8ff 90%,
#77baff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.auto_play {
height: 0.56rem;
position: absolute;
top: 0.53rem;
left: 1.4rem;
z-index: 99999999;
display: flex;
align-items: center;
>span {
width: 0.8rem;
height: 0.3rem;
background: rgba(14, 91, 165, 0.1);
border: 1px solid rgba(97, 152, 209, 0.65);
margin-right: 0.1rem;
font-size: 0.18rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #70d0ee;
text-align: center;
line-height: 0.3rem;
cursor: pointer;
}
.act {
background: linear-gradient(-35deg,
#56a8d5 0%,
rgba(0, 55, 110, 0.75) 50%,
#56a8d5 100%);
border: 1px solid rgba(122, 225, 255, 0.75);
font-size: 0.18rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #fff;
}
}
.yuan {
width: 0.56rem;
height: 0.56rem;
background: url("../../assets/img/yuan_bg.png") center no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0.53rem;
left: 0.71rem;
display: flex;
align-items: center;
justify-content: center;
>img {
width: 0.2rem;
height: 0.2rem;
}
}
.large-btn{
position: absolute;
top: 0.13rem;
right: 0.66rem;
z-index: 111;
}
.calendar {
width: 4rem;
height: 0.3rem;
position: absolute;
top: 0.63rem;
right: 0.66rem;
display: flex;
align-items: center;
justify-content: space-between;
>img {
width: 0.28rem;
height: 0.3rem;
}
>span:nth-child(2) {
font-size: 0.24rem;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #7abaff;
}
>span:nth-child(4) {
font-size: 0.2rem;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #7abaff;
}
>span:nth-child(6) {
font-size: 0.3rem;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #7abaff;
}
.line {
width: 0.02rem;
height: 0.3rem;
background: #ffffff;
opacity: 0.2;
}
}
.nav {
// width: 2.5rem;
position: absolute;
z-index: 999999;
left: 50%;
transform: translate(-50%);
bottom: 0.17rem;
display: flex;
justify-content: space-between;
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 .2rem;
cursor: pointer;
>img {
width: 1.08rem;
height: 0.91rem;
}
>span {
font-size: 0.2rem;
font-family: AlibabaPuHuiTiB;
font-weight: bold;
color: #b1eaff;
}
}
.item_act {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
>img {
width: 1.08rem;
height: 0.91rem;
}
>span {
font-size: 0.2rem;
font-family: AlibabaPuHuiTiB;
font-weight: bold;
color: #ffffff;
}
}
}
.content {
width: 100%;
height: calc(100% - 0.6rem);
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.66rem;
.weather {
width: 3.84rem;
height: 0.34rem;
>div {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 0.1rem;
background: rgba(14, 91, 165, 0.1);
border: 0.01rem solid rgba(97, 152, 209, 0.65);
line-height: 0.34rem;
font-size: 0.16rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
marquee {
width: 100%;
height: 100%;
.item {
height: 100%;
margin-right: 0.1rem;
display: inline-block;
>img {
width: 0.3rem;
height: 0.3rem;
position: relative;
top: 0.01rem;
margin-right: 0.05rem;
}
>span {
font-size: 0.16rem;
font-weight: 400;
color: #fff;
font-family: Microsoft YaHei;
position: relative;
top: -0.08rem;
}
}
}
}
}
.e_title {
width: 3.98rem;
height: 0.19rem;
background: url("../../assets/img/environmentData_bg.png") center no-repeat;
background-size: 100% 100%;
font-size: 0.18rem;
font-family: AlibabaPuHuiTiM;
font-weight: 500;
color: #83ccff;
box-sizing: border-box;
padding-left: 0.32rem;
line-height: 0.19rem;
}
.left {
width: 4rem;
height: calc(100% - 0.66rem);
box-sizing: border-box;
// padding-top: 0.56rem;
position: relative;
// top: 0.56rem;
// left: 0.66rem;
z-index: 999;
.realTime-line{
width: 100%;
height: calc((100% - 3.5rem) / 2);
}
.weatherStation {
width: 4rem;
height: 0.43rem;
background: url("../../assets/img/weatherStation.png") center no-repeat;
background-size: 100% 100%;
}
.weather_echart {
width: 100%;
height: calc((100% - 4.04rem) / 2);
&.weather_img{
height: calc((100% - 4.04rem) / 2 + 0.5rem);
}
.img{
width: 100%;
height: 100%;
}
}
.environmentData {
width: 3.98rem;
height: 3.27rem;
&.environmentData-11{
height: calc(100% - 0.77rem);
.detail{
height: calc(100% - 0.19rem);
}
}
.detail {
width: 3.98rem;
height: 2.58rem;
overflow: hidden;
padding-top: 0.15rem;
.title_child {
width: 100%;
height: 0.55rem;
box-sizing: border-box;
padding: 0.19rem 0 0 0.32rem;
font-size: 0.18rem;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
color: #ffffff;
}
.e_content {
width: 100%;
//height: 2.53rem;
display: flex;
flex-wrap: wrap;
.item {
width: 50%;
display: flex;
align-items: center;
margin-bottom: 0.1rem;
box-sizing: border-box;
padding-bottom: 0.1rem;
>img {
width: 0.62rem;
height: 0.68rem;
margin: 0 0.16rem 0 0.13rem;
}
.item_child {
display: flex;
flex-direction: column;
>span:nth-child(1) {
font-size: 0.16rem;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
color: #86c2ff;
}
>span:nth-child(2) {
font-size: 0.22rem;
font-family: AlibabaPuHuiTiB;
font-weight: bold;
color: #ffffff;
}
}
}
}
}
}
.thisWeekTemperature {
width: 100%;
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;
}
}
}
}
.middle {
width: calc(100% - 8rem);
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding-bottom: 0.5rem;
.middle-data{
width: 100%;
height:2.5rem ;
position: relative;
z-index: 100;
background: rgba(0, 92, 178, 0.3);
.data-title{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height:40px;
>div{
width: calc(100% / var(--dataNumber));
font-size: 13px;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
color:#fff;
font-weight: bold;
}
}
.data-data{
height: calc(2.5rem - 40px);
overflow: hidden;
.data-table{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: calc((2.5rem - 40px) / 5);
>div{
width: calc(100% / var(--dataNumber));
font-size: 13px;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
color:#fff;
}
}
}
}
.map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
transparent 10%,
blue 20%,
blue 80%,
transparent 90%,
transparent 100%);
&.map1-13{
-webkit-mask-image: unset;
.map1{
width: 100%;
}
}
.map1 {
width: 90%;
height:90%;
// background: url('../assets/img/map.png') center no-repeat;
// background-size: 100% 100%;
// -webkit-mask-image: linear-gradient(0deg, transparent 5%,
// transparent 0%,
// blue 30%,
// blue 80%,
// transparent 100%,
// transparent 100%);
-webkit-mask-image: linear-gradient(transparent 0%,
blue 8%,
blue 92%,
transparent 100%);
// transform: scale(0.6);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
.drag_box1 {
width: 100%;
height: 100%;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 13%,
blue 87%,
transparent 100%);
.drag_img {
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 13%,
blue 73%,
transparent 97%);
}
.axis_init {
width: 0.4rem;
height: 0.5rem;
position: absolute;
top: 54%;
z-index: 99;
}
.axis_init1 {
width: 0.4rem;
height: 0.5rem;
position: absolute;
z-index: 99;
}
}
.drag_box5 {
width: 100%;
height: 100%;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 13%,
blue 87%,
transparent 100%);
.drag_img {
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 13%,
blue 73%,
transparent 97%);
}
.axis_shimen {
width: 0.4rem;
height: 0.5rem;
position: absolute;
top: 49%;
left: 9%;
z-index: 99;
}
.axis_shimen1 {
width: 0.3rem;
height: 0.4rem;
position: absolute;
top: 52%;
left: 16%;
z-index: 99;
}
.axis_shimen2 {
width: 0.3rem;
height: 0.4rem;
position: absolute;
top: 50.3%;
left: 18%;
z-index: 99;
}
.axis_shimen3 {
width: 0.3rem;
height: 0.4rem;
position: absolute;
top: 48.3%;
left: 20%;
z-index: 99;
}
.axis_shimen4 {
width: 0.3rem;
height: 0.4rem;
position: absolute;
top: 46.3%;
left: 22%;
z-index: 99;
}
}
.drag_box7 {
width: 100%;
height: auto;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 13%,
blue 87%,
transparent 100%);
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 13%,
blue 73%,
transparent 97%);
}
.axis_shimen {
width: 0.4rem;
height: auto;
position: absolute;
top: 38%;
left: 28%;
z-index: 99;
cursor: pointer;
}
.axis_shimen1 {
width: 0.4rem;
height: auto;
position: absolute;
top: 56%;
left: 26%;
z-index: 99;
cursor: pointer;
}
.axis_shimen2 {
width: 0.4rem;
height: auto;
position: absolute;
top: 38%;
left: 66%;
cursor: pointer;
z-index: 99;
}
.axis_shimen3 {
width: 0.4rem;
height: auto;
position: absolute;
top: 56%;
left: 67%;
z-index: 99;
cursor: pointer;
}
.axis_shimen4 {
width: 0.4rem;
height: auto;
position: absolute;
top: 22%;
left: 53%;
z-index: 99;
cursor: pointer;
}
.axis_shimen5 {
width: 0.4rem;
height: auto;
position: absolute;
top: 22%;
left: 67%;
z-index: 99;
cursor: pointer;
}
}
.drag_box13{
width: 100%;
// height: auto;
height: 100%;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 27%,
blue 73%,
transparent 100%);
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 13%,
blue 73%,
transparent 97%);
}
.map-13{
width: 100%;
height: 100%;
}
.axis_shimen {
width: 0.3rem;
height: auto;
position: absolute;
top: 13%;
left:43.5%;
z-index: 99;
cursor: pointer;
}
.axis_shimen1 {
width: 0.3rem;
height: auto;
position: absolute;
top: 15%;
left:34.5%;
z-index: 99;
cursor: pointer;
}
.axis_shimen2 {
width: 0.3rem;
height: auto;
position: absolute;
top: 16%;
left:26%;
z-index: 99;
cursor: pointer;
}
.axis_shimen3 {
width: 0.3rem;
height: auto;
position: absolute;
top: 28%;
left:35%;
z-index: 99;
cursor: pointer;
}
.axis_shimen4 {
width: 0.3rem;
height: auto;
position: absolute;
top: 29%;
left:27%;
z-index: 99;
cursor: pointer;
}
.axis_shimen5 {
width: 0.3rem;
height: auto;
position: absolute;
top: 43%;
left:38.5%;
z-index: 99;
cursor: pointer;
}
.axis_shimen6 {
width: 0.3rem;
height: auto;
position: absolute;
top: 44%;
left:30.5%;
z-index: 99;
cursor: pointer;
}
.axis_shimen7 {
width: 0.3rem;
height: auto;
position: absolute;
top: 56%;
left:57%;
z-index: 99;
cursor: pointer;
}
.axis_shimen8 {
width: 0.3rem;
height: auto;
position: absolute;
top: 49%;
left:58%;
z-index: 99;
cursor: pointer;
}
.axis_shimen9 {
width: 0.3rem;
height: auto;
position: absolute;
top: 42%;
left:59%;
z-index: 99;
cursor: pointer;
}
.axis_shimen10 {
width: 0.3rem;
height: auto;
position: absolute;
top: 35%;
left:60%;
z-index: 99;
cursor: pointer;
}
.axis_shimen11 {
width: 0.3rem;
height: auto;
position: absolute;
top: 27%;
left:61%;
z-index: 99;
cursor: pointer;
}
.axis_shimen12 {
width: 0.3rem;
height: auto;
position: absolute;
top: 69%;
left:70%;
z-index: 99;
cursor: pointer;
}
.axis_shimen13 {
width: 0.3rem;
height: auto;
position: absolute;
top: 77%;
left:70%;
z-index: 99;
cursor: pointer;
}
}
.drag_box12 {
width: 100%;
height: auto;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 13%,
blue 87%,
transparent 100%);
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 2%,
blue 95%,
transparent 97%);
}
.axis_shimen {
width: 0.3rem;
height: auto;
position: absolute;
top: 44%;
left:31%;
z-index: 99;
cursor: pointer;
}
.axis_shimen1 {
width: 0.3rem;
height: auto;
position: absolute;
top: 38%;
left: 50%;
z-index: 99;
cursor: pointer;
}
.axis_shimen2 {
width: 0.3rem;
height: auto;
position: absolute;
top: 42%;
left: 72%;
z-index: 99;
cursor: pointer;
}
}
.drag_box11 {
width: 100%;
height: auto;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 13%,
blue 87%,
transparent 100%);
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 2%,
blue 95%,
transparent 97%);
}
.axis_shimen {
width: 0.3rem;
height: auto;
position: absolute;
top: 18%;
left: 42%;
z-index: 99;
cursor: pointer;
}
}
.drag_box10 {
width: 100%;
height: auto;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 13%,
blue 87%,
transparent 100%);
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 2%,
blue 95%,
transparent 97%);
}
.axis_shimen {
width: 0.3rem;
height: auto;
position: absolute;
top: 19%;
left: 46%;
z-index: 99;
cursor: pointer;
}
.axis_shimen1 {
width: 0.3rem;
height: auto;
position: absolute;
top: 19%;
left: 55%;
z-index: 99;
cursor: pointer;
}
.axis_shimen2 {
width: 0.3rem;
height: auto;
position: absolute;
top: 48%;
left: 46%;
z-index: 99;
cursor: pointer;
}
.axis_shimen3 {
width: 0.3rem;
height: auto;
position: absolute;
top: 48%;
left: 56%;
z-index: 99;
cursor: pointer;
}
.axis_shimen4 {
width: 0.3rem;
height: auto;
position: absolute;
top: 73%;
left: 46%;
z-index: 99;
cursor: pointer;
}
.axis_shimen5 {
width: 0.3rem;
height: auto;
position: absolute;
top: 73%;
left: 57%;
z-index: 99;
cursor: pointer;
}
.axis_shimen6 {
width: 0.3rem;
height: auto;
position: absolute;
top: 83%;
left: 41%;
z-index: 99;
cursor: pointer;
}
.axis_shimen7 {
width: 0.3rem;
height: auto;
position: absolute;
top: 88%;
left: 54%;
z-index: 99;
cursor: pointer;
}
}
.drag_box9 {
width: 100%;
height: auto;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 13%,
blue 87%,
transparent 100%);
.url-btn{
width: 1.3rem;height: .35rem;
// background: rgba(255,255,255,0.3);
position: absolute;
top: 28.5%;
left:17.5%;
z-index: 99;
cursor: pointer;
transform: rotate(-32deg);
}
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 2%,
blue 95%,
transparent 97%);
}
.axis_shimen {
width: 0.3rem;
height: auto;
position: absolute;
top: 31.5%;
left:22.5%;
z-index: 99;
cursor: pointer;
}
.axis_shimen1 {
width: 0.3rem;
height: auto;
position: absolute;
top:71%;
left: 28.5%;
z-index: 99;
cursor: pointer;
}
.axis_shimen2 {
width: 0.3rem;
height: auto;
position: absolute;
top: 31.5%;
left: 55%;
z-index: 99;
cursor: pointer;
}
.axis_shimen3 {
width: 0.3rem;
height: auto;
position: absolute;
top: 33%;
left: 56%;
z-index: 99;
cursor: pointer;
}
.axis_shimen4 {
width: 0.3rem;
height: auto;
position: absolute;
top: 22%;
left: 59.5%;
z-index: 99;
cursor: pointer;
}
.axis_shimen5 {
width: 0.3rem;
height: auto;
position: absolute;
top: 23%;
left: 60.5%;
z-index: 99;
cursor: pointer;
}
.axis_shimen6 {
width: 0.3rem;
height: auto;
position: absolute;
top: 19.5%;
left: 62%;
z-index: 99;
cursor: pointer;
}
.axis_shimen7 {
width: 0.3rem;
height: auto;
position: absolute;
top: 20.5%;
left:63%;
z-index: 99;
cursor: pointer;
}
.axis_shimen8 {
width: 0.3rem;
height: auto;
position: absolute;
top: 16%;
left:64%;
z-index: 99;
cursor: pointer;
}
.axis_shimen9 {
width: 0.3rem;
height: auto;
position: absolute;
top:18%;
left: 65%;
z-index: 99;
cursor: pointer;
}
}
.drag_box8 {
width: 100%;
height: auto;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 13%,
blue 87%,
transparent 100%);
.drag_img {
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 2%,
blue 95%,
transparent 97%);
}
.axis_shimen {
width: 0.4rem;
height: auto;
position: absolute;
top: 83%;
left: 30%;
z-index: 99;
cursor: pointer;
}
.axis_shimen1 {
width: 0.4rem;
height: auto;
position: absolute;
top: 67%;
left: 42%;
z-index: 99;
cursor: pointer;
}
.axis_shimen2 {
width: 0.4rem;
height: auto;
position: absolute;
top: 55%;
left: 52%;
z-index: 99;
cursor: pointer;
}
.axis_shimen3 {
width: 0.4rem;
height: auto;
position: absolute;
top: 40%;
left: 57%;
z-index: 99;
cursor: pointer;
}
.axis_shimen4 {
width: 0.4rem;
height: auto;
position: absolute;
top: 32%;
left: 57%;
z-index: 99;
cursor: pointer;
}
.axis_shimen5 {
width: 0.4rem;
height: auto;
position: absolute;
top: 24%;
left: 56%;
z-index: 99;
cursor: pointer;
}
.axis_shimen6 {
width: 0.4rem;
height: auto;
position: absolute;
top: 17%;
left: 55%;
z-index: 99;
cursor: pointer;
}
.axis_shimen7 {
width: 0.4rem;
height: auto;
position: absolute;
top: 12%;
left: 52%;
z-index: 99;
cursor: pointer;
}
}
.drag_box {
width: 100%;
height: 100%;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
z-index: 10;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 13%,
blue 87%,
transparent 100%);
.drag_img {
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 13%,
blue 73%,
transparent 97%);
}
.axis_1 {
width: 0.7rem;
height: 0.86rem;
position: absolute;
cursor: pointer;
top: 5%;
left: 22%;
z-index: 99;
}
.axis_2 {
width: 0.7rem;
height: 0.86rem;
position: absolute;
cursor: pointer;
top: 23%;
left: 41%;
z-index: 99;
}
.axis_3 {
width: 0.7rem;
height: 0.86rem;
position: absolute;
cursor: pointer;
top: 43%;
left: 15%;
z-index: 99;
}
.axis_4 {
width: 0.7rem;
height: 0.86rem;
position: absolute;
cursor: pointer;
top: 3%;
left: 64%;
z-index: 99;
}
.axis_5 {
width: 0.7rem;
height: 0.86rem;
position: absolute;
cursor: pointer;
top: 29%;
left: 78%;
z-index: 99;
}
.axis_6 {
width: 0.7rem;
height: 0.86rem;
position: absolute;
cursor: pointer;
top: 63%;
left: 65%;
z-index: 99;
}
.axis_7 {
width: 1.04rem;
height: 1.18rem;
position: absolute;
cursor: pointer;
top: 42%;
left: 45%;
z-index: 99;
}
}
}
}
}
.right {
width: 4rem;
height: calc(100% - 0.66rem);
box-sizing: border-box;
padding-top: 0.44rem;
position: relative;
// top: 0.56rem;
// right: 0.66rem;
z-index: 999;
.weather_echart{
height: calc((100% - 4.5rem) * 0.4);
}
.right-image-list{
padding: 20px 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 10px; //纵向间隔
grid-column-gap: 10px; //横向间隔
.image-time{
text-align: center;
color: #fff;
}
}
.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;
height: 0.43rem;
background: url("../../assets/img/liveVideo.png") center no-repeat;
background-size: 100% 100%;
}
.liveVideo_content {
width: 4rem;
height: 3.3rem;
background: url("../../assets/img/liveVideo_bg.png") center no-repeat;
background-size: 100% 100%;
margin-top: 0.14rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.liveVideo_content_9{
height: calc((100% - 4.5rem) * 0.6);
}
.video{
width: 3.7rem;
height:80%;
}
.mySwiper_video {
width: 100%;
height: 100%;
.swiper-slide_video {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.monitor {
width: 3.5rem;
height: 2.4rem;
.video-js {
width: 100%;
height: 100%;
}
}
.c_bottom {
font-size: 0.24rem;
font-family: AlibabaPuHuiTiM;
font-weight: 500;
color: #afd6ff;
line-height: 0.24rem;
margin-top: 0.15rem;
}
.swiper-button-next_video {
margin-right: 0.15rem;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
content: "" !important;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
content: "" !important;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background: none;
margin-top: -0.1rem;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background: none;
margin-top: -0.1rem;
}
}
}
.deviceState {
width: 4rem;
height: 0.43rem;
background: url("../../assets/img/liveVideo.png") center no-repeat;
background-size: 100% 100%;
margin-top: 0.2rem;
}
.device_detail {
width: 100%;
height: 0.54rem;
.swiper_timer {
width: 100%;
height: 0.54rem;
>div {
width: 100%;
height: 0.54rem;
cursor: pointer;
position: relative;
.swiper-container {
margin-left: 0;
margin-right: 0;
}
.swiper-wrapper {
align-items: center;
justify-content: space-between;
}
::v-deep .swiper-slide {
width: 0.90rem !important;
}
.swiper-slide1 {}
::v-deep .swiper-slide2 {
color: #ffffff !important;
background: linear-gradient(-35deg,
#56a8d5 0%,
rgba(0, 55, 110, 0.75) 50%,
#56a8d5 100%) !important;
border: 1px solid rgba(122, 225, 255, 0.75) !important;
}
.swiper-slide {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
img {
width: 0.2rem;
height: 0.2rem;
}
.right_button {
width: 0.2rem;
height: 0.2rem;
position: absolute;
top: 48%;
right: 0%;
}
.left_button {
width: 0.2rem;
height: 0.2rem;
position: absolute;
top: 48%;
left: 89%;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
content: "" !important;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
content: "" !important;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background: none;
margin-top: -0.1rem;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background: none;
margin-top: -0.1rem;
}
}
}
}
.device_content {
width: 100%;
height: calc((100% - .38rem) / 2);
overflow: auto;
color: #fff;
.content_item {
margin-top: 0.2rem;
.i_title {
// width: 4rem;
height: 0.5rem;
background: url("../../assets/img/i_title_bg.png") center no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
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 {
font-size: 0.16rem;
font-family: MicrosoftYaHei-Bold;
// font-weight: bold;
display: block;
width: 50%;
color: #ffffff;
}
.line {
width: 0.01rem;
height: 0.2rem;
background: #7abaff;
opacity: 0.2;
}
.progress {
width: 18%;
font-size: 0.14rem;
font-style: normal;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #7ae1ff;
margin-right: 0.47rem;
}
}
.i_title_ {
// width: 4rem;
height: 0.5rem;
background: url("../../assets/img/i_title_bg.png") center no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.1rem 0 0.05rem;
>img {
width: 0.5rem;
height: 0.5rem;
}
>span:nth-child(2) {
width: 18%;
font-size: 0.16rem;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
color: #ffffff;
}
.line {
width: 0.01rem;
height: 0.2rem;
background: #7abaff;
opacity: 0.2;
margin-right: 0.1rem;
}
>span:nth-child(4) {
width: 18%;
font-size: 0.14rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #4effd5;
}
>span:nth-child(6) {
width: 18%;
font-size: 0.14rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #7ae1ff;
margin-right: 0.47rem;
}
>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_content {
width: 3.8rem;
box-sizing: border-box;
padding: 0 0.1rem;
background: rgba(2, 36, 70, 0.5);
border: 0.01rem solid rgba(48, 110, 168, 0.6);
margin: 0 auto;
.i_content_item {
width: 100%;
height: 0.52rem;
display: flex;
align-items: center;
justify-content: space-between;
>span:nth-child(1),
>span:nth-child(4) {
font-size: 0.14rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
}
>span:nth-child(2),
>span:nth-child(5) {
font-size: 0.14rem;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #08ffc2;
}
.line {
width: 0.01rem;
height: 0.2rem;
background: #7abaff;
opacity: 0.2;
}
}
.line1 {
width: 3.6rem;
height: 0.01rem;
background: #7abaff;
opacity: 0.2;
}
}
}
}
}
}
}
}
</style>