<template>
  <div
    class="wrap"
    :style="{ backgroundImage: 'url(' + $imghost + bodyBg + ')' }"
  >
    <div
      class="header"
      :style="{ backgroundImage: 'url(' + $imghost + headerBg + ')' }"
    >
      <div class="btn-box btn-left">
        <div>
          <select
            :style="{ backgroundImage: 'url(' + selectBg + ')' }"
            class="select"
            id="monitor"
            v-model="jk_id"
            @change="jkSelId"
          >
            <option v-for="item in jk_list" :key="item" :value="item">
              监控{{ item }}
            </option>
          </select>
          <i class="el-icon-arrow-down"></i>
        </div>
        <div>
          <select
            :style="{ backgroundImage: 'url(' + selectBg + ')' }"
            class="select"
            id="cbd"
            v-model="cbd_id"
            @change="cbdSelTd"
          >
            <option v-for="item in cbd_list" :key="item" :value="item">
              测报灯{{ item }}
            </option>
          </select>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
      <div class="btn-box btn-right">
        <div>
          <select
            :style="{ backgroundImage: 'url(' + selectBg + ')' }"
            class="select"
            id="monitor"
            v-model="bzy_id"
            @change="bzySelId"
          >
            <option v-for="item in bzy_list" :key="item" :value="item">
              孢子仪{{ item }}
            </option>
          </select>
          <i class="el-icon-arrow-down"></i>
        </div>
        <div>
          <select
            :style="{ backgroundImage: 'url(' + selectBg + ')' }"
            class="select"
            id="cbd"
            v-model="qxz_id"
            @change="qxzSelId"
          >
            <option v-for="item in qxz_list" :key="item" :value="item">
              气象站{{ item }}
            </option>
          </select>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
    </div>
    <div class="content" style="cursor: default">
      <div class="left">
        <div
          class="lTop"
          :style="{ backgroundImage: 'url(' + $imghost + lTopBg + ')' }"
        >
          <div class="tit">害虫监控数量</div>
          <div class="con">
            <div class="part01">
              <p>害虫总量</p>
              <div class="total-num">
                <span
                  :style="{ backgroundImage: 'url(' + numBg + ')' }"
                  v-for="(item, index) in pestTotal"
                  :key="index"
                >
                  <countTo
                    :startVal="0"
                    :endVal="item"
                    :duration="3000"
                  ></countTo>
                  <!-- {{ item }} -->
                </span>
              </div>
            </div>
            <div class="part02">
              <p>今日害虫量</p>
              <div class="num">{{ day_pest }}</div>
            </div>
            <div class="part03">
              <p>本周害虫量</p>
              <div class="num">{{ week_pest }}</div>
            </div>
          </div>
        </div>
        <div
          class="lMiddle"
          :style="{ backgroundImage: 'url(' + $imghost + lMiddleBg + ')' }"
        >
          <div class="tit">虫情测报状态信息</div>
          <div class="con">
            <div class="item" v-for="(item, index) in cbdState" :key="index">
              <p class="hd">{{ item.name }}</p>
              <p
                class="status"
                :style="{ backgroundImage: 'url(' + cbdStatusBg + ')' }"
              >
                {{ item.state }}
              </p>
            </div>
          </div>
        </div>
        <div
          class="lBottom"
          :style="{ backgroundImage: 'url(' + $imghost + lBottomBg + ')' }"
        >
          <div class="tit">虫情测报害虫图片</div>
          <div class="container">
            <div class="swiper-container" ref="swiperContainerRef3">
              <div class="swiper-wrapper">
                <div
                  v-for="el in cbdImgArr"
                  class="swiper-slide"
                  :key="el.addr"
                >
                  <img class="img" :src="el.addr" />
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <!-- Add Arrows -->
              <div class="swiper-button-prev" ref="prevRef2"></div>
              <div class="swiper-button-next" ref="nextRef2"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="cTop">
          <!-- <div class="videobox" v-html="html"></div> -->
          <div class="videobox" id="videoCon"></div>
          <div class="jkctrlBox" style="cursor: pointer">
            <img
              src="@/assets/images/bigdata/fourSituations/jkctrlBox1.png"
              @click="configCamera('move', 0)"
            />
            <img
              src="@/assets/images/bigdata/fourSituations/jkctrlBox2.png"
              @click="configCamera('move', 1)"
            />
            <img
              src="@/assets/images/bigdata/fourSituations/jkctrlBox3.png"
              @click="configCamera('move', 2)"
            />
            <img
              src="@/assets/images/bigdata/fourSituations/jkctrlBox4.png"
              @click="configCamera('move', 3)"
            />
            <img
              src="@/assets/images/bigdata/fourSituations/jkctrlBox5.png"
              @click="configCamera('move', 8)"
            />
            <img
              src="@/assets/images/bigdata/fourSituations/jkctrlBox6.png"
              @click="configCamera('move', 9)"
            />
          </div>
        </div>
        <div class="cBottom">
          <div class="tit">环境监测{{ qxzData.length }}</div>
          <div class="con">
            <div class="swiper-container" ref="charBarRef">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="(item, index) in qxzData"
                  :key="index"
                >
                  <div
                    class="item"
                    :style="{
                      backgroundImage:
                        qxzCheckNum == index
                          ? 'url(' + qxzBtnBgOn + ')'
                          : 'url(' + qxzBtnBg + ')',
                    }"
                  >
                    {{ item.tex }}
                  </div>
                </div>
              </div>
            </div>
            <div id="chart02" ref="chart02Ref"></div>
          </div>
          <div class="footer"></div>
        </div>
      </div>
      <div class="right">
        <div class="rTop">
          <div class="tit">孢子仪状态信息</div>
          <div class="con">
            <div class="item" v-for="(item, index) in bzyState" :key="index">
              <div
                class="item-con"
                :style="{ backgroundImage: 'url(' + rTopItemBg + ')' }"
              >
                <p class="state-val">{{ item.state }}</p>
                <p class="state-tit">{{ item.name }}</p>
              </div>
            </div>
          </div>
          <div class="footer"></div>
        </div>
        <div
          class="rMiddle"
          :style="{ backgroundImage: 'url(' + $imghost + rMiddleBg + ')' }"
        >
          <div class="tit">孢子仪图片查询</div>
          <div class="con">
            <div class="swiper-container" ref="swiperContainerRef2">
              <div class="swiper-wrapper">
                <div
                  v-for="el in bzyImgArr"
                  class="swiper-slide"
                  :key="el.addr"
                >
                  <img class="img" :src="el.addr" />
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <!-- Add Arrows -->
              <div class="swiper-button-prev" ref="prevRef"></div>
              <div class="swiper-button-next" ref="nextRef"></div>
            </div>
          </div>
        </div>
        <div
          class="rbottom"
          :style="{ backgroundImage: 'url(' + $imghost + rBottomBg + ')' }"
        >
          <div class="tit">保温仓温度</div>
          <div id="chart01" ref="chart01Ref"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import countTo from "vue-count-to";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import "@/plugin/flexible.js";
