<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"> {{ limitUserId == 9 ? '甘井设施农业大数据云平台' : '温室智慧云数据统计' }}</div>
      <!-- <div class="auto_play">
        <span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span>
        <span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span>
      </div> -->
      <!-- <div class="yuan">
        <img src="../../assets/img/big.png" alt="" />
      </div> -->
      <div class="calendar" v-if="time">
        <img src="../../assets/img/calendar.png" alt="" />
        <span>{{ getNowTime() }}</span>
        <span class="line"></span>
        <span>{{ time.week }}</span>
        <span class="line"></span>
        <span>{{ time.time }}</span>
      </div>
      <div class="nav">
        <div class="item">
          <img src="../../assets/img/nav1_act.png" alt="" />
          <span>大数据平台</span>
        </div>
        <div class="item item_act" @click="toBackPage">
          <img src="../../assets/img/nav5.png" alt="" />
          <span>控制器</span>
        </div>
        <div class="item item_act" v-show="false">
          <img src="../../assets/img/nav3.png" alt="" />
          <span>农产品追溯</span>
        </div>
        <div class="item item_act" v-show="false">
          <img src="../../assets/img/nav4.png" alt="" />
          <span>市场行情</span>
        </div>
      </div>
      <div class="content">
        <div class="left" v-show="limitUserId != 5">
          <div class="weatherStation"></div>

          <div class="weather">
            <div>
              <marquee behavior="" direction="" scrollamount="3">
                <div class="item" v-for="(item, index) in weatherDataList" :key="index">
                  <img :src="require(`../../assets/image/real-time-${item.formula}.png`)
                    " alt="" />
                  <span>{{ item.environmentDataId }} : </span>
                  <span>{{
                    item.environmentData + getTypeList(item.formula)
                  }}</span>
                </div>
              </marquee>
            </div>
          </div>

          <div class="weather_echart" id="weather_echart" v-show="limitUserId != 11"></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="map">
            <div class="map1">
              <!-- 丽水 -->
              <div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
                <img class="drag_img" src="../../assets/img/map.png" alt="" />
                <img class="axis_1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                <img class="axis_2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                <img class="axis_3" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                <img class="axis_4" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                <img class="axis_5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                <img class="axis_6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                <img class="axis_7" src="../../assets/img/axis2.png" alt="" @click="handlerAxis_1" />
              </div>
              <!-- 东北 -->
              <div class="drag_box1" ref="drag_box1" v-show="limitUserId == 2">
                <img class="drag_img" src="../../assets/img/map1.png" alt="" />
                <img class="axis_init" :class="'axis_' + (index + 8)" src="../../assets/img/axis1.png"
                  :style="'left:' + (44.5 + index * 4.1) + '%'" alt="" @click="handlerAxis_2" v-for="(i, index) in 10"
                  :key="index + '_1'" />

                <img class="axis_init1" :class="'axis_' + (index1 + 17)" src="../../assets/img/axis1.png" :style="'top:' +
                  (22 + index1 * 0.105) +
                  '%' +
                  ';' +
                  'left:' +
                  (8.25 + index1 * 3.3) +
                  '%' +
                  ';'
                  " alt="" @click="handlerAxis_2" v-for="(i, index1) in 24" :key="index1 + '_2'" />
              </div>
              <!-- 石门 -->
              <div class="drag_box5" ref="drag_box5" v-show="limitUserId == 5">
                <img class="drag_img" src="../../assets/img/map2.png" alt="" />
                <img class="axis_shimen" src="../../assets/img/axis2.png" alt="" @click="handlerAxis_5" />
                <img class="axis_shimen1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
                <img class="axis_shimen2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
                <img class="axis_shimen3" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
                <img class="axis_shimen4" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
              </div>
              <!-- 大冶鑫 -->
              <div 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="../../assets/img/map5.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>
              <!-- 丽水凤鸣共富葡萄 -->
              <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>
          </div>
        </div>
        <div class="right">
          <div class="liveVideo"></div>

          <div class="liveVideo_content">
            <div class="swiper-container mySwiper_video">
              <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
                  <div class="monitor" :id="'monitor' + item.number">
                    <div ref="videoPlayer" class="video-js" :id="'video-js' + item.number"></div>
                  </div>
                  <div class="c_bottom">{{ item.deviceTypeName }}</div>
                </div>
              </div>
              <div class="swiper-button-next swiper-button-next_video">
                <img src="../../assets/img/right_video.png" alt="" />
              </div>
              <div class="swiper-button-prev swiper-button-prev_video">
                <img src="../../assets/img/left_video.png" alt="" />
              </div>
            </div>
          </div>

          <div class="deviceState"></div>

          <div class="device_detail">
            <div class="swiper_timer">
              <div>
                <div class="swiper-container middle_disasterWarningAnalysis" :style="styleContainer">
                  <div class="swiper-wrapper">
                    <div :class="(limitUserId == 1 ? current : current1) == index
                      ? 'swiper-slide swiper-slide2'
                      : 'swiper-slide swiper-slide1'
                      " v-for="(item, index) in dataList" :key="index" :style="styleItem"
                      @click="getCurrent(index, item)">
                      {{
                        item.greenhouseName
                      }}
                    </div>
                  </div>
                </div>
                <div class="right_button swiper-button-next">
                  <img src="../../assets/img/device_right.png" alt="" />
                </div>
                <div class="left_button swiper-button-prev">
                  <img src="../../assets/img/device_left.png" alt="" />
                </div>
              </div>
            </div>
          </div>

          <div class="device_content scroll">
            <!-- 丽水 -->
            <div class="content_item" v-if="limitUserId == 1">
              <div class="i_title" v-if="fanStatus.open != 0">
                <img src="../../assets/img/i_title_img.png" alt="" />
                <span>风机</span>
                <span class="line"></span>
                <span>{{ fanStatus.open == 1 ? "自动控制" : "手机控制" }}</span>
                <span class="line"></span>
                <span>菜单</span>
              </div>
              <div class="i_title" v-else>
                <img src="../../assets/img/i_title_img.png" alt="" />
                <span>风机</span>
                <span class="line"></span>
                <span>无效</span>
                <span class="line"></span>
                <span>菜单</span>
              </div>
              <div class="i_content">
                <div class="i_content_item">
                  <span>1#风机</span>
                  <span :style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[0] == 1 ? "打开" :
                    "关闭" }}</span>
                  <span class="line"></span>
                  <span>2#风机</span>
                  <span :style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[1] == 1 ? "打开" :
                    "关闭" }}</span>
                </div>
                <div class="line1"></div>
                <div class="i_content_item">
                  <span>3#风机</span>
                  <span :style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[2] == 1 ? "打开" :
                    "关闭" }}</span>
                  <span class="line"></span>
                  <span>4#风机</span>
                  <span :style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[3] == 1 ? "打开" :
                    "关闭" }}</span>
                </div>
                <div class="line1"></div>
                <div class="i_content_item" style="width: 50%">
                  <span>5#风机</span>
                  <span :style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[4] == 1 ? "打开" :
                    "关闭" }}</span>
                  <span class="line"></span>
                </div>
              </div>
              <div class="i_title_" style="margin-top: 0.2rem" v-for="(item, index) in statusList" :key="index">
                <template v-if="item.open != 0">
                  <img src="../../assets/img/i_title_img.png" alt="" />
                  <span>{{ item.name }}</span>
                  <span class="line"></span>
                  <span>{{ item.open == 1 ? "自动控制" : "手机控制" }}</span>
                  <span class="line"></span>
                  <span>位置{{ item.progress }}%</span>
                  <span>菜单</span>
                </template>
                <template v-else>
                  <img src="../../assets/img/i_title_img.png" alt="" />
                  <span>{{ item.name }}</span>
                  <span class="line"></span>
                  <span>无效</span>
                  <span class="line"></span>
                  <span>位置{{ item.progress }}%</span>
                  <span>菜单</span>
                </template>
              </div>
            </div>

            <!-- 东北 -->
            <div class="content_item" v-if="limitUserId == 2" style="margin-top: 0.05rem">
              <div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
                <div class="i_title" v-if="item.controlState != 0">
                  <img src="../../assets/img/i_title_img.png" alt="" />
                  <span>{{ item.title }}</span>
                  <span class="line"></span>
                  <span>{{
                    item.controlState == 1 ? "自动控制" : "手机控制"
                  }}</span>
                  <span class="line"></span>
                  <i class="progress" v-if="Number(item.progress) == ''">进度{{ item.progress }}%</i>
                  <span>菜单</span>
                </div>
                <div class="i_title" v-else>
                  <img src="../../assets/img/i_title_img.png" alt="" />
                  <span>{{ item.title }}</span>
                  <span class="line"></span>
                  <span>无效</span>
                  <span class="line"></span>
                  <span>菜单</span>
                </div>
              </div>
            </div>

            <!-- 石门 -->
            <div class="content_item" v-if="limitUserId == 5">
              <div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
                <div class="i_title" v-if="item.controlState != 0">
                  <img src="../../assets/img/i_title_img.png" alt="" />
                  <span>{{ item.title }}</span>
                  <span class="line"></span>
                  <span>{{
                    item.controlState == 1 ? "自动控制" : "手机控制"
                  }}</span>
                  <span class="line"></span>
                  <i class="progress" v-if="Number(item.progress) == ''">进度{{ item.progress }}%</i>
                  <span>菜单</span>
                </div>
                <div class="i_title" v-else>
                  <img src="../../assets/img/i_title_img.png" alt="" />
                  <span>{{ item.title }}</span>
                  <span class="line"></span>
                  <span>无效</span>
                  <span class="line"></span>
                  <span>菜单</span>
                </div>
              </div>
            </div>
            <!-- 大冶鑫 -->
            <div class="content_item"
              v-if="limitUserId == 7 || limitUserId == 9 || limitUserId == 10 || limitUserId == 11 || limitUserId == 12">
              <div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
                <div class="i_title" v-if="item.controlState != 0">
                  <img src="../../assets/img/i_title_img.png" alt="" />
                  <span>{{ item.title }}</span>
                  <span class="line"></span>
                  <span>{{
                    item.controlState == 1 ? "自动控制" : "手机控制"
                  }}</span>
                  <span class="line"></span>
                  <i class="progress" v-if="Number(item.progress) == ''">进度{{ item.progress }}%</i>
                  <span>菜单</span>
                </div>
                <div class="i_title" v-else>
                  <img src="../../assets/img/i_title_img.png" alt="" />
                  <span>{{ item.title }}</span>
                  <span class="line"></span>
                  <span>无效</span>
                  <span class="line"></span>
                  <span>菜单</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getnowtime } from "../../assets/js/nowTime";
