2636 lines
74 KiB
Vue
2636 lines
74 KiB
Vue
<template>
|
||
<div class="home">
|
||
<div class="park" @click="handlerOther">{{other_show ? '后退':'园区简介'}}</div>
|
||
<div class="other" v-show="other_show"></div>
|
||
<div class="kuang">
|
||
<div class="title">温室智慧云数据统计</div>
|
||
<!-- <div class="auto_play">
|
||
<span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span>
|
||
<span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span>
|
||
</div> -->
|
||
<!-- <div class="yuan">
|
||
<img src="../../assets/img/big.png" alt="" />
|
||
</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>
|
||
<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/nav5.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" v-show="limitUserId != 5">
|
||
<div class="weatherStation"></div>
|
||
|
||
<div class="weather">
|
||
<div>
|
||
<marquee behavior="" direction="" scrollamount="3">
|
||
<div
|
||
class="item"
|
||
v-for="(item, index) in weatherDataList"
|
||
:key="index"
|
||
>
|
||
<img
|
||
:src="
|
||
require(`../../assets/image/real-time-${item.formula}.png`)
|
||
"
|
||
alt=""
|
||
/>
|
||
<span>{{ item.environmentDataId }} : </span>
|
||
<span>{{
|
||
item.environmentData + getTypeList(item.formula)
|
||
}}</span>
|
||
</div>
|
||
</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="left" v-show="limitUserId == 5" style="height: calc(100% - 0.9rem);">
|
||
<div class="environmentData" style="height: 100%;overflow: hidden;">
|
||
<div class="e_title">温室环境数据</div>
|
||
<div class="detail" style="height: 100%;">
|
||
<vue-seamless
|
||
class="e_content"
|
||
:data="list"
|
||
:class-option="defaultOption"
|
||
>
|
||
<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>
|
||
</vue-seamless>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="middle">
|
||
<div class="map">
|
||
<div class="map1">
|
||
<!-- 丽水 -->
|
||
<div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
|
||
<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 class="drag_box1" ref="drag_box1" v-show="limitUserId == 2">
|
||
<img class="drag_img" src="../../assets/img/map1.png" alt="" />
|
||
<img
|
||
class="axis_init"
|
||
:class="'axis_' + (index + 8)"
|
||
src="../../assets/img/axis1.png"
|
||
:style="'left:' + (44.5 + index * 4.1) + '%'"
|
||
alt=""
|
||
@click="handlerAxis_2"
|
||
v-for="(i, index) in 10"
|
||
:key="index + '_1'"
|
||
/>
|
||
|
||
<img
|
||
class="axis_init1"
|
||
:class="'axis_' + (index1 + 17)"
|
||
src="../../assets/img/axis1.png"
|
||
:style="
|
||
'top:' +
|
||
(22 + index1 * 0.105) +
|
||
'%' +
|
||
';' +
|
||
'left:' +
|
||
(8.25 + index1 * 3.3) +
|
||
'%' +
|
||
';'
|
||
"
|
||
alt=""
|
||
@click="handlerAxis_2"
|
||
v-for="(i, index1) in 24"
|
||
:key="index1 + '_2'"
|
||
/>
|
||
</div>
|
||
<!-- 石门 -->
|
||
<div class="drag_box5" ref="drag_box5" v-show="limitUserId == 5">
|
||
<img class="drag_img" src="../../assets/img/map2.png" alt="" />
|
||
<img
|
||
class="axis_shimen"
|
||
src="../../assets/img/axis2.png"
|
||
alt=""
|
||
@click="handlerAxis_5"
|
||
/>
|
||
<img
|
||
class="axis_shimen1"
|
||
src="../../assets/img/axis1.png"
|
||
alt=""
|
||
@click="handlerAxis_5"
|
||
/>
|
||
<img
|
||
class="axis_shimen2"
|
||
src="../../assets/img/axis1.png"
|
||
alt=""
|
||
@click="handlerAxis_5"
|
||
/>
|
||
<img
|
||
class="axis_shimen3"
|
||
src="../../assets/img/axis1.png"
|
||
alt=""
|
||
@click="handlerAxis_5"
|
||
/>
|
||
<img
|
||
class="axis_shimen4"
|
||
src="../../assets/img/axis1.png"
|
||
alt=""
|
||
@click="handlerAxis_5"
|
||
/>
|
||
</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="
|
||
(limitUserId == 1 ? current : current1) == index
|
||
? 'swiper-slide swiper-slide2'
|
||
: 'swiper-slide swiper-slide1'
|
||
"
|
||
v-for="(item, index) in dataList"
|
||
:key="index"
|
||
:style="styleItem"
|
||
@click="getCurrent(index, item)"
|
||
>
|
||
{{
|
||
item.greenhouseName
|
||
}}
|
||
</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-if="limitUserId == 1">
|
||
<div class="i_title" v-if="fanStatus.open != 0">
|
||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||
<span>风机</span>
|
||
<span class="line"></span>
|
||
<span>{{ fanStatus.open == 1 ? "自动控制" : "手机控制" }}</span>
|
||
<span class="line"></span>
|
||
<span>菜单</span>
|
||
</div>
|
||
<div class="i_title" v-else>
|
||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||
<span>风机</span>
|
||
<span class="line"></span>
|
||
<span>无效</span>
|
||
<span class="line"></span>
|
||
<span>菜单</span>
|
||
</div>
|
||
<div class="i_content">
|
||
<div class="i_content_item">
|
||
<span>1#风机</span>
|
||
<span
|
||
:style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'"
|
||
>{{ fanStatus.status[0] == 1 ? "打开" : "关闭" }}</span
|
||
>
|
||
<span class="line"></span>
|
||
<span>2#风机</span>
|
||
<span
|
||
:style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'"
|
||
>{{ fanStatus.status[1] == 1 ? "打开" : "关闭" }}</span
|
||
>
|
||
</div>
|
||
<div class="line1"></div>
|
||
<div class="i_content_item">
|
||
<span>3#风机</span>
|
||
<span
|
||
:style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'"
|
||
>{{ fanStatus.status[2] == 1 ? "打开" : "关闭" }}</span
|
||
>
|
||
<span class="line"></span>
|
||
<span>4#风机</span>
|
||
<span
|
||
:style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'"
|
||
>{{ fanStatus.status[3] == 1 ? "打开" : "关闭" }}</span
|
||
>
|
||
</div>
|
||
<div class="line1"></div>
|
||
<div class="i_content_item" style="width: 50%">
|
||
<span>5#风机</span>
|
||
<span
|
||
:style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'"
|
||
>{{ fanStatus.status[4] == 1 ? "打开" : "关闭" }}</span
|
||
>
|
||
<span class="line"></span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="i_title_"
|
||
style="margin-top: 0.2rem"
|
||
v-for="(item, index) in statusList"
|
||
:key="index"
|
||
>
|
||
<template v-if="item.open != 0">
|
||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||
<span>{{ item.name }}</span>
|
||
<span class="line"></span>
|
||
<span>{{ item.open == 1 ? "自动控制" : "手机控制" }}</span>
|
||
<span class="line"></span>
|
||
<span>位置{{ item.progress }}%</span>
|
||
<span>菜单</span>
|
||
</template>
|
||
<template v-else>
|
||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||
<span>{{ item.name }}</span>
|
||
<span class="line"></span>
|
||
<span>无效</span>
|
||
<span class="line"></span>
|
||
<span>位置{{ item.progress }}%</span>
|
||
<span>菜单</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 东北 -->
|
||
<div class="content_item" v-if="limitUserId == 2" style="margin-top: 0.05rem">
|
||
<div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
|
||
<div class="i_title" v-if="item.controlState != 0">
|
||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
<span class="line"></span>
|
||
<span>{{
|
||
item.controlState == 1 ? "自动控制" : "手机控制"
|
||
}}</span>
|
||
<span class="line"></span>
|
||
<i class="progress" v-if="Number(item.progress) == ''"
|
||
>进度{{ item.progress }}%</i
|
||
>
|
||
<span>菜单</span>
|
||
</div>
|
||
<div class="i_title" v-else>
|
||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
<span class="line"></span>
|
||
<span>无效</span>
|
||
<span class="line"></span>
|
||
<span>菜单</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 石门 -->
|
||
<div class="content_item" v-if="limitUserId == 5">
|
||
<div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
|
||
<div class="i_title" v-if="item.controlState != 0">
|
||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
<span class="line"></span>
|
||
<span>{{
|
||
item.controlState == 1 ? "自动控制" : "手机控制"
|
||
}}</span>
|
||
<span class="line"></span>
|
||
<i class="progress" v-if="Number(item.progress) == ''"
|
||
>进度{{ item.progress }}%</i
|
||
>
|
||
<span>菜单</span>
|
||
</div>
|
||
<div class="i_title" v-else>
|
||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
<span class="line"></span>
|
||
<span>无效</span>
|
||
<span class="line"></span>
|
||
<span>菜单</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,
|
||
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 {
|
||
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 自动切换
|
||
|
||
typeList: [
|
||
{
|
||
label: "无意义的传感器",
|
||
value: 0,
|
||
countType: 0,
|
||
},
|
||
{
|
||
label: "空气温度",
|
||
value: 1,
|
||
countType: 3,
|
||
unit: "℃",
|
||
},
|
||
{
|
||
label: "空气湿度",
|
||
value: 2,
|
||
countType: 2,
|
||
unit: "%",
|
||
},
|
||
{
|
||
label: "光亮度",
|
||
value: 3,
|
||
countType: 2,
|
||
unit: "Klux",
|
||
},
|
||
{
|
||
label: "二氧化碳",
|
||
value: 4,
|
||
countType: 0,
|
||
unit: "ppm",
|
||
},
|
||
{
|
||
label: "土壤温度",
|
||
value: 5,
|
||
countType: 3,
|
||
unit: "℃",
|
||
},
|
||
{
|
||
label: "土壤湿度",
|
||
value: 6,
|
||
countType: 2,
|
||
unit: "%",
|
||
},
|
||
{
|
||
label: "水温",
|
||
value: 7,
|
||
countType: 3,
|
||
unit: "℃",
|
||
},
|
||
{
|
||
label: "水肥PH",
|
||
value: 8,
|
||
countType: 2,
|
||
unit: "",
|
||
},
|
||
{
|
||
label: "水肥EC",
|
||
value: 9,
|
||
countType: 2,
|
||
unit: "mS/cm",
|
||
},
|
||
{
|
||
label: "压差",
|
||
value: 10,
|
||
countType: 0,
|
||
unit: "Pa",
|
||
},
|
||
{
|
||
label: "风速",
|
||
value: 11,
|
||
countType: 2,
|
||
unit: "m/s",
|
||
},
|
||
{
|
||
label: "风向",
|
||
value: 12,
|
||
countType: 0,
|
||
unit: "°",
|
||
},
|
||
{
|
||
label: "雨雪信号",
|
||
value: 13,
|
||
countType: 0,
|
||
unit: "",
|
||
},
|
||
{
|
||
label: "降雨量",
|
||
value: 14,
|
||
countType: 2,
|
||
unit: "mm",
|
||
},
|
||
{
|
||
label: "光合有效辐射",
|
||
value: 15,
|
||
countType: 2,
|
||
unit: "umol/m2.s",
|
||
},
|
||
{
|
||
label: "太阳总辐射",
|
||
value: 16,
|
||
countType: 0,
|
||
unit: "W/m2",
|
||
},
|
||
{
|
||
label: "流量",
|
||
value: 17,
|
||
countType: 0,
|
||
unit: "L/H",
|
||
},
|
||
{
|
||
label: "大气压强",
|
||
value: 18,
|
||
countType: 2,
|
||
unit: "KPa",
|
||
},
|
||
{
|
||
label: "土壤PH",
|
||
value: 19,
|
||
countType: 2,
|
||
unit: "",
|
||
},
|
||
{
|
||
label: "土壤EC",
|
||
value: 20,
|
||
countType: 0,
|
||
unit: "uS/cm",
|
||
},
|
||
{
|
||
label: "叶面温度",
|
||
value: 21,
|
||
countType: 3,
|
||
unit: "℃",
|
||
},
|
||
{
|
||
label: "叶面湿度",
|
||
value: 22,
|
||
countType: 2,
|
||
unit: "%",
|
||
},
|
||
{
|
||
label: "果实直径",
|
||
value: 23,
|
||
countType: 0,
|
||
unit: "mm",
|
||
},
|
||
{
|
||
label: "茎秆直径",
|
||
value: 24,
|
||
countType: 0,
|
||
unit: "mm",
|
||
},
|
||
{
|
||
label: "流速",
|
||
value: 25,
|
||
countType: 2,
|
||
unit: "m/s",
|
||
},
|
||
{
|
||
label: "瞬时流量",
|
||
value: 26,
|
||
countType: 2,
|
||
unit: "m3",
|
||
},
|
||
{
|
||
label: "当日流量",
|
||
value: 27,
|
||
countType: 2,
|
||
unit: "T",
|
||
},
|
||
{
|
||
label: "累计流量",
|
||
value: 28,
|
||
countType: 0,
|
||
unit: "T",
|
||
},
|
||
{
|
||
label: "无线气象站电池电压",
|
||
value: 29,
|
||
countType: 2,
|
||
unit: "V",
|
||
},
|
||
{
|
||
label: "无线气象站无线信号强度",
|
||
value: 30,
|
||
countType: 1,
|
||
unit: "dBm",
|
||
},
|
||
{
|
||
label: "无线气象站信噪比（SNR）",
|
||
value: 31,
|
||
countType: 1,
|
||
unit: "dB",
|
||
},
|
||
{
|
||
label: "PM1.0",
|
||
value: 32,
|
||
countType: 0,
|
||
unit: "μg/m2",
|
||
},
|
||
{
|
||
label: "PM2.5",
|
||
value: 33,
|
||
countType: 0,
|
||
unit: "μg/m2",
|
||
},
|
||
{
|
||
label: "PM10",
|
||
value: 34,
|
||
countType: 0,
|
||
unit: "μg/m2",
|
||
},
|
||
{
|
||
label: "紫外辐射",
|
||
value: 35,
|
||
countType: 0,
|
||
unit: "W/m2",
|
||
},
|
||
{
|
||
label: "蒸发量",
|
||
value: 36,
|
||
countType: 2,
|
||
unit: "mm",
|
||
},
|
||
{
|
||
label: "负氧离子",
|
||
value: 37,
|
||
countType: 0,
|
||
unit: "个/cm3",
|
||
},
|
||
{
|
||
label: "露点温度",
|
||
value: 38,
|
||
countType: 3,
|
||
unit: "℃",
|
||
},
|
||
{
|
||
label: "设备电压",
|
||
value: 39,
|
||
countType: 2,
|
||
unit: "V",
|
||
},
|
||
{
|
||
label: "设备电流",
|
||
value: 40,
|
||
countType: 2,
|
||
unit: "A",
|
||
},
|
||
{
|
||
label: "土壤氮含量",
|
||
value: 41,
|
||
countType: 0,
|
||
unit: "mg/kg",
|
||
},
|
||
{
|
||
label: "土壤磷含量",
|
||
value: 42,
|
||
countType: 0,
|
||
unit: "mg/kg",
|
||
},
|
||
{
|
||
label: "土壤钾含量",
|
||
value: 43,
|
||
countType: 0,
|
||
unit: "mg/kg",
|
||
},
|
||
{
|
||
label: "管道压力",
|
||
value: 44,
|
||
countType: 0,
|
||
unit: "Kpa",
|
||
},
|
||
{
|
||
label: "一氧化碳",
|
||
value: 45,
|
||
countType: 0,
|
||
unit: "ppm",
|
||
},
|
||
{
|
||
label: "氨气",
|
||
value: 46,
|
||
countType: 0,
|
||
unit: "ppm",
|
||
},
|
||
{
|
||
label: "硫化氢",
|
||
value: 47,
|
||
countType: 0,
|
||
unit: "ppm",
|
||
},
|
||
{
|
||
label: "氧气",
|
||
value: 48,
|
||
countType: 2,
|
||
unit: "%vol",
|
||
},
|
||
{
|
||
label: "甲烷",
|
||
value: 49,
|
||
countType: 2,
|
||
unit: "%vol",
|
||
},
|
||
{
|
||
label: "铜（CU）",
|
||
value: 50,
|
||
countType: 0,
|
||
unit: "mg/kg",
|
||
},
|
||
{
|
||
label: "镉（CD）",
|
||
value: 51,
|
||
countType: 2,
|
||
unit: "mg/kg",
|
||
},
|
||
{
|
||
label: "铅（PB）",
|
||
value: 52,
|
||
countType: 0,
|
||
unit: "mg/kg",
|
||
},
|
||
{
|
||
label: "噪声",
|
||
value: 53,
|
||
countType: 0,
|
||
unit: "dB",
|
||
},
|
||
{
|
||
label: "叶面面积",
|
||
value: 54,
|
||
countType: 0,
|
||
unit: "mm",
|
||
},
|
||
{
|
||
label: "虫数量",
|
||
value: 55,
|
||
countType: 0,
|
||
unit: "个",
|
||
},
|
||
{
|
||
label: "无线传感器电池电压",
|
||
value: 56,
|
||
countType: 2,
|
||
unit: "V",
|
||
},
|
||
{
|
||
label: "无线传感器无线信号强度",
|
||
value: 57,
|
||
countType: 1,
|
||
unit: "dBm",
|
||
},
|
||
{
|
||
label: "无线传感器信噪比（SNR）",
|
||
value: 58,
|
||
countType: 1,
|
||
unit: "dB",
|
||
},
|
||
],
|
||
|
||
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,
|
||
},
|
||
],
|
||
};
|
||
},
|
||
beforeMount(){
|
||
this.login();
|
||
},
|
||
mounted() {
|
||
// this.login();
|
||
|
||
this.getTime();
|
||
|
||
setInterval(() => {
|
||
this.getNowTime();
|
||
}, 1000);
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer_) && this.timer_;
|
||
},
|
||
methods: {
|
||
handlerOther(){
|
||
this.other_show = !this.other_show
|
||
},
|
||
|
||
// 根据用户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) {
|
||
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(el.deviceId)
|
||
});
|
||
if (limitUserId == 1) {
|
||
// 丽水
|
||
this.get_weather_echart_data(2023042214250027);
|
||
this.get_thisWeekTemperature_echart_data(2023042214250027);
|
||
this.get_environmentData(2023042214250027);
|
||
this.get_readControl_getState(2023042214250027);
|
||
this.getWeatherData(2023042214250027);
|
||
} else if (limitUserId == 2) {
|
||
// 东北
|
||
this.get_weather_echart_data(2023072517320001);
|
||
this.get_thisWeekTemperature_echart_data(2023072517320001);
|
||
this.get_environmentData(2023112911050004);
|
||
this.get_readControl_getState(2023112911050004);
|
||
this.getWeatherData(2023112911050004);
|
||
}else if (limitUserId == 5) {
|
||
// 石门
|
||
this.get_weather_echart_data(2023042214250070);
|
||
this.get_thisWeekTemperature_echart_data(2023042214250070);
|
||
this.get_environmentData(2023042214250070);
|
||
this.get_readControl_getState(2023042214250070);
|
||
this.getWeatherData(2023042214250070);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 获取设备当天的温度
|
||
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 &&
|
||
item.deviceId == 2023042214250027
|
||
) {
|
||
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) {
|
||
this.api.getcontrol_rtDatastation(equipmentId).then((res) => {
|
||
// console.log('获取天气预报数据', res);
|
||
if (res.data.code == 200) {
|
||
this.weatherDataList = res.data.data;
|
||
}
|
||
});
|
||
},
|
||
|
||
// 数据单位
|
||
getTypeList(val) {
|
||
let typeList1 = [];
|
||
typeList1 = this.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 石门;
|
||
this.limitUserId = (res.data.data.filter(el=>el.id == 2 || el.id == 1 || el.id == 5))[0].id;
|
||
|
||
if (this.limitUserId == 1) {
|
||
this.drag_boxHandler();
|
||
this.dataInit(userId, this.limitUserId);
|
||
} else if (this.limitUserId == 2) {
|
||
this.drag_boxHandler1();
|
||
this.dataInit(userId, this.limitUserId);
|
||
}else if (this.limitUserId == 5) {
|
||
this.drag_boxHandler5();
|
||
this.dataInit(userId, this.limitUserId);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// autoPlay1() {
|
||
// this.autoPlay = false;
|
||
// clearInterval(this.timer_) && this.timer_;
|
||
// localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
|
||
// },
|
||
// autoPlay2() {
|
||
// this.autoPlay = true;
|
||
// localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
|
||
// this.timer_ = setTimeout(() => {
|
||
// this.$router.push({ path: "/largeScreen1" });
|
||
// }, 20000);
|
||
// },
|
||
|
||
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" });
|
||
},
|
||
|
||
handlerAxis_2() {
|
||
this.$router.push({ path: "/largeScreen1" });
|
||
},
|
||
|
||
handlerAxis_5() {
|
||
this.$router.push({ path: "/largeScreen1" });
|
||
},
|
||
|
||
toBackPage() {
|
||
this.$router.push({ path: "/realTime" });
|
||
},
|
||
|
||
getCurrent(index, item) {
|
||
this.current = index;
|
||
this.current1 = index;
|
||
// console.log(item,'00000000000000');
|
||
// this.get_readControl_getState(item.deviceId);
|
||
if(this.limitUserId == 1){
|
||
this.get_readControl_getState(2023042214250027);
|
||
}else if(this.limitUserId == 2){
|
||
this.get_readControl_getState(2023112911050004);
|
||
}else if(this.limitUserId == 5){
|
||
this.get_readControl_getState(2023042214250070);
|
||
}
|
||
|
||
},
|
||
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
|
||
drag_boxHandler1() {
|
||
let demo = this.$refs.drag_box1;
|
||
demo = document.querySelector(".drag_box1"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
|
||
drag_boxHandler5() {
|
||
let demo = this.$refs.drag_box5;
|
||
demo = document.querySelector(".drag_box5"); //待拖拽元素
|
||
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;
|
||
|
||
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;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
|
||
> 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;
|
||
|
||
.left {
|
||
width: 4rem;
|
||
height: calc(100% - 0.66rem);
|
||
box-sizing: border-box;
|
||
// padding-top: 0.56rem;
|
||
position: absolute;
|
||
top: 0.56rem;
|
||
left: 0.66rem;
|
||
z-index: 999;
|
||
|
||
.weatherStation {
|
||
width: 4rem;
|
||
height: 0.43rem;
|
||
background: url("../../assets/img/weatherStation.png") center
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: 0.18rem;
|
||
font-family: AlibabaPuHuiTiM;
|
||
font-weight: 500;
|
||
color: #83ccff;
|
||
box-sizing: border-box;
|
||
padding-left: 0.32rem;
|
||
line-height: 0.19rem;
|
||
}
|
||
|
||
.environmentData {
|
||
width: 3.98rem;
|
||
height: 3.27rem;
|
||
|
||
.detail {
|
||
width: 3.98rem;
|
||
height: 3.08rem;
|
||
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% - 4.04rem) / 2);
|
||
|
||
.thisWeekTemperature_echart {
|
||
width: 100%;
|
||
height: calc(100% - 0.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_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 5%,
|
||
blue 93%,
|
||
transparent 99%
|
||
);
|
||
|
||
.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 5%,
|
||
blue 93%,
|
||
transparent 99%
|
||
);
|
||
|
||
.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_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: 0.44rem;
|
||
position: absolute;
|
||
top: 0.56rem;
|
||
right: 0.66rem;
|
||
z-index: 999;
|
||
|
||
.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;
|
||
|
||
.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.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: 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) {
|
||
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;
|
||
}
|
||
|
||
> span:nth-child(4) {
|
||
font-size: 0.14rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #4effd5;
|
||
}
|
||
|
||
// >span:nth-child(6) {
|
||
// font-size: .14rem;
|
||
// font-family: MicrosoftYaHei;
|
||
// font-weight: 400;
|
||
// color: #7AE1FF;
|
||
// margin-right: 0.47rem;
|
||
// }
|
||
|
||
.progress {
|
||
width: 18%;
|
||
font-size: 0.14rem;
|
||
font-style: normal;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #7ae1ff;
|
||
margin-right: 0.47rem;
|
||
}
|
||
|
||
> span:nth-child(6),
|
||
> span:nth-child(7) {
|
||
width: 0.66rem;
|
||
height: 0.3rem;
|
||
background: linear-gradient(
|
||
-35deg,
|
||
rgba(122, 225, 255, 0.49) 1%,
|
||
rgba(122, 225, 255, 0.5) 100%
|
||
);
|
||
border: 0.01rem solid rgba(122, 225, 255, 0.5);
|
||
border-radius: 0.15rem;
|
||
font-size: 0.14rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #7ae1ff;
|
||
text-align: center;
|
||
line-height: 0.3rem;
|
||
}
|
||
}
|
||
|
||
.i_title_ {
|
||
// 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>
|