1341 lines
38 KiB
Vue
1341 lines
38 KiB
Vue
<template>
|
||
<div class="home">
|
||
|
||
|
||
<div class="kuang">
|
||
<div class="title">
|
||
温室智慧云数据统计
|
||
</div>
|
||
<div class="yuan">
|
||
<img src="../../assets/img/big.png" alt="">
|
||
</div>
|
||
<div class="calendar">
|
||
<img src="../../assets/img/calendar.png" alt="">
|
||
<span>2023.10.30</span>
|
||
<span class="line"></span>
|
||
<span>星期一</span>
|
||
<span class="line"></span>
|
||
<span>14:17</span>
|
||
</div>
|
||
<div class="nav">
|
||
<div class="item">
|
||
<img src="../../assets/img/nav1_act.png" alt="">
|
||
<span>大数据平台</span>
|
||
</div>
|
||
<div class="item item_act" @click="toBackPage">
|
||
<img src="../../assets/img/nav2.png" alt="">
|
||
<span>施肥机</span>
|
||
</div>
|
||
<div class="item item_act" v-show="false">
|
||
<img src="../../assets/img/nav3.png" alt="">
|
||
<span>农产品追溯</span>
|
||
</div>
|
||
<div class="item item_act" v-show="false">
|
||
<img src="../../assets/img/nav4.png" alt="">
|
||
<span>市场行情</span>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="left">
|
||
|
||
<div class="weatherStation"></div>
|
||
|
||
<div class="weather">
|
||
<div>
|
||
<marquee behavior="" direction="">
|
||
今日天气晴转多云，温度16~28℃，东北风三级，湿度
|
||
</marquee>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="weather_echart" id="weather_echart"></div>
|
||
|
||
<div class="environmentData">
|
||
<div class="e_title">温室环境数据</div>
|
||
<div class="detail">
|
||
<!-- <div class="title_child">一号温室</div> -->
|
||
<vue-seamless class="e_content" :data="list" :class-option="defaultOption">
|
||
<div class="item" v-for="(el, index) in list" :key="index">
|
||
<!-- <img :src="el.formula" alt=""> -->
|
||
<img :src="el.img" alt="">
|
||
<div class="item_child">
|
||
<span>{{ el.name }}</span>
|
||
<span>{{ el.num }}</span>
|
||
</div>
|
||
</div>
|
||
</vue-seamless>
|
||
<!-- <div class="e_content">
|
||
<div class="item" v-for="(el, index) in list" :key="index">
|
||
<img :src="el.img" alt="">
|
||
<div class="item_child">
|
||
<span>{{ el.name }}</span>
|
||
<span>{{ el.num }}</span>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="thisWeekTemperature">
|
||
<div class="e_title">本周温度统计</div>
|
||
<div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="middle">
|
||
<div class="map">
|
||
<div class="map1">
|
||
<div class="drag_box" ref="drag_box">
|
||
<img class="drag_img" src="../../assets/img/map.png" alt="">
|
||
<img class="axis_1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1">
|
||
<img class="axis_2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1">
|
||
<img class="axis_3" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1">
|
||
<img class="axis_4" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1">
|
||
<img class="axis_5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1">
|
||
<img class="axis_6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1">
|
||
<img class="axis_7" src="../../assets/img/axis2.png" alt="" @click="handlerAxis_1">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
|
||
<div class="liveVideo"></div>
|
||
|
||
<div class="liveVideo_content">
|
||
<div class="swiper-container mySwiper_video">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
|
||
<div class="monitor" :id="'monitor' + item.number">
|
||
<div ref="videoPlayer" class="video-js" :id="'video-js' + item.number"></div>
|
||
</div>
|
||
<div class="c_bottom">{{ item.deviceTypeName }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-button-next swiper-button-next_video">
|
||
<img src="../../assets/img/right_video.png" alt="">
|
||
</div>
|
||
<div class="swiper-button-prev swiper-button-prev_video">
|
||
<img src="../../assets/img/left_video.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="deviceState"></div>
|
||
|
||
<div class="device_detail">
|
||
<div class="swiper_timer">
|
||
<div>
|
||
|
||
<div class="swiper-container middle_disasterWarningAnalysis" :style="styleContainer">
|
||
<div class="swiper-wrapper">
|
||
<div :class="current == index
|
||
? 'swiper-slide swiper-slide2'
|
||
: 'swiper-slide swiper-slide1'
|
||
" v-for="(item, index) in dataList" :key="index" :style="styleItem" @click="getCurrent(index)">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right_button swiper-button-next">
|
||
<img src="../../assets/img/device_right.png" alt="">
|
||
</div>
|
||
<div class="left_button swiper-button-prev">
|
||
<img src="../../assets/img/device_left.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="device_content scroll">
|
||
<div class="content_item" v-for="(content_item, index) in 6" :key="index">
|
||
<div class="i_title">
|
||
<img src="../../assets/img/i_title_img.png" alt="">
|
||
<span>卷膜天窗</span>
|
||
<span class="line"></span>
|
||
<span>打开</span>
|
||
<span class="line"></span>
|
||
<span>位置50%</span>
|
||
<span @click="i_contentHandler(index)">菜单</span>
|
||
</div>
|
||
<div class="i_content" v-if="menu_current == true && content_item_current == index">
|
||
<div class="i_content_item">
|
||
<span>1#风机</span>
|
||
<span>开启</span>
|
||
<span class="line"></span>
|
||
<span>2#风机</span>
|
||
<span>开启</span>
|
||
</div>
|
||
<div class="line1"></div>
|
||
<div class="i_content_item">
|
||
<span>3#风机</span>
|
||
<span>开启</span>
|
||
<span class="line"></span>
|
||
<span>4#风机</span>
|
||
<span>开启</span>
|
||
</div>
|
||
<div class="line1"></div>
|
||
<div class="i_content_item">
|
||
<span>5#风机</span>
|
||
<span>开启</span>
|
||
<span class="line"></span>
|
||
<span>6#风机</span>
|
||
<span>开启</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Swiper from '@/assets/js/swiper.min.js'
|
||
import '@/assets/js/swiper.min.css'
|
||
import { weather_echart, thisWeekTemperature_echart } from '@/assets/js/echarts'
|
||
|
||
import EZUIKit from 'ezuikit-js';
|
||
import videojs from 'video.js';
|
||
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
|
||
import vueSeamless from 'vue-seamless-scroll'
|
||
export default {
|
||
name: 'largeScreen',
|
||
components: { vueSeamless },
|
||
computed: {
|
||
defaultOption() {
|
||
return {
|
||
step: 0.3, // 数值越大速度滚动越快
|
||
limitMoveNum: 8, // 开始无缝滚动的数据量 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 {
|
||
list: [],
|
||
device_item_current: 0,
|
||
menu_current: false,
|
||
content_item_current: -1,
|
||
|
||
current: 0,
|
||
|
||
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: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
new Swiper(".middle_disasterWarningAnalysis", {
|
||
slidesPerView: 4,
|
||
spaceBetween: 10,
|
||
navigation: {
|
||
nextEl: ".right_button",
|
||
prevEl: ".left_button",
|
||
},
|
||
});
|
||
|
||
new Swiper(".mySwiper_video", {
|
||
loop: true,
|
||
navigation: {
|
||
nextEl: ".swiper-button-next_video",
|
||
prevEl: ".swiper-button-prev_video",
|
||
},
|
||
});
|
||
|
||
this.drag_boxHandler()
|
||
|
||
// this.timer_ = setTimeout(() => {
|
||
// this.$router.push({ path: '/largeScreen1' })
|
||
// }, 6000);
|
||
|
||
|
||
this.login()
|
||
},
|
||
destroyed() {
|
||
this.timer_ = null
|
||
},
|
||
methods: {
|
||
// 根据用户id查询对应的设备大数据信息
|
||
dataInit(userid) {
|
||
this.api.Bigdata_getAllControl(userid).then(res => {
|
||
console.log('根据用户id查询对应的设备大数据信息', res);
|
||
if (res.status === 200) {
|
||
res.data.data.forEach(el => {
|
||
this.get_weather_echart_data(el.deviceId)
|
||
this.get_thisWeekTemperature_echart_data(el.deviceId)
|
||
this.get_environmentData(el.deviceId)
|
||
this.get_readControl_getState(2023042214250018)
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
// 获取设备当天的温度
|
||
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)
|
||
})
|
||
},
|
||
|
||
// 获取设备一周的温度
|
||
get_thisWeekTemperature_echart_data(deviceId) {
|
||
this.api.Bigdata_getWeekTemperature(deviceId).then(res => {
|
||
// console.log('获取设备一周的温度', res);
|
||
res.data.data.forEach(e => {
|
||
this.day_list.push(e.day);
|
||
this.maxTemperature_list.push(Number(e.maxTemperature));
|
||
this.minTemperature_list.push(Number(e.minTemperature))
|
||
})
|
||
let data = {
|
||
day: this.day_list,
|
||
maxTemperature: this.maxTemperature_list,
|
||
minTemperature: this.minTemperature_list
|
||
}
|
||
// console.log('00000000',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) => {
|
||
if (item.cameraSerialNumber != null) {
|
||
this.get_sel_eqbyid_list.push({ ...item, number: index })
|
||
|
||
this.getVideoData(item.cameraSerialNumber, item.cameraChannelNumber, index)
|
||
// this.getVideoData("L18357958", "5")
|
||
}
|
||
})
|
||
// console.log(this.get_sel_eqbyid_list);
|
||
})
|
||
},
|
||
|
||
// 控制器状态值获取 Copy
|
||
get_readControl_getState(deviceId) {
|
||
this.api.readControl_getState(deviceId).then(res => {
|
||
console.log('控制器状态值获取 Copy', res);
|
||
})
|
||
},
|
||
|
||
// 获取本地的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)
|
||
},
|
||
|
||
createVideoNew(accessToken, url, index) {
|
||
console.log(accessToken, url, index, 111);
|
||
// divW和divH是获取了父级宽高 使播放容器能铺满div
|
||
let divW = document.getElementById('monitor' + index).clientWidth
|
||
let divH = document.getElementById('monitor' + index).clientHeight
|
||
this.player = new EZUIKit.EZUIKitPlayer({
|
||
id: 'video-js' + index, // 视频容器ID
|
||
accessToken: accessToken,
|
||
url: url,
|
||
// 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
|
||
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
|
||
template: 'security',
|
||
useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
|
||
// plugin: ["talk"], // 加载插件，talk-对讲 非必填
|
||
width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
|
||
height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
|
||
})
|
||
// console.log(this.player);
|
||
},
|
||
createVideo() {
|
||
// 创建视频播放器
|
||
videojs.addLanguage('zh-CN', video_zhCN)
|
||
this.player = videojs(this.$refs.videoPlayer, {
|
||
techOrder: ['html5', 'hls'], // 优先使用HTML5播放器，如果不支持，则使用HLS
|
||
sources: [{
|
||
src: this.url, // 替换为您的.m3u8链接
|
||
type: 'application/x-mpegURL'
|
||
}],
|
||
autoplay: true, // 自动播放
|
||
controls: true, // 显示控制条
|
||
language: 'zh-CN'
|
||
});
|
||
},
|
||
|
||
|
||
i_contentHandler(index) {
|
||
this.menu_current = !this.menu_current
|
||
this.content_item_current = index
|
||
},
|
||
|
||
handlerAxis_1() {
|
||
this.$router.push({ path: '/largeScreen1' });
|
||
|
||
},
|
||
|
||
toBackPage() {
|
||
this.$router.push({ path: '/realTime' });
|
||
},
|
||
|
||
getCurrent(index) {
|
||
this.current = index;
|
||
},
|
||
|
||
drag_boxHandler() {
|
||
let demo = this.$refs.drag_box
|
||
demo = document.querySelector('.drag_box') //待拖拽元素
|
||
let canMove = false //拖拽状态
|
||
let x = 0,
|
||
y = 0 //鼠标位置
|
||
//监听按下鼠标事件
|
||
demo.onmousedown = function (e) {
|
||
x = e.pageX - demo.offsetLeft
|
||
y = e.pageY - demo.offsetTop
|
||
canMove = true //激活拖拽状态
|
||
}
|
||
//监听右击鼠标事件
|
||
demo.oncontextmenu = function (e) {
|
||
e.preventDefault() //阻止默认行为
|
||
}
|
||
//监听鼠标抬起事件
|
||
window.onmouseup = function () {
|
||
canMove = false //关闭拖拽状态
|
||
}
|
||
|
||
window.onblur = function () { //窗口失去焦点事件
|
||
canMove = false //关闭拖拽状态
|
||
}
|
||
|
||
//监听鼠标移动事件
|
||
window.onmousemove = function (e) {
|
||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
||
if (canMove) { //对范围判断
|
||
let left = e.pageX - x
|
||
let top = e.pageY - y
|
||
|
||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
||
// let maxTop = window.innerHeight - demo.offsetHeight
|
||
|
||
// if (left > maxLeft) left = maxLeft
|
||
// if (top > maxTop) top = maxTop
|
||
|
||
|
||
demo.style.left = left + 'px'
|
||
demo.style.top = top + 'px'
|
||
|
||
}
|
||
}
|
||
let scale = 1
|
||
demo.onwheel = function (e) {
|
||
|
||
if (e.wheelDelta > 0) {
|
||
scale += 0.05
|
||
if (scale > 4) {
|
||
scale = 4
|
||
}
|
||
demo.style.transform = `scale(${scale})`
|
||
// console.log(scale);
|
||
} else {
|
||
scale -= 0.05
|
||
if (scale < 1) {
|
||
scale = 1
|
||
}
|
||
demo.style.transform = `scale(${scale})`
|
||
// console.log(scale);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.environmentData {
|
||
.e_content {
|
||
>div {
|
||
width: 100% !important;
|
||
|
||
>div {
|
||
width: 100% !important;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</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;
|
||
|
||
.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: .54rem;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
color: #EFF8FC;
|
||
line-height: .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;
|
||
|
||
}
|
||
|
||
.yuan {
|
||
width: .56rem;
|
||
height: .56rem;
|
||
background: url('../../assets/img/yuan_bg.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: .53rem;
|
||
left: .71rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
>img {
|
||
width: .20rem;
|
||
height: .20rem;
|
||
}
|
||
}
|
||
|
||
.calendar {
|
||
width: 4rem;
|
||
height: .3rem;
|
||
position: absolute;
|
||
top: .63rem;
|
||
right: .66rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
>img {
|
||
width: .28rem;
|
||
height: .3rem;
|
||
}
|
||
|
||
>span:nth-child(2) {
|
||
font-size: .24rem;
|
||
font-family: PingFang-SC-Bold;
|
||
font-weight: bold;
|
||
color: #7ABAFF;
|
||
}
|
||
|
||
>span:nth-child(4) {
|
||
font-size: .2rem;
|
||
font-family: PingFang-SC-Bold;
|
||
font-weight: bold;
|
||
color: #7ABAFF;
|
||
}
|
||
|
||
>span:nth-child(6) {
|
||
font-size: .3rem;
|
||
font-family: PingFang-SC-Bold;
|
||
font-weight: bold;
|
||
color: #7ABAFF;
|
||
}
|
||
|
||
.line {
|
||
width: .02rem;
|
||
height: .30rem;
|
||
background: #FFFFFF;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
|
||
.nav {
|
||
width: 2.5rem;
|
||
position: absolute;
|
||
z-index: 999999;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
bottom: .17rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
|
||
>img {
|
||
width: 1.08rem;
|
||
height: .91rem;
|
||
}
|
||
|
||
>span {
|
||
font-size: .20rem;
|
||
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: .91rem;
|
||
}
|
||
|
||
>span {
|
||
font-size: .20rem;
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
height: calc(100% - .6rem);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 0 .66rem;
|
||
|
||
|
||
.left {
|
||
width: 4rem;
|
||
height: calc(100% - 0.66rem);
|
||
box-sizing: border-box;
|
||
padding-top: .56rem;
|
||
position: absolute;
|
||
top: 0.56rem;
|
||
left: 0.66rem;
|
||
z-index: 999;
|
||
|
||
.weatherStation {
|
||
width: 4rem;
|
||
height: .43rem;
|
||
background: url('../../assets/img/weatherStation.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.weather {
|
||
width: 3.84rem;
|
||
height: .34rem;
|
||
|
||
>div {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 .1rem;
|
||
background: rgba(14, 91, 165, 0.1);
|
||
border: .01rem solid rgba(97, 152, 209, 0.65);
|
||
line-height: .34rem;
|
||
font-size: .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;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.weather_echart {
|
||
width: 100%;
|
||
height: calc((100% - 4.04rem)/2);
|
||
}
|
||
|
||
.e_title {
|
||
width: 3.98rem;
|
||
height: 0.19rem;
|
||
background: url('../../assets/img/environmentData_bg.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: .18rem;
|
||
font-family: AlibabaPuHuiTiM;
|
||
font-weight: 500;
|
||
color: #83CCFF;
|
||
box-sizing: border-box;
|
||
padding-left: .32rem;
|
||
line-height: 0.19rem;
|
||
}
|
||
|
||
.environmentData {
|
||
width: 3.98rem;
|
||
height: 3.27rem;
|
||
|
||
|
||
.detail {
|
||
width: 3.98rem;
|
||
height: 3.08rem;
|
||
overflow: hidden;
|
||
|
||
.title_child {
|
||
width: 100%;
|
||
height: .55rem;
|
||
box-sizing: border-box;
|
||
padding: .19rem 0 0 .32rem;
|
||
font-size: .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: .62rem;
|
||
height: .68rem;
|
||
margin: 0 .16rem 0 .13rem;
|
||
}
|
||
|
||
.item_child {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
|
||
>span:nth-child(1) {
|
||
font-size: .16rem;
|
||
font-family: MicrosoftYaHei-Bold;
|
||
font-weight: bold;
|
||
color: #86C2FF;
|
||
}
|
||
|
||
>span:nth-child(2) {
|
||
font-size: .22rem;
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.thisWeekTemperature {
|
||
width: 100%;
|
||
height: calc((100% - 4.04rem)/2);
|
||
|
||
.thisWeekTemperature_echart {
|
||
width: 100%;
|
||
height: calc(100% - .19rem);
|
||
}
|
||
}
|
||
}
|
||
|
||
.middle {
|
||
.map {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
-webkit-mask-image: linear-gradient(90deg, transparent 22%,
|
||
transparent 10%,
|
||
blue 30%,
|
||
blue 70%,
|
||
transparent 75%,
|
||
transparent 100%);
|
||
|
||
.map1 {
|
||
width: 60%;
|
||
height: 60%;
|
||
// 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 85%, transparent 100%);
|
||
// transform: scale(0.6);
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
overflow: hidden;
|
||
|
||
.drag_box {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
// top: 0.3rem;
|
||
// left: 0.5rem;
|
||
z-index: 10;
|
||
-webkit-mask-image: linear-gradient(90deg, transparent 4%, blue 18%, blue 88%, 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;
|
||
top: 5%;
|
||
left: 22%;
|
||
z-index: 99;
|
||
}
|
||
|
||
.axis_2 {
|
||
width: 0.7rem;
|
||
height: 0.86rem;
|
||
position: absolute;
|
||
top: 23%;
|
||
left: 41%;
|
||
z-index: 99;
|
||
}
|
||
|
||
.axis_3 {
|
||
width: 0.7rem;
|
||
height: 0.86rem;
|
||
position: absolute;
|
||
top: 43%;
|
||
left: 15%;
|
||
z-index: 99;
|
||
}
|
||
|
||
.axis_4 {
|
||
width: 0.7rem;
|
||
height: 0.86rem;
|
||
position: absolute;
|
||
top: 3%;
|
||
left: 64%;
|
||
z-index: 99;
|
||
}
|
||
|
||
.axis_5 {
|
||
width: 0.7rem;
|
||
height: 0.86rem;
|
||
position: absolute;
|
||
top: 29%;
|
||
left: 78%;
|
||
z-index: 99;
|
||
}
|
||
|
||
.axis_6 {
|
||
width: 0.7rem;
|
||
height: 0.86rem;
|
||
position: absolute;
|
||
top: 63%;
|
||
left: 65%;
|
||
z-index: 99;
|
||
}
|
||
|
||
.axis_7 {
|
||
width: 1.04rem;
|
||
height: 1.18rem;
|
||
position: absolute;
|
||
top: 42%;
|
||
left: 45%;
|
||
z-index: 99;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 4rem;
|
||
height: calc(100% - 0.66rem);
|
||
box-sizing: border-box;
|
||
padding-top: .44rem;
|
||
position: absolute;
|
||
top: 0.56rem;
|
||
right: 0.66rem;
|
||
z-index: 999;
|
||
|
||
.liveVideo {
|
||
width: 4rem;
|
||
height: .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: .14rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.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: .24rem;
|
||
font-family: AlibabaPuHuiTiM;
|
||
font-weight: 500;
|
||
color: #AFD6FF;
|
||
line-height: .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: .43rem;
|
||
background: url('../../assets/img/liveVideo.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-top: .2rem;
|
||
}
|
||
|
||
.device_detail {
|
||
width: 100%;
|
||
height: .54rem;
|
||
|
||
.swiper_timer {
|
||
width: 100%;
|
||
height: .54rem;
|
||
|
||
>div {
|
||
width: 100%;
|
||
height: .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.74rem !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% - 5.14rem);
|
||
overflow: auto;
|
||
|
||
.content_item {
|
||
margin-top: 0.2rem;
|
||
|
||
.i_title {
|
||
// width: 4rem;
|
||
height: .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: .5rem;
|
||
height: .5rem;
|
||
}
|
||
|
||
>span:nth-child(2) {
|
||
font-size: .16rem;
|
||
font-family: MicrosoftYaHei-Bold;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.line {
|
||
width: .01rem;
|
||
height: .20rem;
|
||
background: #7ABAFF;
|
||
opacity: 0.2;
|
||
}
|
||
|
||
>span:nth-child(4) {
|
||
font-size: .14rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #4EFFD5;
|
||
}
|
||
|
||
>span:nth-child(6) {
|
||
font-size: .14rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #7AE1FF;
|
||
margin-right: 0.47rem;
|
||
}
|
||
|
||
>span:nth-child(7) {
|
||
width: .66rem;
|
||
height: .30rem;
|
||
background: linear-gradient(-35deg, rgba(122, 225, 255, 0.49) 1%, rgba(122, 225, 255, 0.5) 100%);
|
||
border: .01rem solid rgba(122, 225, 255, 0.5);
|
||
border-radius: .15rem;
|
||
font-size: .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, .5);
|
||
border: .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: .14rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
>span:nth-child(2),
|
||
>span:nth-child(5) {
|
||
font-size: .14rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #08FFC2;
|
||
}
|
||
|
||
.line {
|
||
width: .01rem;
|
||
height: .20rem;
|
||
background: #7ABAFF;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
|
||
.line1 {
|
||
width: 3.6rem;
|
||
height: .01rem;
|
||
background: #7ABAFF;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|