<template>
  <div class="home largeScreen3">
    
    <div class="kuang">
      <div class="title">上海前卫柑桔大数据平台</div>
  
      <div class="calendar" v-if="time">
        <img src="../../assets/img/calendar.png" alt="" />
        <span>{{ getNowTime() }}</span>
        <span class="line"></span>
        <span>{{ time.week }}</span>
        <span class="line"></span>
        <span>{{ time.time }}</span>
      </div>

      <largeNav :active="2"></largeNav>
      <div class="content">
        <div class="left">
               <div class="e_title">虫情视频简介</div>
               <div class="left-video">
              <video class="video" controls muted loop autoplay src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E9%95%BF%E5%85%B4%E5%B2%9B%E8%99%AB%E6%83%85%E8%A7%86%E9%A2%91.mp4"></video>
               </div>
          <div class="environmentData" :class="`environmentData-${limitUserId}`">
            <div class="e_title">虫情趋势图</div>
            <div class="detail" id="pest-charts">
            </div>
          </div>

          <div class="thisWeekTemperature" >
            <div class="e_title">当日虫情数量</div>
  <div class=" input-sel-time">
            <el-date-picker
      v-model="lefttime"
      value-format="yyyy-MM-dd"
      type="date"
       :picker-options="pickerOptions"
      @change="getInsectChartData"
      placeholder="选择日期">
    </el-date-picker>
  </div>
            <div v-show="chartsShow" class="thisWeekTemperature_echart" id="pestMonitor_num"></div>
            <div v-show="!chartsShow" class="thisWeekTemperature_echart noData">当日无数据~</div>
          </div>
        </div>
        <div class="middle">
          <div class="map"  :class="`map1-${limitUserId}`">
               <!-- 长兴前卫柑桔新优品种扩繁基地 -->
              <div class="map1">
                   <div class="drag_box13" ref="drag_box13">
                  <div class="map-13" id="map-13"></div>
              </div>
              </div>
            </div>
          </div>
              <div class="right" >
           <div class="e_title">虫情图片</div>
         
            <div class="right-image-list">
               <div
            class="image-div"
            v-for="(item, index) in imageList"
            :key="index"
          >
            <el-image :src="item.thumbnailUrl" :preview-src-list="srcList">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div class="image-time">{{ item.shootTime }}</div>
          </div>
            </div>
             <div class="e_title">虫情设备运行状态</div>
               <div class="device_content scroll">
              <div class="content_item"  v-if="rightList">
              <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.intervalTime?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.intervalTime?.value}}分钟</span>
                </div>
              </div>
               <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.acquisitionTime?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.acquisitionTime?.value}}分钟</span>
                </div>
              </div>
               <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.heatingTime?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.heatingTime?.value}}分钟</span>
                </div>
              </div>
               <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.heatingTempMax?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.heatingTempMax?.value}}℃</span>
                </div>
              </div>
               <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.lowTemperature?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.lowTemperature?.value}}℃</span>
                </div>
              </div>
               <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.highTemperature?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.highTemperature?.value}}℃</span>
                </div>
              </div>
               <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.delayAfterRain?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.delayAfterRain?.value}}分钟</span>
                </div>
              </div>
               <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.startTime?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.startTime?.value}}</span>
                </div>
              </div>
               <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.endTime?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.endTime?.value}}</span>
                </div>
              </div>
               <div  style="margin-bottom: 0.15rem">
                <div class="i_title">
                  <span>{{rightList.uploadIntervalTime?.label}}</span>
                  <span class="line"></span>
                  <span class="data-num">{{rightList.uploadIntervalTime?.value}}分钟</span>
                </div>
              </div>
            </div>
            </div>
        </div>
      
        </div>
    
    </div>
  </div>
</template>

<script>
import { getnowtime } from "../../assets/js/nowTime";
import Swiper from "@/assets/js/swiper.min.js";
import "@/assets/js/swiper.min.css";
import {
  weather_echart,
  pestMonitor_num
} from "@/assets/js/echarts";
import vueSeamless from "vue-seamless-scroll";


import mapData from "@/assets/js/mapData.js";
  import {  changeLanguage, getLanguage } from '@/utils/language'
