2730 lines
75 KiB
Vue
2730 lines
75 KiB
Vue
<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>
|