import Swiper from "@/assets/js/swiper.min.js";
import "@/assets/js/swiper.min.css";
import {
  weather_echart,
  thisWeekTemperature_echart,
} from "@/assets/js/echarts";

import EZUIKit from "ezuikit-js";
import videojs from "video.js";
import video_zhCN from "video.js/dist/lang/zh-CN.json";
import vueSeamless from "vue-seamless-scroll";
export default {
  name: "largeScreen",
  components: { vueSeamless },
  computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: this.limitUserId != 5 ? 8 : 18, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      other_show: false,
      list: [],
      device_item_current: 0,
      menu_current: false,
      content_item_current: -1,

      current: 5,
      current1: 1,

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

      deviceId: "",

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

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

      timer_: "",

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

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

      url: "",

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

      time: "", //当前时间

      weatherDataList: [],

      player: null,

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


      limitUserId: "",

      // 东北
      fiveControlList: [
        {
          title: "加温水泵",
          controlState: 0,
          num: "1000",
          close_btn: false,
        },
        {
          title: "地热风机",
          controlState: 0,
          num: "1002",
          close_btn: false,
        },
        {
          title: "上风口",
          controlState: 0,
          num: "1004",
          close_btn: true,
          progress_num: "1006",
          progress: "",
        },
        {
          title: "下风口",
          controlState: 0,
          num: "1007",
          close_btn: true,
          progress_num: "1009",
          progress: "",
        },
        {
          title: "卷被",
          controlState: 0,
          num: "1010",
          close_btn: true,
        },
        {
          title: "除雪",
          controlState: 0,
          num: "1013",
          close_btn: false,
        },
      ],
    };
  },
  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_;
  },
  methods: {
    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 == 8 || limitUserId == 10 || limitUserId == 11|| limitUserId == 12) {
            // 获取控制器第一个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 == 9) {

            // 左侧上部气象站charts
            this.get_weather_echart_data(2023120613270131);
            this.get_thisWeekTemperature_echart_data(2023120613270131);
            this.get_environmentData(2024070113400048);
            this.get_readControl_getState(2024070113400048);
            // 左侧上部气象站
            this.getWeatherData(2023120613270131);
          }
        }
      });
    },

    // 获取设备当天的温度
    get_weather_echart_data(deviceId) {
      this.api.Bigdata_getTemperature(deviceId).then((res1) => {
        // console.log('获取设备当天的温度', res1);
        this.weather_echart_list = res1.data.data;
        this.weather_echart_list.forEach((e) => {
          this.weather_echart_list_category.push(e.updateTime);
          this.weather_echart_list_value.push(Number(e.environmentData));
        });
        let data = {
          data_value: this.weather_echart_list_value,
          data_category: this.weather_echart_list_category,
        };
        weather_echart("weather_echart", data);
      });
    },

    // 获取设备一周的温度
    get_thisWeekTemperature_echart_data(deviceId) {
      this.api.Bigdata_getWeekTemperature(deviceId).then((res) => {
        // console.log('获取设备一周的温度', res);
        res.data.data.forEach((e) => {
          this.day_list.push(e.day);
          this.maxTemperature_list.push(Number(e.maxTemperature));
          this.minTemperature_list.push(Number(e.minTemperature));
        });
        let data = {
          day: this.day_list,
          maxTemperature: this.maxTemperature_list,
          minTemperature: this.minTemperature_list,
        };
        // console.log('00000000',data);
        thisWeekTemperature_echart("thisWeekTemperature_echart", data);
      });
    },

    // 主页查看控制器实时数据
    get_environmentData(equipmentId) {
      this.api.getcontrol_rtdata(equipmentId).then((res) => {
        // console.log('主页查看控制器实时数据',res);
        if (res.data.code == 200) {
          this.list = [];
          var store = this.$store.state;
          var list = store.typeList;
          res.data.data.forEach((el, index) => {
            list.forEach((el1, index1) => {
              if (el.formula == el1.value) {
                var num = 0;
                var name = "";
                num = el.environmentData + el1.unit;
                if (el.equipmentNumber == 0) {
                  if (el.targetValue == 1) {
                    name = "目标" + el.environmentDataId;
                  } else {
                    name = "1#平均" + el.environmentDataId;
                  }
                } else if (el.equipmentNumber == 15) {
                  if (el.targetValue == 1) {
                    name = "目标" + el.environmentDataId;
                  } else {
                    name = "2#平均" + el.environmentDataId;
                  }
                } else {
                  name = el.equipmentNumber + "#" + el.environmentDataId;
                }
                this.list.push({
                  ...el,
                  name: name,
                  num: num,
                  img: require(`../../assets/image/real-time-${el.formula}.png`),
                });
              }
            });
          });
        }
      });
    },

    // 获取摄像头得地址 Copy
    getVideoData(cameraid, channelid, index) {
      this.api.camera_gethls(cameraid, channelid).then((res) => {
        // console.log("获取摄像头得地址 Copy", res);
        if (res.data.code == 200) {
          // this.url = res.data.data.ezopen
          this.createVideoNew(
            res.data.data.accesstoken,
            res.data.data.ezopen,
            index
          );
          // this.createVideo()
        }
      });
    },

    // 根据用户id查询对应的设备数据 Copy
    get_sel_eqbyid(userId) {
      this.api.sel_eqbyid(userId).then((res) => {
        // console.log("根据用户id查询对应的设备数据 Copy", res);

        res.data.data.forEach((item, index) => {
          if (
            item.cameraSerialNumber != null &&
            (item.deviceId == 2023042214250027 ||
              item.deviceId == 2023120613270115 ||
              item.deviceId == 2024070113400048 ||
              item.deviceId == 2023042214250017||
              item.deviceId == 2023120613270053)
          ) {
            this.get_sel_eqbyid_list.push({ ...item, number: index });

            this.getVideoData(
              item.cameraSerialNumber,
              item.cameraChannelNumber,
              index
            );
            // this.getVideoData("L18357958", "5")
            setTimeout(() => {
              new Swiper(".mySwiper_video", {
                // loop: true,
                autoplay: true,
                autoplay: {
                  disableOnInteraction: false,
                  delay: 3000,
                },
                navigation: {
                  nextEl: ".swiper-button-next_video",
                  prevEl: ".swiper-button-prev_video",
                },
              });
            }, 100);
          }
        });
      });
    },

    padString(str, length) {
      return str.padStart(length, "0");
    },

    getTime() {
      this.time = getnowtime();
      // console.log(this.time);
      const that = this;
      setInterval(() => {
        that.time = getnowtime();
      }, 1000);
    },

    getNowTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const formattedDate = `${year}.${month}.${day}`;
      return formattedDate;
    },

    // 控制器状态值获取 Copy
    get_readControl_getState(deviceId) {
      this.api.readControl_getState(deviceId).then((res) => {
        // console.log('控制器状态值获取 Copy', res);
        if (res.data.code == 200) {
          this.fanStatus.open = res.data.data["1023"];
          this.fanStatus.status = [];
          var num = res.data.data["1024"];
          var num1 = this.padString(num.toString(2), 5);
          var openListNew = [];
          openListNew = num1.split("");
          this.fanStatus.status = openListNew.reverse();
          this.statusList = [];
          for (var i = 0; i < 4; i++) {
            var statusData = {
              name: `顶卷膜${i + 1}`,
              open: res.data.data[1025 + i * 3],
              progress: res.data.data[1027 + i * 3],
              index: res.data.data[1026 + i * 3],
            };
            this.statusList.push(statusData);
          }
          // console.log(this.statusList);

          // 五防项目状态
          this.fiveControlList.forEach((el) => {
            el.controlState = res.data.data[el.num];
            if (el.progress_num) {
              el.progress = res.data.data[el.progress_num];
            }
          });
        }
      });
      0;
    },

    // 获取天气预报数据
    getWeatherData(equipmentId) {
      this.api.getcontrol_rtDatastation(equipmentId).then((res) => {
        // console.log('获取天气预报数据', res);
        if (res.data.code == 200) {
          this.weatherDataList = res.data.data;
        }
      });
    },

    // 数据单位
    getTypeList(val) {
      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))[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);
          }

        }
      });
    },

    // autoPlay1() {
    //   this.autoPlay = false;
    //   clearInterval(this.timer_) && this.timer_;
    //   localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
    // },
    // autoPlay2() {
    //   this.autoPlay = true;
    //   localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
    //   this.timer_ = setTimeout(() => {
    //     this.$router.push({ path: "/largeScreen1" });
    //   }, 20000);
    // },

    createVideoNew(accessToken, url, index) {
      // console.log(accessToken, url, index, 111);
      // divW和divH是获取了父级宽高 使播放容器能铺满div
      let divW = document.getElementById("monitor" + index).clientWidth;
      let divH = document.getElementById("monitor" + index).clientHeight;
      this.player = new EZUIKit.EZUIKitPlayer({
        id: "video-js" + index, // 视频容器ID
        accessToken: accessToken,
        url: url,
        // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
        // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
        template: "security",
        useHardDev: true, // 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
        // plugin: ["talk"], // 加载插件，talk-对讲 非必填
        width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
        height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
      });
      // console.log(this.player);
    },
    createVideo() {
      // 创建视频播放器
      videojs.addLanguage("zh-CN", video_zhCN);
      this.player = videojs(this.$refs.videoPlayer, {
        techOrder: ["html5", "hls"], // 优先使用HTML5播放器，如果不支持，则使用HLS
        sources: [
          {
            src: this.url, // 替换为您的.m3u8链接
            type: "application/x-mpegURL",
          },
        ],
        autoplay: true, // 自动播放
        controls: true, // 显示控制条
        language: "zh-CN",
      });
    },

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

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

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

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

    getCurrent(index, item) {
      this.current = index;
      this.current1 = index;
      // console.log(item,'00000000000000');
      // this.get_readControl_getState(item.deviceId);
      // 获取控制器第一个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.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_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;
      }
    }
  }

  .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;
      }
    }

    .calendar {
      width: 4rem;
      height: 0.3rem;
      position: absolute;
      top: 0.63rem;
      right: 0.66rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

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

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

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

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

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

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

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

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

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

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

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

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

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

      .left {
        width: 4rem;
        height: calc(100% - 0.66rem);
        box-sizing: border-box;
        // padding-top: 0.56rem;
        position: absolute;
        top: 0.56rem;
        left: 0.66rem;
        z-index: 999;

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

        .weather {
          width: 3.84rem;
          height: 0.34rem;

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

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

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

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

                >span {
                  font-size: 0.16rem;
                  font-weight: 400;
                  color: #fff;
                  font-family: Microsoft YaHei;
                  position: relative;
                  top: -0.08rem;
                }
              }
            }
          }
        }

        .weather_echart {
          width: 100%;
          height: calc((100% - 4.04rem) / 2);
        }

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

        .environmentData {
          width: 3.98rem;
          height: 3.27rem;
          &.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 {
        .map {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 99;
          -webkit-mask-image: linear-gradient(90deg,
              transparent 22%,
              transparent 10%,
              blue 30%,
              blue 70%,
              transparent 75%,
              transparent 100%);

          .map1 {
            width: 60%;
            height: 60%;
            // background: url('../assets/img/map.png') center no-repeat;
            // background-size: 100% 100%;
            // -webkit-mask-image: linear-gradient(0deg, transparent 5%,
            //     transparent 0%,
            //     blue 30%,
            //     blue 80%,
            //     transparent 100%,
            //     transparent 100%);
            -webkit-mask-image: linear-gradient(transparent 0%,
                blue 8%,
                blue 85%,
                transparent 100%);
            // transform: scale(0.6);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;

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

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

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

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

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

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

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

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

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

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

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

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

              .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_box12 {
              width: 100%;
              height: auto;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
              top: -64px;
              -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 2%,
                  blue 97%,
                  transparent 99%);

              .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: 24%;
                z-index: 99;
                cursor: pointer;
              }
              .axis_shimen1 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 34%;
                left: 48%;
                z-index: 99;
                cursor: pointer;
              }
              .axis_shimen2 {
                width: 0.3rem;
                height: auto;
                position: absolute;
                top: 44%;
                left: 75%;
                z-index: 99;
                cursor: pointer;
              }
            }
            .drag_box11 {
              width: 100%;
              height: auto;
              position: absolute;
              // top: 0.3rem;
              // left: 0.5rem;
              z-index: 10;
              top: -64px;
              -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 2%,
                  blue 97%,
                  transparent 99%);

              .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;
              top: -64px;
              -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 2%,
                  blue 97%,
                  transparent 99%);

              .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;
              top: -64px;
              -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%,
                  blue 2%,
                  blue 97%,
                  transparent 99%);

              .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: 24%;
                left: 11%;
                z-index: 99;
                cursor: pointer;
              }

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

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

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

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

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

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

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

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

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

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

              .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 4%,
                  blue 18%,
                  blue 88%,
                  transparent 100%);

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

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

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

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

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

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

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

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

      .right {
        width: 4rem;
        height: calc(100% - 0.66rem);
        box-sizing: border-box;
        padding-top: 0.44rem;
        position: absolute;
        top: 0.56rem;
        right: 0.66rem;
        z-index: 999;

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

        .liveVideo_content {
          width: 4rem;
          height: 3.3rem;
          background: url("../../assets/img/liveVideo_bg.png") center no-repeat;
          background-size: 100% 100%;
          margin-top: 0.14rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .mySwiper_video {
            width: 100%;
            height: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

              ::v-deep .swiper-slide {
                width: 0.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>