import { pestLine } from "@/assets/js/charts";
import largeNav from '@/components/large-nav.vue'
export default {
  name: "largeScreen",
  components: { vueSeamless,largeNav },
  computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: this.limitUserId != 5 ? 8 : 18, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  typeList() {
    return this.$store.state.typeList.map(item => {
      return {
        ...item,
        label: this.$t(`types.${item.value}`) // 假设你为每个value创建了对应的翻译key
      }
    })
},
  },
  data() {
    return {
      other_show: false,
      list: [],
      device_item_current: 0,
      menu_current: false,
      content_item_current: -1,

      current: 5,
      current1: 1,

      dataList: [
        // "一号温室", "二号温室", "三号温室", "四号温室", "五号温室", "六号温室"
      ],
      styleContainer: {
        width: "3.5rem",
        height: "0.5rem",
      },
      styleItem: {
        height: "0.3rem",
        "font-size": "0.14rem",
        "font-weight": "500",
        color: "#70D0EE",
        background: "rgba(14, 91, 165, 0.1)",
        border: "0.01rem solid rgba(97, 152, 209, 0.65)",
      },

      deviceId: "",

      // 获取设备当天的温度
      weather_echart_list: [],
      weather_echart_list_category: [],
      weather_echart_list_value: [],

      // 获取设备一周的温度
      day_list: [],
      maxTemperature_list: [],
      minTemperature_list: [],

      timer_: "",

      // 根据用户id查询对应的设备数据 Copy
      get_sel_eqbyid_list: [],

      // 获取摄像头得地址 Copy
      getVideoDataList: [],

      url: "",

      fanStatus: {
        name: "风机",
        open: 0,
        status: [],
      },
      statusList: [],

      time: "", //当前时间

      weatherDataList: [],

      player: null,

      // 自动跳转和手动跳转切换
      //autoPlay: false, //false 手动切换   true 自动切换


      limitUserId: "",

      // 东北
      fiveControlList: [
        {
          title: "加温水泵",
          controlState: 0,
          num: "1000",
          close_btn: false,
        },
        {
          title: "地热风机",
          controlState: 0,
          num: "1002",
          close_btn: false,
        },
        {
          title: "上风口",
          controlState: 0,
          num: "1004",
          close_btn: true,
          progress_num: "1006",
          progress: "",
        },
        {
          title: "下风口",
          controlState: 0,
          num: "1007",
          close_btn: true,
          progress_num: "1009",
          progress: "",
        },
        {
          title: "卷被",
          controlState: 0,
          num: "1010",
          close_btn: true,
        },
        {
          title: "除雪",
          controlState: 0,
          num: "1013",
          close_btn: false,
        },
      ],

      // 金山吕港草莓数据id12
        imgUrl: '',
      //长兴前卫柑桔新优品种扩繁基地id13单独虫情接口数据
         imageList: [],
      chartsData: null,
      srcList: [],
      lefttime:'',
       chartsShow:true,
       rightList:null,
 pickerOptions: {
        disabledDate: (time) => {
          // 获取当前日期的 00:00:00
          const today = new Date();
          today.setHours(0, 0, 0, 0);
          
          // 禁用今天及未来的日期（time 是当前遍历的日期）
          return time.getTime() > today.getTime() - 86400000; // 86400000 = 1天的毫秒数
        },},
      // id9的甘井设施农业大数据云平台
       dateRange: [],
        currentPage: 1,
            pageSize: 20,
            tableData: [],
            tableList: [],
    };
  },
  beforeMount() {
    this.login();
  },
  mounted() {
    // this.login();

    this.getTime();

    setInterval(() => {
      this.getNowTime();
    }, 1000);
  },
  beforeDestroy() {
    // 销毁播放器
    if (this.player) {
      // this.player.dispose();
      this.player.stop()
      this.player.destroy()
      this.player = null
    }
    clearInterval(this.timer_) && this.timer_;
  },
  watch:{
     '$i18n.locale'() {
  let userInfo = JSON.parse(localStorage.getItem("userInfo"));

    this.dataInit(userInfo.userid, this.limitUserId)
  }
  },
  methods: {
      // id9的甘井设施农业大数据云平台
      timeInit() {
            const start = new Date()
            start.setHours(0, 0, 0, 0)
            const end = new Date()
            this.dateRange = [start, end]
        },
          getdataTime(time) {
            // 中国标准时间
            var chinaTime = new Date(time);

            // 将中国标准时间转换为UTC时间
            var utcTime = new Date(chinaTime.getTime() - chinaTime.getTimezoneOffset() * 60000);

            // 将UTC时间转换为2024-02-17 00:00:00格式
            var formattedTime = utcTime.toISOString().slice(0, 19).replace('T', ' ');
            return formattedTime
        },
    handlerOther() {
      this.other_show = !this.other_show
    },
    //排序
    compare(property) {
      return function (a, b) {
        let value1 = a[property];
        let value2 = b[property];
        return value1 - value2;
      };
    },
    // 根据用户id查询对应的设备大数据信息
    dataInit(userid, limitUserId) {
      this.api.Bigdata_getAllControl(userid).then((res) => {
        // console.log('根据用户id查询对应的设备大数据信息', res);
        this.dataList = res.data.data;
        setTimeout(() => {
          new Swiper(".middle_disasterWarningAnalysis", {
            slidesPerView: 4,
            spaceBetween: 10,
            navigation: {
              nextEl: ".right_button",
              prevEl: ".left_button",
            },
          });
        }, 100);

        if (res.status === 200) {
        
            const list = []
            this.$store.state.equipmentList.forEach((el, index) => {
              if (el.deviceName == 10) {
                list.push(el)
              }
            })
            list.sort(this.compare('equipmentStatu'))
            this.lefttime=this.getTime1()
         
            this.get_environmentData(list[0].deviceId);
            this.get_readControl_getState(list[0].deviceId);
            this.getWeatherData(list[0].deviceId);
            // 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
      this.getImage();
      this.getCharts();
                   this.mapInit()
                      this.getInsectChartData()

          } 
      });
    },
        getTimeNew() {
      // 获取当前日期（格式：YYYY-MM-DD）
      const today = new Date().toISOString().split("T")[0];

      return today;
    },
    getTime7() {
      // 获取一周前的日期（格式：YYYY-MM-DD）
      const oneWeekAgo = new Date();
      oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
      const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0];
      return formattedOneWeekAgo;
    },
    getTime1() {
      // 获取一周前的日期（格式：YYYY-MM-DD）
      const oneWeekAgo = new Date();
      oneWeekAgo.setDate(oneWeekAgo.getDate() - 1);
      const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0];
      return formattedOneWeekAgo;
    },
   // 获取图片列表
    getImage() {
      var data = {
        beginTime: this.getTime7(),
        endTime: this.getTimeNew(),
        deviceId: 613,
        pageNum: 1,
        pageSize: 4,
      };
     this.api.getDeviceImages(data).then((res) => {
          if (res.data.code == 200) {
            this.imageList = res.data.data.list;
            this.srcList = this.imageList.map((item) => item.imageUrl);
          }
        });
    },
    // 左下角虫情趋势图
    getCharts() {
      var data = {
        // beginTime: this.getTime7(),
        // endTime: this.getTimeNew(),
        deviceId: 613,
      };
        this.api.getGetDeviceRunParam(data).then((res) => {
          if (res.data.code == 200) {
            this.rightList = res.data.data;
          
          }
        });
        var data1 = {
        beginTime: this.getTime7(),
        endTime: this.getTimeNew(),
        deviceId: 613,
      };
        this.api.getInsectChartData(data1).then((res) => {
          if (res.data.code == 200) {
            this.chartsData = res.data;
            pestLine("pest-charts", this.chartsData);
          }
        });
    },
    // 获取设备当天的温度
    get_weather_echart_data(deviceId) {
      this.api.Bigdata_getTemperature(deviceId).then((res1) => {
        // console.log('获取设备当天的温度', res1);
        this.weather_echart_list = res1.data.data;
        this.weather_echart_list.forEach((e) => {
          this.weather_echart_list_category.push(e.updateTime);
          this.weather_echart_list_value.push(Number(e.environmentData));
        });
        let data = {
          data_value: this.weather_echart_list_value,
          data_category: this.weather_echart_list_category,
        };
        weather_echart("weather_echart", data);
      });
    },

    // 获取设备一周的温度
    getInsectChartData(deviceId) {

       var data = {
        beginTime: this.lefttime,
        endTime:  this.lefttime,
        deviceId: 613,
      };
      
        this.api.getInsectChartData(data).then((res) => {
          if (res.data.code == 200) {
            if(JSON.stringify(res.data.header) === '{}'){
              this.chartsShow=false
            }else{
               this.chartsShow=true
               pestMonitor_num('pestMonitor_num',res.data)
            }
           
          }
        });
      // this.api.getInsectChartData(deviceId).then((res) => {
      //   // console.log('获取设备一周的温度', res);
       
      //   console.log('00000000',res);
        
      //       // pestMonitor_num('pestMonitor_num',data)
      //   // thisWeekTemperature_echart("thisWeekTemperature_echart", data);
      // });
    },

    // 主页查看控制器实时数据
    get_environmentData(equipmentId) {
      this.api.getcontrol_rtdata(equipmentId).then((res) => {
        // console.log('主页查看控制器实时数据',res);
        if (res.data.code == 200) {
          this.list = [];
          var store = this.$store.state;
          var list = this.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 = this.typeList.filter((item) => {
        return item.value == val;
      });
      return typeList1[0].unit;
    },

    // 获取本地的userid和token
    login() {
      // var data = {
      //   "username": "lsjskymdp",
      //   "password": "lihemix888"
      // }
      // this.api.login(data).then(res => {
      //   // console.log('信息', res);

      //   if (res.status == 200) {
      //     localStorage.setItem('token', res.data.data.token)
      //     localStorage.setItem('userid', res.data.data.userid)
      //     // console.log(localStorage.getItem('token'),localStorage.getItem('userid'));
      //     this.dataInit(res.data.data.userid)
      //     this.get_sel_eqbyid(res.data.data.userid)
      //   }

      // })
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      //this.dataInit(userInfo.userid);
      this.get_sel_eqbyid(userInfo.userid);

      // 获取用户id权限
      this.get_user_getjurisdiction(userInfo.userid);

      // this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
      // console.log(this.autoPlay);
      // if (this.autoPlay == false) {
      //   clearInterval(this.timer_) && this.timer_;
      // } else {
      //   this.timer_ = setTimeout(() => {
      //     this.$router.push({ path: "/largeScreen1" });
      //   }, 20000);
      // }
    },

    // 获取用户id权限
    get_user_getjurisdiction(userId) {
      this.api.user_getjurisdiction(userId).then((res) => {
        if (res.data.code == 200) {
          // id == 2 东北;
          // id == 1 丽水;
          // id == 5 石门;
          // id == 5 大冶鑫;
        this.limitUserId = (res.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10 || el.id == 11|| el.id == 12|| el.id == 13))[0].id;
            // this.drag_boxHandler13();
 
            this.dataInit(userId, this.limitUserId);

        }
      });
    },
mapInit(){
  const that = this
  const map = new AMap.Map("map-13", {
    zoom: 18,
       viewMode: "3D",
        terrain: true,
    center: [121.697751,31.410188],
     pitch: 45
  });
  var  satelliteLayer = new AMap.TileLayer.Satellite();
   var    roadNetLayer = new AMap.TileLayer.RoadNet();
      //  map.setLayers([]); // 先清空现有图层
      satelliteLayer.setMap(map); // 加载卫星图层
      // roadNetLayer.setMap(map);  // 加载路网图层（覆盖在卫星图上）


     // 添加标点
      const iconUrl = require("@/assets/img/axis1.png");
          const iconUrl1 = require("@/assets/img/wenshi.png");
      const icon = new AMap.Icon({
        image: iconUrl,
size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
  imageSize: new AMap.Size(35, 43) // 设置实际显示的大小为35x43像素
      });
      this.dataList.forEach((el,index)=>{
        
        if(el.xaxis&&el.yaxis){
      //      var marker = new AMap.Marker({
      //   position:new AMap.LngLat(el.xaxis,el.yaxis),
      //   icon: icon,
      //   title: "上海前卫柑桔有限公司",
      //    offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
      // }); 
      // marker.on("click", function (e) {
           
      // that.$router.push({ path: "/largeScreen1" });
      //   });
          var content=` <div class="p_title">
                      <img src="${iconUrl1}" alt="" />
                      <span>${el.greenhouseName}</span>
                    </div>`
                      const marker = new AMap.Marker({
            position: new AMap.LngLat(el.xaxis,el.yaxis), // 坐标
            content: content, // 自定义 HTML
            offset: new AMap.Pixel(-30,-22), // 调整位置（使 div 中心对准坐标点）
        });
               marker.on("click", function (e) {
           
      that.$router.push({ path: "/largeScreen1" });
        });
         map.add(marker);
          map.add(marker);
        
        }
           
      })
// 添加画范围
   var listall = mapData.features;
    listall.forEach((el, index) => {
      console.log(el,111);
        var polygon = new AMap.Polygon({
          map: map,
          path: el.geometry.coordinates, //设置多边形边界路径
          strokeColor: '#ff0000', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 2, //线宽
          fillColor: '#ff0000', //填充色
          fillOpacity: 0.5, //填充透明度
        });
        // polygon.on("click", function (e) {
        //   // 在点击事件处理程序中获取点击位置的经纬度坐标
        //   var lng = e.lnglat.getLng(); // 获取经度
        //   var lat = e.lnglat.getLat(); // 获取纬度

        //   // 输出经纬度坐标
        //   console.log("点击位置的经度：" + lng);
        //   console.log("点击位置的纬度：" + lat);
        // });
        polygon.on("mouseover", (e) => {
          // 点击之后覆盖物的样式
          // console.log(e,index);
        });
        //  鼠标移出事件
        polygon.on("mouseout", () => {
          // 鼠标移开覆盖物之后覆盖物的样式
          // console.log('离开');
        });

        //将绘制的面对象添加到地图上
        map.add(polygon);
      });

},

 

    i_contentHandler(index) {
      this.menu_current = !this.menu_current;
      this.content_item_current = index;
    },

    handlerAxis_1() {
      this.$router.push({ path: "/largeScreen1" });
    },

    handlerAxis_2() {
      this.$router.push({ path: "/largeScreen1" });
    },

    handlerAxis_5() {
      this.$router.push({ path: "/largeScreen1" });
    },
    toBackPage() {
      this.$router.push({ path: "/realTime" });
    },




  },
};
</script>
<style lang="scss">
.environmentData {
  .e_content {

    >div {
      width: 100% !important;


      >div {
        width: 100% !important;

        display: flex;
        flex-wrap: wrap;
      }
    }
  }
.amap-icon{
  img{
    width: 100%;
    height: 100%;
  }
}
  .e_content1 {
    height: 100%;

    >div {
      width: 100% !important;
      height: 100%;

      >div {
        width: 100% !important;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}
</style>
<style lang="scss">
.largeScreen3{
   .input-sel-time {
    width: 100%;
    display: flex;
    justify-content: center;
  .el-input__inner{
    height: 35px;
    line-height: 35px;
  }
  .el-input__icon{
    line-height: 35px;
  }
}
}
</style>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/bg.png") center no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-bottom: 0.1rem;
  position: relative;
  .left-video{
    width: 100%;
    height: calc(50% - 1.5rem);
    video{
      width: 100%;
      height: 100%;
    }
  }

  .park {
    position: absolute;
    top: .2rem;
    right: .65rem;
    z-index: 99999;
    color: #fff;
    font-size: .2rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #7ABAFF;
  }

  .other {
    width: 100%;
    height: 100%;
    position: fixed;
    top: -2px;
    left: 0;
    z-index: 9999;
    background: url('https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E5%A4%A7%E6%95%B0%E6%8D%AE/map2.jpg') center no-repeat;
    background-size: 100% 100%;
  }

  .kuang {
    width: 100%;
    height: 100%;
    background: url("../../assets/img/kuang.png") center no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 20;

    .title {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding-top: 0.06rem;
      font-size: 0.54rem;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #eff8fc;
      line-height: 0.54rem;
      opacity: 0.9;
      text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);

      background: linear-gradient(to bottom,
          #ffffff 45%,
          #e9f8ff 90%,
          #77baff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
    }

    .auto_play {
      height: 0.56rem;
      position: absolute;
      top: 0.53rem;
      left: 1.4rem;
      z-index: 99999999;
      display: flex;
      align-items: center;

      >span {
        width: 0.8rem;
        height: 0.3rem;
        background: rgba(14, 91, 165, 0.1);
        border: 1px solid rgba(97, 152, 209, 0.65);
        margin-right: 0.1rem;
        font-size: 0.18rem;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #70d0ee;
        text-align: center;
        line-height: 0.3rem;
        cursor: pointer;
      }

      .act {
        background: linear-gradient(-35deg,
            #56a8d5 0%,
            rgba(0, 55, 110, 0.75) 50%,
            #56a8d5 100%);
        border: 1px solid rgba(122, 225, 255, 0.75);
        font-size: 0.18rem;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #fff;
      }
    }

    .yuan {
      width: 0.56rem;
      height: 0.56rem;
      background: url("../../assets/img/yuan_bg.png") center no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0.53rem;
      left: 0.71rem;
      display: flex;
      align-items: center;
      justify-content: center;

      >img {
        width: 0.2rem;
        height: 0.2rem;
      }
    }
    .large-btn{
        position: absolute;
      top: 0.13rem;
      right: 0.66rem;
      z-index: 111;
    }
    .calendar {
      width: 4rem;
      height: 0.3rem;
      position: absolute;
      top: 0.63rem;
      right: 0.66rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      >img {
        width: 0.28rem;
        height: 0.3rem;
      }

      >span:nth-child(2) {
        font-size: 0.24rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #7abaff;
      }

      >span:nth-child(4) {
        font-size: 0.2rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #7abaff;
      }

      >span:nth-child(6) {
        font-size: 0.3rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #7abaff;
      }

      .line {
        width: 0.02rem;
        height: 0.3rem;
        background: #ffffff;
        opacity: 0.2;
      }
    }

    .nav {
      // width: 2.5rem;
      position: absolute;
      z-index: 999999;
      left: 50%;
      transform: translate(-50%);
      bottom: 0.17rem;
      display: flex;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 .2rem;
        cursor: pointer;
        >img {
          width: 1.08rem;
          height: 0.91rem;
        }

        >span {
          font-size: 0.2rem;
          font-family: AlibabaPuHuiTiB;
          font-weight: bold;
          color: #b1eaff;
        }
      }

      .item_act {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        >img {
          width: 1.08rem;
          height: 0.91rem;
        }

        >span {
          font-size: 0.2rem;
          font-family: AlibabaPuHuiTiB;
          font-weight: bold;
          color: #ffffff;
        }
      }
    }

    .content {
      width: 100%;
      height: calc(100% - 0.6rem);
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 0.66rem;
       .weather {
          width: 3.84rem;
          height: 0.34rem;

          >div {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 0 0.1rem;
            background: rgba(14, 91, 165, 0.1);
            border: 0.01rem solid rgba(97, 152, 209, 0.65);
            line-height: 0.34rem;
            font-size: 0.16rem;
            font-family: MicrosoftYaHei;
            font-weight: 400;
            color: #ffffff;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            marquee {
              width: 100%;
              height: 100%;

              .item {
                height: 100%;
                margin-right: 0.1rem;
                display: inline-block;

                >img {
                  width: 0.3rem;
                  height: 0.3rem;
                  position: relative;
                  top: 0.01rem;
                  margin-right: 0.05rem;
                }

                >span {
                  font-size: 0.16rem;
                  font-weight: 400;
                  color: #fff;
                  font-family: Microsoft YaHei;
                  position: relative;
                  top: -0.08rem;
                }
              }
            }
          }
        }
        .e_title {
          width: 3.98rem;
          height: 0.19rem;
          background: url("../../assets/img/environmentData_bg.png") center no-repeat;
          background-size: 100% 100%;
          font-size: 0.18rem;
          font-family: AlibabaPuHuiTiM;
          font-weight: 500;
          color: #83ccff;
          box-sizing: border-box;
          padding-left: 0.32rem;
          line-height: 0.19rem;
        }

      .left {
        width: 4rem;
        height: calc(100% - 0.66rem);
        box-sizing: border-box;
        // padding-top: 0.56rem;
        position: relative;
        // top: 0.56rem;
        // left: 0.66rem;
        z-index: 999;
        .realTime-line{
          width: 100%;
           height: calc((100% - 3.5rem) / 2);
        }
        .weatherStation {
          width: 4rem;
          height: 0.43rem;
          background: url("../../assets/img/weatherStation.png") center no-repeat;
          background-size: 100% 100%;
        }

   

        .weather_echart {
          width: 100%;
          height: calc((100% - 4.04rem) / 2);
          &.weather_img{
            height: calc((100% - 4.04rem) / 2 + 0.5rem);
          }
          .img{
            width: 100%;
            height: 100%;
          }
        }

        .environmentData {
          width: 3.98rem;
          height: 3.27rem;
          &.environmentData-11{
            height: calc(100% - 0.77rem);
            .detail{
              height: calc(100% - 0.19rem);
            }
          }
          .detail {
            width: 3.98rem;
            height: 2.58rem;
            overflow: hidden;
            padding-top: 0.15rem;

            .title_child {
              width: 100%;
              height: 0.55rem;
              box-sizing: border-box;
              padding: 0.19rem 0 0 0.32rem;
              font-size: 0.18rem;
              font-family: MicrosoftYaHei-Bold;
              font-weight: bold;
              color: #ffffff;
            }

            .e_content {
              width: 100%;
              //height: 2.53rem;
              display: flex;
              flex-wrap: wrap;

              .item {
                width: 50%;
                display: flex;
                align-items: center;
                margin-bottom: 0.1rem;
                box-sizing: border-box;
                padding-bottom: 0.1rem;

                >img {
                  width: 0.68rem;
                  height: 0.68rem;
                  margin: 0 0.1rem 0 0.13rem;
                }

                .item_child {
                  display: flex;
                  flex-direction: column;

                  >span:nth-child(1) {
                    font-size: 0.16rem;
                    font-family: MicrosoftYaHei-Bold;
                    font-weight: bold;
                    color: #86c2ff;
                  }

                  >span:nth-child(2) {
                    font-size: 0.22rem;
                    font-family: AlibabaPuHuiTiB;
                    font-weight: bold;
                    color: #ffffff;
                  }
                }
              }
            }
          }
        }

        .thisWeekTemperature {
          width: 100%;
          height: calc((100% - 3.04rem) / 2);

          .thisWeekTemperature_echart {
            width: 100%;
            height: calc(100% - 0.19rem);
            &.noData{
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
            }
          }
        }
      }

      .middle {
        width: calc(100% - 8rem);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        padding-bottom: 0.5rem;
        .middle-data{
          width: 100%;
          height:2.5rem ;
          position: relative;
          z-index: 100;
          background: rgba(0, 92, 178, 0.3);
          .data-title{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height:40px;
            >div{
              width: calc(100% / var(--dataNumber));
              font-size: 13px;
              display: flex;
              align-items: center;
              height: 100%;
              justify-content: center;
              color:#fff;
              font-weight: bold;
            }
          }
          .data-data{
            height: calc(2.5rem - 40px);
           overflow: hidden;
            .data-table{
               display: flex;
            align-items: center;
            justify-content: space-between;
              width: 100%;
          height: calc((2.5rem  - 40px) / 5);
               >div{
              width: calc(100% / var(--dataNumber));
              font-size: 13px;
              display: flex;
              align-items: center;
              height: 100%;
              justify-content: center;
              color:#fff;
            }
            }

          }
        }
        .map {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 99;
          -webkit-mask-image: linear-gradient(90deg,
              transparent 0%,
              transparent 10%,
              blue 20%,
              blue 80%,
              transparent 90%,
              transparent 100%);
                &.map1-13{
              -webkit-mask-image: unset;
              .map1{
                width: 100%;
              }
            }

          .map1 {
            width: 90%;
            height:90%;
            // background: url('../assets/img/map.png') center no-repeat;
            // background-size: 100% 100%;
            // -webkit-mask-image: linear-gradient(0deg, transparent 5%,
            //     transparent 0%,
            //     blue 30%,
            //     blue 80%,
            //     transparent 100%,
            //     transparent 100%);
            -webkit-mask-image: linear-gradient(transparent 0%,
                blue 8%,
                blue 92%,
                transparent 100%);
            // transform: scale(0.6);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
          
            .drag_box1 {
              width: 100%;
              height: 100%;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
             -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 13%,
                  blue 87%,
                  transparent 100%);

              .drag_img {
                width: 100%;
                height: 100%;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 13%,
                    blue 73%,
                    transparent 97%);
              }

              .axis_init {
                width: 0.4rem;
                height: 0.5rem;
                position: absolute;
                top: 54%;
                z-index: 99;
              }

              .axis_init1 {
                width: 0.4rem;
                height: 0.5rem;
                position: absolute;
                z-index: 99;
              }
            }

            .drag_box5 {
              width: 100%;
              height: 100%;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
              -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 13%,
                  blue 87%,
                  transparent 100%);

              .drag_img {
                width: 100%;
                height: 100%;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 13%,
                    blue 73%,
                    transparent 97%);
              }

              .axis_shimen {
                width: 0.4rem;
                height: 0.5rem;
                position: absolute;
                top: 49%;
                left: 9%;
                z-index: 99;
              }

              .axis_shimen1 {
                width: 0.3rem;
                height: 0.4rem;
                position: absolute;
                top: 52%;
                left: 16%;
                z-index: 99;
              }

              .axis_shimen2 {
                width: 0.3rem;
                height: 0.4rem;
                position: absolute;
                top: 50.3%;
                left: 18%;
                z-index: 99;
              }

              .axis_shimen3 {
                width: 0.3rem;
                height: 0.4rem;
                position: absolute;
                top: 48.3%;
                left: 20%;
                z-index: 99;
              }

              .axis_shimen4 {
                width: 0.3rem;
                height: 0.4rem;
                position: absolute;
                top: 46.3%;
                left: 22%;
                z-index: 99;
              }
            }

            .drag_box7 {
              width: 100%;
              height: auto;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
              
               -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 13%,
                  blue 87%,
                  transparent 100%);

              .drag_img {
                width: 100%;
                height: auto;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 13%,
                    blue 73%,
                    transparent 97%);
              }

              .axis_shimen {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 38%;
                left: 28%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen1 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 56%;
                left: 26%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen2 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 38%;
                left: 66%;
                cursor: pointer;
                z-index: 99;
              }

              .axis_shimen3 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 56%;
                left: 67%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen4 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 22%;
                left: 53%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen5 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 22%;
                left: 67%;
                z-index: 99;
                cursor: pointer;
              }
            }
            .drag_box13{
               width: 100%;
              // height: auto;
              height: 100%;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
               -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 27%,
                  blue 73%,
                  transparent 100%);
               .drag_img {
                width: 100%;
                height: auto;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 13%,
                    blue 73%,
                    transparent 97%);
              }
              .map-13{
                width: 100%;
                height: 100%;
              }
                .axis_shimen {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 13%;
                left:43.5%;
                z-index: 99;
                cursor: pointer;
              }
                .axis_shimen1 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 15%;
                left:34.5%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen2 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 16%;
                left:26%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen3 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 28%;
                left:35%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen4 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 29%;
                left:27%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen5 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 43%;
                left:38.5%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen6 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 44%;
                left:30.5%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen7 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 56%;
                left:57%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen8 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 49%;
                left:58%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen9 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 42%;
                left:59%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen10 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 35%;
                left:60%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen11 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 27%;
                left:61%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen12 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 69%;
                left:70%;
                z-index: 99;
                cursor: pointer;
              }
               .axis_shimen13 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 77%;
                left:70%;
                z-index: 99;
                cursor: pointer;
              }
            }
            .drag_box12 {
              width: 100%;
              height: auto;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
           -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 13%,
                  blue 87%,
                  transparent 100%);

              .drag_img {
                width: 100%;
                height: auto;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 2%,
                    blue 95%,
                    transparent 97%);
              }

              .axis_shimen {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 44%;
                left:31%;
                z-index: 99;
                cursor: pointer;
              }
              .axis_shimen1 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 38%;
                left: 50%;
                z-index: 99;
                cursor: pointer;
              }
              .axis_shimen2 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 42%;
                left: 72%;
                z-index: 99;
                cursor: pointer;
              }
            }
            .drag_box11 {
              width: 100%;
              height: auto;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
              
                -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 13%,
                  blue 87%,
                  transparent 100%);
              .drag_img {
                width: 100%;
                height: auto;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 2%,
                    blue 95%,
                    transparent 97%);
              }

              .axis_shimen {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 18%;
                left: 42%;
                z-index: 99;
                cursor: pointer;
              }
            }

            .drag_box10 {
              width: 100%;
              height: auto;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
              
                 -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 13%,
                  blue 87%,
                  transparent 100%);

              .drag_img {
                width: 100%;
                height: auto;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 2%,
                    blue 95%,
                    transparent 97%);
              }

              .axis_shimen {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 19%;
                left: 46%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen1 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 19%;
                left: 55%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen2 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 48%;
                left: 46%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen3 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 48%;
                left: 56%;

                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen4 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 73%;
                left: 46%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen5 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 73%;
                left: 57%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen6 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 83%;
                left: 41%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen7 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 88%;
                left: 54%;
                z-index: 99;
                cursor: pointer;
              }
            }

            .drag_box9 {
              width: 100%;
              height: auto;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
              
                  -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 13%,
                  blue 87%,
                  transparent 100%);
              .url-btn{
                width: 1.3rem;height: .35rem;
                // background: rgba(255,255,255,0.3);
                 position: absolute;
                top: 28.5%;
                left:17.5%;
                z-index: 99;
                cursor: pointer;
                transform: rotate(-32deg);
              }
              .drag_img {
                width: 100%;
                height: auto;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 2%,
                    blue 95%,
                    transparent 97%);
              }

              .axis_shimen {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 31.5%;
                left:22.5%;
                z-index: 99;
                cursor: pointer;
              }
              
              .axis_shimen1 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top:71%;
                left: 28.5%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen2 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 31.5%;
                left: 55%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen3 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 33%;
                left: 56%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen4 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 22%;
                left: 59.5%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen5 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 23%;
                left: 60.5%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen6 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 19.5%;
                left: 62%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen7 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 20.5%;
                left:63%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen8 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 16%;
                left:64%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen9 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top:18%;
                left: 65%;
                z-index: 99;
                cursor: pointer;
              }
            }

            .drag_box8 {
              width: 100%;
              height: auto;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
              
                  -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 13%,
                  blue 87%,
                  transparent 100%);

              .drag_img {
                width: 100%;
                height: auto;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 2%,
                    blue 95%,
                    transparent 97%);
              }

              .axis_shimen {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 83%;
                left: 30%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen1 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 67%;
                left: 42%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen2 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 55%;
                left: 52%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen3 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 40%;
                left: 57%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen4 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 32%;
                left: 57%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen5 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 24%;
                left: 56%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen6 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 17%;
                left: 55%;
                z-index: 99;
                cursor: pointer;
              }

              .axis_shimen7 {
                width: 0.4rem;
                height: auto;
                position: absolute;
                top: 12%;
                left: 52%;
                z-index: 99;
                cursor: pointer;
              }

            }

            .drag_box {
              width: 100%;
              height: 100%;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
                -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 13%,
                  blue 87%,
                  transparent 100%);

              .drag_img {
                width: 100%;
                height: 100%;
                -webkit-mask-image: linear-gradient(transparent 0%,
                    blue 13%,
                    blue 73%,
                    transparent 97%);
              }

               .axis_1 {
                width: 0.7rem;
                height: 0.86rem;
                position: absolute;
                cursor: pointer;
                top: 5%;
                left: 22%;
                z-index: 99;
              }

              .axis_2 {
                width: 0.7rem;
                height: 0.86rem;
                position: absolute;
                cursor: pointer;
                top: 23%;
                left: 41%;
                z-index: 99;
              }

              .axis_3 {
                width: 0.7rem;
                height: 0.86rem;
                position: absolute;
                cursor: pointer;
                top: 43%;
                left: 15%;
                z-index: 99;
              }

              .axis_4 {
                width: 0.7rem;
                height: 0.86rem;
                position: absolute;
                cursor: pointer;
                top: 3%;
                left: 64%;
                z-index: 99;
              }

              .axis_5 {
                width: 0.7rem;
                height: 0.86rem;
                position: absolute;
                cursor: pointer;
                top: 29%;
                left: 78%;
                z-index: 99;
              }

              .axis_6 {
                width: 0.7rem;
                height: 0.86rem;
                position: absolute;
                cursor: pointer;
                top: 63%;
                left: 65%;
                z-index: 99;
              }

              .axis_7 {
                width: 1.04rem;
                height: 1.18rem;
                position: absolute;
                cursor: pointer;
                top: 42%;
                left: 45%;
                z-index: 99;
              }
            }
          }
        }
      }

      .right {
        width: 4rem;
        height: calc(100% - 0.66rem);
        box-sizing: border-box;
        padding-top: 0.44rem;
        position: relative;
        // top: 0.56rem;
        // right: 0.66rem;
        z-index: 999;
        .weather_echart{
          height: calc((100% - 4.5rem) * 0.4);
        }
        .right-image-list{
          padding: 20px 0;
              display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-row-gap: 10px; //纵向间隔
            grid-column-gap: 10px; //横向间隔
            .image-time{
              text-align: center;
              color: #fff;
            }
        }
      .right-image-list,.right-charts{
        width: 100%;
        height: calc((100% - .38rem) / 2);
        &.right-data{
          display: grid;
	grid-template-columns: repeat(2,1fr);
grid-row-gap:10px;//纵向间隔
grid-column-gap:10px;//横向间隔
.data-item{
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .data-name{
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
  }
}
        }
      }
        .liveVideo {
          width: 4rem;
          height: 0.43rem;
          background: url("../../assets/img/liveVideo.png") center no-repeat;
          background-size: 100% 100%;
        }

        .liveVideo_content {
          width: 4rem;
          height: 3.3rem;
          background: url("../../assets/img/liveVideo_bg.png") center no-repeat;
          background-size: 100% 100%;
          margin-top: 0.14rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &.liveVideo_content_9{
            height: calc((100% - 4.5rem) * 0.6);
          }
          .video{
            width: 3.7rem;
              height:80%;
          }
          .mySwiper_video {
            width: 100%;
            height: 100%;

            .swiper-slide_video {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }

            .monitor {
              width: 3.5rem;
              height: 2.4rem;

              .video-js {
                width: 100%;
                height: 100%;
              }
            }

            .c_bottom {
              font-size: 0.24rem;
              font-family: AlibabaPuHuiTiM;
              font-weight: 500;
              color: #afd6ff;
              line-height: 0.24rem;
              margin-top: 0.15rem;
            }

            .swiper-button-next_video {
              margin-right: 0.15rem;
            }

            .swiper-button-next:after,
            .swiper-container-rtl .swiper-button-prev:after {
              content: "" !important;
            }

            .swiper-button-prev:after,
            .swiper-container-rtl .swiper-button-next:after {
              content: "" !important;
            }

            .swiper-button-next,
            .swiper-container-rtl .swiper-button-prev {
              background: none;
              margin-top: -0.1rem;
            }

            .swiper-button-prev,
            .swiper-container-rtl .swiper-button-next {
              background: none;
              margin-top: -0.1rem;
            }
          }
        }

        .deviceState {
          width: 4rem;
          height: 0.43rem;
          background: url("../../assets/img/liveVideo.png") center no-repeat;
          background-size: 100% 100%;
          margin-top: 0.2rem;
        }

        .device_detail {
          width: 100%;
          height: 0.54rem;

          .swiper_timer {
            width: 100%;
            height: 0.54rem;

            >div {
              width: 100%;
              height: 0.54rem;
              cursor: pointer;
              position: relative;

              .swiper-container {
                margin-left: 0;
                margin-right: 0;
              }

              .swiper-wrapper {
                align-items: center;
                justify-content: space-between;
              }

              ::v-deep .swiper-slide {
                width: 0.90rem !important;
              }

              .swiper-slide1 {}

              ::v-deep .swiper-slide2 {
                color: #ffffff !important;
                background: linear-gradient(-35deg,
                    #56a8d5 0%,
                    rgba(0, 55, 110, 0.75) 50%,
                    #56a8d5 100%) !important;
                border: 1px solid rgba(122, 225, 255, 0.75) !important;
              }

              .swiper-slide {
                text-align: center;
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
              }

              .swiper-slide img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              img {
                width: 0.2rem;
                height: 0.2rem;
              }

              .right_button {
                width: 0.2rem;
                height: 0.2rem;
                position: absolute;
                top: 48%;
                right: 0%;
              }

              .left_button {
                width: 0.2rem;
                height: 0.2rem;
                position: absolute;
                top: 48%;
                left: 89%;
              }

              .swiper-button-next:after,
              .swiper-container-rtl .swiper-button-prev:after {
                content: "" !important;
              }

              .swiper-button-prev:after,
              .swiper-container-rtl .swiper-button-next:after {
                content: "" !important;
              }

              .swiper-button-next,
              .swiper-container-rtl .swiper-button-prev {
                background: none;
                margin-top: -0.1rem;
              }

              .swiper-button-prev,
              .swiper-container-rtl .swiper-button-next {
                background: none;
                margin-top: -0.1rem;
              }
            }
          }
        }

        .device_content {
          width: 100%;
            height: calc((100% - .38rem) / 2);
          overflow: auto;

              color: #fff;
          .content_item {
            margin-top: 0.2rem;

            .i_title {
              // width: 4rem;
              height: 0.5rem;
              background: url("../../assets/img/i_title_bg.png") center no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding: 0 0.1rem 0 0.05rem;
              .data-num{
                text-align: right;
              }
              >img {
                width: 0.5rem;
                height: 0.5rem;
              }

              >span {
                font-size: 0.16rem;
                font-family: MicrosoftYaHei-Bold;
                // font-weight: bold;
                display: block;
                width: 50%;
                color: #ffffff;
              }

              .line {
                width: 0.01rem;
                height: 0.2rem;
                background: #7abaff;
                opacity: 0.2;
              }

          

              .progress {
                width: 18%;
                font-size: 0.14rem;
                font-style: normal;
                font-family: MicrosoftYaHei;
                font-weight: 400;
                color: #7ae1ff;
                margin-right: 0.47rem;
              }

              
            }

            .i_title_ {
              // width: 4rem;
              height: 0.5rem;
              background: url("../../assets/img/i_title_bg.png") center no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding: 0 0.1rem 0 0.05rem;

              >img {
                width: 0.5rem;
                height: 0.5rem;
              }

              >span:nth-child(2) {
                width: 18%;
                font-size: 0.16rem;
                font-family: MicrosoftYaHei-Bold;
                font-weight: bold;
                color: #ffffff;
              }

              .line {
                width: 0.01rem;
                height: 0.2rem;
                background: #7abaff;
                opacity: 0.2;
                margin-right: 0.1rem;
              }

              >span:nth-child(4) {
                width: 18%;
                font-size: 0.14rem;
                font-family: MicrosoftYaHei;
                font-weight: 400;
                color: #4effd5;
              }

              >span:nth-child(6) {
                width: 18%;
                font-size: 0.14rem;
                font-family: MicrosoftYaHei;
                font-weight: 400;
                color: #7ae1ff;
                margin-right: 0.47rem;
              }

              >span:nth-child(7) {
                width: 0.66rem;
                height: 0.3rem;
                background: linear-gradient(-35deg,
                    rgba(122, 225, 255, 0.49) 1%,
                    rgba(122, 225, 255, 0.5) 100%);
                border: 0.01rem solid rgba(122, 225, 255, 0.5);
                border-radius: 0.15rem;
                font-size: 0.14rem;
                font-family: MicrosoftYaHei;
                font-weight: 400;
                color: #7ae1ff;
                text-align: center;
                line-height: 0.3rem;
              }
            }

            .i_content {
              width: 3.8rem;
              box-sizing: border-box;
              padding: 0 0.1rem;
              background: rgba(2, 36, 70, 0.5);
              border: 0.01rem solid rgba(48, 110, 168, 0.6);
              margin: 0 auto;

              .i_content_item {
                width: 100%;
                height: 0.52rem;
                display: flex;
                align-items: center;
                justify-content: space-between;

                >span:nth-child(1),
                >span:nth-child(4) {
                  font-size: 0.14rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #ffffff;
                }

                >span:nth-child(2),
                >span:nth-child(5) {
                  font-size: 0.14rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #08ffc2;
                }

                .line {
                  width: 0.01rem;
                  height: 0.2rem;
                  background: #7abaff;
                  opacity: 0.2;
                }
              }

              .line1 {
                width: 3.6rem;
                height: 0.01rem;
                background: #7abaff;
                opacity: 0.2;
              }
            }
          }
        }
      }
    }
  }
}
</style>