import { qxz } from "static/js/qxz.js";
import echarts from "echarts";
import { bzyLine, qxzHisBar } from "./chart.js";
export default {
  data() {
    return {
      bodyBg: "/images/bigdata/fourSituations/bg.png",
      headerBg: "/images/bigdata/fourSituations/1.png",
      selectBg: require("@/assets/images/bigdata/fourSituations/2.png"),
      lTopBg: "/images/bigdata/fourSituations/pbg04.png",
      lMiddleBg: "/images/bigdata/fourSituations/pbg03.png",
      lBottomBg: "/images/bigdata/fourSituations/pbg02.png",
      rTopItemBg: require("@/assets/images/bigdata/fourSituations/7.png"),
      rMiddleBg: "/images/bigdata/fourSituations/pbg01.png",
      rBottomBg: "/images/bigdata/fourSituations/pbg02.png",
      numBg: require("@/assets/images/bigdata/fourSituations/nbg.png"),
      cbdStatusBg: require("@/assets/images/bigdata/fourSituations/3.png"),
      qxzBtnBg: require("@/assets/images/bigdata/fourSituations/5.png"),
      qxzBtnBgOn: require("@/assets/images/bigdata/fourSituations/4.png"),
      pestTotal: null,
      day_pest: null,
      week_pest: null,
      cbdState: [],
      cbdStatusFormat: [],
      cbdImgArr: [],
      bzyImgArr: [],
      bzyState: [],
      qxzData: [],
      qxzCheckNum: 0,
      myChart01: "",
      myChart02: "",
      bzy_list: [],
      bzy_d_id_list: [],
      cbd_list: [],
      jk_list: [],
      qxz_list: [],
      jk_id: "",
      qxz_id: "",
      cbd_id: "",
      bzy_id: "",
      bzy_d_id: "",
      bzy_status_list: [], //孢子仪在线状态集合
      bzy_status: "", //孢子仪在线状态
      // html: "",
      mySwiper: "",
    };
  },
  created() {},
  destroyed() {
    window.onresize = null;
  },
  created() {},
  mounted() {
    this.chartsInit();
    this.getList();
  },
  watch: {
    bzy_id: function (newVal) {
      var index = this.bzy_list.indexOf(newVal);
      this.bzy_d_id = this.bzy_d_id_list[index]; //获取选中设备的d_id
      this.bzy_status = this.bzy_status_list[index]; //获取孢子仪在线状态
      this.bzyLine(this.bzy_d_id); //孢子仪折线图
    },
  },
  methods: {
    getList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.device_display",
      }).then((res) => {
        let data = res.data.data;
        this.bzy_list = data.bzy_list;
        this.bzy_d_id_list = data.d_id;
        this.bzy_status_list = data.device_status;
        this.cbd_list = data.cbd_list;
        this.jk_list = data.jk_list;
        this.qxz_list = data.qxz_list;
        this.jk_id = this.jk_list[0];
        this.qxz_id = this.qxz_list[0];
        this.cbd_id = this.cbd_list[0];
        this.bzy_id = this.bzy_list[29];
        this.bzy_d_id = this.bzy_d_id_list[0];
        this.jk(this.jk_id);
        // this.bzyLine(this.bzy_d_id)
        this.bzyStatus(this.bzy_id);
        this.bzyPhoto(this.bzy_id);
        this.qxzBar();
        this.cbdStatus(this.cbd_id);
        this.cbdPest(this.cbd_id);
        this.cbdPhoto(this.cbd_id);
      });
    },
    swiperInit() {
      new Swiper(this.$refs.swiperContainerRef3, {
        pagination: ".swiper-pagination",
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        slidesPerView: 1,
        autoplay: true,
        speed: 2000,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true,
      });
      new Swiper(this.$refs.swiperContainerRef2, {
        pagination: ".swiper-pagination",
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        slidesPerView: 1,
        autoplay: true,
        speed: 2000,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true,
      });
    },
    chartsInit() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart01 = echarts.init(this.$refs.chart01Ref);
      // this.myChart01.setOption(option01)
      this.myChart02 = echarts.init(this.$refs.chart02Ref);
      window.addEventListener("resize", () => {
        this.myChart01.resize();
        this.myChart02.resize();
      });
    },
    configCamera(ctrl, movenum) {
      //插件
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.ctrl_camera",
        data: this.qs.stringify({
          device_id: this.jk_id,
          ctrl: ctrl,
          movenum: movenum,
        }),
      }).then((res) => {
        this.stopConfigCamera(); //关闭方向
      });
    },
    //关闭方向
    stopConfigCamera() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.ctrl_camera",
        data: this.qs.stringify({
          device_id: this.jk_id,
          ctrl: "stop",
        }),
      });
    },
    qxzBar() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=weather.weather.qxz_display",
        data: this.qs.stringify({
          device_id: this.qxz_id,
        }),
      }).then((res) => {
        let hisData = res.data.data.data2;
        //环境监测--历史数据
        let charArr = [];
        let category = [];
        for (let item of hisData) {
          for (let item2 in item.dat) {
            if (item.dat[item2]) {
              let arr = item.dat[item2].split("#");
              if (category.indexOf(item2) == -1) {
                category.push(item2);
                let obj = {
                  tex: qxz[arr[1]][1],
                  unit: qxz[arr[1]][2],
                  val: [arr[0]],
                  time: [this.formatTime(item.time * 1000, "yyyy-MM-dd hh:mm")],
                };
                charArr.push(obj);
              } else {
                charArr[category.indexOf(item2)].val.push(arr[0]);
                charArr[category.indexOf(item2)].time.push(
                  this.formatTime(item.time * 1000, "yyyy-MM-dd hh:mm")
                );
              }
            }
          }
        }
        this.qxzData = charArr;
        this.myChart02.setOption(qxzHisBar(this.qxzData[0]));
        this.$nextTick(() => {
          this.qxzSwiperInit();
        });
      });
    },
    qxzSwiperInit() {
      let _this = this;
      if (this.mySwiper) {
        this.mySwiper.destroy();
      }
      this.mySwiper = new Swiper(this.$refs.charBarRef, {
        direction: "vertical",
        slidesPerView: 6,
        autoplay: true,
        speed: 3000,
        // observer: true,
        loopAdditionalSlides: 1,
        onClick: function (swiper) {
          _this.qxzCheckNum = swiper.clickedIndex;
          _this.myChart02.setOption(
            qxzHisBar(_this.qxzData[swiper.clickedIndex])
          );
        },
        onSlideChangeStart: function (swiper) {
          // console.log(swiper)
          _this.qxzCheckNum = swiper.activeIndex;
          console.log(swiper.activeIndex);
          _this.myChart02.setOption(
            qxzHisBar(_this.qxzData[swiper.activeIndex])
          );
          console.log(swiper.activeIndex, _this.qxzData.length);
        },
        // onSlideChangeEnd: function (swiper) {
        // 	// alert(swiper.activeIndex)
        // 	while (_this.qxzCheckNum == 9) {
        // 		_this.mySwiper.stopAutoplay()
        // 		_this.qxzCheckNum++
        // 		console.log(_this.qxzCheckNum)
        // 		qxzHisBar(_this.qxzData[_this.qxzCheckNum+1])
        // 		// setTimeout(function () {
        // 		// 	qxzHisBar(_this.qxzData[_this.qxzCheckNum])
        // 		// }, 1000)
        // 	}
        // }
      });
      this.$refs.charBarRef.onmouseover = function () {
        _this.mySwiper.stopAutoplay();
      };
      this.$refs.charBarRef.onmouseout = function () {
        _this.mySwiper.startAutoplay();
      };
      this.$refs.chart02Ref.onmouseover = function () {
        _this.mySwiper.stopAutoplay();
      };
      this.$refs.chart02Ref.onmouseout = function () {
        _this.mySwiper.startAutoplay();
      };
    },
    bzyLine(d_id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.device_polyline_data",
        data: this.qs.stringify({
          device_type_id: 7,
          d_id,
        }),
      }).then((res) => {
        let data = res.data.data;
        let obj = {
          time: [],
          set_temp: [],
          pre_temp: [],
        };
        data.forEach((item) => {
          obj.time.push(this.formatTime(item.addtime));
          obj.set_temp.push(item.set_temp);
          obj.pre_temp.push(item.others);
        });
        this.myChart01.setOption(bzyLine(obj));
      });
    },
    bzyPhoto(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.forecast_system.equip_photo",
        data: this.qs.stringify({
          device_id: id,
          ret: "screen",
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.bzyImgArr = res.data.data.data;
        }
      });
    },
    bzyStatus(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.device_history_data",
        data: this.qs.stringify({
          device_type_id: 7,
          device_id: id,
        }),
      }).then((res) => {
        let data = res.data.data.data[0] && res.data.data.data[0].d_h_t;
        this.bzyState = [];
        if (data) {
          this.bzyState.push(
            { name: "在线状态", state: this.bzy_status == 1 ? "在线" : "离线" },
            { name: "设备开关", state: data.on_off == 1 ? "开启" : "关闭" },
            { name: "雨控状态", state: data.rps == 1 ? "雨控" : "正常" },
            { name: "摄像头状态", state: data.usb_sta == 1 ? "异常" : "正常" },
            { name: "电压(V)", state: data.v_bat },
            { name: "保温仓温度(℃)", state: data.pre_temp }
          );
        } else {
          this.bzyState.push(
            { name: "在线状态", state: "--" },
            { name: "设备开关", state: "--" },
            { name: "雨控状态", state: "--" },
            { name: "摄像头状态", state: "--" },
            { name: "电压(V)", state: "--" },
            { name: "保温仓温度(℃)", state: "--" }
          );
        }
      });
    },
    jk(id) {
      this.$axios({
        url: "/api/api_gateway?method=camera.camera_manage.addr_camera",
        method: "POST",
        data: this.qs.stringify({ device_id: id }),
      }).then((res) => {
        if (res.data.message == "") {
          // let data = eval("(" + res.data.data + ")");
          // let rtmpHdSrc = data.rtmp;
          // console.log(rtmpHdSrc);
          // //插件
          // this.html =
          //   '<video id="myPlayer" autoplay  controls playsInline webkit-playsinline [autoplay] style="width:100%; height:100%;"><source src="' +
          //   rtmpHdSrc +
          //   '" type="application/x-mpegURL"></video>';
          // setTimeout(() => {
          //   let player = new EZUIKit.EZUIPlayer(myPlayer);
          //   player.play();
          // }, 1000);
           let data = eval("(" + res.data.data + ")");
            let hlsHd = data.hlsHd;
            // this.jkSrc = hlsHd
            // console.log(this.jkSrc)
            let playHtml = `<video id="myPlayer"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHd}"  style="width:100%; height:100%;"></video>`;
            console.log(hlsHd);
            document.getElementById("videoCon").innerHTML = playHtml;
            setTimeout(() => {
              console.log(document.getElementById("myPlayer"));
              this.player = new EZUIPlayer("myPlayer");
              console.log(player);
              this.player.play();
              // let player = videojs('myPlayer')
              // player.src({ src: hlsHd, type: 'application/x-mpegURL' })
              // player.play()
            }, 1000);
        }
      });
    },
    cbdStatus(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.device_status_data",
        data: this.qs.stringify({
          device_id: id,
        }),
      }).then((res) => {
        let data = res.data.data;
        this.cbdState = [];
        this.cbdState.push(
          {
            name: "在线状态",
            state: data.device_status == 1 ? "在线" : "离线",
          },
          { name: "定时模式", state: data.ts == 1 ? "时控" : "光控" },
          { name: "雨控状态", state: data.rps == 1 ? "雨控" : "正常" },
          { name: "温控状态", state: data.tps == 1 ? "温控" : "正常" },
          { name: "加热状态", state: data.hs == 1 ? "加热" : "正常" },
          { name: "光控状态", state: data.lps == 1 ? "光控" : "正常" },
          { name: "信号强度", state: data.csq },
          { name: "上仓门状态", state: data.upds == 1 ? "打开" : "关闭" },
          { name: "下仓门状态", state: data.lps == 1 ? "打开" : "关闭" }
        );
      });
    },
    cbdPest(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.pest_num",
        data: this.qs.stringify({
          device_id: id,
        }),
      }).then((res) => {
        let data = res.data.data;
        this.pestTotal = String(data.all_pest);
        this.day_pest = data.day_pest;
        this.week_pest = data.week_pest;
      });
    },
    cbdPhoto(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.forecast_system.equip_photo",
        data: this.qs.stringify({
          device_id: id,
          ret: "screen",
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.cbdImgArr = res.data.data.data;
          this.$nextTick(() => {
            this.swiperInit();
          });
        }
      });
    },
    jkSelId() {
      this.jk(this.jk_id);
    },
    bzySelId() {
      this.bzyStatus(this.bzy_id);
      this.bzyPhoto(this.bzy_id);
    },
    qxzSelId() {
      this.qxzBar();
    },
    cbdSelTd() {
      this.cbdPest(this.cbd_id);
      this.cbdStatus(this.cbd_id);
      this.cbdPhoto(this.cbd_id);
    },
  },
  components: { countTo },
};
</script>

