3941 lines
127 KiB
Vue
3941 lines
127 KiB
Vue
<template>
|
||
<div class="home">
|
||
<div class="park" v-if="limitUserId == 2" @click="handlerOther">{{ other_show ? '后退' : '园区简介' }}</div>
|
||
<div class="other" v-show="other_show"></div>
|
||
<div class="kuang">
|
||
<div class="title"> {{getName()}}</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>
|
||
<el-button class="large-btn" @click="toBackPage" type="primary" v-if="limitUserId==9">{{$t('text.return')}}</el-button>
|
||
<div class="nav" v-if="limitUserId!=9 && limitUserId!=13">
|
||
<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>
|
||
<largeNav :active="0" v-if="limitUserId==13"></largeNav>
|
||
<!-- <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">
|
||
<img src="../../assets/img/nav4.png" alt="" />
|
||
<span>监控设备</span>
|
||
</div>
|
||
<div class="item item_act">
|
||
<img src="../../assets/img/nav2.png" alt="" />
|
||
<span>虫情监测</span>
|
||
</div>
|
||
</div> -->
|
||
<div class="content">
|
||
<div class="left" v-show="limitUserId != 5">
|
||
<div class="weatherStation" v-if="limitUserId != 12&&limitUserId != 9"></div>
|
||
|
||
<div class="weather" v-if="limitUserId != 12&&limitUserId != 9">
|
||
<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" v-if="limitUserId != 11&&limitUserId != 12&&limitUserId != 9"></div>
|
||
<div class="e_title" v-if="limitUserId == 9">作物模型</div>
|
||
<div class="weather_echart weather_img" v-if="limitUserId==9">
|
||
<img class="img" src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E7%94%98%E4%BA%95%E6%9D%91%E5%A4%A7%E6%95%B0%E6%8D%AE/%E8%A5%BF%E7%BA%A2%E6%9F%BF%E7%94%9F%E9%95%BF%E5%9B%BE.gif" alt="">
|
||
</div>
|
||
<div class="e_title" v-show="limitUserId == 12">实时数据</div>
|
||
<div class="realTime-line" id="realTime-line" v-if="limitUserId == 12"></div>
|
||
<div class="environmentData" :class="`environmentData-${limitUserId}`">
|
||
<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" v-show="limitUserId != 11">
|
||
<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 e_content1" :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="middle-data" v-if="limitUserId==9">
|
||
<div class="data-title" :style="`--dataNumber:${tableList.length+1}`">
|
||
<div>时间</div>
|
||
<div v-for="item,index in tableList" :key="index">{{item}}</div>
|
||
</div>
|
||
<vue-seamless :style="`--dataNumber:${tableList.length+1}`" class="data-data" :data="tableData" :class-option="defaultOption1">
|
||
<div class="data-table" v-for="item,index in tableData" :key="index">
|
||
<div>{{item.time}}</div>
|
||
<div v-for="item1,index1 in tableList" :key="index1">
|
||
<div>{{ item[item1] }}</div>
|
||
</div>
|
||
</div>
|
||
</vue-seamless>
|
||
</div>
|
||
<div class="map" :class="`map1-${limitUserId}`">
|
||
<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 class="drag_box7" ref="drag_box7" v-show="limitUserId == 7">
|
||
<img class="drag_img" src="../../assets/img/map3.jpg" alt="" />
|
||
<img class="axis_shimen" src="../../assets/img/axis1.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" />
|
||
<img class="axis_shimen5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
</div>
|
||
<!-- 大冶鑫 -->
|
||
<div class="drag_box8" ref="drag_box8" v-show="limitUserId == 8">
|
||
<img class="drag_img" src="../../assets/img/map4.png" alt="" />
|
||
<img class="axis_shimen" src="../../assets/img/axis1.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" />
|
||
<img class="axis_shimen5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen7" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
</div>
|
||
<!-- 甘井设施农业 -->
|
||
<div class="drag_box9" ref="drag_box9" v-show="limitUserId == 9">
|
||
<img class="drag_img" src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E7%94%98%E4%BA%95%E6%9D%91%E5%A4%A7%E6%95%B0%E6%8D%AE/%E5%80%BE%E6%96%9C%E5%9B%BE.png" alt="" />
|
||
<img class="axis_shimen" src="../../assets/img/axis1.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" />
|
||
<img class="axis_shimen5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen7" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen8" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen9" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<div class="url-btn" @click="to8080">
|
||
</div>
|
||
</div>
|
||
<!-- 丽水凤鸣共富葡萄 -->
|
||
<div class="drag_box10" ref="drag_box10" v-show="limitUserId == 10">
|
||
<img class="drag_img" src="../../assets/img/map6.jpg" alt="" />
|
||
<img class="axis_shimen" src="../../assets/img/axis1.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" />
|
||
<img class="axis_shimen5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen7" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
</div>
|
||
<!-- 镇海欣丰农场 -->
|
||
<div class="drag_box11" ref="drag_box11" v-show="limitUserId == 11">
|
||
<img class="drag_img" src="../../assets/img/map7.png" alt="" />
|
||
<img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
</div>
|
||
<!-- 金山吕港草莓 -->
|
||
<div class="drag_box12" ref="drag_box12" v-show="limitUserId == 12">
|
||
<img class="drag_img" src="../../assets/img/map8.png" alt="" />
|
||
<img class="axis_shimen" src="../../assets/img/axis1.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" />
|
||
</div>
|
||
<!-- 长兴前卫柑桔新优品种扩繁基地 -->
|
||
<div class="drag_box13" ref="drag_box13" v-show="limitUserId == 13">
|
||
<div class="map-13" id="map-13"></div>
|
||
<!-- <img class="drag_img" src="../../assets/img/map9.jpg" alt="" />
|
||
<img class="axis_shimen" src="../../assets/img/axis1.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" />
|
||
<img class="axis_shimen5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen7" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen8" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen9" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen10" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen11" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen12" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
|
||
<img class="axis_shimen13" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" /> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right" v-if="limitUserId == 13">
|
||
<div class="e_title">项目简介</div>
|
||
<div class="right-aboutUs ">
|
||
<img src="@/assets/img/img-13.jpg" alt="">
|
||
<div class="scroll">上海前卫柑桔有限公司成立于1992年，地处长江入海口的长兴岛上，位于青草沙水源保护区和长兴岛郊野公园内。是目前我国规模最大、集约化程度最高的柑桔生产经营企业之一。也是上海市首批通过国家认证的绿色食品，通过了HACCP国际食品安全管理体系认证，并多次在全国柑桔评比中获得金奖、银奖和“农业部优质果品”称号。公司主营业务为柑桔生产和销售，兼营场地租赁、农业旅游、衍生品开发、技术推广等业务。 </div>
|
||
</div>
|
||
<div class="e_title">虫情趋势图</div>
|
||
<div class="right-charts" id="pest-charts"></div>
|
||
</div>
|
||
<!-- 甘井设施农业大数据云平台 -->
|
||
<div class="right" v-else-if="limitUserId == 9">
|
||
<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="weather" v-if="limitUserId == 9">
|
||
<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="e_title">温室实时数据</div>
|
||
<div class="weather_echart" id="realTime-line" v-if="limitUserId == 9"></div>
|
||
<div class="e_title">薄膜温室番茄</div>
|
||
|
||
<div class="liveVideo_content liveVideo_content_9">
|
||
<video class="video" controls muted loop autoplay src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E7%94%98%E4%BA%95%E6%9D%91%E5%A4%A7%E6%95%B0%E6%8D%AE/%E7%95%AA%E8%8C%84%E7%94%9F%E9%95%BF%E8%A7%86%E9%A2%91.mp4"></video>
|
||
</div>
|
||
</div>
|
||
<div class="right" v-else>
|
||
<!-- 监控 -->
|
||
<template v-if="limitUserId != 12">
|
||
<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>
|
||
</template>
|
||
<!-- 金山吕港草莓单独显示控制器南图片 -->
|
||
<div class="liveVideo_content" style="padding:10px;" v-show="limitUserId == 12">
|
||
<img style="width: 100%;height: 100%;" :src="imgUrl" alt="">
|
||
</div>
|
||
|
||
|
||
<!-- 右下角设备状态 -->
|
||
<template>
|
||
<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>{{$t('text.invalid')}}</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>{{$t('text.invalid')}}</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>{{$t('text.invalid')}}</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>{{$t('text.invalid')}}</span>
|
||
<span class="line"></span>
|
||
<span>菜单</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 大冶鑫 -->
|
||
<div class="content_item"
|
||
v-if="limitUserId == 7 || limitUserId == 10 || limitUserId == 11 || limitUserId == 12|| limitUserId == 13">
|
||
<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>{{$t('text.invalid')}}</span>
|
||
<span class="line"></span>
|
||
<span>菜单</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
</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 { realTimeLine2 } from '@/assets/js/charts'
|
||
|
||
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";
|
||
|
||
import axios from "axios";
|
||
|
||
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)
|
||
};
|
||
},
|
||
defaultOption1() {
|
||
return {
|
||
step: 0.1, // 数值越大速度滚动越快
|
||
limitMoveNum: 5, // 开始无缝滚动的数据量 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: [],
|
||
|
||
// 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: {
|
||
getName(){
|
||
if(this.limitUserId==9){
|
||
return '甘井设施农业大数据云平台'
|
||
}else if(this.limitUserId==13){
|
||
return '上海前卫柑桔大数据平台'
|
||
}else{
|
||
return '温室智慧云数据统计'
|
||
}
|
||
},
|
||
// 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
|
||
},
|
||
getData() {
|
||
var data = {
|
||
equipmentId:'2024070113400048',
|
||
startTime: this.getdataTime(this.dateRange[0]),
|
||
endTime: this.getdataTime(this.dateRange[1]),
|
||
page: this.currentPage,
|
||
pageSize: this.pageSize,
|
||
isEquipment:0,
|
||
enName:getLanguage()
|
||
}
|
||
this.api.selFsTime(data).then(res => {
|
||
if (res.data.code == 200) {
|
||
this.tableList = []
|
||
this.tableData = []
|
||
this.total = res.data.data.totalCount
|
||
res.data.data.data[0].equipment.forEach((el, index) => {
|
||
this.tableList.push(el.environmentDataId + '(' + el.formula+ ')')
|
||
})
|
||
res.data.data.data.forEach((el, index) => {
|
||
const processedData = {
|
||
time: el.updateTime
|
||
};
|
||
|
||
el.equipment.forEach((item, index) => {
|
||
processedData[item.environmentDataId + '(' + item.formula+ ')'] = item.environmentData;
|
||
});
|
||
this.tableData.push(processedData)
|
||
})
|
||
console.log( this.tableList, this.tableData);
|
||
}else{
|
||
this.$message.success(res.data.msg);
|
||
this.tableList = []
|
||
this.tableData = []
|
||
this.total =0
|
||
}
|
||
})
|
||
},
|
||
|
||
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) {
|
||
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) {
|
||
// 获取控制器第一个Id
|
||
const list = []
|
||
this.$store.state.equipmentList.forEach((el, index) => {
|
||
if (el.deviceName == 10) {
|
||
list.push(el)
|
||
}
|
||
})
|
||
list.sort(this.compare('equipmentStatu'))
|
||
// 丽水
|
||
this.get_weather_echart_data(list[0].deviceId);
|
||
this.get_thisWeekTemperature_echart_data(list[0].deviceId);
|
||
this.get_environmentData(list[0].deviceId);
|
||
this.get_readControl_getState(list[0].deviceId);
|
||
this.getWeatherData(list[0].deviceId);
|
||
} 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);
|
||
} else if (limitUserId == 7) {
|
||
// 大冶鑫
|
||
this.get_weather_echart_data(2023120613270120);
|
||
this.get_thisWeekTemperature_echart_data(2023120613270120);
|
||
this.get_environmentData(2023120613270120);
|
||
this.get_readControl_getState(2023120613270120);
|
||
this.getWeatherData(2023120613270120);
|
||
} else if (limitUserId == 9) {
|
||
|
||
// 左侧上部气象站charts
|
||
this.get_weather_echart_data(2023120613270131);
|
||
this.get_thisWeekTemperature_echart_data(2023120613270131);
|
||
this.get_environmentData(2024070113400048);
|
||
this.get_readControl_getState(2024070113400048);
|
||
this.timeInit()
|
||
// 左侧上部气象站
|
||
this.getWeatherData(2023120613270131);
|
||
const store=this.$store.state
|
||
var data1 ='2024070113400048'
|
||
var nowDevice = store.equipmentList.find(item => item.deviceId == data1);
|
||
this.imgUrl =nowDevice? nowDevice.hls:null
|
||
var params={
|
||
equipmentId:data1,
|
||
enName:getLanguage()
|
||
}
|
||
this.api.getControlFsdata(params).then(res => {
|
||
if (res.data.code == 200) {
|
||
var chartsData = res.data.data
|
||
realTimeLine2('realTime-line', chartsData, data1,0)
|
||
} else {
|
||
// this.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
setTimeout(() => {
|
||
this.getData()
|
||
}, 0);
|
||
} else if (limitUserId == 11||limitUserId == 12){
|
||
// 其他非指定id都默认第一个
|
||
// 获取控制器第一个Id
|
||
const list = []
|
||
this.$store.state.equipmentList.forEach((el, index) => {
|
||
if (el.deviceName == 10) {
|
||
list.push(el)
|
||
}
|
||
})
|
||
list.sort(this.compare('equipmentStatu'))
|
||
// 大冶鑫
|
||
this.get_thisWeekTemperature_echart_data(list[0].deviceId);
|
||
this.get_environmentData(list[0].deviceId);
|
||
this.get_readControl_getState(list[0].deviceId);
|
||
this.getWeatherData(list[0].deviceId);
|
||
// 金山吕港草莓数据单独显示
|
||
if(limitUserId == 12){
|
||
const store=this.$store.state
|
||
var data1 ='2024111816300001'
|
||
var nowDevice = store.equipmentList.find(item => item.deviceId == data1);
|
||
this.imgUrl =nowDevice? nowDevice.hls:null
|
||
var params={
|
||
equipmentId:data1,
|
||
enName:getLanguage()
|
||
}
|
||
this.api.getControlFsdata(params).then(res => {
|
||
if (res.data.code == 200) {
|
||
var chartsData = res.data.data
|
||
realTimeLine2('realTime-line', chartsData, data1)
|
||
} else {
|
||
// this.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
// 其他非指定id都默认第一个
|
||
// 获取控制器第一个Id
|
||
const list = []
|
||
this.$store.state.equipmentList.forEach((el, index) => {
|
||
if (el.deviceName == 10) {
|
||
list.push(el)
|
||
}
|
||
})
|
||
list.sort(this.compare('equipmentStatu'))
|
||
// 大冶鑫
|
||
this.get_weather_echart_data(list[0].deviceId);
|
||
this.get_thisWeekTemperature_echart_data(list[0].deviceId);
|
||
this.get_environmentData(list[0].deviceId);
|
||
this.get_readControl_getState(list[0].deviceId);
|
||
this.getWeatherData(list[0].deviceId);
|
||
// 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
|
||
if(limitUserId == 13){
|
||
this.mapInit()
|
||
this.getImage();
|
||
this.getCharts();
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
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;
|
||
},
|
||
// 获取图片列表
|
||
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.getInsectChartData(data).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);
|
||
});
|
||
},
|
||
|
||
// 获取设备一周的温度
|
||
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) => {
|
||
//规定 指定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;
|
||
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);
|
||
} else if (this.limitUserId == 7) {
|
||
this.drag_boxHandler7();
|
||
this.dataInit(userId, this.limitUserId);
|
||
} else if (this.limitUserId == 8) {
|
||
this.drag_boxHandler8();
|
||
this.dataInit(userId, this.limitUserId);
|
||
} else if (this.limitUserId == 9) {
|
||
this.drag_boxHandler9();
|
||
this.dataInit(userId, this.limitUserId);
|
||
} else if (this.limitUserId == 10) {
|
||
this.drag_boxHandler10();
|
||
this.dataInit(userId, this.limitUserId);
|
||
} else if (this.limitUserId == 11) {
|
||
this.drag_boxHandler11();
|
||
this.dataInit(userId, this.limitUserId);
|
||
}else if (this.limitUserId == 12) {
|
||
this.drag_boxHandler12();
|
||
this.dataInit(userId, this.limitUserId);
|
||
}else if (this.limitUserId == 13) {
|
||
// this.drag_boxHandler13();
|
||
|
||
this.dataInit(userId, this.limitUserId);
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
mapInit(){
|
||
const that = this
|
||
const map = new AMap.Map("map-13", {
|
||
zoom: 18,
|
||
center: [121.697751,31.410188],
|
||
});
|
||
var satelliteLayer = new AMap.TileLayer.Satellite();
|
||
var roadNetLayer = new AMap.TileLayer.RoadNet();
|
||
// map.setLayers([]); // 先清空现有图层
|
||
satelliteLayer.setMap(map); // 加载卫星图层
|
||
// roadNetLayer.setMap(map); // 加载路网图层（覆盖在卫星图上）
|
||
// map.on("click", function (e) {
|
||
// // 获取点击的经纬度
|
||
// const lnglat = e.lnglat; // 返回 AMap.LngLat 对象
|
||
// console.log("点击的经纬度：", lnglat.toString()); // 输出：121.696506,31.410799
|
||
|
||
// // 也可以直接获取经度和纬度
|
||
// console.log("经度：", lnglat.getLng());
|
||
// console.log("纬度：", lnglat.getLat());
|
||
|
||
// // 弹出提示框（可选）
|
||
// const infoWindow = new AMap.InfoWindow({
|
||
// content: `位置：${lnglat.getLng()}, ${lnglat.getLat()}`,
|
||
// offset: new AMap.Pixel(0, -30),
|
||
// });
|
||
// infoWindow.open(map, lnglat);
|
||
// });
|
||
|
||
|
||
// 添加画范围
|
||
var listall = mapData.features;
|
||
listall.forEach((el, index) => {
|
||
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);
|
||
});
|
||
|
||
|
||
// 添加标点
|
||
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){
|
||
const 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);
|
||
}
|
||
|
||
})
|
||
|
||
},
|
||
// 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;
|
||
},
|
||
to8080(){
|
||
window.open("http://localhost:8080/");
|
||
},
|
||
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);
|
||
// 获取控制器第一个Id
|
||
const list = []
|
||
this.$store.state.equipmentList.forEach((el, index) => {
|
||
if (el.deviceName == 10) {
|
||
list.push(el)
|
||
}
|
||
})
|
||
list.sort(this.compare('equipmentStatu'))
|
||
|
||
if (this.limitUserId == 1) {
|
||
this.get_readControl_getState(list[0].deviceId);
|
||
} else if (this.limitUserId == 2) {
|
||
this.get_readControl_getState(2023112911050004);
|
||
} else if (this.limitUserId == 5) {
|
||
this.get_readControl_getState(2023042214250070);
|
||
} else if (this.limitUserId == 7) {
|
||
this.get_readControl_getState(2023120613270120);
|
||
} else if (this.limitUserId == 8 || this.limitUserId == 9 || this.limitUserId == 10 || this.limitUserId == 11|| this.limitUserId == 12|| this.limitUserId == 13) {
|
||
this.get_readControl_getState(list[0].deviceId);
|
||
}
|
||
|
||
},
|
||
|
||
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_boxHandler13() {
|
||
let demo = this.$refs.drag_box13;
|
||
demo = document.querySelector(".drag_box13"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler12() {
|
||
let demo = this.$refs.drag_box12;
|
||
demo = document.querySelector(".drag_box12"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler11() {
|
||
let demo = this.$refs.drag_box11;
|
||
demo = document.querySelector(".drag_box11"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler10() {
|
||
let demo = this.$refs.drag_box10;
|
||
demo = document.querySelector(".drag_box10"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler9() {
|
||
let demo = this.$refs.drag_box9;
|
||
demo = document.querySelector(".drag_box9"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler8() {
|
||
let demo = this.$refs.drag_box8;
|
||
demo = document.querySelector(".drag_box8"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler7() {
|
||
let demo = this.$refs.drag_box7;
|
||
demo = document.querySelector(".drag_box7"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.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" 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;
|
||
}
|
||
}
|
||
.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: 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 {
|
||
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,.right-aboutUs{
|
||
width: 100%;
|
||
height: calc((100% - .38rem) / 2);
|
||
}
|
||
.right-aboutUs{
|
||
color:#fff;
|
||
line-height:28px;
|
||
margin-top: .2rem;
|
||
img{
|
||
width: 100%;
|
||
height: 1.5rem;
|
||
object-fit: cover
|
||
}
|
||
>div{
|
||
text-indent: 2em;
|
||
font-size: .16rem;
|
||
height: calc(100% - 1.7rem);
|
||
}
|
||
}
|
||
.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% - 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>
|