<style lang='less' scoped>
body {
  overflow: hidden;
}
.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .header {
    width: 100vw;
    height: 15vh;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    .btn-box {
      position: absolute;
      top: 10vh;
      display: flex;
      > div {
        position: relative;
        i {
          position: absolute;
          color: #fff;
          right: 20px;
          top: 10px;
        }
      }
      select::-ms-expand {
        display: none;
      }
      select {
        width: 185px;
        height: 34px;
        background-color: transparent;
        border: none;
        outline: none;
        color: #fff;
        padding: 0 20px;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background-repeat: no-repeat;
        position: relative;
        z-index: 99;
        option {
          background: #000;
          border: none;
          outline: none;
        }
      }
    }
    .btn-left {
      left: 2vw;
    }
    .btn-right {
      right: 2vw;
    }
  }
  .content {
    position: relative;
    height: 83vh;
    .tit {
      font-size: 0.2rem;
      font-weight: 700;
      letter-spacing: 0.05rem;
      color: #fff;
      line-height: 4.3vh;
      text-align: center;
    }
    > div {
      position: absolute;
    }
    .left {
      width: 20vw;
      left: 1vw;
      height: 100%;
      > div {
        background-size: 100% 100%;
        background-position: center top;
        background-repeat: no-repeat;
      }
      .lTop {
        width: 100%;
        height: 17vh;
        .con {
          display: flex;
          align-items: flex-end;
          padding: 0 0.38rem;
          > div {
            flex: 1;
          }
          > div > p {
            color: #fff;
            font-size: 0.18rem;
            line-height: 0.6rem;
          }
          .part01 {
            .total-num {
              color: #fff;
              font-size: 0.42rem;
              display: flex;
              span {
                display: inline-block;
                width: 0.38rem;
                height: 0.7rem;
                line-height: 0.7rem;
                text-align: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-right: 0.05rem;
              }
            }
          }
          .part02,
          .part03 {
            p {
              text-align: center;
            }
            .num {
              font-size: 0.4rem;
              text-align: center;
            }
          }
          .part02 .num {
            color: #dc0200;
          }
          .part03 .num {
            color: #0f73e2;
          }
        }
      }
      .lMiddle {
        width: 100%;
        height: 30vh;
        margin-top: 2vh;
        .con {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          color: #fff;
          .item {
            width: 33.3%;
            padding: 0.05rem 0.3rem;
            box-sizing: border-box;
            text-align: center;
            .hd {
              font-size: 0.18rem;
              padding-bottom: 0.05rem;
            }
            .status {
              height: 0.63rem;
              line-height: 0.5rem;
              background-size: 100% 100%;
              background-position: center top;
              background-repeat: no-repeat;
              font-size: 0.2rem;
              color: #39ffe4;
            }
          }
        }
      }
      .lBottom {
        width: 100%;
        height: 32vh;
        margin-top: 2vh;
        .container {
          height: calc(100% - 4.3vh);
        }
        .swiper-container {
          width: 100%;
          height: 100%;
          margin-left: auto;
          margin-right: auto;
        }
        .swiper-wrapper {
          width: 100%;
          height: 100%;
        }
        .swiper-slide img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .center {
      width: 56vw;
      left: 22vw;
      // background:pink;
      height: 100%;
      .cTop {
        width: 100%;
        height: 49vh;
        border: 1px solid #0e73e5;
        position: relative;
        box-sizing: border-box;
        padding: 0.1rem;
        .videobox {
          height: 45vh;
          #myPlayer {
            width: 100%;
          }
        }
        .jkctrlBox {
          height: 3.8vh;
          background: #2f3646;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          img {
            margin: 0 0.1rem;
          }
        }
      }
      .cBottom {
        width: 100%;
        height: 32vh;
        margin-top: 2vh;
        border: 1px solid #0e73e5;
        position: relative;
        .con {
          display: flex;
          .swiper-container {
            color: #fff;
            font-size: 0.16rem;
            width: 6.8vw;
            padding: 0 0.8vw;
            height: 27vh;
            .swiper-slide {
              .item {
                background-size: 100% 100%;
                background-position: center top;
                background-repeat: no-repeat;
                height: 2.7vh;
                line-height: 2.7vh;
                text-align: center;
                cursor: pointer;
              }
            }
            // li {
            // 	cursor: pointer;
            // 	text-align: center;
            // 	background-size: 100% 100%;
            // 	background-position: center top;
            // 	background-repeat: no-repeat;
            // 	height: 2.7vh;
            // 	line-height: 2.7vh;
            // 	margin-bottom: 0.7vh;
            // }
          }
          #chart02 {
            width: 100%;
            height: 27vh;
          }
        }
        &:before {
          content: "";
          width: 0.2rem;
          height: 0.2rem;
          position: absolute;
          left: -4px;
          top: -4px;
          border-top: 3px solid #0e73e5;
          border-left: 3px solid #0e73e5;
        }
        &:after {
          content: "";
          width: 0.2rem;
          height: 0.2rem;
          position: absolute;
          right: -4px;
          top: -4px;
          border-right: 3px solid #0e73e5;
          border-top: 3px solid #0e73e5;
        }
        .footer {
          &:before {
            content: "";
            width: 0.2rem;
            height: 0.2rem;
            position: absolute;
            left: -4px;
            bottom: -4px;
            border-bottom: 3px solid #0e73e5;
            border-left: 3px solid #0e73e5;
          }
          &:after {
            content: "";
            width: 0.2rem;
            height: 0.2rem;
            position: absolute;
            right: -4px;
            bottom: -4px;
            border-right: 3px solid #0e73e5;
            border-bottom: 3px solid #0e73e5;
          }
        }
      }
    }
    .right {
      width: 20vw;
      right: 1vw;
      height: 100%;
      > div {
        background-size: 100% 100%;
        background-position: center top;
        background-repeat: no-repeat;
      }
      .rTop {
        width: 100%;
        height: 23vh;
        border: 1px solid #0e73e5;
        position: relative;
        .con {
          display: flex;
          color: #fff;
          flex-wrap: wrap;
          justify-content: space-around;
          .item {
            width: 33.3%;
            padding: 0 1vw;
            box-sizing: border-box;
            padding-bottom: 2.1vh;
            .item-con {
              position: relative;
              background-size: 100% 100%;
              background-position: center top;
              background-repeat: no-repeat;
              height: 7vh;
              .state-val {
                font-size: 0.23rem;
                position: absolute;
                top: 3vh;
                left: 50%;
                transform: translateX(-50%);
              }
              .state-tit {
                font-size: 0.1rem;
                text-align: center;
                position: relative;
                top: 90%;
              }
            }
          }
        }
        &:before {
          content: "";
          width: 0.2rem;
          height: 0.2rem;
          position: absolute;
          left: -4px;
          top: -4px;
          border-top: 3px solid #0e73e5;
          border-left: 3px solid #0e73e5;
        }
        &:after {
          content: "";
          width: 0.2rem;
          height: 0.2rem;
          position: absolute;
          right: -4px;
          top: -4px;
          border-right: 3px solid #0e73e5;
          border-top: 3px solid #0e73e5;
        }
        .footer {
          &:before {
            content: "";
            width: 0.2rem;
            height: 0.2rem;
            position: absolute;
            left: -4px;
            bottom: -4px;
            border-bottom: 3px solid #0e73e5;
            border-left: 3px solid #0e73e5;
          }
          &:after {
            content: "";
            width: 0.2rem;
            height: 0.2rem;
            position: absolute;
            right: -4px;
            bottom: -4px;
            border-right: 3px solid #0e73e5;
            border-bottom: 3px solid #0e73e5;
          }
        }
      }
      .rMiddle {
        width: 100%;
        height: 24vh;
        margin-top: 2vh;
        .con {
          padding: 0 1vw;
          box-sizing: border-box;
          height: 20vh;
          .swiper-container {
            width: 100%;
            height: 100%;
          }
          .swiper-wrapper {
            width: 100%;
            height: 100%;
          }
          .swiper-slide {
            width: 100%;
            height: 100%;
            padding-bottom: 10px;
            box-sizing: border-box;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .rbottom {
        width: 100%;
        height: 32vh;
        margin-top: 2vh;
        #chart01 {
          width: 90%;
          margin: auto;
          height: 27.7vh;
        }
      }
    }
  }
}

select {
  cursor: pointer;
}
</style>